/* Shared navigation for the homepage and written guides. */
:root {
  --gold-dark:#b98216;
  --radius-small:8px;
  --radius-medium:12px;
  --radius-large:16px;
}
.site-header {
  position:sticky;
  top:0;
  z-index:10;
  padding-top:env(safe-area-inset-top);
  background:rgba(15,42,31,.94);
  border-bottom:1px solid rgba(255,255,255,.1);
  color:#fff;
  font:750 15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.site-header .wrap {
  width:min(1120px,100%);
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.site-header .brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font:900 24px/1 Georgia,"Times New Roman",serif;
  text-decoration:none;
}
.site-header .brand-mark {
  width:18px;
  height:18px;
  border-radius:50%;
  background:#b73535;
  box-shadow:0 0 0 2px #fff,5px 0 0 -1px #2f5f9f,10px 0 0 -2px #16a34a;
}
.header-links { display:flex; align-items:center; gap:14px; }
.nav-menu-links { display:flex; align-items:center; gap:inherit; }
.nav-menu-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:1px solid rgba(255,255,255,.25);
  border-radius:10px; background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
}
.nav-menu-toggle:hover, .nav-menu-toggle[aria-expanded="true"] { background:rgba(255,255,255,.14); }
.nav-menu-icon { width:18px; height:14px; border-top:2px solid; border-bottom:2px solid; position:relative; }
.nav-menu-icon::after { content:""; position:absolute; top:4px; left:0; width:100%; border-top:2px solid; }
.nav-menu-links[hidden], .nav-menu-toggle[hidden] { display:none; }
.nav-dropdown { position:relative; }
.nav-menu-links > a {
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 6px; margin:0 -6px; border-radius:8px;
}
.nav-dropdown-heading {
  display:flex; align-items:center; width:fit-content;
  padding-left:6px; margin-left:-6px; border-radius:8px;
}
.nav-dropdown-heading > a { display:inline-flex; align-items:center; min-height:44px; }
.nav-dropdown-toggle {
  min-width:44px; min-height:44px; padding:0; border:0; border-radius:8px;
  text-align:left; padding-left:6px;
  background:transparent; color:#fff; font:inherit; cursor:pointer;
}
.nav-menu-links > a:focus-visible,
.nav-dropdown-heading:has(:focus-visible),
.nav-submenu a:focus-visible { background:rgba(255,255,255,.12); }
@media (hover:hover) {
  .nav-menu-links > a:hover,
  .nav-dropdown-heading:hover,
  .nav-submenu a:hover { background:rgba(255,255,255,.12); }
  .nav-dropdown-heading:hover > a { color:#fff; }
}
.nav-dropdown-heading:has(:focus-visible) > a { color:#fff; }
.header-links :focus-visible { outline:3px solid #ffe070; outline-offset:3px; }
.nav-submenu {
  margin:0; padding:8px; list-style:none; border:1px solid rgba(255,255,255,.2);
  border-radius:12px; background:#0f2a1f; box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.nav-dropdown-enhanced .nav-submenu { position:absolute; top:100%; right:0; width:290px; max-width:calc(100vw - 48px); }
.nav-submenu[hidden], .nav-dropdown-toggle[hidden] { display:none; }
.nav-submenu a { display:block; padding:10px 12px; min-height:44px; white-space:normal; line-height:1.4; border-radius:6px; }
@media (min-width:900px) and (max-width:1199px) {
  .site-header .wrap { gap:12px; }
  .site-header .brand { font-size:20px; white-space:nowrap; }
  .header-links { gap:9px; font-size:13px; }
  .site-header .btn { padding:12px 14px; }
}
.header-links a { color:rgba(255,255,255,.86); text-decoration:none; }
.header-links a:hover, .header-links a:focus-visible { color:#fff; }
.header-links a[aria-current="page"] {
  position:relative; color:#fff;
}
.header-links a[aria-current="page"]::after {
  content:""; position:absolute; right:0; bottom:0; left:0;
  height:2px; background:#f4c542; pointer-events:none;
}
.site-header .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 20px;
  border:1px solid var(--gold-dark);
  border-radius:var(--radius-medium);
  background:linear-gradient(#f7d062,#e8b732);
  color:#563b00 !important;
  font:850 16px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 4px 12px rgba(0,0,0,.2);
}
.site-header .btn:hover, .site-header .btn:focus-visible { transform:translateY(-1px); }
@media (max-width:899px) {
  .nav-dropdown { flex-basis:100%; order:1; }
  .nav-dropdown-enhanced .nav-submenu { position:static; width:100%; max-width:100%; margin-top:4px; }
  .header-links { flex-wrap:wrap; gap:8px 14px; font-size:14px; }
  .nav-menu-links { flex-wrap:wrap; }
  .header-links a { white-space:nowrap; }
  .header-links .nav-submenu a { white-space:normal; }
  .site-header .btn { min-height:44px; padding:9px 14px; }
  .site-header .wrap { align-items:flex-start; flex-direction:column; padding-top:12px; padding-bottom:12px; gap:12px; }
}
@media (max-width:820px) {
  .header-links { width:100%; padding-bottom:2px; }
}
@media (max-width:899px) {
  .site-header:has(.nav-menu-enhanced) .wrap {
    position:relative; flex-direction:row; align-items:center;
    padding:10px 16px; gap:12px;
  }
  .site-header:has(.nav-menu-enhanced) .brand { font-size:18px; min-width:0; }
  .header-links.nav-menu-enhanced { width:auto; flex-shrink:0; flex-wrap:nowrap; gap:8px; padding:0; }
  .nav-menu-enhanced .btn { order:-1; }
  .nav-menu-enhanced .nav-menu-links {
    position:absolute; right:16px; top:calc(100% + 8px);
    width:min(320px,calc(100vw - 32px)); max-height:calc(100dvh - 100px - env(safe-area-inset-top));
    overflow-y:auto; overscroll-behavior:contain;
    flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:2px;
    padding:10px; border:1px solid rgba(255,255,255,.2); border-radius:12px;
    background:#0f2a1f; box-shadow:0 12px 28px rgba(0,0,0,.3);
  }
  .nav-menu-links > a { margin:0; padding:10px 12px; }
  .nav-menu-enhanced .nav-dropdown { order:0; flex-basis:auto; }
  .nav-menu-enhanced .nav-dropdown-heading { width:100%; margin:0; padding:0; }
  .nav-menu-enhanced .nav-dropdown-heading > a { flex:1; padding:10px 12px; }
  .nav-menu-enhanced .nav-dropdown-toggle { text-align:center; padding:0; }
  .nav-menu-enhanced .nav-submenu { box-shadow:none; background:rgba(255,255,255,.04); }
  .nav-menu-enhanced .nav-menu-links a[aria-current="page"] {
    background:rgba(244,197,66,.1); color:#ffe070; border-radius:8px;
  }
  .nav-menu-enhanced .nav-menu-links a[aria-current="page"]::after {
    top:10px; bottom:10px; left:0; right:auto;
    width:3px; height:auto; border-radius:3px;
  }
}
@media print { .site-header { display:none !important; } }

/* Shared footer for the homepage and written guides. */
.site-footer {
  padding:34px 0 calc(34px + env(safe-area-inset-bottom));
  background:#0c2117;
  color:rgba(255,255,255,.68);
  font-size:15px;
}
.footer-grid {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.site-footer a { color:#ffe070; text-decoration:none; }
.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}