/* ===== Floating island header — overrides the old .header bar ===== */

:root {
  --island-bg: rgba(16,18,27,0.55);
  --island-bg-solid: rgba(13,15,22,0.86);
  --island-border: rgba(255,255,255,0.09);
  --island-border-solid: rgba(255,255,255,0.14);
  --island-shadow: 0 10px 40px rgba(0,0,0,0.55);
}
.light {
  --island-bg: rgba(255,255,255,0.55);
  --island-bg-solid: rgba(255,255,255,0.90);
  --island-border: rgba(0,0,0,0.08);
  --island-border-solid: rgba(0,0,0,0.13);
  --island-shadow: 0 10px 40px rgba(15,17,32,0.14);
}

/* The old sticky bar is gone; the island floats over content instead. */
.island {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 100;
  width: min(960px, calc(100vw - 32px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 8px 0 18px;
  border: 1px solid var(--island-border);
  border-radius: 999px;
  background: var(--island-bg);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  /* The island used to SHRINK as you scrolled - width 960 to 660, height 56 to
     52 - and Gulubero wanted it to stay put, so its size is frozen. The one
     thing that does move is the gap above it: at rest the pill floats 18px
     down, and once you scroll it rides up and pins flush to the top edge, so
     it stops drifting over the page. It also goes translucent to solid there,
     so it stays readable with real content passing underneath. */
  transition:
    top .3s ease,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

/* Pinned. Only `top` changes - width and height are deliberately absent, which
   is why island.js still measures --pill-compact but nothing reads it: that
   measurement is also what keeps the pill from reflowing on resize. */
.island.contracted {
  top: 0;
  background: var(--island-bg-solid);
  border-color: var(--island-border-solid);
  box-shadow: var(--island-shadow);
}

/* ----- Brand ----- */
.island .brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

.island .brand-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--text);
  white-space: nowrap;
  /* deliberately NOT a gradient — that's the templated look */
  -webkit-text-fill-color: currentColor;
  transition: opacity .2s ease;
}
.island .brand-name .accent { color: var(--accent); }
.island .brand:hover .brand-name { opacity: .78; }

/* ----- Nav ----- */
.island .nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }

.island .nav a {
  position: relative;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-2);
  padding: 7px 13px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.island .nav a:hover { color: var(--text); background: var(--surface-hover); }
.island .nav a.active { color: var(--text); }
.island .nav a.active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 3px;
  width: 14px; height: 2px; margin-left: -7px;
  border-radius: 2px;
  background: var(--accent);
}

/* ----- Actions ----- */
.island .divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
.island .header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 6px; }

.island .theme-toggle {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.island .theme-toggle:hover {
  color: var(--text);
  background: var(--surface-hover);
  border-color: var(--border);
}
.island .theme-toggle svg { width: 16px; height: 16px; }

/* pill-shaped CTA to echo the capsule */
.island .btn { border-radius: 999px; padding: 10px 18px; font-weight: 650; }
.island .btn-primary:hover { box-shadow: 0 6px 22px rgba(16,185,129,.35); }
.island .btn svg { width: 14px; height: 14px; }

/* ----- Hamburger ----- */
.island .hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; padding: 8px;
  margin-left: 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

/* ----- Mobile sheet (replaces the full-screen overlay) ----- */
.nav-overlay {
  position: fixed;
  top: 82px; left: 16px; right: 16px; bottom: auto;
  z-index: 99;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--island-border-solid);
  border-radius: 22px;
  background: var(--island-bg-solid);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: var(--island-shadow);
  transition: top .3s ease;
}
/* The sheet hangs off the bottom of the pill, so it has to ride up with it. */
.island.contracted + .nav-overlay { top: 64px; }
.light .nav-overlay { background: var(--island-bg-solid); }
.nav-overlay.open { display: flex; }
.nav-overlay a {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}
.nav-overlay a:hover { color: var(--text); background: var(--surface-hover); }

/* the CTA is a button, not a nav link — keep its own colour */
.nav-overlay a.btn-primary,
.nav-overlay a.btn-primary:hover { color: #fff; background: var(--accent); }
.nav-overlay a.btn-primary:hover { background: var(--accent-hover); }
.nav-overlay .btn { margin-top: 6px; justify-content: center; }

/* The hero no longer sits under a 57px bar — it starts at the top. */
.hero { min-height: 100dvh; }

@media (max-width: 860px) {
  .island { width: calc(100vw - 24px); top: 12px; padding: 0 8px 0 16px; }
  .island.contracted { width: calc(100vw - 24px); }
  /* pill starts 6px higher here, so the sheet keeps the same 14px gap */
  .island.contracted + .nav-overlay { top: 70px; }
  .island .nav, .island .divider { display: none; }
  .island .header-actions { margin-left: auto; }
  .island .hamburger { display: flex; }
}

@media (max-width: 420px) {
  .island .btn-cta-label { display: none; }
  .island .btn-primary { padding: 10px 12px; }
}