/*
Theme Name: Rhizarthrosis
Theme URI: https://rhizarthrosis.com
Description: Custom patient-education theme for rhizarthrosis.com. Full control of markup and design; no page-builder overrides. Pine + clay palette, Source Serif 4 / Source Sans 3, WCAG-AA, older-demographic readable.
Author: Rhizarthrosis.com
Version: 1.0.3
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: rhizarthrosis
*/

/* ── Fonts (self-hosted) ───────────────────────────────────────── */
@font-face { font-family:"Source Serif 4"; src:url("assets/fonts/source-serif-4-v14-latin-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Source Serif 4"; src:url("assets/fonts/source-serif-4-v14-latin-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Source Sans 3"; src:url("assets/fonts/source-sans-3-v19-latin-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Source Sans 3"; src:url("assets/fonts/source-sans-3-v19-latin-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Source Sans 3"; src:url("assets/fonts/source-sans-3-v19-latin-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Source Sans 3"; src:url("assets/fonts/source-sans-3-v19-latin-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --ink:#182b25; --ink-soft:#3f564d;
  --pine:#1e5c4a; --pine-deep:#154236; --pine-wash:#eef5f1;
  --clay:#b85520; --clay-deep:#96431a;
  --line:#d5e2db; --surface:#ffffff;
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Source Sans 3",-apple-system,"Segoe UI",sans-serif;
  --radius:.75rem; --radius-sm:.55rem;
}

/* ── Reset + base ──────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:1.125rem;line-height:1.7;color:var(--ink);background:var(--surface)}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.25;color:var(--ink);text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--pine)}
a:hover{color:var(--pine-deep)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--pine);outline-offset:2px}
button{cursor:pointer;font-family:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.6rem 1rem;z-index:100;border-radius:.4rem}

/* ── Header ────────────────────────────────────────────────────── */
.site-head{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:40}
.site-head .wrap{display:flex;align-items:center;gap:1.5rem;min-height:4.5rem;flex-wrap:wrap}
.brand{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand span{color:var(--pine)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:.5rem;padding:.5rem .7rem;font-size:1rem;font-weight:600;color:var(--ink)}
.main-nav{margin-left:auto}
.main-nav ul{list-style:none;display:flex;gap:1.4rem;align-items:center;margin:0;padding:0;flex-wrap:wrap}
.main-nav a{text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:1rem;padding:.4rem 0}
.main-nav a:hover,.main-nav .current-menu-item>a{color:var(--pine)}
.main-nav .rz-nav-cta a{background:var(--clay);color:#fff;border-radius:var(--radius-sm);padding:.55rem 1.15rem}
.main-nav .rz-nav-cta a:hover{background:var(--clay-deep);color:#fff}
.main-nav .sub-menu{display:none}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn{display:inline-block;font-weight:700;font-size:1.05rem;text-decoration:none;border-radius:var(--radius-sm);padding:.82rem 1.5rem;min-height:48px;border:0}
.btn-primary{background:var(--clay);color:#fff}
.btn-primary:hover{background:var(--clay-deep);color:#fff}
.btn-ghost{color:var(--pine);border:2px solid var(--pine);background:transparent}
.btn-ghost:hover{background:var(--pine-wash);color:var(--pine-deep)}

/* ── Home: hero ────────────────────────────────────────────────── */
.hero{background:linear-gradient(180deg,var(--pine-wash),#fff 85%)}
.hero .wrap{padding:4rem 1.25rem 2.5rem;max-width:880px;text-align:center}
.hero h1{font-size:clamp(2.1rem,4.5vw,3.2rem);max-width:22ch;margin:0 auto}
.hero .lede{font-size:1.28rem;color:var(--ink-soft);max-width:58ch;margin:1.25rem auto 2rem}
.hero .actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* evidence row */
.evidence{padding-bottom:2.75rem}
.evidence .wrap{display:flex;justify-content:center;flex-wrap:wrap}
.evidence .item{padding:0 2.25rem;text-align:center}
.evidence .item+.item{border-left:1px solid var(--line)}
.evidence strong{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--pine)}
.evidence span{color:var(--ink-soft);font-size:.98rem}

/* home sections */
.section{padding:3.25rem 0}
.section h2{font-size:2rem;text-align:center;margin:0 0 .5rem}
.section .sub{color:var(--ink-soft);max-width:60ch;margin:0 auto 2.25rem;text-align:center}
.section.tint{background:var(--pine-wash)}

/* journey path */
.path{display:grid;border:1px solid var(--line);border-radius:.9rem;overflow:hidden;background:#fff}
.leg{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:1.5rem;padding:1.6rem 2rem;align-items:start}
.leg+.leg{border-top:1px solid var(--line)}
.leg:nth-child(2){background:var(--pine-wash)}
.leg .stage{font-weight:700;color:var(--pine);font-size:1rem}
.leg h3{font-size:1.3rem;margin:.2rem 0 0}
.leg h3 a{color:var(--ink);text-decoration:none}
.leg h3 a:hover{color:var(--pine)}
.leg p{color:var(--ink-soft);font-size:1.05rem;margin:0}
.leg .go{font-weight:700;text-decoration:none;white-space:nowrap}

/* card grids */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem 1.5rem;text-decoration:none;background:#fff;transition:border-color .18s ease-out,transform .18s ease-out;display:block}
.card:hover{border-color:var(--pine);transform:translateY(-2px)}
.card h3{font-size:1.18rem;color:var(--ink);margin:0 0 .35rem}
.card p{color:var(--ink-soft);font-size:1rem;margin:0}
.card .more{display:block;margin-top:.75rem;color:var(--pine);font-weight:600;font-size:.95rem}

/* founder story */
.story .box{max-width:760px;margin:0 auto;text-align:center}
.story .subline{color:var(--pine);font-weight:600;font-size:1.05rem;margin:0 0 1.25rem}
.story blockquote{font-family:var(--serif);font-size:1.25rem;line-height:1.6;color:var(--ink);max-width:60ch;margin:0 auto 1.25rem;border:0;padding:0}
.story .rest{color:var(--ink-soft);max-width:62ch;margin:0 auto 1.4rem}

/* latest list */
.post-list{list-style:none;display:grid;gap:1rem;max-width:760px;margin:0 auto;padding:0}
.post-list li{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.05rem 1.4rem}
.post-list a{font-weight:600;text-decoration:none;color:var(--ink);font-size:1.08rem}
.post-list a:hover{color:var(--pine)}
.post-list .meta{color:var(--ink-soft);font-size:.92rem;margin-top:.2rem}

/* newsletter block */
.newsletter .box{background:var(--pine);color:#fff;border-radius:1rem;padding:2.25rem;display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
.newsletter h2{color:#fff;font-size:1.7rem;margin:0;text-align:left}
.newsletter p{opacity:.92;margin:.5rem 0 0}

/* ── Article (single post) ─────────────────────────────────────── */
.article-wrap{max-width:760px;margin:0 auto;padding:1.5rem 1.25rem 3.5rem}
.breadcrumb{font-size:.95rem;color:var(--ink-soft);margin-bottom:1.25rem}
.breadcrumb a{color:var(--ink-soft)}
.article-head{border-bottom:1px solid var(--line);padding-bottom:1.25rem;margin-bottom:1.5rem}
.cat-badge{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--pine);background:var(--pine-wash);border-radius:2rem;padding:.25rem .85rem;margin-bottom:.75rem}
.article-head h1{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:0 0 .6rem}
.byline{color:var(--ink-soft);font-size:.98rem;margin:0}
.entry-content{max-width:70ch}
.entry-content>*{margin-bottom:1.1rem}
.entry-content h2{font-size:1.55rem;margin:2.25rem 0 .9rem}
.entry-content h3{font-size:1.25rem;margin:1.75rem 0 .6rem}
.entry-content ul,.entry-content ol{margin-left:1.4rem}
.entry-content img{border-radius:var(--radius)}
.entry-content a{text-decoration:underline}
.keybox,.rz-keypoints,.rz-pillar-intro{background:var(--pine-wash);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.6rem;margin:1.5rem 0}
.disclaimer{background:var(--pine-wash);border-radius:var(--radius-sm);padding:1.1rem 1.4rem;font-size:.95rem;color:var(--ink-soft);margin:2rem 0 0}
.refs,.rz-ref-list{border-top:2px solid var(--pine);padding-top:1.25rem;font-size:.96rem;color:var(--ink-soft)}
sup a{text-decoration:none;font-weight:700}
.related-clean{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.5rem}
.related-clean h2{font-size:1.4rem;margin:0 0 1rem}
.related-clean ul{list-style:none;display:grid;gap:.7rem;margin:0;padding:0}
.related-clean a{font-weight:600;text-decoration:none;color:var(--ink)}
.related-clean a:hover{color:var(--pine)}

/* ── Guide section blocks (aliases for existing page markup) ───── */
.rz-article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem;margin:1.25rem 0}
.rz-article-card{border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;background:#fff}
.rz-article-card h3{font-size:1.08rem;margin:0 0 .35rem}
.rz-article-card h3 a{text-decoration:none;color:var(--ink)}
.rz-article-card h3 a:hover{color:var(--pine)}
.rz-article-card p{color:var(--ink-soft);font-size:.98rem;margin:0}
.rz-faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.1rem 1.4rem;margin:.7rem 0}
.rz-faq-item h3{font-size:1.12rem;margin:0 0 .4rem}
.rz-faq-item p{color:var(--ink-soft);margin:0}
.rz-cross-links ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6rem;margin:0;padding:0}
.rz-cross-links a{display:block;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.75rem 1rem;text-decoration:none;font-weight:600;color:var(--ink);min-height:44px}
.rz-cross-links a:hover{border-color:var(--pine);color:var(--pine)}
.rz-disclaimer{background:var(--pine-wash);border-radius:var(--radius-sm);padding:1.1rem 1.4rem;font-size:.95rem;color:var(--ink-soft);margin:2rem 0 0}
.answer-capsule{background:var(--pine);color:#fff;border-radius:var(--radius);padding:1.3rem 1.5rem;margin:0 0 1.75rem;font-size:1.1rem;line-height:1.6}
.answer-capsule strong{color:#fff}

/* ── Page / guide (with TOC) ───────────────────────────────────── */
.page-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:3rem;max-width:1080px;margin:0 auto;padding:1.5rem 1.25rem 4rem}
.page-layout .page-main{max-width:70ch}
.toc{position:sticky;top:6rem;align-self:start;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;font-size:.98rem}
.toc h2{font-family:var(--sans);font-size:1.02rem;margin:0 0 .6rem}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.toc a{text-decoration:none;color:var(--ink-soft)}
.toc a:hover,.toc a.here{color:var(--pine);font-weight:600}
.page-hero{background:linear-gradient(180deg,var(--pine-wash),#fff);padding:2.5rem 0 0}
.page-hero .wrap{max-width:1080px}
.page-hero h1{font-size:clamp(1.9rem,3.6vw,2.7rem);max-width:26ch}
.page-hero .updated{margin-top:.75rem;color:var(--ink-soft)}

/* ── Blog / archive listing ────────────────────────────────────── */
.archive-head{background:linear-gradient(180deg,var(--pine-wash),#fff);padding:3rem 0 2rem;text-align:center}
.archive-head h1{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.archive-head p{color:var(--ink-soft);max-width:60ch;margin:.6rem auto 0}
.archive-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem;max-width:1080px;margin:0 auto;padding:2.5rem 1.25rem 3rem}
.pager{display:flex;gap:1rem;justify-content:center;padding:0 0 3rem}
.pager a,.pager span{padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;color:var(--pine);font-weight:600}

/* ── Implant directory ─────────────────────────────────────────── */
.nr{color:var(--ink-soft);font-style:italic;font-weight:400}
.dir-head{text-align:center;padding:2.5rem 0 1rem}
.dir-head h1{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.dir-head p{color:var(--ink-soft);max-width:62ch;margin:.75rem auto 0}
.filters{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;padding:1.5rem 0}
.chip{border:1.5px solid var(--line);border-radius:2rem;padding:.5rem 1.1rem;font-size:1rem;font-weight:600;color:var(--ink-soft);background:#fff;min-height:44px}
.chip[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:#fff}
.implant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;max-width:1080px;margin:0 auto;padding:0 1.25rem 3rem}
.implant{display:flex;flex-direction:column}
.implant-top{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline}
.implant-top h2{font-size:1.3rem;color:var(--ink);margin:0}
.type-badge{font-size:.82rem;font-weight:700;color:var(--pine);background:var(--pine-wash);border-radius:2rem;padding:.2rem .7rem;white-space:nowrap}
.mfr{color:var(--ink-soft);font-size:.95rem;margin:.2rem 0 0}
.implant-stats{display:grid;grid-template-columns:auto 1fr;gap:.1rem 1rem;margin:.9rem 0 0;font-size:.98rem}
.implant-stats dt{color:var(--ink-soft)}
.implant-stats dd{margin:0;font-weight:600;text-align:right}
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.6rem;margin:1.4rem 0}
.panel h2{font-size:1.35rem;margin:0 0 1rem}
.spec{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.25rem;margin:0}
.spec dt{color:var(--ink-soft);font-weight:600}
.spec dd{margin:0}
.outcome-table{border-collapse:collapse;width:100%;font-size:1rem}
.outcome-table th,.outcome-table td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--line)}
.outcome-table th{font-size:.92rem;color:var(--ink-soft)}
.note{font-size:.95rem;color:var(--ink-soft);margin-top:.8rem}

/* ── Footer ────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);padding:2.5rem 0 1rem;color:var(--ink-soft);font-size:.98rem}
.site-foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;max-width:1080px;margin:0 auto;padding:0 1.25rem}
.site-foot h3{font-size:1.05rem;color:var(--ink);margin:0 0 .6rem;font-family:var(--sans)}
.site-foot ul{list-style:none;display:grid;gap:.4rem;margin:0;padding:0}
.site-foot a{color:var(--ink-soft);text-decoration:none}
.site-foot a:hover{color:var(--pine)}
.foot-band{background:var(--pine-deep);color:#fff;text-align:center;padding:1rem;font-size:.9rem;margin-top:2rem}
.foot-band a{color:#fff}
.foot-disclaimer{text-align:center;font-size:.85rem;color:var(--ink-soft);max-width:80ch;margin:1.25rem auto 0;padding:0 1.25rem}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width:900px){
  .page-layout{grid-template-columns:1fr}
  .toc{position:static;order:-1}
}
@media (max-width:820px){
  .nav-toggle{display:block}
  .main-nav{flex-basis:100%;margin-left:0;display:none}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:.25rem;padding-bottom:1rem}
  .main-nav a{padding:.7rem .25rem;border-bottom:1px solid var(--line)}
  .main-nav .rz-nav-cta a{text-align:center;margin-top:.5rem;border-bottom:0}
}
@media (max-width:720px){
  .leg{grid-template-columns:1fr}
  .newsletter .box{grid-template-columns:1fr}
  .evidence .item{padding:.6rem 1rem}
  .evidence .item+.item{border-left:none}
}

/* ══════════════════════════════════════════════════════════════════
   Research-driven UX for phone/tablet + arthritic hands + older eyes
   (WCAG 2.2, NN/g older-adults, Apple/Material touch targets)
   ══════════════════════════════════════════════════════════════════ */

/* Larger, comfortable type on tablet and up (older eyes) */
@media (min-width:768px){ body{font-size:1.1875rem} }

/* Touch targets: 48px min on every interactive element, spacing in nav */
.main-nav a,.toc a,.pager a,.pager span,.chip,.card .more,.breadcrumb a,
.related-clean a,.post-list a{min-height:44px;display:inline-flex;align-items:center}
.chip{min-height:48px}
.main-nav ul{gap:1.6rem}

/* Anchor jumps clear the sticky header (in-page TOC on long guides) */
html{scroll-behavior:smooth}
:target,h2[id],h3[id]{scroll-margin-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Responsive data tables: horizontal scroll + sticky first column.
   Wrap tables in <div class="table-scroll">. Keeps native <table> semantics. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
.table-scroll table{min-width:560px}
.outcome-table th:first-child,.outcome-table td:first-child{
  position:sticky;left:0;background:#fff;z-index:2;box-shadow:2px 0 4px rgba(0,0,0,.08)}
.table-scroll::after{content:"scroll for more \2192";display:none;font-size:.85rem;color:var(--ink-soft);padding:.4rem 0}
@media (max-width:560px){.table-scroll::after{display:block}}

/* Article/guide body images: prevent layout shift, cap size */
.entry-content img{height:auto}
.entry-content figure{margin:1.5rem 0}

/* Back-to-top button (thumb zone, appears after scroll) */
.to-top{position:fixed;right:1rem;bottom:1rem;z-index:45;width:52px;height:52px;
  border-radius:50%;background:var(--pine);color:#fff;border:0;font-size:1.4rem;
  box-shadow:0 4px 14px rgba(21,66,54,.35);display:none;align-items:center;justify-content:center;cursor:pointer}
.to-top.show{display:flex}
.to-top:hover{background:var(--pine-deep)}

/* Comprehensive reduced-motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .card{transition:none}
}