/* ==========================================================
HEADER.CSS
The global header + navigation. This is a self-contained
component: it never reads page-body classes for its own
layout, only body[data-page] for its color theme. Change
any page's body content and this file is untouched.
========================================================== */

/* ----------------------------------------------------------
01. HEADER SHELL
---------------------------------------------------------- */
.header-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  transition: var(--transition);
}

/* The blur lives on a pseudo-element, not on .header-overlay itself.
   Reason: backdrop-filter/filter/transform on an element makes it the
   "containing block" for any position:fixed descendant — which was
   silently squashing the full-screen mobile nav down into the header's
   own ~80px-tall box. Keeping the filter off the real ancestor chain
   fixes that without giving up the blur. */
.header-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

/* Theme by page type — set once via body[data-page] */
body[data-page="home"] .header-overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.05));
}

body[data-page="inner"] .header-overlay {
  background: rgba(22, 40, 28, 0.85);
}

/* Specificity note: body[data-page="home"] .header-overlay is
   (0,2,1) — an attribute selector plus a class plus an element.
   .header-overlay.shrink alone is only (0,2,0), so it was losing
   that fight and never actually applying once scrolled, no matter
   how far past the hero image. Adding the "header" element here
   matches that specificity, and since this rule comes later in
   the file, it wins the tie. */
header.header-overlay.shrink {
  background: rgba(15, 26, 18, 0.88);
}

/* ----------------------------------------------------------
02. HEADER INNER ROW
---------------------------------------------------------- */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 35px;
  min-height: var(--header-height);
  transition: min-height 300ms ease, padding 300ms ease;
}

.site-logo {
  height: 52px;
  transition: height 300ms ease;
}

/* Shrink state: same specificity trick as the background rule
   above, so this reliably wins on every page */
header.header-overlay.shrink .header-inner {
  min-height: 60px;
  padding: 8px 35px;
}

header.header-overlay.shrink .site-logo {
  height: 40px;
}

/* Mobile nav sits right below the header — keep it in sync
   with the shrunk header height so opening the menu while
   scrolled doesn't leave a gap above it */
header.header-overlay.shrink nav {
  top: 60px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-phone a {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 8px 18px;
  transition: var(--transition);
}

.site-phone a:hover {
  color: var(--heading);
  background: var(--accent-light-soft);
  border-color: var(--accent-light-soft);
}

/* ----------------------------------------------------------
03. HAMBURGER (animated bars → X, not a text glyph)
---------------------------------------------------------- */
.hamburger {
  display: none;
  position: relative;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10002;
}

.hamburger .bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 200ms ease;
}

.hamburger .bar:nth-child(1) { top: 0; }
.hamburger .bar:nth-child(2) { top: 8px; }
.hamburger .bar:nth-child(3) { top: 16px; }

.hamburger.is-open .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.is-open .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ----------------------------------------------------------
04. NAV — MOBILE FIRST (fixed full-screen overlay)
Nav lives inside .header-right so it sits next to the phone
number on desktop. It's still safe on mobile because only
.site-phone (not .header-right itself) gets display:none
below 769px — the nav's own position:fixed takes it out of
flow either way.
---------------------------------------------------------- */
.header-overlay nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;

  display: flex;
  flex-direction: column;

  background: rgba(22, 40, 28, 0.92);
  backdrop-filter: blur(22px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 300ms;
  overflow-y: auto;
}

.header-overlay nav.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.header-overlay nav ul {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.25rem;
  padding: 2.5rem 2rem;
  align-items: stretch;
  list-style: none;
}

.header-overlay nav li {
  opacity: 0;
  transform: translateY(10px);
}

.header-overlay nav.open li {
  animation: fadeUp 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.header-overlay nav.open li:nth-child(1) { animation-delay: 0.06s; }
.header-overlay nav.open li:nth-child(2) { animation-delay: 0.12s; }
.header-overlay nav.open li:nth-child(3) { animation-delay: 0.18s; }
.header-overlay nav.open li:nth-child(4) { animation-delay: 0.24s; }
.header-overlay nav.open li:nth-child(5) { animation-delay: 0.30s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header-overlay nav a {
  color: #fff;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  position: relative;
  transition: background 200ms ease, color 200ms ease;
}

@media (max-width: 768px) {
  .header-overlay nav a {
    display: block;
    padding: 13px 12px;
    min-height: 44px;
    border-radius: var(--radius-sm);
  }

  .header-overlay nav a:hover,
  .header-overlay nav a:active {
    background: rgba(255, 255, 255, 0.06);
  }

  .header-overlay nav a.active {
    color: var(--accent-light-soft);
    background: rgba(123, 171, 92, 0.14);
  }
}

/* Phone number repeated inside the mobile menu only — the
   header-right copy is hidden below 769px. Pinned to the
   bottom and visually separated so it reads as an optional
   call-to-action, not another nav item. */
.nav-phone-item {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
}

.nav-phone-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  color: var(--accent-light-soft);
  font-weight: 600;
  font-size: 1.05rem;
  border: 1.5px solid var(--accent-light);
  border-radius: 999px;
  padding: 12px 20px;
  transition: background 200ms ease;
}

.nav-phone-item a:hover,
.nav-phone-item a:active {
  background: rgba(123, 171, 92, 0.14);
}

@media (min-width: 769px) {
  .nav-phone-item {
    display: none;
  }
}

/* ----------------------------------------------------------
05. MOBILE BREAKPOINT
---------------------------------------------------------- */
@media (max-width: 768px) {
  .hamburger {
    display: block;
    margin-left: auto;
  }

  .site-phone {
    display: none;
  }
}

/* ----------------------------------------------------------
06. DESKTOP RESTORE
---------------------------------------------------------- */
@media (min-width: 769px) {
  .header-overlay nav {
    position: static;
    top: auto;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    background: transparent;
    backdrop-filter: none;
    overflow: visible;
  }

  .header-overlay nav ul {
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: var(--space-4);
  }

  .header-overlay nav li {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .header-overlay nav a::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: var(--accent-light);
    transition: var(--transition);
    margin-top: 4px;
  }

  .header-overlay nav a:hover::after,
  .header-overlay nav a.active::after {
    width: 100%;
  }
}