/* Setu Yoga Studio: shared site navigation and footer (Gate 2).

   One stylesheet for the two shared structures that used to be re-implemented
   (differently) on every template:
     .site-nav     primary navigation strip added under the page's own header
     .site-footer  the single shared footer
   Homepage and area-page navigation (#nav / .nav-links) keeps its existing
   styling; only the link spacing is tightened so the extra items fit.

   Colours come from the page's own custom properties, with fallbacks so the
   pages that do not define them (areas hub) still render sensibly.
   Structural styling only. Visual refinement belongs to the design gate. */

/* ── Primary navigation strip ───────────────────────────────────────── */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 6px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border, #D8D4CC);
  font-family: var(--sans, 'DM Sans', system-ui, sans-serif);
  font-size: 13px;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--muted, #504D4A);
  text-decoration: none;
  letter-spacing: .02em;
  transition: color .2s;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--gold, #8C6528); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.site-nav .site-nav-cta {
  border: 1px solid var(--gold, #8C6528);
  color: var(--gold, #8C6528);
  border-radius: 2px;
  margin-left: 6px;
}
.site-nav .site-nav-cta:hover { background: var(--gold, #8C6528); color: var(--bg, #F5F2EC); }
.site-nav a:focus-visible,
.site-footer a:focus-visible { outline: 2px solid var(--gold, #8C6528); outline-offset: 2px; }

/* Phones: one scrollable row instead of a tall wrapped block. */
@media (max-width: 640px) {
  .site-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 8px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: 0 0 auto; white-space: nowrap; }
}

/* ── Homepage / area-page fixed nav: fit the extra items ────────────── */
@media (max-width: 1360px) {
  #nav .nav-links { gap: 18px; }
  #nav .nav-link { font-size: 11px; letter-spacing: .1em; }
}
@media (max-width: 1180px) {
  #nav .nav-links { gap: 12px; }
  #nav .nav-link { letter-spacing: .06em; }
}

/* ── Shared footer ──────────────────────────────────────────────────── */
.site-footer {
  padding: 36px 24px 24px;
  border-top: 1px solid var(--border, #D8D4CC);
  font-family: var(--sans, 'DM Sans', system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #504D4A);
  text-align: left;
}
.site-footer a { color: var(--muted, #504D4A); text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--gold, #8C6528); text-decoration: underline; }
.sf-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.sf-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold, #8C6528);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer li a { display: inline-block; padding: 4px 0; }
.sf-related {
  max-width: 1100px;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--border, #D8D4CC);
}
.sf-related ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.sf-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: 1100px;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--border, #D8D4CC);
}
.sf-legal ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.sf-copy {
  max-width: 1100px;
  margin: 12px auto 0;
  font-size: 12px;
  opacity: .85;
}
@media (max-width: 480px) {
  .site-footer { padding: 28px 16px 20px; }
  .sf-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
}

/* ── Mobile navigation (Gate 3) ─────────────────────────────────────────
   Behaviour lives in js/theme.js. Without JavaScript none of these controls
   exist and the navigation above is unchanged. */

/* Menu icon: three bars drawn in CSS, turning into an X when open. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
[aria-expanded="true"] > .nav-toggle-bars { background: transparent; }
[aria-expanded="true"] > .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] > .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Fixed header (homepage + area pages) */
.nav-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  background: none;
  border: 1px solid rgba(128, 120, 112, .4);
  border-radius: 50%;
  flex-shrink: 0;
}
#nav.lit .nav-menu-toggle { color: var(--lit); border-color: rgba(237, 233, 225, .25); }
.nav-menu-toggle:focus-visible,
#nav .nav-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav-links .nav-link-cta { display: none; }
html.nav-locked, html.nav-locked body { overflow: hidden; }

@media (max-width: 960px) {
  #nav .nav-menu-toggle { display: inline-flex; }
  #nav.nav-open,
  #nav.nav-open.scrolled,
  #nav.nav-open.lit,
  #nav.nav-open.lit.scrolled {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 var(--border);
  }
  #nav.nav-open .nav-menu-toggle { color: var(--text); border-color: var(--border); }
  #nav.nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--nav-h, 116px));
    height: calc(100dvh - var(--nav-h, 116px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 0 24px;
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
  #nav.nav-open .nav-links .nav-link,
  #nav.nav-open.lit .nav-links .nav-link {
    color: var(--text);
    font-size: 14px;
    min-height: 52px;
    padding: 0 28px;
    border-bottom: 1px solid var(--border);
  }
  #nav.nav-open .nav-links .nav-link:hover { color: var(--gold); }
  #nav .nav-links .nav-link::after { display: none; }
}
@media (max-width: 560px) {
  #nav .nav-right .nav-cta { display: none; }
  #nav.nav-open .nav-links .nav-link-cta {
    display: flex;
    color: var(--gold);
    border-bottom: 0;
  }
}

/* Strip header (all other pages) */
.site-nav-toggle { display: none; }
.site-nav-links { display: contents; }

@media (max-width: 640px) {
  .site-nav.is-enhanced {
    position: sticky;
    top: 0;
    z-index: 50;
    display: block;
    padding: 0;
    overflow: visible;
    background: var(--bg, #F5F2EC);
  }
  .site-nav.is-enhanced .site-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    cursor: pointer;
    font: inherit;
    letter-spacing: .04em;
    color: var(--text, #100F18);
    background: none;
    border: 0;
  }
  .site-nav.is-enhanced .site-nav-toggle:focus-visible { outline: 2px solid var(--gold, #8C6528); outline-offset: -2px; }
  .site-nav.is-enhanced .site-nav-links { display: none; }
  /* Overlays the page (no layout shift, no scroll jump) */
  .site-nav.is-enhanced.is-open .site-nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg, #F5F2EC);
    border-top: 1px solid var(--border, #D8D4CC);
    border-bottom: 1px solid var(--border, #D8D4CC);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
  }
  .site-nav.is-enhanced .site-nav-links a {
    min-height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border, #D8D4CC);
  }
  .site-nav.is-enhanced .site-nav-links .site-nav-cta {
    justify-content: center;
    margin: 12px 16px;
    border-bottom: 1px solid var(--gold, #8C6528);
  }
}

/* The homepage map embed carries width="600"; without a cap it is wider than a
   phone screen, which widens the whole page (and pushes the fixed header's
   controls off-screen). */
#s6 iframe { max-width: 100%; }

/* Homepage footer partner/social row: allow wrapping so it cannot exceed a 320px screen. */
.f-social { flex-wrap: wrap; row-gap: 8px; }