/* ===== UX/UI Fixes — Applied March 2026 =====
   Source: SEO & AI Discoverability Audit + UX/UI Repo Optimizer
   ================================================= */

/* ── Accessibility: Focus rings ─────────────────────────────────────
   Use a high-contrast cyan ring (WCAG 2.1 AA) instead of the faint
   purple default. Exclude nav dropdown button which has its own style. */
/* Canonical focus ring system — overrides site.css a:focus rules */
a:focus-visible,
button:focus-visible,
iframe:focus-visible {
  outline: 3px solid #00bcd4;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Touch targets: ensure 44px minimum on interactive elements ──────
   Scoped to CTA buttons, chip links, and hamburger only.
   Explicitly excludes nav items so the top bar stays compact. */
.button,
a.button,
.jh-hamburger {
  min-height: 44px;
  transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* ── Hover lift: CTA buttons ─────────────────────────────────────── */
a.button:hover,
.button:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  a.button:hover,
  .button:hover {
    transform: translateY(-2px);
  }
}

/* ── Card hover interaction ──────────────────────────────────────── */
.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  transition: box-shadow 0.18s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .card:hover {
    transform: translateY(-3px);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
}

/* ── Navigation: hamburger — mobile only ─────────────────────────────
   Confirm hamburger is visible ONLY on mobile (≤768px).
   On desktop it remains display:none from site.css.
   This rule ensures the brand-indigo style is applied when shown. */
.jh-hamburger {
  background: rgba(79,70,229,0.85);
  border: 1px solid rgba(79,70,229,0.6);
  color: #fff;
  min-width: 44px;
  border-radius: 12px;
}
.jh-hamburger:hover {
  background: rgba(67,56,202,0.95);
}

/* ── Active nav link indicator ───────────────────────────────────── */
.jh-topnav a[aria-current="page"] {
  border-bottom: 2px solid #93C5FD;
  font-weight: 700;
  padding-bottom: 5px;
}

/* ── Images: prevent layout shift, ensure responsive scaling ─────── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Podcast iframe: ensure it doesn't overflow on narrow screens ─── */
.podcast-spotify-iframe {
  width: 100%;
  max-width: 100%;
  min-height: 232px;
  border: none;
  border-radius: 12px;
}

/* ── Responsiveness: featured book card stacks on mobile ─────────── */
@media (max-width: 600px) {
  .featured-book {
    grid-template-columns: 1fr !important;
  }
  .featured-book img {
    max-width: 160px;
    margin: 0 auto;
  }
  .featured-copy {
    text-align: center !important;
  }
  .featured-copy > div {
    justify-content: center;
  }
}

/* ── Typography: improved readability on body text ───────────────── */
/* Scoped to prose/main containers only — avoids breaking flex/grid layouts */
.main p,
.wrap p,
.card p,
article p {
  max-width: 72ch;
}

/* ── Section label utility class (replaces repeated inline styles) ── */
.section-label {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #374151; /* Was #6B7280 — now passes WCAG AA contrast */
}

/* ── Layout: section spacing consistency ─────────────────────────── */
.main section + section {
  margin-top: 0;
}

/* ── Colour contrast: ensure chip links meet WCAG AA ─────────────── */
.chip {
  color: #111827;
}
.chip:hover {
  color: #111827;
  background: #F3F4F6;
  text-decoration: none;
}

/* ── Skip link visibility on focus (accessibility) ───────────────── */
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  background: #4F46E5;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  outline: none;
}


/* ── Desktop resources dropdown: easier tap/click targets ─────────── */
.jh-nav-dropdown__btn,
.jh-nav-dropdown__menu li a {
  min-height: 44px;
}

.jh-nav-dropdown__btn {
  padding: 10px 12px;
  font-size: 14px;
}

.jh-nav-dropdown__menu li a {
  padding: 11px 12px;
  font-size: 14px;
}


/* ── Embedded form resilience: visible fallback state ───────────────── */
.embed-wrap {
  position: relative;
  min-height: 220px;
}
.embed-wrap--pending::before {
  content: "Loading form…";
  display: block;
  margin: 0 0 12px;
  color: #374151;
  font-size: 0.95rem;
  font-weight: 600;
}
.embed-wrap--loaded::before {
  display: none;
}
.embed-wrap--timeout {
  outline: 1px dashed rgba(79,70,229,0.35);
  outline-offset: 10px;
}
.embed-fallback-note a {
  font-weight: 700;
}

/* ── Comparison tables: keep them usable on small screens ───────────── */
@media (max-width: 800px) {
  .compare-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .compare-table {
    min-width: 640px;
  }
}

/* ══ Homepage utility classes (replaces inline styles) ══════════════════════
   Added: March 2026 audit sprint — inline style removal from index.html
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero section */
.hero--home {
  padding-top: calc(var(--header-h, 72px) + 44px);
  padding-bottom: 48px;
  text-align: center;
}
.logo-plain--hero {
  border-radius: 50%;
  margin: 0 auto 22px;
  display: block;
}
.hero__title {
  font-size: 2.4rem;
  line-height: 1.15;
  color: #93C5FD;
  margin: 0 0 14px;
  letter-spacing: -0.3px;
}
.hero__lead {
  font-size: 1.1rem;
  color: #D1D5DB;
  max-width: 620px;
  margin: 0 auto 28px;
  line-height: 1.65;
}
.hero__accent {
  color: #93C5FD;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Featured section */
.section--featured {
  padding: 48px 0;
}
.section-label--centered {
  text-align: center;
  margin: 0 0 28px;
}
.featured-cover-img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #0D1420;
  display: block;
}
.featured-meta {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #374151;
  display: block;
  margin-bottom: 8px;
}
.featured-title {
  font-size: 1.25rem;
  line-height: 1.3;
  color: #111827;
  margin: 0 0 12px;
  font-weight: 800;
}
.featured-desc {
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.65;
  margin: 0 0 20px;
}
.featured-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.featured-footer-note {
  text-align: center;
  margin: 20px 0 0;
  font-size: 0.88rem;
  color: #6B7280;
}

/* Explore section */
.section--explore {
  padding: 0 0 56px;
}
.grid--explore {
  max-width: 900px;
  margin: 0 auto;
}
.card--explore {
  padding: 24px;
}
.card__emoji {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 12px;
}
.card__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 8px;
}
.card__desc {
  font-size: 0.92rem;
  color: #374151;
  margin: 0 0 18px;
  line-height: 1.6;
}

/* About section */
.section--about {
  background: #0D1420;
  padding: 52px 18px;
  text-align: center;
}
.wrap--narrow {
  max-width: 680px;
}
.about__title {
  color: #93C5FD;
  font-size: 1.55rem;
  margin: 0 0 16px;
}
.about__copy {
  color: #D1D5DB;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 24px;
}
.button--bio {
  font-size: 0.95rem;
  padding: 12px 22px;
  background: rgba(79,70,229,0.85);
}
.button--bio:hover {
  background: rgba(67,56,202,0.95) !important;
}

/* Topics section */
.section--topics {
  padding: 52px 0 60px;
}
.chips--topics {
  max-width: 760px;
  margin: 0 auto;
}