/* ============ 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;
}
/* 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:46px 0 30px}
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 980px){ .hero-grid{grid-template-columns:1fr} }

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

/* 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 */
.hero-card .brand-mark{
  display:flex; justify-content:center; align-items:center;
  padding:14px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  margin-bottom:14px;
}
.brand-logo{max-width: 260px; width:100%; height:auto}

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

.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;
  text-align: center;
}

.brand-family h3{
  margin-top: 48px;      /* adds separation from the button above */
  margin-bottom: 16px;
}
.network-centered{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 logos on row 2 */
  gap: 14px;
  align-items: stretch;
  justify-items: center; /* center items inside their grid cells */
}

/* Row 1: WonderWish spans the full row */
.network-centered a.brand-pill:first-child{
  grid-column: 1 / -1;          /* span all 3 columns */
  justify-self: center;         /* center the pill itself */
}
/* Tablet: 2 columns */
@media (max-width: 980px){
  .network-centered{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Charlotte logos wrap nicely */
  }

  /* WonderWish spans full row on tablet too */
  .network-centered a.brand-pill:first-child{
    grid-column: 1 / -1;
    justify-self: center;
  }
}
/* Mobile: 1 column */
@media (max-width: 600px){
  .network-centered{
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* The pill anchor becomes a clean image container */
.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;
}

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

/* Reduce ONLY WonderWish pill size (cap BOTH the <a> and the <img>) */
#networkLinks a.brand-pill:has(img[src*="pill-wonderwish"]){
  max-width: 440px !important;
  width: 100% !important;
  justify-self: center;
}

#networkLinks img.brand-pill-img[src*="pill-wonderwish"]{
  max-width: 440px !important;
  width: 100% !important;
  opacity: .92;
}

/* Mobile: slightly larger so it still reads well */
@media (max-width: 600px){
  #networkLinks a.brand-pill:has(img[src*="pill-wonderwish"]){
    max-width: 380px !important;
  }
  #networkLinks img.brand-pill-img[src*="pill-wonderwish"]{
    max-width: 380px !important;
  }
}

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

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