/* ==========================================================================
   CT Innovates — Layout (chrome + section system)
   ========================================================================== */

.container { width: min(100% - 2 * var(--container-pad), var(--container)); margin-inline: auto; }
.container--narrow { max-width: var(--container-narrow); }

/* Sections */
.section { position: relative; padding-block: var(--section-y); overflow: clip; }
/* for a section that continues its neighbour's argument rather than starting
   a new one -- currently only home's who-we-help into the capacity problem */
.section--tight { padding-block: calc(var(--section-y) * 0.65); }
/* opt out of clip so position:sticky children can engage (clip breaks sticky) */
.section--flow { overflow: visible; }
.section--soft { background: var(--color-bg-soft); }
.section--dark {
  background: var(--grad-dark);
  color: var(--color-on-dark);
}
/* consistent, even dot texture across every dark band (replaces ad-hoc rings) */
.section--dark > .container { position: relative; z-index: 1; }
.section--dark::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(157, 223, 255, 0.06) 1px, transparent 1.6px);
  background-size: 24px 24px;
}
/* opt out of the section-wide dot texture where a panel carries its own dots
   (avoids doubling the pattern) */
.section--no-texture::after { content: none; }
.section__head { max-width: var(--measure-body); margin-bottom: var(--space-12); }
.section__head .h-section { margin-top: var(--space-3); }
.section__head .lede { margin-top: var(--space-4); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .eyebrow { justify-content: center; }
/* Stacked, the journey rail below this head ranges left, so a centred head
   reads as belonging to a different section than its own content. They flip
   together, at the same 760px the rail uses. */
@media (max-width: 760px) {
  .section__head--center { margin-inline: 0; text-align: left; }
  .section__head--center .eyebrow { justify-content: flex-start; }
  /* .eyebrow--rule's second rule exists to balance a centred label. Ranged
     left it just trails off, so drop it and the eyebrow matches the single
     leading dash every other section uses. */
  .section__head--center .eyebrow--rule::after { display: none; }
}


/* ---------------- Header / nav (N: brand bar + pill CTA) ----------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: var(--nav-gap);
  background: transparent;
}
/* Logged-in only. WordPress pins #wpadminbar over the viewport, so a sticky
   header with top:0 slides underneath it the moment the page scrolls. These
   mirror WordPress's own breakpoints: 32px from 783px up, 46px below that, and
   at 600px and under the bar becomes position:absolute and scrolls away with
   the page, so the header goes back to 0. The mobile sheet is anchored to the
   header, so it follows all three without a rule of its own. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* the nav itself is the floating island — detached from every edge */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--nav-h);
  /* each end's inset ≈ its content's vertical gap, so the CTA pill nests
     concentrically in the bar's rounded end (equal ring all around) and the
     shorter logo gets a touch more room to match its own breathing space */
  padding-left: 1rem;
  padding-right: 0.7rem;
  background: color-mix(in srgb, var(--navy-950) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  /* a faint catch-light, not a hard outline */
  border: 1px solid rgba(157, 223, 255, 0.08);
  border-radius: var(--radius-pill);
  /* soft lift, kept tight to the pill's own footprint */
  box-shadow: 0 8px 22px -14px rgba(2, 8, 23, 0.55);
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo { height: 34px; width: auto; display: block; }
.site-footer .brand__logo { height: 40px; }
@media (max-width: 600px) { .brand__logo { height: 30px; } }

.nav__links { display: flex; align-items: center; gap: var(--space-2); }
.nav__links a {
  padding: 0.55rem 0.85rem;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-on-dark-soft);
  border-radius: var(--radius-pill);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.nav__links a:hover { color: var(--color-on-dark); background: rgba(255,255,255,0.06); }
.nav__links a[aria-current="page"] {
  color: var(--brand-blue-400);
  background: rgba(157, 223, 255, 0.09);
}

/* Primary action — an emphasized menu item, not a separate button: a bordered
   pill at link scale that fills with the brand blue on hover. It never
   translates (that would jump it out of the bar), and the border keeps it
   distinct from the borderless active-page tint. */
.nav__links a.nav__cta-link {
  margin-left: var(--space-2);
  padding-block: 0.48rem;
  padding-inline: 1.05rem;
  font-weight: var(--fw-semibold);
  color: var(--brand-blue-200);
  background: rgba(157, 223, 255, 0.06);
  border: 1px solid color-mix(in srgb, var(--brand-blue-400) 55%, transparent);
}
.nav__links a.nav__cta-link:hover,
.nav__links a.nav__cta-link:focus-visible,
.nav__links a.nav__cta-link[aria-current="page"] {
  color: var(--brand-white);
  background: var(--grad-primary);
  border-color: transparent;
}
.nav__toggle { display: none; }

/* Mobile nav — switch to the menu before the full nav gets cramped (it stops
   fitting around ~1000px, so the logo would otherwise shrink) */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__toggle {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    border: 1px solid var(--color-line-dark);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-on-dark);
    cursor: pointer;
    transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  }
  .nav__toggle:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(157, 223, 255, 0.3); }
  .nav__toggle svg { width: 22px; height: 22px; }
  /* Both glyphs ship in the markup; only the state changes. Nothing is
     added or removed from the DOM on click, so the clicked node stays live. */
  .nav__toggle-ico { display: grid; place-items: center; }
  .nav__toggle-ico--close { display: none; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-ico--open { display: none; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-ico--close { display: grid; }
  /* Anchored to the sticky header, not to the viewport. As `fixed` it ignored
     WordPress's `html { margin-top: 46px }` for the admin bar while the header
     -- being in normal flow -- was pushed down by it, so for any logged-in
     viewer the sheet sat 46px high and covered the nav pill. Positioning it
     against the header means it tracks the header wherever the header goes, and
     needs no .admin-bar special case at any breakpoint. */
  .mobile-menu {
    position: absolute;
    top: calc(var(--nav-gap) + var(--nav-h) + 0.5rem);
    left: var(--container-pad);
    right: var(--container-pad);
    background: color-mix(in srgb, var(--navy-950) 96%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--color-line-dark);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.7);
    padding: var(--space-3) var(--space-4) var(--space-5);
    display: grid;
    gap: var(--space-1);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
    z-index: 49;
    /* it fits today; this keeps it reachable if the nav ever grows */
    max-height: calc(100vh - var(--nav-gap) - var(--nav-h) - 2rem);
    overflow-y: auto;
  }
  .mobile-menu.is-open { opacity: 1; transform: none; visibility: visible; }
  .mobile-menu a {
    padding: var(--space-4) var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--fw-medium);
    color: var(--color-on-dark);
    border-radius: var(--radius-md);
    transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  /* same hover language as the desktop nav links: blue tint + colour, with the
     module-row's slide-right microinteraction */
  .mobile-menu a:hover,
  .mobile-menu a:focus-visible {
    color: var(--brand-blue-400);
    background: rgba(157, 223, 255, 0.08);
    transform: translateX(4px);
  }
  .mobile-menu a[aria-current="page"] {
    color: var(--brand-blue-400);
    background: rgba(157, 223, 255, 0.09);
  }
  /* primary action — a filled pill at the foot of the menu */
  .mobile-menu a.mobile-menu__cta {
    margin-top: var(--space-3);
    text-align: center;
    color: var(--brand-white);
    background: var(--grad-primary);
    font-weight: var(--fw-semibold);
  }
  .mobile-menu a.mobile-menu__cta:hover,
  .mobile-menu a.mobile-menu__cta:focus-visible,
  .mobile-menu a.mobile-menu__cta[aria-current="page"] {
    color: var(--brand-white);
    background: var(--grad-primary);
    transform: none;
    filter: brightness(1.06);
  }
}
@media (min-width: 1025px) { .mobile-menu { display: none; } }

/* ---------------- Footer ------------------------------------------------- */
.site-footer {
  background: var(--navy-950);
  color: var(--color-on-dark-soft);
  padding-block: var(--space-20) var(--space-10);
  position: relative;
  overflow: clip;
}
.footer__legal { display: inline-block; padding-block: var(--space-3); font-size: var(--text-xs); color: var(--color-on-dark-soft); }
.footer__legal:hover { color: var(--brand-blue-400); }

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;   /* 3 blocks; newsletter returns in Phase 2 */
  gap: var(--space-12) var(--space-8);
}
.footer__brand .brand { margin-bottom: var(--space-5); }
.footer__brand p { max-width: 34ch; font-size: var(--text-sm); }
.footer__col h2 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-on-dark);
  margin-bottom: var(--space-5);
}
.footer__col a { display: block; padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--color-on-dark-soft); transition: color var(--dur) var(--ease-out); }
.footer__col a:hover { color: var(--brand-blue-400); }

.newsletter label { display: block; font-size: var(--text-sm); margin-bottom: var(--space-3); color: var(--color-on-dark); }
.newsletter__row { display: flex; gap: var(--space-2); }
.newsletter input {
  flex: 1; min-width: 0;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-dark);
  background: rgba(255,255,255,0.05);
  color: var(--color-on-dark);
}
.newsletter input::placeholder { color: var(--color-on-dark-soft); }
.newsletter input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.newsletter button {
  flex: none;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-pill);
  background: var(--grad-primary);
  color: var(--brand-white);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out);
}
.newsletter button:hover { transform: translateY(-2px); }
.newsletter button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.newsletter small { display: block; margin-top: var(--space-3); color: var(--color-on-dark-soft); font-size: var(--text-xs); }

.footer__base {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-on-dark-soft);
}
.social { display: flex; gap: var(--space-2); }
.social a {
  display: grid; place-items: center;
  /* 44px is the touch-target floor; the glyph stays 18px */
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-dark);
  color: var(--color-on-dark-soft);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.social a:hover { color: var(--brand-blue-400); border-color: var(--brand-blue-400); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }

@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand, .newsletter { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* Skip link */
.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  z-index: 100;
  background: var(--brand-white); color: var(--color-ink);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill);
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }