/*
  Deterministic header chrome (WS-3, QA #314).

  header.php is now built by App\Services\Layout\DeterministicHeaderCodeGenerator
  from HeaderLayoutHints — a single fixed DOM skeleton with data-trf-* flags
  on <header class="trf-site-header">. Every visual difference between
  hint combinations lives here, in a static file, never in per-generation
  markup or an inline <style> block (the exact QA #314 defect class this
  work closes).

  Left UNLAYERED on purpose, matching the "unlayered chrome contract" already
  established in theme.css: this file is enqueued after trafium-ai-theme
  (see functions.php), so on a tie it wins over theme.css by source order,
  and being unlayered it keeps outranking the Tailwind CDN utilities layer
  the same way theme.css's own trf-* rules do. Properties that theme.css
  already owns (position:sticky mechanics, z-index stacking, container
  gutters, CTA background/padding, mobile brand wrapping) are intentionally
  NOT repeated here.

  Breakpoint: 1024px is the boundary between the mobile <details> toggle and
  the desktop nav, matching the drawer stacking range already used in
  theme.css (max-width: 1023px) and the vertical_sidebar spec's own
  min-width: 1024px rail activation.
*/

:root {
  --trf-header-desktop-bp: 1024px;
}

/* ---------------------------------------------------------------------
   Brand block — shared by every concept.
   ------------------------------------------------------------------- */

.trf-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
  color: inherit;
}

.trf-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.trf-brand__name {
  font-weight: 700;
  font-size: var(--font-size-lg, 1.25rem);
}

.trf-brand__slogan {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted, currentColor);
  opacity: 0.8;
}

/* Logo height budget: the logo scales to the header, never the header to
   the logo (live QA #314 finding: an LLM header let a tall logo blow out
   the bar height). */
.trf-brand__logo {
  display: block;
  height: auto;
  max-height: clamp(28px, 5vw, 44px);
  max-width: 220px;
  width: auto;
  object-fit: contain;
}

/* Slogan hides when there is no room, even when show_slogan_in_header=yes
   baked a slogan into the markup — the hint decides per-generation intent,
   the viewport decides per-visit room. */
@media (max-width: 480px) {
  .trf-brand__slogan {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Single-band bar (inline_single_row, compact_strip,
   centered_masthead_compact, split_nav_center_logo, double_row_rubric_strip,
   vertical_sidebar — see SINGLE_BAND_CONCEPTS in the generator).
   ------------------------------------------------------------------- */

.trf-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-block: var(--spacing-sm);
  min-height: 56px;
}

header[data-trf-desktop-layout="compact_strip"] .trf-header__bar {
  padding-block: var(--spacing-xs);
  min-height: 44px;
}

/* ---------------------------------------------------------------------
   Two-band shell (stacked_editorial only).
   ------------------------------------------------------------------- */

.trf-header__brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-block: var(--spacing-sm);
}

.trf-header__nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-block: var(--spacing-xs);
  border-top: 1px solid var(--color-border, currentColor);
}

@media (max-width: 767px) {
  /* Both mobile_nav_row_policy values HeaderLayoutHints ever emits
     (collapse_into_brand_row, hide_when_empty) keep the toggle in the brand
     row and hide the desktop nav row entirely on mobile. */
  .trf-header__nav-row {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Rubric strip (double_row_rubric_strip only) — slim second row, no wrap.
   ------------------------------------------------------------------- */

.trf-header__rubric-strip {
  display: flex;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  border-top: 1px solid var(--color-border, currentColor);
  padding-block: var(--spacing-xs);
}

.trf-header__rubric-strip .trf-mnav__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------
   split_nav_center_logo — nav split left/right of a centered brand.
   ------------------------------------------------------------------- */

@media (min-width: 1024px) {
  header[data-trf-desktop-layout="split_nav_center_logo"] .trf-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  header[data-trf-desktop-layout="split_nav_center_logo"] .trf-header__nav-desktop--left {
    justify-self: start;
  }

  header[data-trf-desktop-layout="split_nav_center_logo"] .trf-brand {
    justify-self: center;
  }

  header[data-trf-desktop-layout="split_nav_center_logo"] .trf-header__nav-desktop--right {
    justify-self: end;
  }
}

/* ---------------------------------------------------------------------
   centered_masthead_compact — centered brand with nav directly under it,
   still inside a single compact band.
   ------------------------------------------------------------------- */

@media (min-width: 1024px) {
  header[data-trf-desktop-layout="centered_masthead_compact"] .trf-header__bar {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-xs);
  }

  header[data-trf-desktop-layout="centered_masthead_compact"] .trf-header__cta {
    margin-top: var(--spacing-xs);
  }
}

/* ---------------------------------------------------------------------
   Desktop nav list — visible from 1024px up; hidden below it (the mobile
   <details> panel is the only nav surface under the breakpoint).
   ------------------------------------------------------------------- */

.trf-header__nav-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .trf-header__nav-desktop {
    display: flex;
  }

  /* Child combinator: this must only ever match the top-level list, never
     a nested .trf-mnav__submenu — which already carries its own distinct
     class, so this selector cannot accidentally reach it either way. */
  .trf-header__nav-desktop > .trf-mnav__list {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .trf-header__nav-desktop .trf-mnav__item {
    position: relative;
  }

  .trf-header__nav-desktop .trf-mnav__item > a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
  }

  .trf-header__nav-desktop .trf-mnav__chevron {
    transition: transform var(--transition-normal, 150ms ease);
  }

  /* Dropdown submenu — hover AND :focus-within, pure CSS, no JS. Scoped to
     .trf-mnav__submenu specifically (never a bare `ul`), so it cannot ever
     collide with the top-level .trf-mnav__list selector above. */
  .trf-header__nav-desktop .trf-mnav__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1103;
    min-width: 220px;
    margin: 0;
    padding: var(--spacing-xs) 0;
    list-style: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border, currentColor);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
  }

  .trf-header__nav-desktop .trf-mnav__submenu li a {
    display: block;
    padding: var(--spacing-xs) var(--spacing-md);
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
  }

  .trf-header__nav-desktop .trf-mnav__item--has-children:hover > .trf-mnav__submenu,
  .trf-header__nav-desktop .trf-mnav__item--has-children:focus-within > .trf-mnav__submenu {
    display: block;
  }

  .trf-header__nav-desktop .trf-mnav__item--has-children:hover > a .trf-mnav__chevron,
  .trf-header__nav-desktop .trf-mnav__item--has-children:focus-within > a .trf-mnav__chevron {
    transform: rotate(180deg);
  }
}

/* CTA specificity: a blanket nav-link rule (added above with `>` scoping,
   but kept safe here too) must never restyle the accent button. */
.trf-header__nav-desktop a:not(.trf-header__cta) {
  padding: 0;
}

/* ---------------------------------------------------------------------
   Mobile toggle + drawer (<details>/<summary>, zero JS).
   The one visible surface below 1024px for every desktop concept.
   ------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .trf-header__toggle-wrap {
    display: none;
  }
}

.trf-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.trf-menu-toggle::-webkit-details-marker {
  display: none;
}

/* Mobile control glyphs (data-trf-mobile-control drives which markup the
   generator emits; these rules only draw the glyph the markup already
   picked — never a bare unicode caret). */
.trf-mnav__glyph {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  position: relative;
}

.trf-mnav__glyph--bars::before,
.trf-mnav__glyph--bars::after,
.trf-mnav__glyph--bars {
  background: currentColor;
}

.trf-mnav__glyph--bars {
  height: 2px;
  top: 0.35em;
}

.trf-mnav__glyph--bars::before,
.trf-mnav__glyph--bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}

.trf-mnav__glyph--bars::before {
  top: -0.4em;
}

.trf-mnav__glyph--bars::after {
  top: 0.4em;
}

.trf-mnav__glyph--equals::before,
.trf-mnav__glyph--equals::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: currentColor;
}

.trf-mnav__glyph--equals::before {
  top: 0.2em;
}

.trf-mnav__glyph--equals::after {
  top: 0.7em;
}

.trf-mnav__glyph--plus {
  font-weight: 700;
  text-align: center;
  line-height: 1.1em;
}

.trf-mnav__glyph--chevron {
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.trf-mnav[open] .trf-mnav__glyph--chevron {
  transform: rotate(-135deg) translateY(2px);
}

.trf-drawer .trf-mnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.trf-drawer .trf-mnav__item > a {
  display: block;
  padding: var(--spacing-xs) 0;
  text-decoration: none;
  color: inherit;
}

.trf-drawer .trf-mnav__subgroup > summary {
  cursor: pointer;
  list-style: none;
}

.trf-drawer .trf-mnav__subgroup > summary::-webkit-details-marker {
  display: none;
}

.trf-drawer .trf-mnav__subgroup .trf-mnav__submenu {
  list-style: none;
  margin: 0;
  padding-left: var(--spacing-md);
}

.trf-header__utility-strip {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border, currentColor);
  font-size: var(--font-size-sm);
}

.trf-header__utility-strip .trf-mnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

/* ---------------------------------------------------------------------
   mobile_pattern presentation. All patterns share the same <details>
   markup; only how .trf-drawer is positioned once opened changes. Active
   through 1023px, matching theme.css's own drawer stacking range.
   ------------------------------------------------------------------- */

@media (max-width: 1023px) {
  /* details (default): panel drops inline below the summary. */
  header[data-trf-mobile-pattern="details"] .trf-drawer {
    position: static;
  }

  /* overlay: full-screen fixed panel. */
  header[data-trf-mobile-pattern="overlay"] .trf-drawer {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    padding: var(--spacing-lg);
    background: var(--color-bg);
  }

  /* drawer_left: fixed panel sliding in from the left edge. */
  header[data-trf-mobile-pattern="drawer_left"] .trf-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 90vw);
    overflow-y: auto;
    padding: var(--spacing-lg);
    background: var(--color-bg);
    box-shadow: var(--shadow-md, 0 0 24px rgba(0, 0, 0, 0.2));
  }

  /* drawer_right: same panel, mirrored to the right edge. */
  header[data-trf-mobile-pattern="drawer_right"] .trf-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: min(320px, 90vw);
    overflow-y: auto;
    padding: var(--spacing-lg);
    background: var(--color-bg);
    box-shadow: var(--shadow-md, 0 0 24px rgba(0, 0, 0, 0.2));
  }

  /* bottom_sheet: fixed panel pinned to the bottom edge, rounded top. */
  header[data-trf-mobile-pattern="bottom_sheet"] .trf-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(85vh, calc(100dvh - 4rem));
    overflow-y: auto;
    padding: var(--spacing-lg);
    background: var(--color-bg);
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
    box-shadow: var(--shadow-md, 0 -4px 24px rgba(0, 0, 0, 0.2));
  }

  /* inline_strip: vertical link list stays in normal flow, no overlay. */
  header[data-trf-mobile-pattern="inline_strip"] .trf-drawer {
    position: static;
    box-shadow: none;
  }
}

/* ---------------------------------------------------------------------
   header_cta layout spacing (background/padding safety net already lives
   unlayered in theme.css via the attribute-selector rule).
   ------------------------------------------------------------------- */

.trf-header__cta {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: var(--radius-md, 6px);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   vertical_sidebar: benched by HeaderLayoutHints (never selected — see
   the comment above the rubric-strip branch in HeaderLayoutHints::desktopLayoutConcept).
   The generator renders it through the ordinary single-band .trf-header__bar
   rather than the fixed-rail markup the prompt spec describes for it, since
   there is currently no reachable path to exercise a dedicated rail layout.
   This rule keeps that branch visually sane (identical to inline_single_row)
   rather than shipping unstyled markup if the concept is ever unbenched.
   ------------------------------------------------------------------- */
header[data-trf-desktop-layout="vertical_sidebar"] .trf-header__bar {
  display: flex;
}