/*
Theme Name: Carnivore Directory
Theme URI: https://carnivore.doctor
Description: A lean editorial directory theme for carnivore.doctor. Consumes the Carnivore Doctor Directory plugin (practitioner + clinical_test CPTs, state/tier/category taxonomies). No page builder — clean semantic HTML, custom CSS, full Cursor control.
Author: Chris
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: carnivore-directory
*/

/* ============================================================
   DESIGN TOKENS
   Editorial / clinical-trust. Warm paper, serif headings,
   deep teal + earthy terracotta accent.
   ============================================================ */
:root {
    --ink:          #1b2a2e;
    --ink-soft:     #2e3f43;
    --primary:      #0d5c63;
    --primary-soft: #12727a;
    --primary-dark: #093f44;
    --accent:       #c1572e;
    --accent-soft:  #d46a40;
    --bg:           #fbfaf7;
    --surface:      #ffffff;
    --surface-soft: #f4f1ea;
    --border:       #e6e2d9;
    --border-soft:  #efece4;
    --muted:        #5e6b6d;
    --success:      #2f7d52;

    --maxw: 1180px;
    --maxw-text: 760px;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(27,42,46,.06), 0 1px 3px rgba(27,42,46,.05);
    --shadow:    0 4px 6px -1px rgba(27,42,46,.08), 0 2px 4px -2px rgba(27,42,46,.06);
    --shadow-lg: 0 12px 28px -8px rgba(27,42,46,.18);

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration-color: rgba(13,92,99,.3); text-underline-offset: 2px; }
a:hover { color: var(--primary-dark); text-decoration-color: var(--primary); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--ink); letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 .5em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 1.8em 0 .6em; }
h3 { font-size: 1.3rem; margin: 1.4em 0 .4em; }
p { margin: 0 0 1.1em; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.wrap-text { max-width: var(--maxw-text); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

/* ============================================================
   SITE HEADER + STATE NAV
   ============================================================ */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
}
.site-header__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; padding-block: .9rem;
}
.site-brand {
    font-family: var(--font-display); font-weight: 600; font-size: 1.35rem;
    color: var(--ink); text-decoration: none; letter-spacing: -.02em; white-space: nowrap;
}
.site-brand span { color: var(--accent); }
.site-brand:hover { color: var(--ink); }

.state-nav { border-top: 1px solid var(--border-soft); background: var(--surface-soft); }
.state-nav__list {
    list-style: none; margin: 0; padding: .65rem 0; display: flex; flex-wrap: wrap;
    gap: .15rem .9rem; font-size: .82rem;
}
.state-nav__list a { color: var(--ink-soft); text-decoration: none; padding: .12rem 0; white-space: nowrap; }
.state-nav__list a:hover { color: var(--accent); }
.state-nav__list a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.nav-toggle { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border-soft);
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.hero__eyebrow {
    font-family: var(--font-body); font-weight: 600; font-size: .8rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 .8rem;
}
.hero h1 { max-width: 16ch; }
.hero__lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 52ch; margin: 0; }

/* ============================================================
   STATE GRID (homepage)
   ============================================================ */
.state-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem; margin: 2rem 0;
}
.state-grid a {
    display: block; padding: .9rem 1.1rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    text-decoration: none; color: var(--ink); font-weight: 500;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.state-grid a:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--primary-dark); }

/* ============================================================
   PRACTITIONER CARDS (from plugin shortcode)
   ============================================================ */
.cdd-practitioner-grid { display: grid; gap: 1.25rem; margin: 2rem 0; }
.cdd-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cdd-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cdd-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cdd-practitioner-grid { grid-template-columns: 1fr; } }

.cdd-practitioner-card {
    padding: 1.4rem 1.5rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); transition: box-shadow .18s, transform .18s, border-color .18s;
    display: flex; flex-direction: column;
}
.cdd-practitioner-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--border); }
.cdd-card-title { font-family: var(--font-display); margin: 0 0 .35rem; font-size: 1.15rem; line-height: 1.25; }
.cdd-card-title a { color: var(--ink); text-decoration: none; }
.cdd-card-title a:hover { color: var(--primary); }
.cdd-practice { color: var(--primary); font-weight: 600; margin: 0 0 .2rem; font-size: .95rem; }
.cdd-location { color: var(--muted); font-size: .85rem; margin: 0 0 .6rem; }
.cdd-flags { font-size: .8rem; margin: .3rem 0 .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.cdd-card-link { margin-top: auto; color: var(--primary); text-decoration: none; font-weight: 600; font-size: .9rem; }
.cdd-card-link:hover { color: var(--accent); }
.cdd-no-results { color: var(--muted); font-style: italic; padding: 1.2rem 1.5rem; background: var(--surface-soft); border-radius: var(--radius-sm); }

/* flag pills */
.flag-pill {
    display: inline-block; padding: .12rem .55rem; border-radius: 999px;
    background: var(--surface-soft); border: 1px solid var(--border);
    font-size: .72rem; font-weight: 600; color: var(--ink-soft); letter-spacing: .01em;
}

/* national experts strip */
.cdd-national-experts {
    background: var(--surface-soft); border-left: 3px solid var(--accent);
    padding: 1.1rem 1.4rem; margin: 2rem 0; border-radius: var(--radius-sm);
}
.cdd-national-label { margin: 0 0 .5rem; font-size: .95rem; }
.cdd-national-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.cdd-national-list a { color: var(--primary); text-decoration: none; font-weight: 500; }
.cdd-national-list a:hover { color: var(--accent); }

/* ============================================================
   SINGLE PRACTITIONER (the SEO money page)
   ============================================================ */
.practitioner-header { padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem; }
.practitioner-header__back { font-size: .85rem; color: var(--muted); text-decoration: none; }
.practitioner-header h1 { margin: .6rem 0 .3rem; }
.practitioner-header__practice { font-size: 1.25rem; color: var(--primary); font-weight: 600; margin: 0 0 .5rem; }
.practitioner-header__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; color: var(--muted); font-size: .95rem; margin: 0; }

.practitioner-layout { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; padding-bottom: 4rem; }
@media (max-width: 880px) { .practitioner-layout { grid-template-columns: 1fr; gap: 2rem; } }

.practitioner-video { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin: 0 0 2rem; background: #000; }
.practitioner-video iframe { width: 100%; height: 100%; border: 0; display: block; }

.evidence-note {
    background: var(--surface-soft); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 0 0 2rem;
    font-size: .95rem; color: var(--ink-soft);
}
.evidence-note strong { color: var(--ink); }

.mentions-list { list-style: none; padding: 0; margin: 1rem 0 2rem; }
.mentions-list li { padding: 1rem 0; border-bottom: 1px solid var(--border-soft); }
.mentions-list li:last-child { border-bottom: 0; }
.mentions-list__topic { color: var(--muted); font-size: .9rem; margin: .2rem 0 0; }

.practitioner-aside {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm);
    position: sticky; top: 100px;
}
.practitioner-aside h3 { margin-top: 0; font-size: 1.05rem; }
.practitioner-aside dl { margin: 0; font-size: .92rem; }
.practitioner-aside dt { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; margin-top: .9rem; }
.practitioner-aside dd { margin: .15rem 0 0; }

.btn {
    display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
    padding: .7rem 1.3rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .95rem;
    border: 0; cursor: pointer; transition: background .15s, transform .15s; text-align: center;
}
.btn:hover { background: var(--accent-soft); color: #fff; transform: translateY(-1px); }
.btn--block { display: block; width: 100%; margin-top: 1rem; }
.btn--ghost { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn--ghost:hover { background: var(--primary); color: #fff; }

/* ============================================================
   STATE PAGE
   ============================================================ */
/* state stat strip */
.stat-strip {
    display: flex; flex-wrap: wrap; gap: 1rem;
    margin: 0 0 1rem; padding: 1.25rem 1.5rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.stat { flex: 1 1 0; min-width: 120px; text-align: center; padding: .25rem .5rem; }
.stat + .stat { border-left: 1px solid var(--border-soft); }
@media (max-width: 600px) {
    .stat { flex-basis: 45%; }
    .stat + .stat { border-left: 0; }
}
.stat__num {
    display: block; font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--primary); line-height: 1;
}
.stat__label {
    display: block; margin-top: .35rem; font-size: .78rem;
    color: var(--muted); letter-spacing: .02em; text-transform: uppercase;
}

.state-hero { padding-block: clamp(2rem, 5vw, 3.5rem) 1rem; }
.state-hero__eyebrow { font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem; }
.state-content { font-size: 1.075rem; }
.state-content h2 { border-bottom: 1px solid var(--border); padding-bottom: .3rem; }
.state-content ul, .state-content ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.state-content li { margin-bottom: .4em; }
.state-section { padding-block: 1.5rem; }
.section-label { font-family: var(--font-body); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 .3rem; }

/* consent: correction link + /correction/ form */
.correction-link { margin: 1rem 0 0; font-size: .85rem; text-align: center; }
.correction-link a { color: var(--muted); }
.correction__form label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
.correction__form input[type=text], .correction__form input[type=email], .correction__form textarea {
    width: 100%; padding: .6rem .7rem; font: inherit; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface);
}
.correction__form fieldset { border: 0; padding: 0; margin: 1.2rem 0 0; }
.correction__form legend { font-weight: 600; margin-bottom: .3rem; }
.correction__form .correction__choice { font-weight: 400; margin: .35rem 0; }
.correction__form .btn { margin-top: 1.2rem; }
.correction__opt { font-weight: 400; color: var(--muted); }
.correction__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.correction__notice { border-radius: var(--radius-sm); padding: .8rem 1rem; margin: 1rem 0; border: 1px solid var(--border); }
.correction__notice--ok { background: #eef7f1; border-color: var(--success); }
.correction__notice--err { background: #fbeeea; border-color: var(--accent); }

/* thin-state fallback: fewer than CDT_THIN_STATE_MIN verified practitioners */
.thin-state {
    background: var(--surface-soft); border: 1px solid var(--border);
    border-left: 4px solid var(--primary); border-radius: var(--radius);
    padding: 1.4rem 1.6rem; margin: 1.5rem 0;
}
.thin-state__title { margin-top: 0; }
.thin-state p { margin: 0 0 .6rem; }
.thin-state__lead { font-weight: 600; margin-top: 1rem !important; }
.thin-state__links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.thin-state__links a { color: var(--primary); font-weight: 600; }

/* tests / CTA band */
.cta-band {
    background: var(--primary); color: #fff; border-radius: var(--radius);
    padding: 2rem 2.2rem; margin: 2.5rem 0;
}
.cta-band h2 { color: #fff; margin-top: 0; }
.cta-band p { color: rgba(255,255,255,.85); }
.cta-band .btn { background: #fff; color: var(--primary-dark); }
.cta-band .btn:hover { background: var(--surface-soft); }

/* ============================================================
   CLINICAL TEST CARDS / LABS
   ============================================================ */
.test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.25rem; margin: 2rem 0; }
.test-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.test-card h3 { margin-top: 0; }
.test-card__provider { color: var(--muted); font-size: .85rem; }
.test-card__price { font-weight: 700; color: var(--primary); margin: .5rem 0; }

/* ============================================================
   FOOTER + DISCLAIMER
   ============================================================ */
.site-footer { background: var(--ink); color: rgba(255,255,255,.75); margin-top: 4rem; padding-block: 3rem 2rem; }
.site-footer a { color: #fff; }
.site-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 700px) { .site-footer__cols { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .8rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .4rem; font-size: .92rem; }
.disclaimer {
    border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.5rem;
    font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.55);
}
.disclaimer strong { color: rgba(255,255,255,.75); }

/* ============================================================
   PROSE (generic content)
   ============================================================ */
.prose { max-width: var(--maxw-text); }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.prose blockquote { border-left: 3px solid var(--accent); margin: 1.5rem 0; padding: .3rem 0 .3rem 1.3rem; color: var(--ink-soft); font-style: italic; }

/* ============================================================
   RESPONSIVE NAV
   ============================================================ */
@media (max-width: 760px) {
    .nav-toggle {
        display: inline-block; background: none; border: 1px solid var(--border);
        border-radius: var(--radius-sm); padding: .4rem .7rem; font-size: .85rem; cursor: pointer; color: var(--ink);
    }
    .state-nav { display: none; }
    .state-nav.is-open { display: block; }
    .state-nav__list { flex-direction: column; gap: .4rem; }
}