/* Ghan House — global header
   Applied on every page so the shared .hdr renders site-wide.
   Hides Astra's stock header everywhere; defines the .hdr design and
   the slide-over menu overlay. Self-contained so it can sit alongside
   legacy / unstyled pages without leaking tokens onto unrelated themes. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=DM+Sans:wght@400;500;600&display=swap');

/* Hide Astra's built-in header everywhere */
#masthead,
.ast-above-header-wrap,
.ast-below-header,
.main-header-bar-wrap { display: none !important; }

/* ===================================================================
   HEADER — transparent over dark hero, becomes solid/stuck on scroll.
   On pages without a dark hero we render with .hdr-solid baked in.
=================================================================== */
header.hdr {
  --gh-navy:        oklch(0.235 0.025 250);
  --gh-navy-deep:   oklch(0.185 0.022 250);
  --gh-cream:       oklch(0.965 0.010 85);
  --gh-gold:        oklch(0.70 0.075 75);
  --gh-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --gh-sans:  "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --gh-max-wide: 1640px;

  position: absolute; left: 0; right: 0; top: 0; z-index: 50;
  color: var(--gh-cream);
  background: transparent;
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
}
header.hdr * { box-sizing: border-box; }
header.hdr a { color: inherit; text-decoration: none !important; }

.hdr.hdr-solid {
  position: sticky;
  background: var(--gh-navy, oklch(0.235 0.025 250));
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.hdr.is-stuck {
  position: fixed;
  background: rgba(20,26,38,.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

.hdr-bar {
  max-width: var(--gh-max-wide, 1640px);
  margin: 0 auto;
  padding: 34px 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  transition: padding .35s ease;
}
/* Compact treatment fires only on scroll (.is-stuck), not on .hdr-solid.
   .hdr-solid is just "transparent header with a solid navy background"
   — used on pages without a hero — so the Est · 1727 eyebrow and the
   full-size wordmark stay visible until the user scrolls. */
.hdr.is-stuck .hdr-bar { padding: 16px 56px; }
.hdr.is-stuck .brand-sub { opacity: 0; max-height: 0; margin-top: 0; overflow: hidden; }
.hdr.is-stuck .brand-mark { font-size: 18px; }

.hdr .brand {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none;
}
.hdr .brand-sub {
  font-family: var(--gh-sans, "DM Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(245,240,232,.78);
  white-space: nowrap;
  transition: opacity .25s ease, max-height .35s ease, margin .35s ease;
  max-height: 16px;
  margin-bottom: 2px;
  padding-left: .42em;
}
.hdr .brand-mark {
  font-family: var(--gh-sans, "DM Sans", ui-sans-serif, system-ui, sans-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gh-cream, oklch(0.965 0.010 85));
  transition: font-size .35s ease;
  line-height: 1;
  padding-left: .42em;
  white-space: nowrap;
}

.hdr .menu-btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: transparent; border: 0; padding: 8px 4px;
  color: var(--gh-cream, oklch(0.965 0.010 85));
  font-family: var(--gh-sans, "DM Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 11px; font-weight: 500; letter-spacing: .42em; text-transform: uppercase;
  cursor: pointer;
  justify-self: start;
}
.hdr .menu-btn .bars { display: flex; flex-direction: column; gap: 4px; }
.hdr .menu-btn .bars span {
  display: block; width: 18px; height: 1px; background: currentColor;
  transition: transform .3s ease, opacity .3s ease;
}

/* Sharpened hover affordance — addresses SureFeedback 4811: the original
   :hover (2px translate on bars 1 + 3) was too subtle to read as
   "clickable". Layered cues now: animated underline reveals beneath
   "Menu", letter-spacing widens, bars fan further out (5px each, middle
   bar shrinks from the left). Cream stays cream — no colour shift.
   Mirrored on :focus-visible so keyboard users get the same affordance. */
.hdr .menu-btn > span:last-child {
  position: relative; display: inline-block;
  transition: letter-spacing .25s ease;
}
.hdr .menu-btn > span:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s ease;
}
.hdr .menu-btn:hover > span:last-child,
.hdr .menu-btn:focus-visible > span:last-child { letter-spacing: .50em; }
.hdr .menu-btn:hover > span:last-child::after,
.hdr .menu-btn:focus-visible > span:last-child::after { transform: scaleX(1); }
.hdr .menu-btn:hover .bars span:nth-child(1),
.hdr .menu-btn:focus-visible .bars span:nth-child(1) { transform: translateX(5px); }
.hdr .menu-btn:hover .bars span:nth-child(2),
.hdr .menu-btn:focus-visible .bars span:nth-child(2) { transform: scaleX(.7); transform-origin: left center; }
.hdr .menu-btn:hover .bars span:nth-child(3),
.hdr .menu-btn:focus-visible .bars span:nth-child(3) { transform: translateX(-5px); }

/* Astra applies its theme button hover background to any <button>, which
   stomps on the design's transparent .menu-btn. Pin it transparent on every
   state so Astra can't repaint it. */
.hdr .menu-btn,
.hdr .menu-btn:hover,
.hdr .menu-btn:focus,
.hdr .menu-btn:focus-visible,
.hdr .menu-btn:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--gh-cream, oklch(0.965 0.010 85)) !important;
}

.hdr .acts {
  display: flex; align-items: center; justify-content: flex-end; gap: 28px;
}
.hdr .loc {
  font-family: var(--gh-sans, "DM Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 11px; font-weight: 500;
  letter-spacing: .42em; text-transform: uppercase;
  color: rgba(245,240,232,.85);
  white-space: nowrap;
}
.hdr .btn-book {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 28px;
  background: var(--gh-cream, oklch(0.965 0.010 85));
  color: var(--gh-navy-deep, oklch(0.185 0.022 250));
  font-family: var(--gh-sans, "DM Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 11px; font-weight: 600; letter-spacing: .42em; text-transform: uppercase;
  border: 0; border-radius: 0;
  text-decoration: none;
  transition: background .2s, color .2s, transform .2s;
}
/* Astra pins :focus/:visited bg/color on anchor-buttons — pin .btn-book too */
.hdr .btn-book,
.hdr .btn-book:focus,
.hdr .btn-book:focus-visible,
.hdr .btn-book:active,
.hdr .btn-book:visited {
  background-color: var(--gh-cream, oklch(0.965 0.010 85)) !important;
  color: var(--gh-navy-deep, oklch(0.185 0.022 250)) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hdr .btn-book:hover {
  background-color: #fff !important;
  color: var(--gh-navy-deep, oklch(0.185 0.022 250)) !important;
  transform: translateY(-1px);
}

/* Logged-in admins see a 32px admin bar above; offset the fixed header so
   it doesn't slide under it. Anonymous visitors don't see the admin bar. */
body.admin-bar .hdr.is-stuck { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .hdr.is-stuck { top: 46px; }
}

/* ===== Slide-over menu overlay (opened by .menu-btn) =====
   The .menu-btn has no built-in panel — this overlay is the click target. */
.gh2-menu-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 26, 38, .95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 60;
  padding: 80px;
  color: oklch(0.965 0.010 85);
  display: none;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.gh2-menu-overlay.is-open { display: block; }
.gh2-menu-overlay__close {
  position: fixed; top: 32px; right: 48px;
  font-size: 36px; font-weight: 200;
  background: none; border: 0; color: inherit;
  cursor: pointer; line-height: 1;
  z-index: 61;
}
.gh2-menu-overlay__list {
  max-width: 600px; margin-top: 60px;
  list-style: none; padding: 0;
}
.gh2-menu-overlay__list > li {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-size: 39px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: baseline; gap: 28px;
}
/* Items with nested children stop being a flex row so the sub-list can
   stack beneath. Parent link still renders as a serif row above. */
.gh2-menu-overlay__list > li.gh2-menu-overlay__item--has-children {
  display: block;
}
.gh2-menu-overlay__list > li.is-soon { color: rgba(255, 255, 255, .35); cursor: default; }
.gh2-menu-overlay__list > li.is-soon em {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px; font-style: italic; letter-spacing: .12em;
  text-transform: uppercase; margin-left: 6px;
}
.gh2-menu-overlay__link {
  color: inherit !important;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
  display: flex; align-items: baseline; gap: 28px; width: 100%;
}
.gh2-menu-overlay__link:hover { color: oklch(0.70 0.075 75) !important; }
.gh2-menu-overlay__num {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 12px; letter-spacing: 3px; opacity: .5;
}

/* Sub-list of child pages under a parent — always visible, no toggle.
   If the menu ever grows long enough that this becomes hard to scan,
   the documented fallback is a chevron-toggle pattern (separate button
   sibling of the parent link, larger tap target). */
.gh2-menu-overlay__sub {
  list-style: none;
  margin: 4px 0 14px;
  padding: 0 0 0 64px; /* aligns with parent label, clearing the num column */
}
.gh2-menu-overlay__sub li {
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: 22px;
  padding: 4px 0;
  border: 0;
  display: block;
  color: inherit;
}
.gh2-menu-overlay__sub a {
  color: inherit !important;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
}
.gh2-menu-overlay__sub a:hover { color: oklch(0.70 0.075 75) !important; }

/* Responsive header */
@media (max-width: 980px) {
  .hdr-bar { padding: 18px 24px; }
  .hdr.is-stuck .hdr-bar { padding: 12px 24px; }
  .hdr .menu-btn span:last-child { display: none; }
  .hdr .loc { display: none; }
  .hdr .brand-mark { font-size: 18px; letter-spacing: .36em; }
  .hdr .brand-sub { font-size: 9px; }
}
@media (max-width: 900px) {
  .gh2-menu-overlay { padding: 60px 28px; }
  .gh2-menu-overlay__list > li { font-size: 27px; padding: 8px 0; }
  .gh2-menu-overlay__sub { padding-left: 44px; }
  .gh2-menu-overlay__sub li { font-size: 18px; }
}