/* ==========================================================================
   Site header component
   Fixed header shell with desktop navigation, logo, actions, and mobile
   toggle. Mobile layer rules live in mobile-nav.css.
   ========================================================================== */

/* === Tokens === */

:root {
  /* Stacking + slide */
  --nav-z-index: 20;
  --nav-hidden-offset: calc(-100% - var(--s-8));

  /* Layout spacing */
  --nav-item-gap: var(--s-24);
  --nav-brand-gap: calc(var(--nav-item-gap) * 1.5);
  --nav-actions-gap: var(--s-8);
  --nav-padding-y: var(--s-12);
  --nav-logo-size: var(--s-48);

  /* Colour, surface, shadow, blur */
  --nav-color-default: var(--wp--preset--color--off-white);
  --nav-color-scrolled: var(--wp--preset--color--warm-brown);
  --nav-surface-default: transparent;
  --nav-surface-scrolled: var(--surface-scrim);
  --nav-shadow-default: 0 0 0 transparent;
  --nav-shadow-scrolled: var(--shadow-soft);
  --nav-blur-default: blur(0);
  --nav-blur-scrolled: blur(var(--s-16));

  /* Dropdown */
  --nav-dropdown-min-width: 14rem;
  --nav-dropdown-gap: var(--s-8);
  --nav-dropdown-offset: var(--s-12);
  --nav-dropdown-padding: var(--s-16) var(--s-20);
  --nav-dropdown-surface: var(--wp--preset--color--warm-brown);
  --nav-dropdown-shadow: var(--shadow-medium);

  /* Transitions */
  --nav-transition-transform: 0.25s ease;
  --nav-transition-color: 0.2s ease;
  --nav-transition-surface: 0.2s ease;
  --nav-menu-transition: 0.25s ease;
}

/* === Header shell + state modifiers === */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: calc(var(--nav-z-index) + 1);
  color: var(--nav-color-default);
  transition:
    transform var(--nav-transition-transform),
    color var(--nav-transition-color);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--nav-surface-default);
  box-shadow: var(--nav-shadow-default);
  transition:
    background-color var(--nav-transition-surface),
    box-shadow var(--nav-transition-surface);
}

.site-header.is-scrolled {
  color: var(--nav-color-scrolled);
}

.site-header.is-hero-blurred::before {
  background-color: var(--nav-surface-default);
  box-shadow: var(--nav-shadow-default);
}

.site-header.is-scrolled::before {
  background-color: var(--nav-surface-scrolled);
  box-shadow: var(--nav-shadow-scrolled);
}

.site-header.is-hidden {
  transform: translateY(var(--nav-hidden-offset));
}

/* === Container layout === */

.site-header > .container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--nav-brand-gap);
  padding-top: var(--nav-padding-y);
  padding-bottom: var(--nav-padding-y);
}

/* === Link colours (default + scrolled / hero-blurred) === */

.site-header .logo,
.site-header .toggle,
.site-header nav a {
  --link-current-color: currentColor;
}

.site-header nav a,
.site-header .logo {
  --link-current-decoration-color: color-mix(in srgb, currentColor 56%, transparent);
  --link-current-decoration-color-hover: color-mix(in srgb, currentColor 36%, transparent);
  --link-current-decoration-color-clean-hover: var(--link-current-decoration-color-hover);
  --link-current-hover-opacity: var(--link-hover-opacity-light);
}

.site-header:is(.is-scrolled, .is-hero-blurred) nav a {
  --link-current-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
  --link-current-decoration-color-hover: color-mix(in srgb, currentColor 14%, transparent);
  --link-current-decoration-color-clean-hover: var(--link-current-decoration-color-hover);
  --link-current-hover-opacity: var(--link-hover-opacity-dark);
}

/* === Logo === */

.site-header .logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: var(--nav-logo-size);
  height: var(--nav-logo-size);
  color: inherit;
}

.site-header .logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* === Desktop nav: hub, items, dropdowns, branches === */

.site-header nav {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--nav-item-gap);
}

.site-header nav a.hub {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  white-space: nowrap;
}

.site-header nav a.hub > svg {
  width: 0.7em;
  height: 0.7em;
  flex: 0 0 auto;
  opacity: 0.5;
  transform: none;
  transition: opacity 0.2s ease;
}

.site-header nav > .item:is(:hover, :focus-within) .hub > svg {
  opacity: 1;
  transform: none;
}

.site-header nav > .item {
  position: relative;
  display: flex;
  align-items: center;
}

.site-header nav > .item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--nav-dropdown-offset);
}

.site-header nav .group {
  position: absolute;
  top: calc(100% + var(--nav-dropdown-offset));
  left: 0;
  display: grid;
  gap: var(--nav-dropdown-gap);
  min-width: var(--nav-dropdown-min-width);
  padding: var(--nav-dropdown-padding);
  background: var(--nav-dropdown-surface);
  color: var(--wp--preset--color--off-white);
  box-shadow: var(--nav-dropdown-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(var(--s-8));
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.site-header nav .branch {
  display: grid;
  gap: var(--s-8);
}

.site-header nav .branch-title {
  /*font-weight: 600;*/
}

.site-header nav .branch-links {
  display: grid;
  gap: var(--s-4);
  padding-left: var(--s-12);
  margin-bottom: var(--s-8);
  border-left: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}

.site-header nav .group a {
  justify-self: start;
}

.site-header nav > .item:is(:hover, :focus-within) .group {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* === Actions === */

.site-header .actions {
  display: none;
  align-items: center;
  gap: var(--nav-actions-gap);
  width: auto;
  justify-content: flex-end;
  margin-left: auto;
}

.site-header .actions > * {
  flex: 0 0 auto;
}

.site-header.is-scrolled .actions .outline-off-white {
  --btn-border-color: var(--wp--preset--color--warm-brown);
  --btn-border-color: color-mix(in srgb, var(--wp--preset--color--warm-brown) 32%, transparent);
  --btn-color: var(--wp--preset--color--warm-brown);
}

.site-header.is-scrolled .actions .filled-off-white,
.site-header.is-open .actions .filled-off-white {
  --btn-bg: var(--wp--preset--color--warm-brown);
  --btn-color: var(--wp--preset--color--off-white);
}

/* === Mobile toggle button === */

.site-header .toggle {
  color: inherit;
  margin-left: auto;
}

.site-header .toggle > .toggle-open {
  display: block;
}

.site-header .toggle > .toggle-close {
  display: none;
}

.site-header.is-open .toggle > .toggle-open {
  display: none;
}

.site-header.is-open .toggle > .toggle-close {
  display: block;
}

/* === Backdrop-filter (@supports) === */

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before {
    -webkit-backdrop-filter: var(--nav-blur-default);
    backdrop-filter: var(--nav-blur-default);
    transition:
      background-color var(--nav-transition-surface),
      -webkit-backdrop-filter var(--nav-transition-surface),
      backdrop-filter var(--nav-transition-surface),
      box-shadow var(--nav-transition-surface);
  }

  .site-header:is(.is-hero-blurred, .is-scrolled)::before {
    -webkit-backdrop-filter: var(--nav-blur-scrolled);
    backdrop-filter: var(--nav-blur-scrolled);
  }
}

/* === Breakpoints === */

/* Mobile: open-state surface swap.
   Scoped to max-width on purpose — these rules paint the header brown
   when .is-open is set. Normally .is-open only flips via the hamburger
   (which is hidden at 64rem+), but the partial can server-render it via
   $pn_force_open regardless of viewport. The max-width wrapper keeps
   that paint job from leaking into desktop. */
@media (max-width: 63.99rem) {
  .site-header.is-open {
    color: var(--wp--preset--color--off-white);
  }

  .site-header.is-open::before {
    background-color: var(--wp--preset--color--warm-brown);
    box-shadow: none;
  }
}

/* Desktop: reveal nav + actions, hide toggle */
@media (min-width: 64rem) {
  :root {
    --nav-actions-gap: var(--s-16);
    --nav-padding-y: var(--s-16);
  }

  .site-header nav a.hub {
    --link-current-size: var(--font-size-base);
  }

  .site-header .actions .btn {
    --btn-current-height: 2.4em;
    --btn-current-padding-inline: 1.5em;
    --btn-current-shaped-padding-inline: 1.5em;
  }

  .site-header nav,
  .site-header .actions {
    display: flex;
  }

  .site-header .toggle {
    display: none;
  }
}

/* XL: bump tokens + restore base button size */
@media (min-width: 90rem) {
  :root {
    --nav-item-gap: var(--s-48);
    --nav-actions-gap: var(--s-20);
    --nav-padding-y: var(--s-20);
  }

  .site-header nav a.hub {
    --link-current-size: var(--link-font-size-hub);
  }

  .site-header .actions .btn {
    --btn-current-height: var(--btn-height);
    --btn-current-padding-inline: var(--btn-padding-inline);
    --btn-current-shaped-padding-inline: var(--btn-shaped-padding-inline);
  }
}

/* ==========================================================================
   WP Admin Bar offset (logged-in only)
   WordPress adds body.admin-bar when the toolbar is visible. The toolbar is
   position:fixed at 32px tall (46px on ≤ 782px), which overlaps our own
   fixed header. Offset both the header and the ::before pseudo so they
   clear the toolbar. Uses WP's --wp-admin--admin-bar--height custom
   property (WP 6.x+) with a safe fallback.
   ========================================================================== */

body.admin-bar .site-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: var(--wp-admin--admin-bar--height, 46px);
  }
}