/* ============ Design System ============ */
:root{
  /* ===== Body / Reading Surface (Newsprint) ===== */
  --bg: #F7F7F5;          /* newsprint white */
  --bg2:#F7F7F5;          /* keep same to avoid “banding” */
  --card:#FFFFFF;         /* cards on paper */
  --text:#1F1F1F;         /* editorial charcoal */
  --muted:#5E5E5E;        /* warm graphite gray */
  --line:#D8D8D4;         /* soft rule gray */

  --brand: #7c5cff;       /* overridden by config */
  --brand2:#22c55e;       /* optional accent */
  --shadow: 0 12px 30px rgba(0,0,0,.10);

  --radius: 18px;
  --radius2: 14px;

  --container: 1120px;
  --pad: 18px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html{
  overflow-y: scroll;
}
body{
  margin: 0;
  font-family: var(--font);

  /* Editorial “newsprint” reading surface */
  background: #F7F7F5;
  color: #1F1F1F;

  /* Sticky footer layout */
  min-height: 100vh;
  min-height: 100svh;                 /* modern Safari */
  min-height: -webkit-fill-available; /* older iOS Safari */

  display: flex;
  flex-direction: column;
}
main{
  flex: 1;

  /* IMPORTANT: do not offset fixed header here (homepage uses .top-band) */
  padding-top: 0px;

  /* Make the “fill space” match the bottom section vibe */
  background: linear-gradient(
    180deg,
    #E7F4FF 0%,
    #FFFFFF 100%
  );

  color: #1F1F1F;
}
/* =========================================================
   Editorial body styling (scoped to MAIN content only)
   Header + Footer remain dark because they use their own
   explicit dark backgrounds + var(--text)/var(--muted).
========================================================= */
/* Muted text inside MAIN only (don’t affect footer/header) */
main .muted{
  color: #5E5E5E;
}

/* Section dividers inside MAIN only */
main .section-alt{
  background: linear-gradient(
    180deg,
    #E7F4FF 0%,  /* soft sky blue (matches top-band END) */
    #FFFFFF 100% /* sunshine yellow (matches top-band START) */
  );
  /* border-top: 1px solid #EFE6D8; */
  /* border-bottom: 1px solid #EFE6D8; */
}
/* Cards inside MAIN only (lighter, editorial) */
main .card{
  background: rgba(255,255,255,.75);
  border: 1px solid #D8D8D4;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Card text inside MAIN */
main .cards .card p{
  color: #5E5E5E;
}

/* Links inside MAIN (editorial ink blue-gray) */
main a{
  color: #2F3A40;
}
main a:hover{
  color: #1F1F1F;
}

/* =========================================================
   SECTION 1 (Hero + Publishing Framework) — DARK GRADIENT BAND
   Applies ONLY to:
   - .hero
   - .section.section-dark
   Everything after stays newsprint (including #network)
========================================================= */

/* Shared gradient background (matches your “perfect dark gradient”) */
/* =========================================================
   SECTION 1 WRAPPER — ONE CONTINUOUS DARK GRADIENT
   (Hero + Publishing Framework live inside .top-band)
========================================================= */
.top-band{
  position: relative;
  overflow: hidden;
  
  /* clears the fixed header on homepage while keeping the hero background continuous */
  padding-top: 70px; 
 
  /* Base gradient (your current look) */
  background: linear-gradient(
    180deg,
    #FFF6C2 0%,   /* sunshine yellow */
	#FFF3A6 25%,   /* sunshine yellow */
    #E7F4FF 100%  /* soft sky blue (compliments sunshine) */
  );
}
/* White corner spotlights (TOP LEFT + TOP RIGHT) */
.top-band::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  /* Make them BIG + visible on yellow */
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(900px 520px at 100% 0%, rgba(255,255,255,.55), transparent 62%);
}

/* Ensure everything inside top-band stays ABOVE the spotlights */
.top-band > *{
  position: relative;
  z-index: 1;
}

.top-band .hero,
.top-band .section.section-dark{
  background: transparent !important;
}

/* Kill any seam-causing borders/shadows between the two sections */
.top-band .section.section-dark{
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}

/* Keep dark theme tokens inside the band */
/* top-band is now pastel; no dark token override needed */
/* Switch typography tokens back to “dark theme” INSIDE the band */
/* Top band is pastel (light). Do NOT force dark-band tokens here. */
.hero,
.section.section-dark{
  --text:#1F1F1F;
  --muted:#5E5E5E;
  --line: rgba(31,31,31,.12);
  color: var(--text);
}
/* Make sure headings + muted text render correctly in the band */
.hero .muted,
.section.section-dark .muted{
  color: var(--muted) !important;
}
.section.section-dark h2,
.section.section-dark h3,
.hero h1,
.hero h2,
.hero h3{
  color: var(--text) !important;
}

/* Cards inside Publishing Framework go back to “dark glass” */
.section.section-dark .card{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
}
.section.section-dark .cards .card p{
  color: var(--muted) !important;
}

/* Links inside the band should be readable (don’t use newsprint ink colors) */
.hero a,
.section.section-dark a{
  color: var(--text);
}
.hero a:hover,
.section.section-dark a:hover{
  color: var(--text);
}

/* Optional: a clean divider line between Section 1 and newsprint */
.section.section-dark{
  border-bottom: 0;
}
/* Accessibility */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto;
  padding:10px 12px; border-radius:10px;
  background:#fff; color:#000; z-index:9999;
}

/* ===============================
   HEADER BRAND — IMAGE ONLY
================================ */

.brand-image-only {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Responsive logo sizing */
.brand-logo-img {
  display: block;
  height: 42px;        /* desktop default */
  width: auto;
  max-width: 220px;    /* prevents oversized wide logos */
  object-fit: contain;
}

/* Tablet */
@media (max-width: 1024px) {
  .brand-logo-img{
    height: 38px;
    max-width: 220px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .brand-logo-img{
    height: 32px;
    max-width: 170px;
  }
}
/* Layout */
.container{max-width:var(--container); margin:0 auto; padding:0 var(--pad)}
.section{padding:52px 0}
/* Reduce space above brand family section */
#network.section{
  padding-top: 6px;   /* removes remaining gap */
}

/* section-alt styling is intentionally scoped to main .section-alt above */
.muted{color:var(--muted)}
.tiny{font-size:.85rem}
/* (Removed unused framework grid helpers for Explore site) */
/* Header */
.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;

  /* Light header for Charlotte brands */
  background: #FFFFFF;
  border-bottom: 1px solid #E6E6E6;

  /* Light header tokens */
  --text:#1F1F1F;
  --muted:#5E5E5E;
  --line:#D8D8D4;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:0;                 /* no gap needed (image-only) */
  text-decoration:none;
  color:var(--text);
}
/* Header brand logo is controlled by .brand-logo-img (see above) */
.brand .name{font-weight:700; letter-spacing:.2px}
.brand .tag{font-size:.86rem; color:var(--muted); margin-top:2px}
.nav-links{display:flex; align-items:center; gap:14px}
.nav-links a{
  color:var(--muted);
  text-decoration:none;
  padding:10px 10px;
  border-radius:12px;
}
.nav-links a:hover{color:var(--text); background: rgba(255,255,255,.05)}
.nav-actions{display:flex; gap:10px; align-items:center}
.burger{display:none}

@media (max-width: 860px){
  .nav-links{display:none}
  .burger{display:inline-flex}
}

/* Mobile drawer */
.drawer{
  display:none;
  border-top:1px solid var(--line);
  padding:8px 0 14px;
}
.drawer a{
  display:block;
  padding:12px 10px;
  border-radius:12px;
  color:var(--muted);
  text-decoration:none;
}
.drawer a:hover{color:var(--text); background: rgba(255,255,255,.05)}
.drawer.open{display:block}

/* Hero */
.hero{
  padding: 70px 0 30px;  /* reduced bottom space */
  background: transparent;
  color: var(--text);
}
/* Force hero text to behave like the dark theme (scoped ONLY to hero) */
.hero .kicker,
.hero .hero-sub,
.hero .tiny.muted{
  color: #5E5E5E !important;
}
.hero .hero-title{
  color: #1F1F1F;
}
/* Centered hero (matches Photoshop mock) */
.hero-centered{
  padding: 52px 0 28px;
  text-align: center;

  /* Hero decorative layer support */
  position: relative;
  overflow: visible;  /* prevents logo clipping on older Safari */
}
.hero-center{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Centered logo at top */
.hero-logo{
  width: min(820px, 92vw);
  max-width: 820px;
  height: auto;
  display: block;
  margin: 6px auto 18px;
  object-fit: contain;
}
/* Hero tagline (must stay uppercase + bold like .section h3) */
.hero-tagline{
  margin: 0 0 0px;
  font-size: .95rem;
  letter-spacing: .12em;     /* tight enough to feel bold */
  text-transform: uppercase; /* KEEP CAPS */
  font-weight: 600;          /* matches section h3 weight */
  color: rgba(31,31,31,.75);
}

/* Description line centered like mock — wider on desktop, collapses on mobile */
.hero-centered .hero-sub{
  margin: 0 auto 22px;
  width: min(980px, 92vw);   /* this is what makes it “stretch” on desktop */
  max-width: none;           /* remove the 820px cap */
  padding: 0;                /* let width control it */
  font-size: 1.18rem;
  line-height: 1.65;
  color: rgba(31,31,31,.72) !important;
}
/* Hero learning icon (under description) */
.learning-icon{
  display:block;
  width: 92px;            /* nice “badge” size */
  height: auto;
  margin: 38px auto 34px;  /* more space below books */
  opacity: .98;
}

/* YouTube icon under learning icon */
.yt-link{
  display:block;
  text-align:center;
  margin-top: 0px;     /* small clean space under books */
  margin-bottom: 2px;  /* MUCH tighter to next section */
}

.yt-icon{
  width: 110px;   /* larger, more visible */
  height:auto;
  transition: transform .18s ease;
}

.yt-link:hover .yt-icon{
  transform: scale(1.08);
}


/* Trust row centered */
.hero-centered .trust-row{
  justify-content:center !important;
}

.kicker{
  color:var(--muted);
  margin:0 0 10px 0;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.8rem;
}
.hero-title{
  margin:0;
  font-size: clamp(1.9rem, 2.5vw, 3rem);
  line-height:1.08;
}
/* Fallback hero-sub style (centered hero overrides this via .hero-centered .hero-sub) */
.hero .hero-sub{
  margin: 14px 0 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 62ch;
}
.hero-cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
/* ===============================
   Trust pills (Option 2 — professional badges)
================================ */
.hero .trust-row{
  display:flex !important;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
  justify-content:flex-start;  /* align with hero text */
  align-items:center;
}

.hero .trust-row .pill{
  display:inline-block !important;

  padding: 0 !important;
  margin-right: 18px;
  border-radius: 0 !important;

  background: none !important;
  border: none !important;

  /* Light hero ink */
  color: #5E5E5E !important;
  font-size:.86rem !important;
  font-weight:500 !important;
  letter-spacing:.04em !important;

  cursor: default !important;
  user-select:none !important;

  pointer-events: none !important;
  transition: none !important;
  filter: none !important;
  opacity: 1 !important;
}
/* LOCK: no hover color change */
.hero .trust-row .pill:hover,
.hero .trust-row .pill:focus,
.hero .trust-row .pill:active{
  color: #5E5E5E !important;   /* stay readable on pastel */
  background: none !important;
  border: none !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Remove extra space after the last word */
.hero .trust-row .pill:last-child{
  margin-right: 0;
}

/* (Removed duplicate hover lock block) */

/* Cards */
.card{
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
}
/* ===============================
   Hero Add-ons (clean marketing)
   Optional PNG “splash” decorations can be added later
================================ */

/* Optional decorative layer container (future PNGs) */
/* A soft glow behind the logo (subtle, premium) */
.hero-centered::before{
  content:"";
  position:absolute;
  inset:-40px;
  pointer-events:none;

  background:
    radial-gradient(520px 260px at 50% 32%, rgba(255,255,255,.06), transparent 72%);
  filter: blur(0px);
}
/* Keep logo above the glow */
.hero-logo,
.hero-tagline,
.hero-centered .hero-sub,
.hero-centered .trust-row{
  position: relative;
  z-index: 1;
}

/* Contact page — add outside spacing below each contact box */
.page .card{
  margin-bottom: 10px;
}

/* =========================================
   Premium editorial width (Desktop only)
   Keeps interior pages timeless & refined
========================================= */

/* =========================================
   Premium editorial width (All devices)
   Centered panel across breakpoints
========================================= */

.page .card{
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

/* Desktop reading width refinement */
@media (min-width: 1200px){
  .page .card{
    max-width: 760px;
  }
}
.card-title{margin:0 0 10px 0; font-size:1.05rem}
.cards .card h3{margin:6px 0 8px 0}
.cards .card p{margin:0; color:var(--muted); line-height:1.55}

/* Card spacing helper (kept generic) */
.cards .card{
  margin-bottom: 10px;
}
.card a{color:inherit; text-decoration:none}
.card:hover{border-color: rgba(72,187,255,.45)}

/* Hero right */
/* (Legacy) old right-side logo card styles kept harmless.
   The centered hero does not use .hero-card at all. */
.hero-card .brand-mark{ display:none; }
.brand-logo{ display:none; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  border-radius: 14px;
  padding: 11px 14px;
  border:1px solid var(--line);
  text-decoration:none;
  font-weight:650;
}
.btn-primary{
  background: linear-gradient(135deg, var(--brand), rgba(72,187,255,.55));
  border-color: rgba(72,187,255,.65);
  color:#0b1020;
}
.btn-secondary{
  background: transparent;
  border-color: #D8D8D4;   /* Soft Rule Gray */
  color: #2F3A40;          /* Ink Blue-Gray */
}

/* Hero-only button overrides so they work on dark */
.hero .btn-secondary{
  border-color: rgba(255,255,255,.25);
  color: rgba(232,238,252,.90);
}
.hero .btn-secondary:hover,
.hero .btn-secondary:focus{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.35);
  color: #eef2ff;
}

.hero .btn-primary{
  color: #0b1020; /* keep the primary CTA readable */
}
.btn-secondary:hover,
.btn-secondary:focus{
  background: rgba(47,58,64,.06); /* very subtle ink wash */
  border-color: #C7C7C3;
  color: #1F1F1F;                 /* Editorial Charcoal */
}
.btn-ghost{
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.btn:hover{transform: none}

/* Split + Panel */
.split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){ .split{grid-template-columns:1fr} }
.panel{
  background: rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
}

/* ===============================
   Brand Family (Centered Module)
   IMAGE-BASED PILLS (OFF/ON)
================================ */

.brand-family{
  margin-top: 28px;       /* was 28px */
  text-align: center;
}

.brand-family h3{
  margin-top: 12px;      /* was 28 px adds separation from the button above */
  margin-bottom: 6px;   /* was 16 px */
}

.brand-family p{
  margin: 0;
}

/* Static current-brand label (non-clickable) */
.network-brand-static{
  margin: 36px 0 26px;   /* more space under Learning Adventures */
  text-align: center;
}

.network-brand-name{
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.network-brand-sub{
  font-size: 1rem;
  color: var(--muted);
}

/* Center ONLY the brand-family subtitle */
.brand-family p.brand-family-sub{
  max-width: 54ch;  /* refined editorial width */
  margin: 8px auto 18px !important; /* adds space below */
  text-align: center !important;
}

/* 2-up centered pills (works for all 3 Charlotte sites) */
.network-centered{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;

  gap: 14px;              /* spacing between the two */
  margin-top: 6px;        /* slight breathing room */
}

/* Each pill container gets a consistent “column” width */
.network-centered a.brand-pill{
  flex: 0 1 520px;        /* max-ish width per pill */
  justify-content: center;
}

/* Tablet */
@media (max-width: 980px){
  .network-centered a.brand-pill{
    flex-basis: 460px;
  }
}

/* Mobile */
@media (max-width: 600px){
  .network-centered{
    gap: 10px;
  }
  .network-centered a.brand-pill{
    flex-basis: 92vw;     /* one per row on mobile */
  }
}

/* The pill anchor becomes a clean image container (default = image pills) */
.network-centered a.brand-pill{ 
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* feels like the yt-link */
  
  /* override ALL button visuals so the image controls everything */
  padding: 10px 12px;
  font-size: 0;
  line-height: 0;

  border: 0;
  background: transparent;
  box-shadow: none;
  
  text-decoration: none;
  color: inherit;
}

/* The baked pill image scales responsively */
.brand-pill-img{
  width: 100%;
  max-width: 580px;       /* default for Charlotte logos */
  height: auto;
  display: block;

  /* Match yt-icon behavior */
  transition: transform .18s ease;
  transform-origin: center center;
}

.network-centered a.brand-pill:hover .brand-pill-img{
  transform: scale(1.03);
}

/* Slight grow on hover (same idea as yt-icon) */
.network-centered a.brand-pill:hover .brand-pill-img{
  transform: scale(1.04);
}
/* (Removed) WonderWish is no longer inside the clickable grid.
   Do NOT style :first-child or it will hit Explore. */
   
/* Mobile: slightly bigger feeling (fills more of the pill area) */
/* (Removed) WonderWish is no longer inside the clickable grid. */

/* Footer */
.footer{
  margin-top: auto; /* makes footer sit at bottom when content is short */
  border-top: 1px solid #E6E6E6;

  /* Light footer for Charlotte brands */
  background: #FFFFFF;
  padding: 34px 0 30px;

  /* Light footer tokens */
  --text:#1F1F1F;
  --muted:#5E5E5E;
  --line:#D8D8D4;
}
.footer-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 14px;
}

.footer-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
}

.footer-logo{
  height: 48px;         /* desktop footer logo size */
  width: auto;
  max-width: 320px;
  object-fit: contain;
  display:block;
}

.footer-nav{
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  align-items:center;
  gap: 26px;
}

/* Fallback for older Safari that doesn't support flex gap */
@supports not (gap: 1rem) {
  .footer-center > * { margin-top: 14px; }
  .footer-center > *:first-child { margin-top: 0; }

  .footer-nav a { margin: 0 13px; } /* half of 26px gap */
}

.footer-nav a{
  color: var(--muted);
  text-decoration:none;
  font-weight: 600;
  letter-spacing: .01em;
}

.footer-nav a:hover{
  color: var(--text);
}

.footer-nav-legal a{
  font-weight: 700;     /* “bold” legal menu */
}

.footer-copy{
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.footer-copy .footer-copyright{
  color: var(--muted);
  font-size: .95rem;
}

.footer-copy .footer-tagline{
  color: var(--muted);
  font-size: .9rem;
}

/* Tablet */
@media (max-width: 1024px){
  .footer-logo{ height: 44px; max-width: 300px; }
  .footer-nav{ gap: 22px; }
}

/* Mobile */
@media (max-width: 600px){
  .footer-logo{ height: 40px; max-width: 260px; }
  .footer-nav{ gap: 18px; }
}

/* Simple page layout (Interior pages) */
.page{
  /* clears fixed header + page spacing */
  padding: 130px 0 60px;

  /* Match homepage cotton-candy sky vibe */
  position: relative;
  overflow: hidden;

  background: linear-gradient(
    180deg,
    #FFF6C2 0%,
	#FFF3A6 25%, 
    #E7F4FF 100%
  );
}

/* Same white corner spotlights used on the homepage top-band */
.page::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(900px 520px at 0% 0%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(900px 520px at 100% 0%, rgba(255,255,255,.55), transparent 62%);
}

/* Ensure page content sits above the spotlights */
.page > *{
  position: relative;
  z-index: 1;
}
.prose{
  max-width: 72ch;
  line-height: 1.7;
  color: var(--muted);
}
.prose h1,.prose h2,.prose h3{color:var(--text)}
.prose a{color: var(--text)}

/* Contact page lists */
.contact-list{
  margin: 8px 0 0;
  padding-left: 18px;
}
.contact-list li{
  margin: 6px 0;
}

/* ===============================
   Contact page inline icons
================================ */

.contact-inline-link{
  display:inline-flex;
  align-items:center;
  gap:12px;

  font-weight:600;
  text-decoration: underline;
  text-underline-offset: 3px;

  color: rgba(31,31,31,.82);
  transition: color .18s ease;
}

.contact-inline-link:hover{
  color: rgba(31,31,31,.95);
}

.contact-inline-icon{
  width: 34px;
  height: 34px;
  display:block;
}
/* ===== iOS Safari viewport stability (keeps footer behaving) ===== */
html{ height: -webkit-fill-available; }

/* (Removed stray legacy block — was missing its @media wrapper) */