/* AudiobookStories — fully custom header, mobile nav, and footer. */

.abs-skip-link {
  position: fixed;
  top: -100px;
  left: var(--abs-space-4);
  z-index: 10000;
  background: var(--abs-accent);
  color: var(--abs-on-accent);
  padding: var(--abs-space-2) var(--abs-space-4);
  border-radius: var(--abs-radius-sm);
}

.abs-skip-link:focus {
  position: fixed;
  top: var(--abs-space-4);
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.abs-header {
  background: var(--abs-surface);
  border-bottom: 1px solid var(--abs-border);
  position: sticky;
  top: 0;
  z-index: 500;
}

.abs-header-inner {
  max-width: var(--abs-page-width);
  margin: 0 auto;
  padding: var(--abs-space-3) var(--abs-space-4);
  display: flex;
  align-items: center;
  gap: var(--abs-space-4);
}

.abs-logo {
  display: flex;
  align-items: center;
  gap: var(--abs-space-2);
  text-decoration: none;
  flex-shrink: 0;
}

.abs-logo img,
.abs-logo svg { display: block; height: 34px; width: auto; flex-shrink: 0; }

.abs-logo-text,
.abs-wordmark {
  font-family: var(--abs-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--abs-ink);
  white-space: nowrap;
}

.abs-wordmark-accent { color: var(--abs-gold-dark); }

.abs-logo-mark { color: var(--abs-accent); }
.abs-logo-mark .abs-logo-wave { stroke: var(--abs-gold); }

.abs-primary-nav {
  flex: 1 1 auto;
}

.abs-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--abs-space-6);
  margin: 0;
  padding: 0;
}

.abs-menu a {
  display: inline-block;
  color: var(--abs-ink);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding: var(--abs-space-2) 0;
}

.abs-menu a:hover,
.abs-menu .current-menu-item > a,
.abs-menu .current_page_item > a {
  color: var(--abs-accent);
}

.abs-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.abs-header-actions {
  display: flex;
  align-items: center;
  gap: var(--abs-space-3);
  flex-shrink: 0;
}

.abs-menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--abs-border);
  border-radius: var(--abs-radius-sm);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.abs-menu-toggle-bars,
.abs-menu-toggle-bars::before,
.abs-menu-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--abs-ink);
  transition: transform .2s ease, opacity .2s ease;
}

.abs-menu-toggle-bars::before,
.abs-menu-toggle-bars::after {
  content: "";
  position: absolute;
}

.abs-menu-toggle-bars::before { transform: translateY(-6px); }
.abs-menu-toggle-bars::after { transform: translateY(6px); }

.abs-nav-open .abs-menu-toggle-bars { background: transparent; }
.abs-nav-open .abs-menu-toggle-bars::before { transform: rotate(45deg); }
.abs-nav-open .abs-menu-toggle-bars::after { transform: rotate(-45deg); }

/* ── Mobile breakpoint ───────────────────────────────────────────────────
   1100px rather than the more usual ~900px: with 6 real nav categories
   plus the logo and header CTA, the row was still cramped with almost no
   breathing room down to ~1000px on real testing — better to hand off to
   the clean hamburger panel earlier than to ship a squeezed desktop row. */

@media (max-width: 1100px) {
  .abs-menu-toggle { display: flex; }

  .abs-primary-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--abs-surface);
    padding: 5.5rem var(--abs-space-6) var(--abs-space-6);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    overflow-y: auto;
    z-index: 400;
  }

  body.abs-nav-open .abs-primary-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  body.abs-nav-open { overflow: hidden; }

  .abs-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--abs-space-2);
  }

  .abs-menu a {
    font-size: 1.15rem;
    padding: var(--abs-space-3) 0;
    width: 100%;
    border-bottom: 1px solid var(--abs-border);
  }
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.abs-footer {
  background: var(--abs-surface-alt);
  border-top: 1px solid var(--abs-border);
  margin-top: var(--abs-space-16);
}

.abs-footer-inner {
  max-width: var(--abs-page-width);
  margin: 0 auto;
  padding: var(--abs-space-12) var(--abs-space-4) var(--abs-space-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abs-space-8);
}

@media (min-width: 700px) {
  .abs-footer-inner { grid-template-columns: 1.4fr 1fr 1fr; }
}

.abs-footer-brand .abs-logo img { height: 30px; }
.abs-footer-tagline {
  color: var(--abs-ink-soft);
  font-size: 0.9rem;
  margin-top: var(--abs-space-3);
  max-width: 26rem;
}

.abs-footer-heading {
  font-family: var(--abs-font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--abs-ink-muted);
  margin: 0 0 var(--abs-space-3);
}

.abs-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.abs-footer-nav li { margin-bottom: var(--abs-space-2); }

.abs-footer-nav a {
  color: var(--abs-ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
}

.abs-footer-nav a:hover { color: var(--abs-accent); }

.abs-footer-bottom {
  border-top: 1px solid var(--abs-border);
  padding: var(--abs-space-4);
  text-align: center;
}

.abs-footer-disclosure,
.abs-footer-copy {
  color: var(--abs-ink-muted);
  font-size: 0.8rem;
  margin: var(--abs-space-1) 0;
}

/* ── Back to top ─────────────────────────────────────────────────────────
   Position is set inline by back-to-top.js, not fixed here — the plugin's
   own #spai-sticky bar (fixed, bottom:16px, shown after 600px scroll) can
   appear on the same singular post pages, so the script measures its real
   height at runtime and sits above it. This block only supplies the
   default (no-sticky-bar) bottom offset plus everything else. */

.abs-back-to-top {
  position: fixed;
  right: var(--abs-space-4);
  bottom: var(--abs-space-4);
  z-index: 600;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--abs-accent);
  color: var(--abs-on-accent);
  border-radius: 999px;
  box-shadow: var(--abs-shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, bottom .15s ease;
}

.abs-back-to-top.abs-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.abs-back-to-top:hover { background: var(--abs-accent-dark); }

.abs-back-to-top svg { width: 18px; height: 18px; }