/* ============================================================
   Stephen Hunt's Worlds of Wonder — shared stylesheet
   Design tokens & layout faithfully reproduce the approved
   Claude.ai design prototype. Most per-element styling lives
   inline in the HTML (as in the prototype); this file holds
   global rules, hover behaviour and responsive logic.
   ============================================================ */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Mulish',system-ui,-apple-system,sans-serif;
  color:#211b3b;
  background:#f9f4ea;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; }
a{ color:inherit; }
a.wow-card-link{ text-decoration:none; color:inherit; display:block; }

/* ---- mobile nav toggle ---- */
.wow-burger{ display:none; }
@media (max-width:880px){
  .wow-desknav{ display:none !important; }
  .wow-burger{ display:inline-flex !important; }
}

/* ============================================================
   Hover utilities — replace the prototype's custom
   `style-hover` attribute. Per-element values are supplied
   through CSS custom properties set inline, so a single class
   covers many differently-coloured elements.
   ============================================================ */

/* lift + shadow (cards) */
.t-lift{ transition:transform .15s ease, box-shadow .15s ease; }
.t-lift:hover{
  transform:translateY(var(--lift,-4px));
  box-shadow:var(--lshadow,0 14px 30px rgba(40,30,10,.14));
}

/* background change (buttons) */
.t-bg{ transition:background .15s ease; }
.t-bg:hover{ background:var(--hbg) !important; }

/* colour change (text links, nav, breadcrumbs) */
.t-col{ transition:color .15s ease; cursor:pointer; }
.t-col:hover{ color:var(--hcol,#4b2fa0) !important; }

/* shadow only (subtle cards) */
.t-shadow{ transition:box-shadow .15s ease; }
.t-shadow:hover{ box-shadow:var(--hshadow,0 8px 22px rgba(40,30,10,.10)); }

/* border + colour change (outline buttons / pills) */
.t-border{ transition:border-color .15s ease, color .15s ease, background .15s ease; }
.t-border:hover{
  border-color:var(--hborder) !important;
  color:var(--hcol2) !important;
  background:var(--hbg2) !important;
}

/* ============================================================
   FAQ accordion (progressive-enhancement via <details>)
   ============================================================ */
.faq-item{ background:#fff; border:1px solid #ece2cf; border-radius:12px; overflow:hidden; }
.faq-item > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-q{ font-size:16px; font-weight:800; color:#211b3b; }
.faq-toggle{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:17px;
}
.faq-toggle::before{ content:'+'; }
.faq-item[open] .faq-toggle::before{ content:'\2013'; }
.faq-a{ padding:0 20px 18px; font-size:14.5px; line-height:1.6; color:#5d5570; }

/* spoiler / details box on book pages */
.spoiler > summary{ list-style:none; cursor:pointer; }
.spoiler > summary::-webkit-details-marker{ display:none; }
.spoiler-label::after{ content:'Reveal'; }
.spoiler[open] .spoiler-label::after{ content:'Hide'; }

/* generic focus visibility for keyboard users */
a:focus-visible, summary:focus-visible, button:focus-visible{
  outline:2px solid #4b2fa0; outline-offset:2px; border-radius:4px;
}