/* ===== HEADER VARIANTS (css/headers.css) =====
   Loaded after css/main.css on every page. Scoped under [data-header="N"].
   Default document markup ships data-header="1".
   All six variants share one header markup — CSS shows/hides per variant. */

/* Shared building blocks */
.logo-dot { color: #4FC3D9; }
.header-topbar { display: none; }

/* Hide the header CTA on small screens — the hamburger takes over */
@media (max-width: 768px) {
  .header-cta { display: none; }
}

/* ---------- Variant 1 — Navy Gold (default) ---------- */
[data-header="1"] { --header-h: 76px; }
[data-header="1"] .site-header {
  height: var(--header-h);
  background: #0B1A2B;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: height .3s, background .3s, box-shadow .3s;
}
[data-header="1"] .site-header.scrolled {
  --header-h: 60px;
  background: #0B1A2B;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-header="1"] .header-inner { transition: height .3s; }
[data-header="1"] .logo { color: #F2F6F8; font-family: var(--font-display); }
[data-header="1"] .nav-links a {
  position: relative;
  padding: .5rem .75rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(242,246,248,.85);
  background: none;
}
[data-header="1"] .nav-links a::after {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .15rem;
  height: 2px;
  background: #E8A33D;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
[data-header="1"] .nav-links a:hover,
[data-header="1"] .nav-links a.active { color: #F2F6F8; background: none; }
[data-header="1"] .nav-links a:hover::after,
[data-header="1"] .nav-links a.active::after { transform: scaleX(1); }
[data-header="1"] .header-cta {
  background: #E8A33D;
  color: #0B1A2B;
  border-radius: 999px;
  padding: .55rem 1.4rem;
  min-height: 0;
  font-size: .85rem;
  font-weight: 700;
}
[data-header="1"] .header-cta:hover { background: #F0B44F; }

/* ---------- Variant 2 — Glass Teal ---------- */
[data-header="2"] { --header-h: 76px; }
[data-header="2"] .site-header {
  background: transparent;
  color: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-header="2"] .site-header.scrolled {
  --header-h: 64px;
  background: rgba(11,26,43,.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: none;
}
[data-header="2"] .logo { color: #fff; font-family: var(--font-display); }
[data-header="2"] .logo-dot { color: #14B8A6; }
[data-header="2"] .nav-links a {
  position: relative;
  padding: .5rem .75rem;
  font-size: .9rem;
  color: rgba(255,255,255,.92);
  background: none;
}
[data-header="2"] .nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .1rem;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #14B8A6;
  opacity: 0;
  transition: opacity .2s;
}
[data-header="2"] .nav-links a:hover,
[data-header="2"] .nav-links a.active { color: #fff; background: none; }
[data-header="2"] .nav-links a:hover::after,
[data-header="2"] .nav-links a.active::after { opacity: 1; }
[data-header="2"] .header-cta {
  background: transparent;
  border: 1.5px solid #14B8A6;
  color: #14B8A6;
  border-radius: 999px;
  padding: .45rem 1.4rem;
  min-height: 0;
  font-size: .85rem;
  font-weight: 700;
  transition: background .2s, color .2s;
}
[data-header="2"] .header-cta:hover { background: #14B8A6; color: #fff; }
@media (min-width: 769px) {
  [data-header="2"] .nav-primary { flex: 1; display: flex; justify-content: center; }
  [data-header="2"] .header-cta { margin-left: 1.5rem; }
}

/* Layout B hero is light — Glass Teal adapts to a light glass bar there */
html[data-layout="b"][data-header="2"] .site-header,
html[data-layout="b"][data-header="2"] .site-header.scrolled {
  background: rgba(250,247,240,.82);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid rgba(11,26,43,.08);
}
html[data-layout="b"][data-header="2"] .logo { color: #0B1A2B; }
html[data-layout="b"][data-header="2"] .nav-links a { color: rgba(11,26,43,.85); }
html[data-layout="b"][data-header="2"] .nav-links a:hover,
html[data-layout="b"][data-header="2"] .nav-links a.active { color: #0B1A2B; }
html[data-layout="b"][data-header="2"] .header-cta { border-color: #14B8A6; color: #14B8A6; }
html[data-layout="b"][data-header="2"] .hamburger span { background: #0B1A2B; }

/* ---------- Variant 3 — Light Minimal Indigo ---------- */
[data-header="3"] { --header-h: 72px; }
[data-header="3"] body { padding-top: 72px; }
[data-header="3"] .site-header {
  background: #FFFFFF;
  color: #111827;
  border-bottom: 1px solid #E5E7EB;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-header="3"] .site-header.scrolled {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E7EB;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-header="3"] .logo { color: #111827; font-family: var(--font-display); }
[data-header="3"] .logo-dot { color: #4F46E5; }
[data-header="3"] .nav-links a { color: #111827; background: none; font-size: .9rem; }
[data-header="3"] .nav-links a:hover,
[data-header="3"] .nav-links a.active { color: #4F46E5; background: none; }
[data-header="3"] .header-cta {
  background: #4F46E5;
  color: #fff;
  border-radius: 999px;
  padding: .5rem 1.4rem;
  min-height: 0;
  font-size: .85rem;
  font-weight: 700;
}
[data-header="3"] .header-cta:hover { background: #4338CA; }
[data-header="3"] .hamburger span { background: #111827; }
@media (min-width: 769px) {
  /* Centred logo, nav split into two halves left/right of the wordmark */
  [data-header="3"] .header-inner { position: relative; }
  [data-header="3"] .logo { position: absolute; left: 50%; transform: translateX(-50%); }
  [data-header="3"] .nav-primary { flex: 1 1 auto; display: flex; }
  [data-header="3"] .nav-links { width: 100%; gap: .25rem; }
  [data-header="3"] .nav-links li:nth-child(2) { margin-right: auto; }
  [data-header="3"] .header-cta { margin-left: 1.5rem; }
}

/* ---------- Variant 4 — Charcoal Lime ---------- */
[data-header="4"] { --header-h: 64px; }
[data-header="4"] .site-header {
  background: #111214;
  color: #E7E9EA;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-header="4"] .site-header.scrolled {
  background: #111214;
  border-bottom: 1px solid rgba(163,230,53,.28);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-header="4"] .logo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #E7E9EA;
}
[data-header="4"] .logo-dot { color: #A3E635; }
[data-header="4"] .nav-links a {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #A9AEB3;
  border-radius: 4px;
}
[data-header="4"] .nav-links a:hover,
[data-header="4"] .nav-links a.active { color: #111214; background: #A3E635; }
[data-header="4"] .header-cta {
  background: #A3E635;
  color: #111214;
  border-radius: 4px;
  padding: .5rem 1.2rem;
  min-height: 0;
  font-size: .85rem;
  font-weight: 700;
}
[data-header="4"] .header-cta:hover { background: #BEF264; }
[data-header="4"] .hamburger span { background: #E7E9EA; }

/* ---------- Variant 5 — Ocean Pill ---------- */
[data-header="5"] { --header-h: 64px; }
[data-header="5"] .site-header {
  position: fixed;
  top: 14px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(1160px, calc(100% - 20px));
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0EA5E9, #1E3A8A);
  box-shadow: 0 10px 30px rgba(2,32,71,.35);
  color: #fff;
  transition: top .3s, height .3s, background .3s, box-shadow .3s;
}
[data-header="5"] .site-header.scrolled {
  top: 8px;
  height: 56px;
  background: linear-gradient(90deg, #0284C7, #172C6C);
  box-shadow: 0 8px 24px rgba(2,32,71,.4);
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-header="5"] .header-inner {
  max-width: none;
  height: 100%;
  padding-inline: 1.25rem 1rem;
}
[data-header="5"] .logo { color: #fff; font-family: var(--font-display); }
[data-header="5"] .logo-dot { color: #BAE6FD; }
[data-header="5"] .nav-links a {
  font-size: .9rem;
  color: rgba(255,255,255,.94);
  border-radius: 999px;
  background: none;
}
[data-header="5"] .nav-links a:hover,
[data-header="5"] .nav-links a.active { background: rgba(255,255,255,.16); color: #fff; }
[data-header="5"] .header-cta {
  background: #fff;
  color: #1E3A8A;
  border-radius: 999px;
  padding: .45rem 1.3rem;
  min-height: 0;
  font-size: .85rem;
  font-weight: 700;
}
[data-header="5"] .header-cta:hover { background: #E0F2FE; }
[data-header="5"] .hamburger span { background: #fff; }

/* ---------- Variant 6 — Sand Editorial ---------- */
[data-header="6"] { --header-h: 100px; }
[data-header="6"] body { padding-top: 100px; }
[data-header="6"] .site-header {
  height: auto;
  background: #F5EFE6;
  color: #14532D;
  border-bottom: 1px solid #DCCFBB;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-header="6"] .site-header.scrolled {
  background: #F5EFE6;
  border-bottom: 1px solid #DCCFBB;
  box-shadow: 0 2px 12px rgba(20,83,45,.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-header="6"] .header-topbar {
  display: block;
  background: #EDE4D6;
  border-bottom: 1px solid #DCCFBB;
  color: #14532D;
  font-size: .78rem;
}
[data-header="6"] .header-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
}
[data-header="6"] .header-topbar a { color: #14532D; font-weight: 600; }
[data-header="6"] .header-topbar a:hover { text-decoration: underline; }
[data-header="6"] .header-inner { height: 64px; }
[data-header="6"] .logo { color: #14532D; font-family: var(--font-display); }
[data-header="6"] .logo-dot { color: #14532D; }
[data-header="6"] .nav-links a {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #14532D;
  background: none;
}
[data-header="6"] .nav-links a:hover,
[data-header="6"] .nav-links a.active {
  color: #14532D;
  text-decoration: underline;
  text-underline-offset: .4rem;
  background: none;
}
[data-header="6"] .header-cta {
  background: transparent;
  border: 1.5px solid #14532D;
  color: #14532D;
  border-radius: 2px;
  padding: .5rem 1.4rem;
  min-height: 0;
  font-size: .85rem;
  font-weight: 700;
}
[data-header="6"] .header-cta:hover { background: #14532D; color: #F5EFE6; }
[data-header="6"] .hamburger span { background: #14532D; }
@media (max-width: 768px) {
  [data-header="6"] .topbar-hours { display: none; }
  [data-header="6"] .header-topbar-inner { justify-content: center; }
}