/* ==========================================================================
   Income Outsource — Site Header
   Desktop nav, sticky/condense-on-scroll, mobile hamburger + slide-in menu.
   All values pulled from variables.css — nothing hardcoded here.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-header);
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  /* This header's own height changes on scroll (.is-scrolled condenses
     it). Browsers' automatic scroll-anchoring can react to that
     self-inflicted layout shift by nudging window.scrollY, which — with
     only a single scroll threshold — was enough to flip .is-scrolled back
     off, then back on, repeatedly ("vibrating" right at the trigger
     point). global.js's hysteresis (separate enter/exit thresholds) is
     the main fix; this opts the header out of scroll anchoring entirely
     as a second line of defense against the same root cause. */
  overflow-anchor: none;
  transition:
    box-shadow var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: var(--header-height);
  transition: height var(--duration-base) var(--ease-standard);
}

.site-header.is-scrolled .site-header__inner {
  height: calc(var(--header-height) - 16px);
}

/* ---------------------------------------------------------------------
   Branding
   --------------------------------------------------------------------- */
.site-header__branding {
  flex: 0 0 auto;
  min-width: 0;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-primary);
}

.site-header__brand:hover {
  color: var(--color-primary);
}

.site-header__logo-img {
  display: block;
  max-height: calc(var(--header-height) - 36px);
  width: auto;
  transition: max-height var(--duration-base) var(--ease-standard);
}

.site-header.is-scrolled .site-header__logo-img {
  max-height: calc(var(--header-height) - 48px);
}

.site-header__site-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: var(--ls-heading);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Desktop nav
   --------------------------------------------------------------------- */
.site-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.site-nav__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list li {
  position: relative;
}

.site-nav__list a {
  position: relative;
  display: inline-block;
  padding: var(--space-2) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text);
}

.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  color: var(--color-primary);
}

.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after {
  transform: scaleX(1);
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
  color: var(--color-primary);
}

.site-nav__list .current-menu-item > a::after,
.site-nav__list .current_page_item > a::after {
  transform: scaleX(1);
  background: var(--color-primary);
}

/* Invisible hover-bridge: fills the gap between the link and the
   dropdown (positioned a few px below it, see .site-nav__list ul's `top`
   below) so the mouse never leaves the li's hoverable area crossing it —
   a gap alone would be a dead zone that closes the dropdown before the
   pointer arrives. Absolutely positioned (not padding) on purpose: real
   padding on the li changes its box height and throws off `align-items:
   center` against sibling nav items that don't have a dropdown — that's
   exactly what happened the first time around, misaligning "Categories"
   vertically against "Home"/"About"/etc. */
.site-nav__list li.menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--space-2);
}

/* Sub-menus (kept simple — dropdown on hover/focus) */
.site-nav__list ul {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    visibility var(--duration-fast);
  z-index: var(--z-dropdown);
}

.site-nav__list li:hover > ul,
.site-nav__list li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__list ul a {
  display: block;
  padding: var(--space-2) var(--space-4);
  text-transform: none;
  letter-spacing: var(--ls-body);
}

.site-nav__list ul a::after {
  display: none;
}

/* Dropdown links get their own hover treatment — a background highlight,
   not just the text-color-only change the top-level nav links use — since
   they're list rows in a menu card rather than an underlined nav label. */
.site-nav__list ul a:hover,
.site-nav__list ul a:focus-visible {
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
}

/* ---------------------------------------------------------------------
   Actions (dark mode toggle slot + mobile trigger)
   --------------------------------------------------------------------- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
}

.site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

/* Astra's parent stylesheet applies its own accent-color background to
   every button on :focus/:active (see CLAUDE.md's Astra theming notes) —
   override explicitly here rather than letting it show through, matching
   the theme-toggle's hover treatment for a consistent control style. */
.site-header__toggle:hover,
.site-header__toggle:focus-visible,
#mobile-menu-toggle:focus,
#mobile-menu-toggle:active {
  background: var(--color-surface-3);
  border-color: var(--color-border-strong);
}

.site-header__toggle:hover .hamburger span,
.site-header__toggle:focus-visible .hamburger span,
#mobile-menu-toggle:focus .hamburger span,
#mobile-menu-toggle:active .hamburger span {
  background: var(--color-accent);
}

/* ---------------------------------------------------------------------
   Header search toggle — same 40x40 icon-button convention as
   .theme-toggle below, reveals the .header-search panel (this file,
   further down) rather than navigating straight to search.php.
   --------------------------------------------------------------------- */
.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.search-toggle svg {
  width: 20px;
  height: 20px;
}

.search-toggle:hover,
.search-toggle:focus-visible,
#header-search-toggle:focus,
#header-search-toggle:active {
  color: var(--color-accent);
  background: var(--color-surface-3);
  border-color: var(--color-border-strong);
}

.search-toggle[aria-expanded="true"] {
  color: var(--color-accent);
  background: var(--color-surface-3);
  border-color: var(--color-border-strong);
}

/* ---------------------------------------------------------------------
   Header search panel — slides down from under the sticky header,
   full container width, closes on Escape/outside-click/link-click (see
   global.js). .site-header's own `position: sticky` already establishes
   the positioning context this anchors to.
   --------------------------------------------------------------------- */
.header-search {
  /* Absolutely positioned, so it never affects document flow/layout —
     no need to animate max-height (which transitions to an arbitrary
     fixed value and tends to look uneven/janky). Same slide+fade
     treatment as the nav dropdown (.site-nav__list ul above) for a
     consistent feel: opacity + transform, not a layout property. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    visibility var(--duration-base);
  z-index: var(--z-dropdown);
}

.header-search.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-search__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

.header-search__inner .search-form-custom {
  flex: 1 1 auto;
}

.header-search__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.header-search__close svg {
  width: 18px;
  height: 18px;
}

.header-search__close:hover,
.header-search__close:focus-visible,
#header-search-close:focus,
#header-search-close:active {
  color: var(--color-accent);
  background: var(--color-surface-3);
  border-color: var(--color-border-strong);
}

/* ---------------------------------------------------------------------
   Dark mode toggle — moon in light mode, sun in dark mode, crossfading
   with a rotate + scale on switch.
   --------------------------------------------------------------------- */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
#theme-toggle:focus,
#theme-toggle:active {
  color: var(--color-accent);
  background: var(--color-surface-3);
  border-color: var(--color-border-strong);
}

.theme-toggle__icon {
  position: absolute;
  width: 20px;
  height: 20px;
  transition:
    opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

:root[data-theme="dark"] .theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

:root[data-theme="dark"] .theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ---------------------------------------------------------------------
   Hamburger icon (bars -> X, pure CSS transform)
   --------------------------------------------------------------------- */
.hamburger {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}

.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition:
    transform var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard),
    top var(--duration-base) var(--ease-standard);
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 7px; }
.hamburger span:nth-child(3) { top: 14px; }

.site-header__toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
  opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------------
   Mobile menu panel
   --------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: var(--header-height) 0 0 auto;
  width: min(320px, 86vw);
  background: var(--color-surface-1);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6) var(--space-5);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--duration-slow) var(--ease-standard),
    visibility var(--duration-slow);
  z-index: var(--z-overlay);
}

.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu__list ul {
  list-style: none;
  margin: 0 0 0 var(--space-4);
  padding: 0;
}

.mobile-menu__list a {
  display: block;
  padding: var(--space-3) 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

body.has-mobile-menu-open {
  overflow: hidden;
}

/* Backdrop shown behind the mobile panel while open */
.mobile-menu-backdrop {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base);
  z-index: var(--z-overlay);
}

.mobile-menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* ---------------------------------------------------------------------
   Breakpoints
   --------------------------------------------------------------------- */
@media (max-width: 921px) {
  .site-nav {
    display: none;
  }

  .site-header__toggle {
    display: inline-flex;
  }
}

/* At the narrowest supported width (320px), logo + full site title + both
   action buttons don't fit — .site-header__inner overflowed and pushed the
   hamburger button off-screen entirely (unreachable, not just cramped).
   Visually hide the title text below 400px, same clip technique as
   .screen-reader-text in base.css (not display:none), so the link keeps
   its accessible name from the text content — the logo alone carries the
   brand mark at this size, same pattern many sites use on the smallest
   screens. */
@media (max-width: 400px) {
  .site-header__site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (min-width: 922px) {
  .mobile-menu,
  .mobile-menu-backdrop {
    display: none;
  }
}