/*
 * SSS Navigation System — CSS
 *
 * Originally injected via WPCode snippets. Now owned by the child theme.
 * This file is the canonical source. After verifying it works, disable
 * the WPCode nav snippets.
 */

/* ── Hide the parent SKRN Progression header on ALL pages to prevent
   double navigation. The child theme's sss_render_nav() emits the nav
   via wp_body_open, which fires on both Canvas and non-Canvas templates. ── */
#jesuspended-header-pro,
.progression-studios-header-wrap,
header.progression-studios-site-header,
header#jesuspended-header-pro,
header#jeuspended-header-pro,
.progression-studios-transparent-header {
  display: none !important;
}

/* Hide the WPCode-injected nav if it's still active alongside the theme's nav.
   The theme version has data-sss-theme="child"; the WPCode version doesn't. */
nav.sss-nav:not([data-sss-theme]) {
  display: none !important;
}

/* Focus */
.sss-nav *:focus { outline: none; }
.sss-nav *:focus-visible,
.sss-drawer *:focus-visible {
  outline: 3px solid #5ba8a0;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Reset */
.sss-nav *, .sss-nav *::before, .sss-nav *::after,
.sss-drawer *, .sss-drawer *::before, .sss-drawer *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* ── TOP NAV ──
   WCAG AA targets:
   - Body text ≥ 14px (we use 15px fluid up to 17px).
   - Contrast ≥ 4.5:1 for normal text — #ffffff @ 0.88 on #1a2535 ≈ 15.6:1 (pass),
     white @ 0.72 on #1a2535 ≈ 10.0:1 (pass for non-focus hints).
   - Tap targets ≥ 44×44px.
   - Focus ring visible, non-color-only (3px + outset offset).
*/
.sss-nav {
  position: sticky; top: 0; z-index: 1000;
  background: #1a2535;
  box-shadow: 0 2px 16px rgba(0,0,0,.22);
  font-family: 'DM Sans', system-ui, sans-serif;
}
.sss-nav-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 0 1.5rem; min-height: 64px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 1.25rem;
}
.sss-nav-logo {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; flex-shrink: 0;
  min-height: 44px;
}
.sss-nav-logo img {
  width: auto;
  height: 44px;
  max-height: 44px;
  max-width: 220px;
  display: block;
  object-fit: contain;
}
.sss-nav-logo-text {
  font-family: 'Playfair Display', Georgia, serif;
  color: #fff; font-size: 1.05rem; font-weight: 500;
  letter-spacing: 0.01em;
}
.sss-nav-links {
  display: flex; align-items: center; gap: .15rem;
  list-style: none; flex: 1; justify-content: flex-end;
}
.sss-nav-links > li { position: relative; }
.sss-nav-links > li > a,
.sss-nav-links > li > button.sss-nav-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); /* 15 → 17px */
  font-weight: 500;
  color: rgba(255,255,255,.88);
  text-decoration: none; padding: .55rem .9rem;
  border-radius: 6px; border: none; background: none;
  cursor: pointer; min-height: 44px; white-space: nowrap;
  transition: color .18s, background .18s;
  font-family: inherit; line-height: 1.2;
}
.sss-nav-links > li > a:hover,
.sss-nav-links > li > button.sss-nav-btn:hover {
  color: #fff; background: rgba(255,255,255,.1);
}
.sss-nav-links > li > a.sss-active,
.sss-nav-links > li > button.sss-nav-btn.sss-active,
.sss-nav-links > li > a[aria-current="page"] {
  color: #fff; background: rgba(255,255,255,.14);
}
.sss-nav-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5ba8a0; display: inline-block; flex-shrink: 0;
  animation: sss-breathe 2.5s ease-in-out infinite;
}
@keyframes sss-breathe { 0%,100%{opacity:1;} 50%{opacity:.5;} }
@media (prefers-reduced-motion: reduce) {
  .sss-nav-dot { animation: none; }
}
.sss-chevron {
  font-size: 0.75rem; color: rgba(255,255,255,.75);
  line-height: 1; transition: transform .2s;
}
.sss-nav-btn[aria-expanded="true"] .sss-chevron { transform: rotate(180deg); }
.sss-nav-cta {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.75rem !important; letter-spacing: .1em !important;
  text-transform: uppercase; color: #d6e7f0 !important;
  border: 1px solid rgba(214,231,240,.55) !important;
  border-radius: 6px !important; padding: .5rem 1rem !important;
  min-height: 44px;
}
.sss-nav-cta:hover { background: rgba(214,231,240,.18) !important; color: #fff !important; }

/* More dropdown — vertical stacking */
.sss-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 160px; background: #1e2d3d;
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35); padding: .5rem 0;
  display: none; flex-direction: column; z-index: 100;
}
.sss-dropdown.open {
  display: flex; flex-direction: column;
  animation: sss-drop .18s ease;
}
@keyframes sss-drop {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.sss-dropdown a {
  display: flex; align-items: center; padding: .65rem 1.1rem;
  min-height: 44px; text-decoration: none;
  color: #e0e8f0; font-size: 13px; width: 100%;
  font-family: 'DM Sans', system-ui, sans-serif;
  transition: background .15s, color .15s;
}
.sss-dropdown a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sss-dropdown a.sss-active { color: #fff; background: rgba(255,255,255,.08); }

/* Hamburger */
.sss-nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: .65rem .5rem; border-radius: 4px;
  transition: background .18s;
  min-height: 44px; min-width: 44px;
  justify-content: center; align-items: center;
}
.sss-nav-hamburger:hover { background: rgba(255,255,255,.08); }
.sss-nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,.8); border-radius: 2px;
  transition: transform .22s, opacity .22s;
}
.sss-nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sss-nav-hamburger.open span:nth-child(2) { opacity: 0; }
.sss-nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) {
  .sss-nav-links { display: none; }
  .sss-nav-hamburger { display: flex; }
}

/* ── DRAWER ── */
.sss-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 1099;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.sss-drawer-backdrop.open { opacity: 1; pointer-events: all; }
.sss-drawer {
  position: fixed; top: 0; left: 0;
  width: 340px; max-width: 90vw; height: 100vh;
  background: #131e2b; z-index: 1100;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.sss-drawer.open { transform: translateX(0); }
.sss-drawer-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0; gap: 1rem;
}
.sss-drawer-series-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: #7a94a8; margin-bottom: .2rem;
}
.sss-drawer-series-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem; font-weight: 500; color: #fff; line-height: 1.2;
}
.sss-drawer-series-title em { font-style: italic; color: #8ab0c8; }
.sss-drawer-close {
  background: none; border: none; cursor: pointer;
  color: #a8bece; font-size: 20px; line-height: 1;
  padding: .35rem; border-radius: 4px; flex-shrink: 0;
  transition: color .15s, background .15s;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.sss-drawer-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.sss-drawer-scroll {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
}
.sss-drawer-scroll::-webkit-scrollbar { width: 4px; }
.sss-drawer-scroll::-webkit-scrollbar-track { background: transparent; }
.sss-drawer-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 2px; }

/* Season accordion */
.sss-season { border-bottom: 1px solid rgba(255,255,255,.07); }
.sss-season-trigger {
  display: flex; align-items: center; width: 100%;
  background: none; border: none; cursor: pointer;
  padding: .9rem 1.25rem; gap: .75rem;
  text-align: left; font-family: inherit;
  transition: background .15s; min-height: 48px;
}
.sss-season-trigger:hover { background: rgba(255,255,255,.05); }
.sss-season-name {
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: #a8bece; flex: 1;
}
.sss-season-count {
  font-family: 'DM Mono', monospace;
  font-size: 9px; color: #7a94a8; letter-spacing: .06em;
}
.sss-season-chevron {
  font-size: 10px; color: #7a94a8;
  transition: transform .22s; flex-shrink: 0;
}
.sss-season.open .sss-season-chevron { transform: rotate(180deg); }
.sss-ep-list { display: none; padding: .25rem 0 .5rem; }
.sss-season.open .sss-ep-list { display: block; }

/* Episode row */
.sss-ep {
  display: flex; align-items: center; gap: .85rem;
  padding: .6rem 1.25rem .6rem 1.1rem;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s;
  min-height: 58px;
}
.sss-ep:hover { background: rgba(255,255,255,.05); }
.sss-ep.sss-active { background: rgba(91,168,160,.1); border-left-color: #5ba8a0; }
.sss-ep-thumb {
  width: 64px; height: 42px; object-fit: cover;
  border-radius: 3px; flex-shrink: 0; opacity: .85;
  background: rgba(255,255,255,.05);
}
.sss-ep-thumb-placeholder {
  width: 64px; height: 42px; border-radius: 3px; flex-shrink: 0;
  background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: rgba(255,255,255,.2);
}
.sss-ep-info { flex: 1; min-width: 0; }
.sss-ep-num {
  font-family: 'DM Mono', monospace;
  font-size: 8px; letter-spacing: .15em;
  text-transform: uppercase; color: #7a94a8; margin-bottom: .18rem;
}
.sss-ep-title {
  font-size: 13px; color: #e0e8f0;
  line-height: 1.35; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sss-ep.sss-active .sss-ep-title { color: #fff; }
.sss-ep-soon {
  display: flex; align-items: center; gap: .85rem;
  padding: .6rem 1.25rem .6rem 1.1rem; min-height: 58px; cursor: default;
}
.sss-ep-soon .sss-ep-num  { color: #7a94a8; }
.sss-ep-soon .sss-ep-title { color: #a8bece; font-style: italic; }
.sss-ep-soon-badge {
  font-family: 'DM Mono', monospace;
  font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
  color: #a8bece; border: 1px solid rgba(168,190,206,.3);
  border-radius: 2px; padding: 1px 5px; flex-shrink: 0;
}

/* Site nav at bottom of each drawer */
.sss-drawer-sitenav {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: .5rem 0 .2rem; flex-shrink: 0;
}
.sss-drawer-sitenav-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: #7a94a8; padding: .4rem 1.25rem .3rem; display: block;
}
.sss-drawer-sitenav a {
  display: flex; align-items: center;
  padding: .45rem 1.25rem; min-height: 40px;
  text-decoration: none; color: #a8bece; font-size: 13px;
  transition: color .15s, background .15s;
}
.sss-drawer-sitenav a:hover { color: #fff; background: rgba(255,255,255,.04); }
.sss-drawer-sitenav a.sss-active { color: #e0e8f0; }
.sss-drawer-sitenav-cta {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important; letter-spacing: .12em !important;
  text-transform: uppercase; color: #8ab0c8 !important; margin-top: .1rem;
}
.sss-drawer-sitenav-cta:hover { color: #fff !important; }
.sss-drawer-footer {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: .7rem 1.25rem; flex-shrink: 0;
}
.sss-drawer-footer a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: #8ab0c8; text-decoration: none; transition: color .15s;
}
.sss-drawer-footer a:hover { color: #fff; }

/* Subgroup label (small heading above indented items in Guides / Import Economy drawers) */
.sss-subgroup-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: #a8bece;
  padding: .7rem 1.25rem .3rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.sss-subgroup-label:first-child { border-top: none; }
.sss-ep--indented { padding-left: 1.8rem; }

/* Guide badge — shown on episodes that are also tagged as guides in series drawers (Dais, Map) */
.sss-ep--guide { padding-left: 1.8rem; border-left-color: #5ba8a0; }
.sss-ep-badge--guide {
  font-family: 'DM Mono', monospace;
  font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  color: #5ba8a0;
  border: 1px solid rgba(91,168,160,.35);
  border-radius: 2px; padding: 1px 5px;
  display: inline-block; margin-bottom: .15rem;
}

@media (max-width: 860px) { .sss-drawer { width: 100vw; max-width: 100vw; } }
@media (prefers-reduced-motion: reduce) {
  .sss-nav-dot { animation: none; }
  .sss-drawer, .sss-drawer-backdrop { transition: none; }
  .sss-nav-hamburger span, .sss-season-chevron, .sss-chevron { transition: none; }
}