/* Site-wide navigation: a compact link row on wide screens and a grouped
   slide-down panel on narrow ones. Loaded by every page so the menu is
   identical everywhere; the links themselves are static HTML in each page
   rather than injected, so crawlers see them without running JavaScript.

   Class names are deliberately prefixed `snav-` so this can coexist with
   the older per-page nav markup while pages are migrated over. */

.snav-links {
  display: flex; gap: 22px; align-items: center;
  color: var(--white, #fff); font-weight: 500; font-size: 15px;
}
.snav-links a { color: inherit; text-decoration: none; white-space: nowrap; }
.snav-links a:hover {
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.snav-links a:focus-visible { outline: 3px dashed var(--green, #8FBF5D); outline-offset: 4px; }

/* hamburger — visible at every width; the compact .snav-links row on
   wide screens only surfaces 5 quick links, so this stays the one way
   to reach the full menu (all guides, every destination, socials).
   Sized to match .theme-toggle (theme.css) so the header's control
   buttons read as one consistent set rather than mismatched sizes. */
.snav-btn {
  display: grid; background: var(--white, #fff);
  border: 2px solid var(--ink, #000); border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink, #000); flex-shrink: 0;
  place-items: center; cursor: pointer;
  color: var(--indigo, #2F5233); line-height: 1;
  width: 44px; height: 44px; font-size: 22px;
}
.snav-btn:focus-visible { outline: 3px dashed var(--green, #8FBF5D); outline-offset: 3px; }

/* slide-down panel */
.snav {
  position: fixed; inset: 0; z-index: 300;
  background: var(--indigo, #2F5233);
  transform: translateY(-102%);
  transition: transform .35s cubic-bezier(.34,1.2,.64,1);
  overflow-y: auto;
  /* Top padding matches .snav-close's own `top`, so the first row of
     content sits level with the close button rather than below it. */
  padding: 16px 22px 40px;
  -webkit-overflow-scrolling: touch;
}
.snav.open { transform: translateY(0); }
.snav[hidden] { display: none; }

.snav-close {
  position: absolute; top: 16px; inset-inline-start: 20px;
  background: var(--white, #fff); border: 2px solid var(--ink, #000);
  border-radius: 50%; box-shadow: 3px 3px 0 var(--ink, #000);
  width: 46px; height: 46px; font-size: 22px;
  color: var(--indigo, #2F5233); cursor: pointer; line-height: 1;
}
.snav-close:focus-visible { outline: 3px dashed var(--green, #8FBF5D); outline-offset: 3px; }

.snav-inner { max-width: 560px; margin: 0 auto; }

.snav-group { margin-bottom: 26px; }
.snav-label {
  font-size: 12.5px; font-weight: 900; letter-spacing: 2px;
  color: var(--green, #8FBF5D);
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 2px solid rgba(255,255,255,.22);
}
.snav-group a {
  display: block; color: var(--white, #fff); text-decoration: none;
  font-family: 'Rubik Bubbles', 'Rubik', sans-serif; font-weight: 400;
  font-size: 18px; padding: 10px 2px; letter-spacing: .2px;
}
.snav-group a:hover { text-decoration: underline; text-underline-offset: 4px; }
.snav-group a:focus-visible { outline: 3px dashed var(--green, #8FBF5D); outline-offset: 2px; }

/* destinations read as a compact grid rather than a long column */
.snav-cities { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }

.snav-cta {
  display: block; text-align: center; margin-top: 6px;
  background: var(--green, #8FBF5D); color: var(--navy, #1B331E);
  border: 2px solid var(--ink, #000); border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ink, #000);
  padding: 14px 22px; font-weight: 900; font-size: 18px; text-decoration: none;
}

/* social + contact icons, sharing the close button's row.
   min-height is the close button (46px) plus this row's own padding and
   border, so with border-box the icons centre on exactly the same
   horizontal line as the ✕ regardless of which icon size is in play. */
.snav-social {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 70px;
  margin-bottom: 28px; padding-bottom: 22px;
  border-bottom: 2px solid rgba(255,255,255,.22);
}
/* Until .snav-inner is narrow enough to be centred clear of it, the
   absolutely-positioned close button overlaps this row's inline-start
   edge — keep the icons out from under it. */
@media (max-width: 700px) {
  .snav-social { padding-inline-start: 48px; }
}
.snav-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.12); color: var(--white, #fff);
  transition: background .15s, transform .15s;
}
.snav-social a:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.snav-social a:focus-visible { outline: 3px dashed var(--green, #8FBF5D); outline-offset: 3px; }
.snav-social svg { width: 21px; height: 21px; fill: currentColor; }

@media (max-width: 820px) {
  .snav-links { display: none; }
}
@media (max-width: 420px) {
  .snav-btn { width: 40px; height: 40px; font-size: 19px; }
  .snav-group a { font-size: 16.5px; }
  /* Sized with real margin to spare so all 5 stay on one row even on
     the narrowest phones and at larger accessibility text/zoom sizes. */
  .snav-social { gap: 8px; }
  .snav-social a { width: 34px; height: 34px; }
  .snav-social svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .snav { transition: none; }
}