/* ============================================================
   Project Timber — secondary / content pages (shared foundation)
   Hero + breadcrumb, the "still need help?" CTA band, and the shared
   typography they use. Loaded AFTER base.css on the content pages (FAQ,
   Delivery, Returns, Contact, Testimonials, Resources, Building a Base).
   Each page template adds its own middle sections + an optional per-page
   stylesheet (assets/css/<slug>.css).

   The header, footer and support modal are the shared PHP chrome
   (get_header()/get_footer()) — deliberately NOT restyled here so they stay
   identical across every page. Design tokens come from base.css :root.
   ============================================================ */

/* Shared typography (also defined in home.css for the homepage). */
.eyebrow{ font-weight:400; text-transform:uppercase; letter-spacing:.22em; font-size:.7rem; color:var(--txt-soft); }
.lead{ font-weight:300; font-size:1.14rem; color:var(--txt-soft); line-height:1.5; }
.fade{ background:linear-gradient(100deg,var(--charcoal) 35%,#9b96a1); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Section rhythm. Bare `section` (specificity 0,0,1) so per-page section
   classes like .jump / .faqcat can override the padding, exactly as in the
   mockups. Safe: secondary.css only loads on these template pages, and the
   chrome (header/footer/support) contains no <section>. */
section{ padding:56px 0; }

/* Hero + breadcrumb (template-parts/page-hero.php). */
.hero{ text-align:center; padding:26px 0 8px; }
.hero h1{ font-size:clamp(2.2rem,6vw,3.6rem); letter-spacing:-.03em; }
.hero .lead{ max-width:56ch; margin:16px auto 0; }
.crumb{ font-size:.8rem; color:var(--txt-soft); padding:16px 0 0; }
.crumb a{ text-decoration:none; }
.crumb .sep{ opacity:.4; margin:0 6px; }

/* Accordion (native <details>/<summary>) — shared by FAQ, Returns, Delivery…
   The category/section wrapper (.faqcat / .faq) is styled per page. */
.faq-item{ border-bottom:1px solid rgba(33,30,36,.12); }
.faq-item summary{ list-style:none; cursor:pointer; padding:18px 36px 18px 0; position:relative; font-weight:700; font-size:1.02rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:4px; top:15px; font-weight:300; font-size:1.5rem; color:var(--txt-soft); }
.faq-item[open] summary::after{ content:"\2013"; }
.faq-item .ans{ padding:0 36px 20px 0; font-weight:300; color:var(--txt-soft); line-height:1.65; font-size:.94rem; }
.faq-item .ans a{ color:var(--charcoal); font-weight:700; text-decoration:none; }
.faq-item .ans strong{ color:var(--ink); font-weight:700; }

/* "Still need help?" CTA band (template-parts/help-cta.php). */
.helpcta{ background:var(--ink); color:var(--on-dark); }
.helpcta .wrap{ text-align:center; }
.helpcta .eyebrow{ color:var(--on-dark-soft); }
.helpcta h2{ color:#fff; font-size:clamp(1.8rem,4.4vw,2.6rem); margin-top:8px; }
.helpcta p{ color:var(--on-dark-soft); font-weight:300; max-width:52ch; margin:14px auto 0; }
.helpcta .btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }

/* Pill buttons used in the CTA band (and reusable on secondary pages). */
.btn{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:700; font-size:.95rem; border-radius:999px; padding:14px 24px; transition:transform .2s var(--ease); }
.btn:active{ transform:scale(.97); }
.btn svg{ width:18px; height:18px; }
.btn-y{ background:var(--accent); color:var(--ink); }
.btn-o{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5); }
@media(hover:hover){ .btn-y:hover{ filter:brightness(.97); } .btn-o:hover{ background:rgba(255,255,255,.08); } }