/* ============================================================
 * SpOki Gutenberg Component Library (2026-07-19)
 * Scope: every rule is prefixed .spoki-gb-* and nested under the
 * .spoki-gb wrapper class applied by each pattern's outer Group block.
 * Consumes tokens from assets/css/spoki-design-system.css ONLY —
 * no new colour/font/radius tokens are declared here (project law,
 * see functions.php: "Edit tokens/roles in spoki-design-system.css").
 * Never targets bare elements, WooCommerce/cart/checkout/header
 * selectors, or anything outside .spoki-gb.
 * ============================================================ */

.spoki-gb{--gb-gap:clamp(16px,2.4vw,28px)}

/* ---- 1. Section Wrapper ---- */
.spoki-gb-section{padding:clamp(32px,5vw,64px) clamp(16px,3vw,24px)}
.spoki-gb-section__inner{max-width:var(--spoki-container-wide);margin:0 auto}
.spoki-gb-section--cream{background:var(--spoki-color-cream)}
.spoki-gb-section--mint{background:var(--spoki-color-soft-teal-bg)}

/* ---- 2. Inner Page Hero (replaces the per-page inline <style> age-hero pattern) ---- */
.spoki-gb-hero{position:relative;text-align:center;padding:clamp(32px,5vw,54px) 20px clamp(48px,7vw,72px);
  background-color:var(--spoki-color-cream);overflow:visible}
.spoki-gb-hero__inner{max-width:var(--spoki-container-readable);margin:0 auto}
.spoki-gb-hero h1,.spoki-gb-hero .wp-block-heading{font-family:var(--spoki-font-heading);color:var(--spoki-color-heading);
  font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.15;margin:0 0 10px}
.spoki-gb-hero__breadcrumb{font-family:var(--spoki-font-body);font-size:14px;color:var(--spoki-color-muted);
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 14px}
.spoki-gb-hero__breadcrumb a{color:var(--spoki-color-teal);text-decoration:none}
.spoki-gb-hero__intro{color:var(--spoki-color-muted);font-family:var(--spoki-font-body);font-size:1rem;line-height:1.55;margin:0}

/* ---- 3. Text and Image ---- */
.spoki-gb-textimage{align-items:center;gap:var(--gb-gap)}
.spoki-gb-textimage__media img{border-radius:var(--spoki-radius-lg);display:block;width:100%;height:auto}

/* ---- 5. CTA Band ---- */
.spoki-gb-cta-band{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(20px,3vw,28px)}
.spoki-gb-cta-band .wp-block-button__link{border-radius:var(--spoki-radius-pill);font-family:var(--spoki-font-body);font-weight:800}
.spoki-gb-cta-band .wp-block-button.is-style-outline .wp-block-button__link{border-color:var(--spoki-color-teal);color:var(--spoki-color-deep-teal)}

/* ---- 6. FAQ Details (wraps native core/details blocks) ---- */
.spoki-gb-faq{max-width:var(--spoki-container-readable);margin:0 auto}
.spoki-gb-faq__eyebrow{font-family:var(--spoki-font-body);font-weight:800;font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--spoki-color-deep-teal);text-align:center;margin:0 0 6px}
.spoki-gb-faq h2{text-align:center;font-family:var(--spoki-font-heading);color:var(--spoki-color-heading);margin:0 0 20px}
.spoki-gb-faq details.wp-block-details{border:1px solid var(--spoki-color-border);border-radius:var(--spoki-radius-md);
  padding:14px 18px;margin:0 0 10px;background:#fff}
.spoki-gb-faq details.wp-block-details summary{font-family:var(--spoki-font-body);font-weight:800;
  color:var(--spoki-color-heading);cursor:pointer;list-style:none;position:relative;padding:12px 32px 12px 0;min-height:44px;box-sizing:border-box}
/* 2026-07-22 fix: summary computes display:block (not list-item) in this theme's cascade, so the native
   disclosure marker never rendered — these FAQ rows had zero visible affordance that they're expandable.
   Drawing an explicit +/− indicator instead of relying on a native marker, matching the site's other FAQ components. */
.spoki-gb-faq details.wp-block-details summary::-webkit-details-marker{display:none}
.spoki-gb-faq details.wp-block-details summary::after{content:"";position:absolute;right:10px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--spoki-color-teal);border-bottom:2px solid var(--spoki-color-teal);transform:translateY(-65%) rotate(45deg);transition:transform .2s ease}
.spoki-gb-faq details.wp-block-details[open] summary::after{transform:translateY(-35%) rotate(-135deg)}
.spoki-gb-faq details.wp-block-details[open] summary{margin-bottom:8px}
.spoki-gb-faq details.wp-block-details p{color:var(--spoki-color-text);line-height:1.55;margin:0}
.spoki-gb-faq details.wp-block-details a{color:var(--spoki-color-teal)}
@media(max-width:600px){.spoki-gb-faq details.wp-block-details{padding:10px 14px;margin:0 0 8px}.spoki-gb-faq details.wp-block-details summary{font-size:16px;padding:10px 0;min-height:44px}.spoki-gb-faq h2{margin:0 0 14px}}

/* ---- 7. Card Grid ("guide2" equivalent, native-block-built) ---- */
.spoki-gb-cardgrid__eyebrow{font-family:var(--spoki-font-body);font-weight:800;font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--spoki-color-deep-teal);text-align:center;margin:0 0 6px}
.spoki-gb-cardgrid h2{text-align:center;font-family:var(--spoki-font-heading);color:var(--spoki-color-heading);margin:0 0 8px}
.spoki-gb-cardgrid__lead{text-align:center;max-width:var(--spoki-container-readable);margin:0 auto 22px;
  color:var(--spoki-color-muted);line-height:1.55}
.spoki-gb-cardgrid__grid{gap:var(--gb-gap)!important}
.spoki-gb-cardgrid__card{background:#fff;border:1px solid var(--spoki-color-border);border-radius:var(--spoki-radius-md);
  padding:20px;height:100%;box-sizing:border-box}
.spoki-gb-cardgrid__card h3,.spoki-gb-cardgrid__card .wp-block-heading{font-family:var(--spoki-font-heading);
  color:var(--spoki-color-heading);font-size:1.05rem;margin:0 0 8px}
.spoki-gb-cardgrid__card p{color:var(--spoki-color-text);line-height:1.55;margin:0}
.spoki-gb-cardgrid__card a{color:var(--spoki-color-teal)}
.spoki-gb-cardgrid__card ul{margin:0;padding-left:1.1em;color:var(--spoki-color-text);line-height:1.6}
@media(max-width:768px){.spoki-gb-cardgrid__grid{flex-direction:column!important}}

/* ---- 8-10. Product Collection Wrapper (labels the REAL dynamic shortcode; never replaces it) ---- */
.spoki-gb-product-wrap{margin:var(--gb-gap) 0}
.spoki-gb-product-wrap__label{font-family:var(--spoki-font-body);font-weight:800;font-size:.8rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--spoki-color-deep-teal);margin:0 0 10px;text-align:center}

/* ---- 11. Internal-link Cards ---- */
.spoki-gb-linkcards__grid{gap:14px!important}
.spoki-gb-linkcards__card{display:block;background:var(--spoki-color-soft-teal-bg);border-radius:var(--spoki-radius-md);
  padding:16px 18px;text-decoration:none;font-family:var(--spoki-font-body);font-weight:700;color:var(--spoki-color-heading)}
.spoki-gb-linkcards__card:hover{background:var(--spoki-color-cream)}

/* ---- 12. Author / Freshness Block ---- */
.spoki-gb-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-family:var(--spoki-font-body);
  font-size:.85rem;color:var(--spoki-color-muted);border-top:1px solid var(--spoki-color-border);
  border-bottom:1px solid var(--spoki-color-border);padding:12px 0;margin:20px 0}
.spoki-gb-meta strong{color:var(--spoki-color-heading)}

/* ---- Age/skill/gift navigation chips (thin, link-only) ---- */
.spoki-gb-navchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.spoki-gb-navchips a{display:inline-flex;align-items:center;padding:8px 16px;border-radius:var(--spoki-radius-pill);
  background:var(--spoki-color-soft-teal-bg);color:var(--spoki-color-deep-teal);font-family:var(--spoki-font-body);
  font-weight:700;font-size:.85rem;text-decoration:none}
.spoki-gb-navchips a:hover{background:var(--spoki-color-cream)}