/* ============================================================================
 * layout.css — site chrome: header, primary nav, mega-menu, mobile drawer,
 * footer, and page-section rhythm. Depends on tokens.css + base.css.
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * HEADER
 * ------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(251, 251, 253, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex; align-items: center; gap: var(--s6);
  height: var(--header-h);
  /* --container, not --container-wide: every one of the 104 content containers
     is 1280px, so 1400px chrome put the logo 60px left of the hero heading on
     any viewport >=1440px. One grid for chrome and content. */
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.brand-lockup { display: inline-flex; align-items: center; flex: none; }
/* The logo is the "home" link; at 26px tall it was well under the touch floor. */
@media (pointer: coarse) {
  .brand-lockup { min-height: 44px; }
}
.brand-lockup img { height: 26px; width: auto; }
.brand-lockup:hover { opacity: 0.9; }

/* ---- Primary nav (desktop) --------------------------------------------- */
.primary-nav { display: none; }
.primary-nav ul { display: flex; align-items: center; gap: var(--s2); }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 10px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.nav-link .caret {
  width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: 0.6;
  transition: transform var(--dur-fast) var(--ease);
}
.nav-link[aria-expanded="true"] .caret { transform: rotate(-135deg) translateY(-1px); }

/* ---- Current page ("you are here") ------------------------------------- */
/* Deliberately NOT the hover treatment: hover tints the background, current
   draws a rule under the label. If both used a tint they would be
   indistinguishable, and a hovered item would look like the current page. */
.primary-nav .nav-link { position: relative; }
.primary-nav .nav-link.is-current { color: var(--ink); }
.primary-nav .nav-link.is-current::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--primary);
}
/* Menu triggers carry a caret (8px + 6px gap), so pull the rule in to sit
   under the label alone rather than under the control. */
.primary-nav .has-menu .nav-link.is-current::after { right: 28px; }
/* The AI item is a Lumina route, so it carries the Lumina purple instead. */
.primary-nav li[data-gate="lumina"] .nav-link.is-current::after { background: var(--purple); }

/* Panel rows: a soft tint plus a deeper label. */
.menu-item.is-current { background: var(--surface-2); }
.menu-item.is-current b { color: var(--blue-deep); }
.menu-all.is-current { background: var(--surface-2); }

/* Drawer */
.acc-trigger.is-current { color: var(--blue-deep); }
.acc-panel-inner a.is-current { background: var(--blue-tint); color: var(--blue-deep); font-weight: 700; }
.drawer-link.is-current { color: var(--blue-deep); }
.drawer-link.is-current .lumina-word { filter: none; }
/* Header CTA for the page you are already on: quieted, not shouting. */
.header-actions .btn.is-current { border-color: var(--primary); color: var(--blue-deep); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.header-actions .link-signin { display: none; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); padding: 9px 6px; }
.header-actions .link-signin:hover { color: var(--ink); }

/* ---- Dropdown / mega-menu (desktop) ------------------------------------ */
.has-menu { position: relative; }
.menu-panel {
  position: absolute; left: 0; top: calc(100% + 10px);
  min-width: 260px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-frame);
  padding: var(--s3);
  /* Never let a menu run past the viewport on short / non-maximised windows. */
  max-height: calc(100dvh - var(--header-h) - var(--s6));
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  z-index: 95;
}
.has-menu.is-open .menu-panel { opacity: 1; visibility: visible; transform: none; }
/* Wide mega panels are centred rather than anchored to the left-sited nav item,
   so they never spill off the left edge. Desktop nav only shows >=1024px, where
   a 920px panel keeps comfortable side margins.
   NOTE: .site-header sets backdrop-filter, which makes it the containing block
   for fixed descendants — so this "fixed" panel resolves against the header,
   not the viewport. It lands correctly only because the header is full-width
   and pinned to top:0. Give the header a transform (a hide-on-scroll animation,
   say) and this panel silently detaches. Same reason .menu-panel's z-index:95
   is only comparable inside the header, never against the rest of the page. */
.menu-panel.mega { position: fixed; top: calc(var(--header-h) + 6px); left: 50%; transform: translateX(-50%) translateY(8px); width: min(920px, calc(100vw - 2 * var(--gutter))); }
.has-menu.is-open .menu-panel.mega { transform: translateX(-50%); }

.menu-head { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 10px 12px; }
.menu-head b { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; }
.menu-head small { font-size: var(--fs-xs); color: var(--ink-mute); font-weight: 600; }

.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.menu-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border-radius: 12px;
  transition: background var(--dur-fast) var(--ease);
}
.menu-item:hover { background: var(--surface-2); }
.menu-item .ti { width: 22px; height: 22px; flex: none; }
.menu-item b { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); display: block; line-height: 1.1; }
.menu-item small { font-size: var(--fs-xs); color: var(--ink-mute); font-weight: 500; }

.menu-simple { display: flex; flex-direction: column; gap: 2px; }
.menu-simple .menu-item small { max-width: 34ch; }

/* Wide two-column dropdown (Resources) */
.menu-panel.menu-wide { width: min(560px, calc(100vw - 2 * var(--gutter))); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.menu-col { display: flex; flex-direction: column; gap: 2px; }
.menu-col .menu-item small { max-width: 30ch; }
.menu-label { padding: 6px 11px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
@media (max-width: 560px) { .menu-cols { grid-template-columns: 1fr; } }

/* ---- Hamburger (mobile) ------------------------------------------------- */
.nav-toggle {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  border: 1px solid var(--line); background: #fff;
}
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle .bars { position: relative; width: 20px; height: 14px; }
.nav-toggle .bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 6px; }
.nav-toggle .bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Mobile drawer ------------------------------------------------------ */
.nav-overlay {
  position: fixed; inset: 0; z-index: 96;
  background: rgba(14, 21, 37, 0.42);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }

.mobile-drawer {
  position: fixed; top: 0; right: 0; z-index: 97;
  width: min(400px, 88vw); height: 100dvh;
  background: #fff; box-shadow: var(--shadow-frame);
  transform: translateX(100%);
  /* transform alone left all 33 links focusable and off-screen at every
     viewport (and focusable inside aria-hidden, a WCAG failure). visibility
     takes them out of the tab order and the a11y tree; transitioning it keeps
     the slide intact. Same idiom as .menu-panel and .nav-overlay above. */
  visibility: hidden;
  /* visibility is stepped, not eased: a plain "visibility var(--dur)" holds it
     hidden for the whole 300ms, which swallowed the focus call on open. Flip it
     instantly when opening (0s) and only after the slide when closing (delayed
     0s), so the drawer is focusable the moment it is on screen and stays
     visible while it slides away. */
  transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mobile-drawer.is-open {
  transform: none; visibility: visible;
  /* transform only — visibility must apply at style recalc, not via a
     transition whose start time varies by engine and reduced-motion setting. */
  transition: transform var(--dur) var(--ease);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s5) var(--s6); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; }
.drawer-head img { height: 24px; }
.drawer-close { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line); }
.drawer-close svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; }
.drawer-body { padding: var(--s5) var(--s6) var(--s8); }

.acc { border-bottom: 1px solid var(--line-soft); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 2px; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--ink);
}
.acc-trigger .caret { width: 9px; height: 9px; border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute); transform: rotate(45deg); transition: transform var(--dur) var(--ease); }
.acc-trigger[aria-expanded="true"] .caret { transform: rotate(-135deg); }
.acc-panel { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease), visibility var(--dur); }
/* max-height:0 hides a panel visually but keeps its ~25 links in the tab order,
   and the drawer focus trap's offsetParent filter cannot tell the difference.
   Drive visibility off the state nav.js already writes on the trigger. */
.acc-trigger[aria-expanded="false"] + .acc-panel { visibility: hidden; }
.acc-panel-inner { padding: 2px 2px 16px; display: flex; flex-direction: column; gap: 2px; }
.acc-panel-inner a { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); }
.acc-panel-inner a:hover { background: var(--surface-2); }
.acc-panel-inner a .ti { width: 20px; height: 20px; flex: none; }

.drawer-link { display: block; padding: 16px 2px; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.drawer-actions { margin-top: var(--s7); display: flex; flex-direction: column; gap: var(--s3); }

/* ---------------------------------------------------------------------------
 * FOOTER
 * ------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.72); padding-block: var(--s12) var(--s8); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s8);
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  min-width: 0;
}
.footer-lockup { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--s4); }
.footer-lockup img { height: 30px; width: auto; }
.footer-lockup span { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: #fff; }
.footer-brand img { height: 30px; width: auto; margin-bottom: var(--s4); }
.menu-all { display: block; margin-top: 6px; padding: 12px 11px; border-radius: 12px; font-size: var(--fs-sm); font-weight: 800; color: var(--blue-deep); }
.menu-all:hover { background: var(--surface-2); }
.footer-brand p { font-size: var(--fs-sm); color: rgba(255,255,255,0.6); max-width: 34ch; line-height: 1.6; }
.footer-brand .parent { margin-top: var(--s4); font-size: var(--fs-xs); color: rgba(255,255,255,0.5); }
.footer-col h4 { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: var(--s4); }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: var(--fs-sm); color: rgba(255,255,255,0.74); font-weight: 500; }
.footer-col a:hover { color: #fff; }
/* 24px tall with 10px between them is too tight to hit on a touch screen. */
@media (pointer: coarse) {
  .footer-col a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-col ul { gap: 2px; }
}
/* padding-inline + background-clip so the rule ends where the footer columns
   end; without it the gradient overhung the content it underlines by a gutter
   on each side. */
.footer-band { height: 4px; border-radius: 4px; background: var(--band); background-clip: content-box; max-width: var(--container); margin: var(--s10) auto var(--s6); margin-inline: auto; padding-inline: var(--gutter); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  font-size: var(--fs-xs); color: rgba(255,255,255,0.5);
}
.footer-bottom .contact { display: flex; gap: var(--s5); flex-wrap: wrap; }
.footer-bottom a { color: rgba(255,255,255,0.66); }

/* ---------------------------------------------------------------------------
 * RESPONSIVE — nav collapse at lg (1024px)
 * ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .nav-toggle { display: none; }
  .header-actions .link-signin { display: inline-flex; }
}
/* Below 640px the header cannot fit the logo (181px, flex:none) plus two nowrap
   CTAs plus the 44px toggle — it laid out 520px wide and, because html/body use
   overflow-x:clip, the toggle was silently clipped off-screen. Since the toggle
   is the ONLY nav affordance under 1024px, that left phones with no navigation.
   The drawer already carries both CTAs as full-width buttons, so drop them here
   and keep logo + toggle. */
@media (max-width: 639.98px) {
  .header-actions .btn-ghost,
  .header-actions .btn-primary { display: none; }
}
@media (max-width: 1023.98px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s7); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}