/* =====================================================================
   Shared site header — logo + burger, identical on every page.

   Replaced eleven different headers that each carried their own links
   (Plans / Cookbook / 30-Day / What's included / Back to site …). All of
   that now lives behind one burger, so there is a single source of truth.

   The header is fixed and its scrim fades out downward rather than ending
   on a border, so it dissolves into the page instead of sitting on it.
   ===================================================================== */

:root{
  /* The site is dark by design and defines every colour itself, so nothing
     should change with the OS theme. What DOES still follow the OS without
     this line: form controls, scrollbars, autofill shading and the tap
     highlight — which is why the pages did not look identical in light mode.
     Declaring the scheme pins all of those to their dark rendering.
     This file loads on every page, so one declaration covers the site. */
  color-scheme: dark;

  --hdr-h: 76px;
  --hdr-ink: #f3f1ea;
  --hdr-accent: #e2742c;
}
@media (max-width: 640px){ :root{ --hdr-h: 62px; } }

.siteheader{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: var(--hdr-h);
}

/* The scrim is a separate layer so the blur can be masked away along with
   the tint. Masking the header itself would take the logo and burger with it. */
.siteheader__scrim{
  position: absolute;
  inset: 0 0 -46px 0;              /* overshoot below, so the fade has room */
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(11,10,8,0.95) 0%,
    rgba(11,10,8,0.82) 42%,
    rgba(11,10,8,0.42) 72%,
    rgba(11,10,8,0) 100%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%);
}

.siteheader__inner{
  position: relative;
  z-index: 1;
  height: var(--hdr-h);
  max-width: 1180px;
  margin: 0 auto;
  /* Wider than the old 24px so the logo sits further in from the edge. */
  padding: 0 clamp(26px, 3.4vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Negative margin cancels the padding, so the hit area grows to ~44px
   without shifting where the logo actually sits. */
.siteheader__logo{ display: block; line-height: 0; padding: 7px 6px; margin: -7px -6px; }
.siteheader__logo img{
  height: 42px; width: auto; display: block;
  border-radius: 9px;
}
@media (max-width: 640px){ .siteheader__logo img{ height: 32px; } }

/* ---------- burger ---------- */
.burger{
  width: 46px; height: 46px;        /* comfortably past the 44px touch target */
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.burger span{
  display: block; width: 23px; height: 2px; border-radius: 2px;
  background: var(--hdr-ink);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- menu overlay ---------- */
.sitemenu{
  position: fixed; inset: 0;
  z-index: 59;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  background: rgba(11,10,8,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.sitemenu.is-open{ opacity: 1; visibility: visible; }

.sitemenu a,
.sitemenu button{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(26px, 6vw, 38px);
  font-weight: 400;
  color: var(--hdr-ink);
  background: none; border: 0;
  text-decoration: none;
  padding: 14px 28px;
  cursor: pointer;
  opacity: 0; transform: translateY(14px);
  transition: color .2s ease, opacity .45s ease, transform .45s ease;
}
.sitemenu.is-open a,
.sitemenu.is-open button{ opacity: 1; transform: none; }
.sitemenu.is-open a:nth-child(1){ transition-delay: .06s; }
.sitemenu.is-open a:nth-child(2){ transition-delay: .12s; }
.sitemenu.is-open button{ transition-delay: .18s; }

.sitemenu a:hover,
.sitemenu button:hover{ color: var(--hdr-accent); }

/* Book a Call is a plain menu item, same face and size as Home and FAQ —
   it inherits `.sitemenu a, .sitemenu button` above and adds nothing. The
   pill styling and the icon it used to carry were removed on request. */
.sitemenu .sitemenu__cta{ margin-top: 4px; }

/* Scroll lock while the menu is open. */
body.menu-open{ overflow: hidden; }

/* Pages without a full-bleed hero need to clear the fixed header;
   hero pages deliberately let it overlay the image. */
body:not(.has-hero){ padding-top: var(--hdr-h); }

@media (prefers-reduced-motion: reduce){
  .burger span, .sitemenu, .sitemenu a, .sitemenu button{ transition: none; }
}