/* ==========================================================================
   GenioPrep shared UI layer — loaded after each page's own stylesheet, on
   every page with the site header (styles.css, shared-chrome.css and
   app-chrome.css stacks alike).

   Header: Product (mega-menu) · Pricing · About · Contact.
   The menu carries its own palette so it looks the same on every stack,
   whatever tokens the page itself defines.
   ========================================================================== */

.site-header {
  --nm-bg: #0E1530;
  --nm-bg-2: #141C3A;
  --nm-line: rgba(255, 255, 255, .12);
  --nm-text: #F6F8FF;
  --nm-dim: #8F9CC4;
  --nm-mid: #C4CDEA;
  --nm-gold: #FFD56A;
  --nm-tint: rgba(240, 165, 0, .10);
  --nm-tint-line: rgba(240, 165, 0, .28);
  --nm-hover: rgba(255, 255, 255, .05);
  --nm-shadow: 0 28px 70px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .3);
  --nm-ease: cubic-bezier(.22, 1, .36, 1);
}
[data-theme="light"] .site-header {
  --nm-bg: #FFFFFF;
  --nm-bg-2: #F4F6FC;
  --nm-line: rgba(16, 24, 56, .12);
  --nm-text: #0A1026;
  --nm-dim: #5A6485;
  --nm-mid: #34406A;
  --nm-gold: #8A5600;
  --nm-tint: rgba(240, 165, 0, .12);
  --nm-tint-line: rgba(185, 116, 0, .30);
  --nm-hover: rgba(16, 24, 56, .04);
  --nm-shadow: 0 28px 60px rgba(16, 24, 56, .16), 0 2px 10px rgba(16, 24, 56, .08);
}

/* ---------- Metric-matched fallback fonts ----------
   Arial resized to the Sora / Plus Jakarta Sans metrics, so the header does
   not move when the web fonts arrive. styles.css pages already had these;
   shared-chrome pages did not, and their nav shifted 5-11px on load. */
@font-face {
  font-family: "Sora Fallback"; src: local('Arial'), local('ArialMT');
  ascent-override: 83.6415%; descent-override: 25.0062%; line-gap-override: 0%; size-adjust: 115.9711%;
}
@font-face {
  font-family: "Plus Jakarta Sans Fallback"; src: local('Arial'), local('ArialMT');
  ascent-override: 98.8763%; descent-override: 21.147%; line-gap-override: 0%; size-adjust: 104.9796%;
}
.site-header :is(.nav-links, .nav-login, .gp-auth-slot) { font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", sans-serif; }
.site-header :is(.wordmark, .btn) { font-family: "Sora", "Sora Fallback", sans-serif; }

/* ---------- Product trigger ---------- */
.site-header .nav-dd { position: relative; display: flex; align-items: center; }
.site-header .nav-dd-btn {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: inherit;
  transition: color .18s ease;
}
.site-header .nav-dd-btn:hover,
.site-header .nav-dd.is-open .nav-dd-btn,
.site-header .nav-dd-btn.is-current { color: var(--nm-text); }
.site-header .nav-dd-caret { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--nm-ease); }
.site-header .nav-dd.is-open .nav-dd-caret { transform: rotate(180deg); }

/* ---------- Panel ---------- */
.site-header .nav-dd-panel {
  position: absolute; z-index: 120; top: calc(100% + 18px); left: -28px;
  width: min(700px, calc(100vw - 48px));
  background: var(--nm-bg); border: 1px solid var(--nm-line); border-radius: 20px;
  box-shadow: var(--nm-shadow); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.985); transform-origin: 40px 0;
  transition: opacity .18s var(--nm-ease), transform .26s var(--nm-ease), visibility 0s linear .26s;
  font-size: 1rem; font-weight: 400; color: var(--nm-text); text-align: left;
}
/* Hover bridge across the gap between the trigger and the panel. */
.site-header .nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.site-header .nav-dd.is-open .nav-dd-panel,
html:not(.gp-js) .site-header .nav-dd:hover .nav-dd-panel,
html:not(.gp-js) .site-header .nav-dd:focus-within .nav-dd-panel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s var(--nm-ease), transform .26s var(--nm-ease), visibility 0s;
}

.site-header .nav-dd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 18px; }
.site-header .nav-links .nav-dd-item {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 14px;
  color: var(--nm-text); white-space: normal; font-weight: 400;
  transition: background-color .18s ease;
}
.site-header .nav-links .nav-dd-item:hover,
.site-header .nav-links .nav-dd-item:focus-visible { background: var(--nm-hover); color: var(--nm-text); }
.site-header .nav-links .nav-dd-item[aria-current="page"] { background: var(--nm-hover); }
.site-header .nav-dd-ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--nm-tint); border: 1px solid var(--nm-tint-line);
  transition: transform .25s var(--nm-ease);
}
.site-header .nav-dd-item:hover .nav-dd-ico { transform: translateY(-2px); }
.site-header .nav-dd-ico svg { width: 22px; height: 22px; stroke: var(--nm-gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-header .nav-dd-txt { display: grid; gap: 4px; min-width: 0; }
.site-header .nav-dd-txt b { font-family: "Sora", "Sora Fallback", sans-serif; font-size: .98rem; font-weight: 600; color: var(--nm-text); letter-spacing: -.01em; }
.site-header .nav-dd-txt span { font-size: .85rem; line-height: 1.5; color: var(--nm-dim); font-weight: 400; }
/* Page stylesheets bold the aria-current nav link; inside the panel that is the whole item. */
.site-header .nav-links .nav-dd-item[aria-current="page"] { font-weight: 400; }

.site-header .nav-dd-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 32px; background: var(--nm-bg-2); border-top: 1px solid var(--nm-line);
}
.site-header .nav-dd-foot b { display: block; font-family: "Sora", "Sora Fallback", sans-serif; font-size: .95rem; font-weight: 600; color: var(--nm-text); margin-bottom: 2px; }
.site-header .nav-dd-foot span span { font-size: .85rem; color: var(--nm-dim); }
.site-header .nav-links .nav-dd-cta {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  font-family: "Sora", "Sora Fallback", sans-serif; font-size: .92rem; font-weight: 600; color: var(--nm-gold);
}
.site-header .nav-links .nav-dd-cta:hover { color: var(--nm-gold); }
.site-header .nav-dd-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--nm-ease); }
.site-header .nav-dd-cta:hover svg { transform: translate(2px, -2px); }

/* ---------- Mobile drawer: Product group ---------- */
.mobile-nav-panel .mnav-group { border-bottom: 1px solid var(--border, rgba(255, 255, 255, .08)); }
[data-theme="light"] .mobile-nav-panel .mnav-group { border-bottom-color: rgba(16, 24, 56, .10); }
.mobile-nav-panel .mnav-group > summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px;
  padding: 16px 0; cursor: pointer; list-style: none;
  font-size: 1.05rem; font-weight: 600; color: var(--text, #F6F8FF);
}
[data-theme="light"] .mobile-nav-panel .mnav-group > summary { color: var(--text, #0A1026); }
.mobile-nav-panel .mnav-group > summary::-webkit-details-marker { display: none; }
.mobile-nav-panel .mnav-group > summary svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.mobile-nav-panel .mnav-group[open] > summary svg { transform: rotate(180deg); }
.mobile-nav-panel .mnav-items { display: grid; gap: 2px; padding: 0 0 12px; }
.mobile-nav-panel .mnav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px; margin: 0 -8px; border-radius: 12px;
  color: var(--text, #F6F8FF);
}
[data-theme="light"] .mobile-nav-panel .mnav-item { color: var(--text, #0A1026); }
.mobile-nav-panel .mnav-item:hover, .mobile-nav-panel .mnav-item[aria-current="page"] { background: rgba(255, 255, 255, .05); }
[data-theme="light"] .mobile-nav-panel .mnav-item:hover, [data-theme="light"] .mobile-nav-panel .mnav-item[aria-current="page"] { background: rgba(16, 24, 56, .04); }
.mobile-nav-panel .mnav-item .nav-dd-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(240, 165, 0, .10); border: 1px solid rgba(240, 165, 0, .28); }
.mobile-nav-panel .mnav-item .nav-dd-ico svg { width: 18px; height: 18px; stroke: #FFD56A; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="light"] .mobile-nav-panel .mnav-item .nav-dd-ico svg { stroke: #8A5600; }
.mobile-nav-panel .mnav-item b { display: block; font-family: "Sora", "Sora Fallback", sans-serif; font-size: .95rem; font-weight: 600; }
.mobile-nav-panel .mnav-item small { display: block; font-size: .8rem; line-height: 1.4; color: var(--text-dim, #8F9CC4); font-weight: 400; }
[data-theme="light"] .mobile-nav-panel .mnav-item small { color: var(--text-dim, #5A6485); }

/* ---------- Signed-out Login / Sign up, shipped in the HTML ----------
   Same rules genioprep-auth.js injects at runtime. Pages used to ship only
   "Login"; the script then added the Sign up pill, the right side grew ~98px
   and the centred nav jumped ~49px half a second after load. */
.gp-auth-slot, .gp-auth-anonymous { display: inline-flex; align-items: center; gap: 12px; }
.gp-auth-link { display: inline-flex; align-items: center; min-height: 24px; font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--text-dim); transition: color .18s; }
.gp-auth-link:hover { color: var(--text); }
.gp-auth-signup { display: inline-flex; align-items: center; padding: 10px 18px; border: 1px solid var(--border-hi); border-radius: 999px; background: var(--tint-neutral); color: var(--text); font-size: .85rem; font-weight: 600; line-height: 1; transition: color .18s, border-color .18s, background-color .18s; }
.gp-auth-signup:hover { border-color: var(--text-dim); }

/* ---------- "Where do you want to start?" modal: four products, 2 x 2 ---------- */
.start-modal-option--indigo {
  --start-accent: #6366F1; --start-accent-text: #A5B4FC;
  --start-tint: rgba(99, 102, 241, .12); --start-tint-line: rgba(99, 102, 241, .34);
}
[data-theme="light"] .start-modal-option--indigo { --start-accent-text: #4F46E5; --start-tint: rgba(99, 102, 241, .10); }
@media (min-width: 861px) {
  .start-modal-options:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-modal-options:has(> :nth-child(4)) .start-modal-option { min-height: 0; }
}

/* ---------- Page transitions ----------
   The opt-in (@view-transition) is inline at the top of every page's <head>: here it could
   arrive after the first render on a slow connection, and the transition then aborts with
   an uncaught InvalidStateError. This file only sets the timing and keeps the header still. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
.site-header { view-transition-name: site-header; }

@media (prefers-reduced-motion: reduce) {
  .site-header .nav-dd-panel, .site-header .nav-dd-caret, .site-header .nav-dd-ico { transition: none; }
}