/* ============ 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,body{height:100%}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{
  flex:1;
}
body{
  margin:0;
  font-family:var(--font);

  /* Editorial “newsprint” reading surface */
  background: #F7F7F5;
  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).
========================================================= */
main{
  color: #1F1F1F;
  padding-top: 70px; /* offsets fixed header height */
}
/* Muted text inside MAIN only (don’t affect footer/header) */
main .muted{
  color: #5E5E5E;
}

/* Section dividers inside MAIN only */
main .section-alt{
  background: rgba(0,0,0,.02);
  border-top: 1px solid #D8D8D4;
  border-bottom: 1px solid #D8D8D4;
}

/* 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{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(800px 500px at 90% 20%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg, #0b1020 0%, #0f1730 65%, #111a36 85%, #0f1730 100%);
}

/* IMPORTANT: Let the wrapper show through (no gradient restart) */
.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{
  --text:#eef2ff;
  --muted:#b8c0e0;
  --line: rgba(255,255,255,.12);
  color: var(--text);
}
.top-band .muted{ color: var(--muted) !important; }
.top-band h1,
.top-band h2{ 
  color: var(--text) !important; 
}

/* Allow division card titles to use dark ink */
.top-band .division-card h3{
  color: #1F1F1F !important;
}
/* Switch typography tokens back to “dark theme” INSIDE the band */
.hero,
.section.section-dark{
  --text:#eef2ff;
  --muted:#b8c0e0;
  --line: rgba(255,255,255,.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 img {
    height: 38px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .brand img {
    height: 32px;
	max-width:170px;
  }
}

/* Layout */
.container{max-width:var(--container); margin:0 auto; padding:0 var(--pad)}
.section{padding:52px 0}

.section-alt{background: rgba(255,255,255,.03); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-head{display:flex; gap:16px; align-items:flex-end; justify-content:space-between; margin-bottom:20px}
.section-head h2{margin:0; font-size:1.4rem}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}
.grid{display:grid; gap:16px}
.grid.cards{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width: 980px){ .grid.cards{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 620px){ .grid.cards{grid-template-columns:1fr} }

/* Header */
.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;

  /* Solid dark header so it never turns “gray” over the light body */
  background: #0b1020;
  border-bottom: 1px solid rgba(255,255,255,.12);

  /* Header uses dark-theme text tokens regardless of page body */
  --text:#eef2ff;
  --muted:#b8c0e0;
  --line: rgba(255,255,255,.12);
}
.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 (image-only) */
.brand img{
  width: auto;
  height: 42px;        /* desktop default */
  max-width: 200px;    /* prevents overly-wide logos */
  object-fit: contain;
  display: block;
}
.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 50px;  /* more top + bottom breathing room */
  background: transparent;
  color: var(--text);
}

  background: transparent; /* wrapper (.top-band) supplies the gradient */
  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: rgba(232,238,252,.72) !important;
}
.hero .hero-title{
  color: #eef2ff;
}

/* Centered hero (matches Photoshop mock) */
.hero-centered{
  padding: 40px 0 22px;
  text-align: center;
}
.hero-center{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Centered logo at top */
.hero-logo{
  width: min(820px, 92vw);
  height: auto;
  display:block;
  margin: 6px auto 10px;
}

/* Optional small caps line under logo */
.hero-tagline{
  margin: 0 0 14px;
  font-size: .92rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(232,238,252,.70);
}

/* Description line centered like mock */
.hero-centered .hero-sub{
  margin: 0 auto 18px;
  max-width: 70ch;
  font-size: 1.18rem;
  line-height: 1.6;
  color: rgba(232,238,252,.72) !important;
}

/* 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;
}
.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;          /* no pill padding */
  margin-right: 18px;             /* visual separation between words */
  border-radius: 0 !important;

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

  /* Editorial ink color for newsprint background */
  color: var(--muted) !important; /* #5E5E5E */
  font-size:.86rem !important;
  font-weight:500 !important;
  letter-spacing:.04em !important;

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

  /* HARD STOP: prevents any hover-driven style changes */
  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: var(--muted) !important;
  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;
}
/* No hover lift / no "button" behavior */
.hero .trust-row .pill:hover,
.hero .trust-row .pill:focus,
.hero .trust-row .pill:active{
  background: none !important;
  border: none !important;
  color: inherit !important;          /* keep same color on hover */
  text-decoration: none !important;   /* just in case */
  transform: none !important;
  box-shadow: none !important;
}
/* Cards */
.card{
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
}
/* ===============================
   Creative Divisions (WonderWish)
   - Legacy-safe fallback uses flex
   - Modern browsers upgrade to grid
================================ */

.divisions{
  padding: 10px 0 90px;  /* tighter top, deeper bottom for elegance */
  text-align: center;
}

/* The “A Local Media Group brand” line */
.imprint-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;

  margin: 28px 0 28px;   /* increased top & bottom spacing */

  color: rgba(232,238,252,.65);
  font-size: .95rem;
  letter-spacing: .02em;
}
.imprint-rule{
  height: 1px;
  width: min(220px, 26vw);
  background: rgba(255,255,255,.14);
}
.imprint-text{
  white-space: nowrap;
}

.divisions-title{
  margin: 0 0 34px 0;  /* increased bottom spacing */
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  color: #eef2ff;
}

/* Legacy fallback: FLEX cards (works on very old Safari that lacks CSS grid) */
.division-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  margin-top: 10px;
}

/* Upgrade to CSS grid when supported */
@supports (display: grid){
  .division-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:18px;
    justify-items:stretch;
  }
  @media (max-width: 980px){
    .division-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 600px){
    .division-grid{ grid-template-columns: 1fr; }
  }
}

/* Card look: premium light cards on dark band */
.division-card{
  width: 250px;            /* flex fallback width */
  max-width: 92vw;
  text-align:center;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.94),
    rgba(255,255,255,.84)
  );
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
  padding: 18px 18px 16px;
}

/* If grid is active, let cards stretch full column */
@supports (display: grid){
  .division-card{ width:auto; max-width:none; }
}

.division-icon-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 12px;
}
.division-icon{
  width: 52px;
  height: 52px;
  object-fit: contain;
  display:block;

  /* Modern depth treatment */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
  transition: transform .25s ease, filter .25s ease;
}

.division-card:hover .division-icon{
  transform: translateY(-3px) scale(1.04);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.division-name{
  margin: 0 0 8px 0;
  font-size: 1.25rem;
  color: #1F1F1F !important;   /* overrides .top-band h3 white */
  letter-spacing: .01em;
}
.division-text{
  margin: 0;
  color: #5E5E5E;
  line-height: 1.55;
}

.division-badge{
  display:inline-block;
  margin: 2px 0 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(31,31,31,.78);
  background: rgba(31,31,31,.08);
  border: 1px solid rgba(31,31,31,.12);
}
/* Contact page — add outside spacing below each contact box */
.page .card{
  margin-bottom: 10px;
}
.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}

/* Publishing Framework cards — add outside space below each card only */
.grid.cards .card{
  margin-bottom: 10px;
}
.card a{color:inherit; text-decoration:none}
.card:hover{border-color: rgba(124,92,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(124,92,255,.55));
  border-color: rgba(124,92,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;
}

/* Static WonderWish label (separate from clickable grid) */
.network-brand-static{
  margin: 36px 0 16px;  /* controls spacing above/below WonderWish title */
  text-align: center;
}

.network-brand-static .network-brand-name{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.08;
  color: #1F1F1F;
  letter-spacing: .005em;
}
.network-brand-static .network-brand-sub{
  margin-top: 8px;
  font-size: 18px;
  color: #5E5E5E;
}

/* Make ™ sit nicely */
.network-brand-static .tm{
  font-size: .55em;
  vertical-align: super;
  margin-left: 2px;
}

.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;
}

/* 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;
}
.network-centered{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 logos on row 2 */

  /* Split gap into row/column control */
  column-gap: 14px;
  row-gap: 6px;                 /* THIS tightens the vertical spacing */

  align-items: start;            /* prevents stretched rows from feeling tall */
  justify-items: center;
}

/* (Removed) WonderWish is no longer a clickable pill in the grid.
   Keeping :first-child rules would accidentally target Explore. */

/* Tablet: 2 columns */
@media (max-width: 980px){
  .network-centered{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Charlotte logos wrap nicely */
  }

  /* (Removed) WonderWish is no longer inside the clickable grid.
   Do NOT style :first-child or it will hit Explore. */
}
/* Mobile: 1 column */
@media (max-width: 600px){
  .network-centered{
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* The pill anchor becomes a clean image container (default = image pills) */
.network-centered a.brand-pill{ 
  display: flex;
  align-items: center;
  justify-content: center;

  /* 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;
}

/* (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{
  border-top: 1px solid rgba(255,255,255,.12);

  /* Solid dark footer so it matches the header */
  background: #0b1020;
  padding: 34px 0 30px;

  /* Footer uses dark-theme text tokens regardless of page body */
  --text:#eef2ff;
  --muted:#b8c0e0;
  --line: rgba(255,255,255,.12);
}
.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 */
.page{
  padding: 60px 0 60px; /* pushes page titles below fixed header */
}
.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;
}
/* ================================
   Sticky footer fix (older devices)
   Keeps footer at bottom when content is short
================================== */
html, body{
  height: 100%;
}

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main{
  flex: 1 0 auto;
}

footer{
  flex-shrink: 0;
}