/*
Theme Name: Bodytypes
Description: Bold Modern editorial theme for the Kibbe quiz platform.
Version: 0.6.0
Author: Bodytypes
*/
:root{--bt-bg:#141018;--bt-violet:#7c5cff;--bt-teal:#00e0c6;--bt-coral:#ff4d6d;--bt-ink:#f5f2f7}
body{background:var(--bt-bg);color:var(--bt-ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;margin:0;line-height:1.6}
.bt-wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.bt-header{position:sticky;top:0;z-index:100;padding:0;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(20,16,24,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.bt-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;position:relative}
.bt-logo{display:inline-flex;align-items:center;gap:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--bt-ink);text-decoration:none;white-space:nowrap}
.bt-logo-mark{display:block;flex-shrink:0}
.bt-logo span{color:var(--bt-teal)}
.bt-footer{padding:48px 0 32px;border-top:1px solid rgba(255,255,255,.08);font-size:14px}
a{color:var(--bt-teal)}

/* ---- primary nav ---- */
.bt-nav{display:flex}
.bt-nav-list{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.bt-nav-list a{color:var(--bt-ink);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.01em;opacity:.85;transition:opacity .15s,color .15s}
.bt-nav-list a:hover{opacity:1;color:var(--bt-teal)}
.bt-nav-list li.bt-nav-cta a{background:var(--bt-violet);color:#fff;opacity:1;padding:10px 20px;border-radius:999px;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.06em;transition:transform .15s ease,box-shadow .15s ease}
.bt-nav-list li.bt-nav-cta a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(124,92,255,.4);color:#fff}

/* ---- mobile hamburger (CSS-only checkbox toggle) ---- */
.bt-nav-toggle{position:absolute;opacity:0;pointer-events:none}
.bt-nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;cursor:pointer;z-index:110}
.bt-nav-burger span{display:block;height:2px;width:100%;background:var(--bt-ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}

@media (max-width:760px){
  .bt-nav-burger{display:flex}
  .bt-nav{position:absolute;top:100%;left:0;right:0;background:rgba(20,16,24,.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);max-height:0;overflow:hidden;transition:max-height .25s ease}
  .bt-nav-list{flex-direction:column;align-items:flex-start;gap:0;padding:8px 20px 20px;width:100%;box-sizing:border-box}
  .bt-nav-list li{width:100%}
  .bt-nav-list a{display:block;padding:14px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.06)}
  .bt-nav-list li.bt-nav-cta{margin-top:10px}
  .bt-nav-list li.bt-nav-cta a{display:inline-block;border-bottom:none;width:auto}
  .bt-nav-toggle:checked ~ .bt-nav{max-height:520px}
  .bt-nav-toggle:checked ~ .bt-nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .bt-nav-toggle:checked ~ .bt-nav-burger span:nth-child(2){opacity:0}
  .bt-nav-toggle:checked ~ .bt-nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (min-width:761px){
  .bt-nav-toggle,.bt-nav-burger{display:none}
}

/* ---- footer ---- */
.bt-footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:32px}
.bt-footer-col h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bt-teal);margin:0 0 14px;font-weight:800}
.bt-footer-col ul{list-style:none;margin:0;padding:0}
.bt-footer-col li{margin:0 0 10px}
.bt-footer-col a{color:var(--bt-ink);opacity:.75;text-decoration:none}
.bt-footer-col a:hover{opacity:1;color:var(--bt-teal)}
.bt-footer-contact{opacity:.6;font-size:13px}
.bt-footer-fineprint{font-size:13px;opacity:.55;margin:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
@media (max-width:640px){
  .bt-footer-grid{grid-template-columns:1fr;gap:28px}
}
/* ---- content pages ---- */
.bt-prose{max-width:760px;margin:40px auto;font-size:17px;line-height:1.75}
.bt-prose h2{font-size:26px;font-weight:800;margin:40px 0 12px;letter-spacing:-.01em}
.bt-prose h3{font-size:19px;font-weight:700;margin:26px 0 8px}
.bt-kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--bt-teal)}
.bt-cta{background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.4);border-radius:14px;padding:16px 20px;margin:24px 0}
.bt-cta a{color:var(--bt-coral);font-weight:700}
ul.bt-do,ul.bt-avoid{list-style:none;padding:0;margin:14px 0}
ul.bt-do li,ul.bt-avoid li{padding:8px 0 8px 30px;position:relative;border-bottom:1px solid rgba(255,255,255,.06)}
ul.bt-do li::before{content:"✓";position:absolute;left:4px;color:var(--bt-teal);font-weight:700}
ul.bt-avoid li::before{content:"✕";position:absolute;left:4px;color:var(--bt-coral);font-weight:700}
.bt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:20px 0}
.bt-card{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:18px;color:var(--bt-ink);text-decoration:none;transition:border-color .15s}
.bt-card:hover{border-color:var(--bt-violet)}
.bt-card strong{display:block;font-size:17px;margin-bottom:4px}
.bt-card span{font-size:13px;opacity:.7}
.bt-chart{overflow-x:auto;margin:16px 0}
.bt-chart table{width:100%;border-collapse:collapse;font-size:14px}
.bt-chart th,.bt-chart td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.1)}
.bt-chart th{color:var(--bt-teal);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.bt-fineprint{font-size:13px;opacity:.55;margin-top:44px;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}

/* hub hero banner */
.bt-hub-hero{max-width:760px;margin:36px auto -8px;display:flex;justify-content:center;align-items:stretch;gap:18px}
.bt-hub-hero>img{width:300px;height:auto;max-width:55%;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.bt-hub-line{margin:0;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:14px}
.bt-hub-line img{width:150px;height:auto;border-radius:10px}
.bt-hub-line figcaption{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;text-align:center;margin-top:8px}
@media(max-width:560px){.bt-hub-line{display:none}}

/* ---- sub-guide accordion (assets/content.js) ---- */
.bt-prose h2.bt-accordion-h2{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;user-select:none}
.bt-prose h2.bt-accordion-h2:hover{color:var(--bt-teal)}
.bt-prose h2.bt-accordion-h2:focus-visible{outline:2px solid var(--bt-teal);outline-offset:6px;border-radius:2px}
.bt-accordion-indicator{color:var(--bt-teal);font-size:24px;font-weight:400;line-height:1;flex-shrink:0}
.bt-accordion-body[hidden]{display:none}

/* ---- sticky sub-guide section nav (assets/content.js) ---- */
.bt-subnav{position:sticky;top:0;z-index:50;background:rgba(20,16,24,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.bt-subnav-inner{max-width:1080px;margin:0 auto;padding:0 20px;display:flex;gap:24px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.bt-subnav a{display:inline-block;padding:13px 2px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(245,242,247,.6);text-decoration:none;border-bottom:2px solid transparent;flex-shrink:0}
.bt-subnav a:hover{color:var(--bt-ink)}
.bt-subnav a.is-active{color:var(--bt-teal);border-bottom-color:var(--bt-teal)}

/* ---- "back to hub" breadcrumb (assets/content.js) ---- */
.bt-hub-breadcrumb{display:block;font-size:13px;font-weight:700;color:var(--bt-teal);text-decoration:none;margin:0 0 20px}
.bt-hub-breadcrumb:hover{text-decoration:underline}

/* ---- quiz CTA hover lift (site-wide) ---- */
.bt-cta{transition:transform .18s ease, box-shadow .18s ease}
.bt-cta:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.3)}

@media (prefers-reduced-motion: reduce){
  .bt-cta{transition:none}
  .bt-cta:hover{transform:none}
}

/* ---- homepage (front-page.php) ---- */
.bt-hero{padding:72px 20px 48px;text-align:center;max-width:900px}
.bt-hero-h1{font-size:44px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;line-height:1.08;margin:14px 0 18px}
.bt-hero-sub{font-size:18px;line-height:1.6;opacity:.85;max-width:640px;margin:0 auto 32px}
.bt-hero-actions{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.bt-hero-cta{display:inline-block;background:var(--bt-violet);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:14px;padding:16px 34px;border-radius:999px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.bt-hero-cta:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(124,92,255,.4)}
.bt-hero-secondary{color:var(--bt-ink);opacity:.75;text-decoration:underline;font-size:15px}
.bt-hero-secondary:hover{opacity:1;color:var(--bt-teal)}

.bt-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:48px 20px;border-top:1px solid rgba(255,255,255,.08)}
.bt-step-num{display:block;font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--bt-teal);margin-bottom:8px}
.bt-step h2{font-size:19px;font-weight:800;margin:0 0 8px;letter-spacing:-.01em;text-transform:none}
.bt-step p{font-size:15px;opacity:.8;margin:0;line-height:1.6}

.bt-families{padding:56px 20px;border-top:1px solid rgba(255,255,255,.08);text-align:center}
.bt-section-h2{font-size:30px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;margin:8px 0 32px}
.bt-family-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;text-align:left}
.bt-family-card{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--bt-ink);transition:border-color .15s,transform .15s}
.bt-family-card:hover{border-color:var(--bt-violet);transform:translateY(-4px)}
.bt-family-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.bt-family-card strong{display:block;font-size:15px;margin:12px 14px 2px}
.bt-family-card span{display:block;font-size:12px;opacity:.65;margin:0 14px 14px}
.bt-see-all{display:inline-block;margin-top:28px;font-weight:700;color:var(--bt-coral);text-decoration:none}
.bt-see-all:hover{text-decoration:underline}

.bt-methodology{padding:48px 20px 64px;border-top:1px solid rgba(255,255,255,.08);max-width:760px;text-align:center}
.bt-methodology-text{font-size:17px;line-height:1.7;opacity:.9;margin:8px 0 0}

@media (max-width:900px){
  .bt-steps{grid-template-columns:1fr;gap:36px}
  .bt-family-grid{grid-template-columns:repeat(3,1fr)}
  .bt-hero-h1{font-size:34px}
}
@media (max-width:560px){
  .bt-family-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---- 404 ---- */
.bt-404{padding:64px 20px;max-width:680px;text-align:left}
.bt-404 h1{font-size:32px;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;margin:8px 0 18px}
.bt-404 p{font-size:16px;line-height:1.7;opacity:.85}

/* ---- Style Journal (home.php / category.php / single.php) ---- */
.bt-journal-hero{padding:56px 0 8px;max-width:760px}
.bt-journal-hero .bt-hero-sub{margin:10px 0 0;text-align:left;max-width:640px}

.bt-post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:32px 0}
.bt-post-card{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px;color:var(--bt-ink);text-decoration:none;transition:border-color .15s,transform .15s}
.bt-post-card:hover{border-color:var(--bt-violet);transform:translateY(-3px)}
.bt-post-card h2{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:0}
.bt-post-chip{display:inline-block;align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--bt-teal);background:rgba(0,224,198,.12);border:1px solid rgba(0,224,198,.35);border-radius:999px;padding:5px 12px}
.bt-post-excerpt{font-size:14px;line-height:1.6;opacity:.8;margin:0;flex-grow:1}
.bt-post-date{font-size:12px;opacity:.55;letter-spacing:.02em}
.bt-post-empty{opacity:.7;margin:32px 0}

.bt-post-meta{font-size:13px;opacity:.6;margin:6px 0 28px}

.bt-related{margin-top:44px;padding-top:8px}
.bt-related h2{font-size:22px}

.pagination{margin:36px 0 56px}
.pagination .nav-links{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.pagination .page-numbers{color:var(--bt-ink);text-decoration:none;opacity:.75;font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.pagination .page-numbers:hover{opacity:1;border-color:var(--bt-violet)}
.pagination .page-numbers.current{opacity:1;color:#fff;background:var(--bt-violet);border-color:var(--bt-violet)}
.pagination .page-numbers.dots{border-color:transparent;opacity:.5}

@media (max-width:560px){
  .bt-post-grid{grid-template-columns:1fr}
}

/* flat-lay + post imagery */
.bt-guide-flatlay{max-width:760px;margin:32px auto -6px}
.bt-guide-flatlay img{width:100%;height:auto;border-radius:16px}
.bt-guide-flatlay figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;text-align:center;margin-top:8px}
.bt-post-hero{width:100%;height:auto;border-radius:14px;margin:18px 0}
.bt-card-img{width:100%;height:auto;flex:0 0 auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;display:block}

/* ---- Phase 5: visual-first content ---- */
.bt-hero-visual{padding:0 20px 10px;max-width:1100px}
.bt-hero-visual figure{margin:0}
.bt-hero-visual img{width:100%;height:auto;display:block;border-radius:20px;border:1px solid rgba(255,255,255,.1)}
.bt-hero-visual figcaption{font-size:13px;opacity:.6;text-align:center;margin-top:10px}
.bt-journal-teaser{padding:48px 20px;border-top:1px solid rgba(255,255,255,.08);text-align:center}
.bt-journal-teaser .bt-post-grid{text-align:left;margin:18px 0 22px}
.bt-spectrum{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0 6px;padding:16px 16px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(90deg,rgba(124,92,255,.14),rgba(0,224,198,.07) 50%,rgba(255,77,109,.14))}
.bt-spectrum figure{margin:0;text-align:center;min-width:0}
.bt-spectrum img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block;border-radius:10px}
.bt-spectrum figcaption{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-top:4px}
.bt-spectrum-scale{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--bt-teal);opacity:.8;margin:0 4px 8px}
@media(max-width:560px){.bt-spectrum{gap:5px;padding:10px 10px 8px}.bt-spectrum figcaption{font-size:9px;letter-spacing:.02em;margin-top:3px}}
.bt-compare-duo{max-width:760px;margin:30px auto -4px}
.bt-compare-duo img{width:100%;height:auto;border-radius:16px;display:block}
.bt-compare-duo figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;text-align:center;margin-top:8px}
.bt-guide-banner{max-width:760px;margin:32px auto -6px}
.bt-guide-banner img{width:100%;height:auto;border-radius:16px;display:block}
.bt-guide-banner figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;text-align:center;margin-top:8px}
.bt-swatch-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.bt-swatch{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:5px 12px 5px 6px}
.bt-swatch i{width:20px;height:20px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,.25)}
.bt-post-fig{max-width:400px;margin:26px auto}
.bt-post-fig img{width:100%;height:auto;border-radius:16px;display:block}
.bt-post-fig figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;text-align:center;margin-top:8px}
.bt-quiz-sample{margin:26px 0}
.bt-quiz-sample-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bt-quiz-sample-row img{width:100%;height:auto;border-radius:12px;display:block}
.bt-quiz-sample figcaption{font-size:12px;opacity:.6;text-align:center;margin-top:8px}
.bt-guide-banner--portrait{max-width:520px}
/* ---- CLS-free cards + card thumbs; kill wpautop's stray <br> grid items ---- */
.bt-cards br{display:none}
.bt-card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:top;border-radius:10px;margin:0 0 10px;display:block;background:#0d0a11}
/* quiz result wait: shimmer loading bar (fixed height = zero CLS) */
.btq-waitbar{height:5px;border-radius:3px;margin:18px 0 6px;background:rgba(255,255,255,.09);overflow:hidden;position:relative}
.btq-waitbar i{position:absolute;inset:0;width:40%;border-radius:3px;background:linear-gradient(90deg,var(--bt-violet),var(--bt-teal))}
@media (prefers-reduced-motion: no-preference){
  .btq-waitbar i{animation:btq-sweep 1.1s ease-in-out infinite alternate}
  @keyframes btq-sweep{from{transform:translateX(-10%)}to{transform:translateX(160%)}}
}
.bt-prose h2.bt-accordion-h2{scroll-margin-top:100px}