/* ==========================================================================
   Level Headed Construction — components.css
   Buttons, header, loader.
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-in-out-quad),
    color var(--dur-fast) var(--ease-in-out-quad),
    border-color var(--dur-fast) var(--ease-in-out-quad),
    box-shadow var(--dur-fast) var(--ease-in-out-quad),
    transform var(--dur-fast) var(--ease-in-out-quad);
  white-space: nowrap;
}

.btn--primary {
  background: var(--rusty);
  color: var(--cream);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--rusty-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--ink);
  color: var(--cream);
}

.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--cream);
  color: var(--ink);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--gutter);
  background: transparent;
  transition: background var(--dur-base) var(--ease-in-out-quad),
              box-shadow var(--dur-base) var(--ease-in-out-quad),
              padding var(--dur-base) var(--ease-in-out-quad);
}

.site-header.is-stuck {
  background: rgba(237, 221, 183, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  padding-top: 12px;
  padding-bottom: 12px;
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

/* ---------- Header entrance choreography (boot-time only) ----------
   Mirrors B&G: wordmark fades in first, nav links cascade in from the left
   with a small stagger, phone pill arrives last. The .is-header-in class is
   added by app.js the moment the loader curtains begin pulling apart, so the
   header builds itself while the user's eye is following the curtains off. */
.site-header .wordmark,
.site-header .site-nav__link,
.site-header .phone-pill,
.site-header .menu-toggle {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 600ms var(--ease-out-circ),
    transform 600ms var(--ease-out-circ);
}
/* Wordmark uses a gentler vertical lift instead of the horizontal slide */
.site-header .wordmark {
  transform: translateY(-8px);
}
.site-header.is-header-in .wordmark,
.site-header.is-header-in .site-nav__link,
.site-header.is-header-in .phone-pill,
.site-header.is-header-in .menu-toggle {
  opacity: 1;
  transform: none;
}
/* Stagger: wordmark first, then each nav item, then phone pill */
.site-header.is-header-in .wordmark           { transition-delay:   0ms; }
.site-header.is-header-in .site-nav__link:nth-child(1) { transition-delay: 200ms; }
.site-header.is-header-in .site-nav__link:nth-child(2) { transition-delay: 300ms; }
.site-header.is-header-in .site-nav__link:nth-child(3) { transition-delay: 400ms; }
.site-header.is-header-in .site-nav__link:nth-child(4) { transition-delay: 500ms; }
.site-header.is-header-in .site-nav__link:nth-child(5) { transition-delay: 600ms; }
.site-header.is-header-in .phone-pill         { transition-delay: 650ms; }
.site-header.is-header-in .menu-toggle        { transition-delay: 650ms; }

@media (prefers-reduced-motion: reduce) {
  .site-header .wordmark,
  .site-header .site-nav__link,
  .site-header .phone-pill,
  .site-header .menu-toggle {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Wordmark lockup (Oswald Option 2) */
.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.wordmark__mark {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
}
.wordmark__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--font-display);
}
.wordmark__line1 {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.wordmark__line2 {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rusty);
  margin-top: 4px;
}
.site-header.on-dark .wordmark__line1 { color: var(--cream); }
.site-header.on-dark .wordmark__line2 { color: #d9a374; }

@media (min-width: 768px) {
  .wordmark__mark { width: 80px; height: 80px; }
  .wordmark__line1 { font-size: 30px; }
  .wordmark__line2 { font-size: 14px; }
}

/* Primary nav */
.site-nav {
  display: none;
}
@media (min-width: 1024px) {
  .site-nav {
    display: flex;
    gap: 32px;
    align-items: center;
  }
}

.site-nav__link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 8px 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease-in-out-quad);
}
.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rusty);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-in-out-circ);
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}
.site-header.on-dark .site-nav__link { color: var(--cream); }

/* Right-side actions wrapper (phone pill + mobile hamburger) */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Phone pill */
.phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--rusty);
  color: var(--cream);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: background var(--dur-fast) var(--ease-in-out-quad),
              transform var(--dur-fast) var(--ease-in-out-quad);
  min-height: 44px;
  white-space: nowrap;
}
.phone-pill:hover,
.phone-pill:focus-visible {
  background: var(--rusty-dark);
  transform: translateY(-1px);
}

.phone-pill__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.phone-pill__label {
  display: none;
}
@media (min-width: 480px) {
  .phone-pill__label { display: inline; }
}

/* Hamburger (mobile) */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.site-header.on-dark .menu-toggle { color: var(--cream); }
.menu-toggle svg { width: 24px; height: 24px; }
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--cream);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-in-out-circ);
  display: flex;
  flex-direction: column;
  padding: 80px 24px 24px;
}
.mobile-drawer.is-open {
  transform: translateX(0);
}
.mobile-drawer__link {
  display: block;
  padding: 16px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--neutral-200);
}
.mobile-drawer__link:hover { color: var(--rusty); }
.mobile-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-drawer__close svg { width: 20px; height: 20px; }

/* Blueprint mascot at the top of the open drawer — sized to match
   the header wordmark mark (60px) and left-aligned so it stacks
   directly above the "HOME" link's flush-left edge.               */
.mobile-drawer__logo {
  display: block;
  width: 60px;
  height: auto;
  margin: 0 0 16px;
  align-self: flex-start;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
  user-select: none;
  pointer-events: none;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 27, 16, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-in-out-quad);
  z-index: 150;
}
.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Loader — split-screen curtain (ported from Brasfield & Gorrie)

   Two vertical pillars meet at the centerline. Each pillar holds one half
   of the brand lockup (mascot left, wordmark right), and the halves slide
   in from opposite directions to assemble the full lockup.

   Choreography (driven by app.js):
     1. .loader present at parse — pillars cover the screen, halves offscreen
     2. .is-ready class added on next frame — halves slide to center
     3. Progress bar fills as assets resolve
     4. .is-opening class added when load completes — curtains pull apart,
        sliding off in opposite directions; lheroReady fires simultaneously
        so the hero entrance animation runs underneath the parting curtains
     5. .is-done class added once the pull-apart finishes — pointer events off
   ========================================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  pointer-events: auto;
}
.loader.is-done {
  pointer-events: none;
}

/* ---------- Pillar (one half of the screen) ---------- */
.loader__pillar {
  position: relative;
  overflow: hidden;
  /* Curtain pull-apart: each pillar slides off in its own direction.
     750ms — 25% faster than the B&G 1:1 baseline. */
  transition: transform 750ms var(--ease-in-out-circ);
  will-change: transform;
}
.loader__pillar--left  { background: var(--ink); }
.loader__pillar--right { background: var(--ink-soft); }

.loader.is-opening .loader__pillar--left  { transform: translateX(-101%); }
.loader.is-opening .loader__pillar--right { transform: translateX( 101%); }

/* Subtle inner curtain layer — gives the pillar a hint of depth and lets
   future tweaks (a sweep, a sheen) live somewhere without restructuring. */
.loader__curtain {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(237, 221, 183, 0.04) 0%,
    rgba(0, 0, 0, 0)          50%,
    rgba(0, 0, 0, 0.18)       100%);
  pointer-events: none;
}

/* ---------- Halves (logo / wordmark inside each pillar) ---------- */
.loader__half {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  /* Slide-in is GPU transform only; transition added by .is-ready.
     750ms — 25% faster than the B&G 1:1 baseline. */
  transform: translateY(120%);
  transition: transform 750ms var(--ease-in-out-circ);
  will-change: transform;
}
.loader.is-ready .loader__half--mark { transform: translateY(0); }
.loader.is-ready .loader__half--text { transform: translateY(0); }

/* Right half (wordmark) drops in from above instead of rising from below */
.loader__half--text {
  transform: translateY(-120%);
}

/* Mark half: anchored to the right edge so the icon sits at the seam */
.loader__half--mark {
  justify-content: flex-end;
  padding-right: clamp(12px, 4vw, 32px);
}
.loader__mark {
  width: clamp(96px, 18vw, 200px);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.4));
}

/* Text half: anchored to the left edge so the wordmark sits at the seam */
.loader__half--text {
  justify-content: flex-start;
  padding-left: clamp(12px, 4vw, 32px);
}
.loader__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--font-display);
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.loader__wordmark-line1 {
  font-weight: 700;
  font-size: clamp(28px, 5vw, 56px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
}
.loader__wordmark-line2 {
  font-weight: 500;
  font-size: clamp(13px, 2.2vw, 22px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #d9a374;
  margin-top: 6px;
}

/* ---------- Progress bar (bottom edge) ---------- */
.loader__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(237, 221, 183, 0.12);
  overflow: hidden;
  z-index: 2;
}
@media (min-width: 1024px) {
  .loader__bar { height: 3px; }
}
.loader__bar-fill {
  width: 0%;
  height: 100%;
  background: var(--rusty);
  transform-origin: left center;
  transition: width 250ms linear;
}
/* Fade the bar out once the curtains begin pulling apart */
.loader.is-opening .loader__bar {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-in-out-quad);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
}