/* Gigante Journal — shared site navigation.
   ONE floating frosted top bar for the whole journal (every article + the home),
   matching the React app header (rgba(255,255,255,0.82) + blur(16px)
   saturate(180%)). Site links sit inline on desktop and collapse behind a ≡ menu
   on mobile so they never vanish (the old `.hide-sm` rule hid everything but
   "Shop" below 820px). The journal sub-nav is a slim scroll row underneath.
   Generated into every article by tools/build-blog.mjs; the home page links this
   same file, so the nav is genuinely single-source. */

.gknav {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid #E8E8E5;
}
/* Solid white band filling the iOS status-bar / dynamic-island safe area, so the
   sticky header never slides under the notch on scroll (mirrors the React app). */
.gknav::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px); background: #fff;
}
.gknav-bar {
  max-width: 1120px; margin: 0 auto; padding: 11px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.gknav-brand { display: inline-flex; }
.gknav-brand img { height: 34px; width: auto; display: block; }

.gknav-end { display: flex; align-items: center; gap: 20px; }
.gknav-links { display: flex; align-items: center; gap: 24px; }
.gknav-links a {
  color: #1A1A1A; font-size: 15px; font-weight: 600; text-decoration: none;
  opacity: .82; transition: opacity .15s;
}
.gknav-links a:hover { opacity: 1; }
.gknav-shop {
  background: #BC5C86; color: #fff !important; opacity: 1 !important;
  padding: 9px 20px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(188, 92, 134, 0.26);
}
.gknav-shop:hover { filter: brightness(.96); }

/* ≡ menu button — mobile only */
.gknav-burger {
  display: none; width: 44px; height: 40px; padding: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: #fff; border: 1px solid #E8E8E5; border-radius: 11px;
}
.gknav-burger span { display: block; width: 18px; height: 2px; background: #1A1A1A; border-radius: 2px; transition: transform .2s, opacity .2s; }
.gknav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.gknav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gknav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Article back / wayfinding row — replaces the old (confusing) journal category strip */
.gknav-sub { border-top: 1px solid rgba(232, 229, 224, 0.7); background: rgba(244, 238, 250, 0.55); }
.gknav-back {
  max-width: 1120px; margin: 0 auto; padding: 9px 24px;
  display: flex; align-items: center; gap: 12px;
}
.gknav-back a { white-space: nowrap; font-size: 13.5px; font-weight: 700; text-decoration: none; color: #6B4F8C; opacity: .85; }
.gknav-back a:hover { opacity: 1; }
.gknav-backlink { display: inline-flex; align-items: center; gap: 6px; }
.gknav-back .gknav-sep { color: #C9BBD6; font-weight: 400; }

/* Mobile menu sheet — lives inside the sticky header so it drops under the bar
   and stays put on scroll. Hidden on desktop (links are inline). */
.gknav-sheet { border-top: 1px solid #E8E8E5; background: rgba(255, 255, 255, 0.97); box-shadow: 0 14px 26px rgba(31, 22, 46, 0.10); }
.gknav-sheet[hidden] { display: none; }
.gknav-sheet nav { max-width: 1120px; margin: 0 auto; padding: 6px 24px 14px; display: flex; flex-direction: column; }
.gknav-sheet a { padding: 13px 4px; font-size: 16px; font-weight: 600; color: #1A1A1A; text-decoration: none; border-bottom: 1px solid #F1ECE5; }
.gknav-sheet a:last-child { border-bottom: none; }
.gknav-sheet-shop {
  margin-top: 10px; background: #BC5C86; color: #fff !important;
  border-radius: 999px; text-align: center; border-bottom: none !important;
  box-shadow: 0 8px 20px rgba(188, 92, 134, 0.26);
}

@media (max-width: 820px) {
  .gknav-bar { padding: 10px 16px; }
  .gknav-links { display: none; }
  .gknav-end { gap: 10px; }
  .gknav-burger { display: inline-flex; }
  .gknav-shop { padding: 8px 15px; font-size: 14px; }
  .gknav-back { padding: 9px 16px; }
  .gknav-brand img { height: 30px; }
}