/* ============================================================================
   HINT IT — v2 design system : CHROME (page frame, top nav, footer)
   ----------------------------------------------------------------------------
   Styles for V2TopNav, V2Footer, and the V2Layout/V2AppLayout page frame.
   All scoped under `.hint-v2`, token-driven. The mobile menu is driven by a
   native <details> element — no JS. Breakpoint 800px matches the site convention.
   ============================================================================ */

/* ---------- Page frame (V2Layout / V2AppLayout) ---------- */
.hint-v2 .v2-page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--bg-screen);
}
.hint-v2 .v2-main {
  flex: 1 0 auto;
}

/* ---------- Top nav ---------- */
.hint-v2 .v2-nav-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--bg-brand);
}
.hint-v2 .v2-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 68px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.hint-v2 .v2-nav-logo {
  display: inline-flex;
  align-items: center;
}
.hint-v2 .v2-nav-logo img {
  height: 30px;
  width: auto;
}

.hint-v2 .v2-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-inline: auto;
}
.hint-v2 .v2-nav-links a {
  color: var(--text-on-brand);
  font-weight: var(--fw-medium);
  font-size: var(--text-body);
  opacity: 0.92;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.hint-v2 .v2-nav-links a:hover {
  opacity: 1;
}

.hint-v2 .v2-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.hint-v2 .v2-nav-signin {
  color: var(--text-on-brand);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body);
}

/* ---------- Dark-mode toggle (shared: top nav + admin top bar) ----------
   One button renders BOTH glyphs; the moon shows in light ("go dark"), the sun in dark
   ("go light"), swapped purely by the [data-theme] on the .hint-v2 root — no JS icon work.
   The flip + persistence is /js-v2/theme-toggle.js. Base color is neutral (--text-secondary,
   for the light admin bar); the top nav sits on the purple brand band, so it overrides to
   on-brand below. */
.hint-v2 .v2-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out);
}
.hint-v2 .v2-theme-toggle:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.hint-v2 .v2-theme-toggle .v2-icon {
  width: 18px;
  height: 18px;
}
.hint-v2 .v2-nav-actions .v2-theme-toggle {
  color: var(--text-on-brand);
}
/* Glyph swap — moon by default (light), sun when dark. */
.hint-v2 .v2-theme-icon-light { display: none; }
.hint-v2[data-theme="dark"] .v2-theme-icon-dark { display: none; }
.hint-v2[data-theme="dark"] .v2-theme-icon-light { display: block; }

/* Drawer toggle row — a <button> wearing .v2-drawer-link's row styling, so it needs the
   button UA reset that anchors/links don't (bg, border, width, inherited font). */
.hint-v2 .v2-drawer-theme {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}

/* ---------- Mobile menu : slide-in drawer (native <details>) ----------
   Matches the consumer app's drawer. The whole thing is driven by the native
   <details open> attribute — no JS needed for the open/slide/scrim. The burger,
   scrim, and ✕ are all <summary> elements, so a tap on any toggles it closed.
   /js-v2/nav-drawer.js adds Escape + close-on-link-tap as progressive enhancement. */

/* Hidden above the breakpoint; revealed (display:inline-flex) in the @media below. */
.hint-v2 .v2-nav-mobile {
  display: none;
}

/* Burger trigger — 3 rounded white bars, container 24x18, bars 24x3 (app parity). */
.hint-v2 .v2-nav-mobile-trigger {
  list-style: none;
  cursor: pointer;
  padding: var(--space-1);
  display: inline-flex;
  align-items: center;
}
.hint-v2 .v2-nav-mobile-trigger::-webkit-details-marker { display: none; }
.hint-v2 .v2-burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
}
.hint-v2 .v2-burger-bar {
  width: 24px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--text-on-brand);
}

/* Scrim — fixed dark backdrop, fades in with the drawer; a <summary>, so a tap closes. */
.hint-v2 .v2-drawer-scrim {
  list-style: none;
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: var(--scrim);
  border: 0;
  cursor: default;
  opacity: 0;
  transition: opacity var(--dur-drawer) var(--ease-drawer);
}
.hint-v2 .v2-drawer-scrim::-webkit-details-marker { display: none; }

/* Panel — full-height, slides in from the right (burger side). Plain white, no header
   bar (consumer-app parity), so it carries its own top padding for breathing room. */
.hint-v2 .v2-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(86vw, 320px);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-4);
  background: var(--bg-surface);
  box-shadow: var(--shadow-modal);
  transform: translateX(100%);
  transition: transform var(--dur-drawer) var(--ease-drawer);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Open state — driven purely by the native <details open>. */
.hint-v2 .v2-nav-mobile[open] .v2-drawer-scrim {
  display: block;
  opacity: 1;
}
.hint-v2 .v2-nav-mobile[open] .v2-drawer {
  transform: translateX(0);
}

/* Lock page scroll while open — tracks the native [open] via :has(). Targets <html>,
   so it's the one rule that lives outside .hint-v2 (page scroll-lock inherently must;
   the :has(.v2-nav-mobile) guard keeps it v2-only). */
html:has(.v2-nav-mobile[open]) { /* v2lint: allow */
  overflow: hidden;
}

/* Rows — icon + label, Inter 500 / 16px, rounded hover, active = brand purple (app
   parity). The icon inherits the row color via currentColor (inactive text-primary →
   active brand), matching the consumer drawer's active/inactive tint. */
.hint-v2 .v2-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}
.hint-v2 .v2-drawer-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-body);
  transition: background var(--dur-quick) var(--ease-out);
}
.hint-v2 .v2-drawer-link:hover {
  background: var(--bg-elevated);
}
.hint-v2 .v2-drawer-link[aria-current="page"] {
  color: var(--brand);
}
.hint-v2 .v2-drawer-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@media (max-width: 800px) {
  .hint-v2 .v2-nav-links,
  .hint-v2 .v2-nav-actions {
    display: none;
  }
  .hint-v2 .v2-nav-mobile {
    display: inline-flex;
  }
}

/* ---------- Footer ---------- */
.hint-v2 .v2-footer {
  background: var(--purple-900);
  color: var(--text-on-brand);
  margin-top: var(--space-10);
  padding-block: var(--space-9);
}
.hint-v2 .v2-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: space-between;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.hint-v2 .v2-footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 260px;
}
.hint-v2 .v2-footer-brand img {
  height: 28px;
  width: auto;
}
.hint-v2 .v2-footer-tagline {
  color: var(--text-on-brand-muted);
  font-size: var(--text-label);
  line-height: var(--leading-snug);
}
.hint-v2 .v2-footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.hint-v2 .v2-footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 130px;
}
.hint-v2 .v2-footer-col h3 {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-on-brand-muted);
  margin-bottom: var(--space-1);
}
.hint-v2 .v2-footer-col a {
  color: var(--text-on-brand);
  font-size: var(--text-body);
  opacity: 0.85;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.hint-v2 .v2-footer-col a:hover {
  opacity: 1;
}
.hint-v2 .v2-footer-legal {
  max-width: var(--container-max);
  margin: var(--space-8) auto 0;
  padding: var(--space-5) var(--space-5) 0;
  border-top: 1px solid var(--border-on-brand);
  color: var(--text-on-brand-muted);
  font-size: var(--text-label);
}