/*
Theme Name: The Bill Walton Show
Theme URI: https://thebillwaltonshow.com
Author: Ewan Cullen
Description: Custom classic theme for The Bill Walton Show, converted from a Claude Design project. Episode listings are wired to the Pods "Episodes" content type. The full design system lives in /assets/css/styles.css (enqueued separately).
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: bws
*/

/* The design CSS is in /assets/css/styles.css and is enqueued in functions.php.
   Add small theme-side overrides below if you need them. */

/* ============================================================
   Theme overrides — loaded after the Claude Design export,
   so these survive future assets/css/styles.css re-exports.
   ============================================================ */

/* 1) Mobile menu: while open, remove .nav's backdrop-filter so it stops acting
      as the containing block for the fixed panel — that was collapsing the menu
      behind the page content after scrolling (z-index was never the cause). */
@media (max-width:980px){
  .nav{ z-index:9990; }
  .nav-links{ z-index:9995; }
  .nav-toggle{ z-index:9996; }
  .nav-close{ z-index:9997; }
  body.nav-open .nav,
  body.nav-open .nav.scrolled{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:var(--navy) !important;
  }
}

/* 2) Page heroes: the shared banner is 16:9 but the design box is 3:1, so
      object-fit:cover was cropping the sides. When the hero holds a real <img>
      (not the image-slot placeholder), show it at its natural ratio like the
      homepage does — full image, no crop, no overflow. image-slot heroes keep
      the fixed 3:1 box. */
.page-hero-media:has(> img){ aspect-ratio:auto; min-height:0; }
.page-hero-media > img{ position:static; display:block; width:100%; height:auto; }

/* 3) Bookshelf: covers fill their frame. On phones, stack single-column but cap
      the width so a full-bleed 2:3 cover doesn't become enormous. */
.book .cover a{ display:block; width:100%; height:100%; }
.book .cover img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){
  .shelf-grid{ grid-template-columns:1fr; }
  .shelf-grid .book{ max-width:230px; margin-inline:auto; }
}

/* 4) Long link labels (e.g. a full book title used as a guest's book link) must
      wrap onto new lines instead of overflowing sideways. .tlink was set to
      white-space:nowrap in the design, which broke on long dynamic labels. */
.tlink{ white-space:normal; overflow-wrap:anywhere; }
.gp-links{ min-width:0; }
.gp-links .tlink{ min-width:0; max-width:100%; text-align:left; }
a{ overflow-wrap:break-word; }

/* 5) Homepage navbar: the nav is transparent at the top of every page; inner
      pages read blue because the hero sits right under it, but the homepage
      .hero has a dark top strip, so the nav looked black until scrolling.
      Give the homepage nav the same blue on load. */
body.home .nav{
  background:rgba(46,95,167,.86);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--hair-on-dark);
}

/* 6) Navbar live search results panel (full-width dropdown under the nav) */
.nav-search-results{
  position:absolute; top:100%; left:0; width:100%;
  background:#fff; border-top:1px solid var(--hair-on-light);
  box-shadow:0 26px 50px -26px rgba(0,0,0,.55);
  max-height:min(72vh,560px); overflow-y:auto; z-index:1; padding:6px 0;
}
.nav-search-results[hidden]{ display:none; }
.nsr-row{
  display:flex; align-items:center; gap:16px;
  padding:12px clamp(16px,4vw,48px);
  border-bottom:1px solid var(--hair-on-light); color:var(--charcoal);
}
.nsr-row:last-of-type{ border-bottom:0; }
.nsr-row:hover,.nsr-row:focus{ background:var(--parchment-2); }
.nsr-thumb{ flex:none; width:104px; aspect-ratio:16/9; background:var(--navy);
  border-radius:2px; overflow:hidden; }
.nsr-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.nsr-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.nsr-title{ font-family:var(--body); font-weight:600; line-height:1.25;
  color:var(--navy-deep); overflow-wrap:anywhere; }
.nsr-guest{ font-size:.85rem; color:var(--muted-on-light); }
.nsr-no{ flex:none; font-family:var(--accent); font-size:.74rem; font-weight:600;
  letter-spacing:.14em; color:var(--gold-deep); }
.nsr-status{ padding:18px clamp(16px,4vw,48px); color:var(--muted-on-light); }
.nsr-all{ display:block; padding:14px clamp(16px,4vw,48px);
  font-family:var(--accent); text-transform:uppercase; letter-spacing:.18em;
  font-size:.76rem; font-weight:600; color:var(--burgundy);
  border-top:1px solid var(--hair-on-light); background:var(--parchment); }
.nsr-all:hover{ background:var(--parchment-2); }
@media (max-width:640px){
  .nsr-thumb{ width:76px; }
}

/* 7) Subscribe page opens on a light (cream) section, so the transparent nav
      is invisible on load until scrolling adds .scrolled. Give it the same
      blue-on-load background as the homepage. */
.page-template-template-subscribe .nav{
  background:rgba(46,95,167,.86);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--hair-on-dark);
}

/* 8) Bookshelf group headings — the two top-level sections on the Bookshelf
      page ("New & Noteworthy recommendations" and "The Foundational Principal
      Library"). Larger than the per-shelf titles, with a gold underline. */
.bk-group{ margin-top:clamp(56px,7vw,96px); }
.bk-group:first-of-type{ margin-top:clamp(28px,3vw,40px); }
.bk-group[hidden]{ display:none; }
.bk-group-head{ border-bottom:2px solid var(--gold); padding-bottom:.5em; margin-bottom:.2em; }
.bk-group-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem,4vw,3rem); letter-spacing:.01em; color:var(--navy); margin:0;
}
/* A shelf sitting straight under a group heading needs less top gap. */
.bk-group .bk-shelf:first-of-type{ margin-top:clamp(28px,3vw,40px); }
/* Foundational shelf has no sub-title of its own, so tighten its grid gap. */
#foundational-library .bk-grid{ margin-top:clamp(24px,2.8vw,36px); }

/* 9) Sarah's Gallery — masonry of mixed-ratio photos (portrait/landscape/
      square) kept at natural ratio, no cropping. CSS columns balance them;
      each tile opens the shared lightbox. */
.sg-grid{ columns:4 240px; column-gap:clamp(12px,1.6vw,20px); }
.sg-item{
  display:block; width:100%; margin:0 0 clamp(12px,1.6vw,20px);
  padding:0; border:0; background:none; cursor:pointer; break-inside:avoid;
  border-radius:2px; overflow:hidden; line-height:0;
  box-shadow:0 14px 34px -24px rgba(29,47,70,.5);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.sg-item img{ width:100%; height:auto; display:block; }
.sg-item:hover,.sg-item:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 26px 48px -26px rgba(29,47,70,.6);
  outline:none;
}
.sg-item:focus-visible{ box-shadow:0 0 0 3px var(--gold), 0 26px 48px -26px rgba(29,47,70,.6); }
@media (max-width:980px){ .sg-grid{ columns:3 200px; } }
@media (max-width:640px){ .sg-grid{ columns:2 150px; } }
@media (max-width:420px){ .sg-grid{ columns:1; } }