/* ============================================================
   Sandstories · Clinician Resources
   Shared stylesheet for the hub and individual articles.
   Includes print rules so every article is PDF-clean via Ctrl/Cmd+P.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Sandstories brand palette */
    --wood-dark:   #3d2b1f;
    --wood-frame:  #5d4037;
    --wood-border: #4e342e;
    --terracotta:  #b85e10;
    --amber:       #f5b830;
    --amber-deep:  #e09010;
    --cream:       #fefaf0;
    --cream-warm:  #fff8e8;
    --sand:        #fdf0cc;
    --sand-deep:   #f9dfa0;
    --ink-deep:    #3a2410;
    --ink-warm:    #6a3e10;
    --ink-soft:    #5a4220;
    --ink-faint:   #8a5a20;
    --hair-line:   rgba(245, 200, 100, 0.30);

    /* Polyvagal coding (used in note template + theory articles) */
    --pv-ventral:  #4caf50;  /* green = social engagement */
    --pv-sympath:  #f5b830;  /* yellow = mobilization */
    --pv-dorsal:   #6a87a3;  /* blue/grey = shutdown */
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink-deep);
    background: linear-gradient(170deg, var(--cream) 0%, var(--sand) 100%);
    min-height: 100vh;
    line-height: 1.65;
}

/* ── TOPBAR (matches the rest of the site) ─────────────────── */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px;
    background: var(--wood-dark);
    border-bottom: 2px solid var(--terracotta);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar-left { display: flex; align-items: center; gap: 14px; }

.topbar-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cream);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(254,250,240,0.30);
    transition: all 0.2s ease;
}
.topbar-back:hover { background: rgba(254,250,240,0.10); border-color: var(--cream); }

.topbar-logo { display: block; line-height: 0; }
.topbar-logo img {
    height: 56px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.topbar-actions { display: flex; gap: 10px; align-items: center; }

.print-btn {
    background: linear-gradient(135deg, var(--amber), var(--amber-deep));
    border: none;
    color: white;
    padding: 9px 18px;
    border-radius: 8px;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(200,130,10,0.30);
    transition: transform 0.15s, box-shadow 0.15s;
}
.print-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(200,130,10,0.40); }

/* ── HUB LAYOUT ────────────────────────────────────────────── */
main.hub {
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 32px 88px;
}

.hub-header {
    text-align: center;
    margin-bottom: 48px;
}
.eyebrow {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--terracotta);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.hub-header h1 {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 900;
    color: var(--ink-warm);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-bottom: 12px;
}
.hub-header p {
    color: var(--ink-soft);
    font-size: 1.08rem;
    max-width: 660px;
    margin: 0 auto;
}

.category {
    margin-bottom: 56px;
}
.category-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hair-line);
}
.category h2 {
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--ink-warm);
    letter-spacing: -0.005em;
}
.category-blurb { font-size: 0.95rem; color: var(--ink-faint); max-width: 460px; }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.r-card {
    background: white;
    border-radius: 16px;
    padding: 22px 22px 20px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 18px rgba(140,85,10,0.08);
    border: 1px solid var(--hair-line);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.r-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(140,85,10,0.16);
    border-color: rgba(245, 184, 48, 0.55);
}
.r-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--amber), var(--terracotta));
    opacity: 0.85;
}
.r-card .tag {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--terracotta);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.r-card h3 {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--ink-warm);
    line-height: 1.25;
    margin-bottom: 8px;
}
.r-card p {
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 16px;
    flex: 1;
}
.r-card .open {
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--terracotta);
    transition: gap 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.r-card:hover .open { gap: 10px; }

/* "Coming soon" placeholder cards */
.r-card.coming { opacity: 0.55; pointer-events: none; }
.r-card.coming .open::after { content: "Coming soon"; }

/* ── ARTICLE LAYOUT ────────────────────────────────────────── */
article.resource {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 32px 72px;
}

.article-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--hair-line);
}
.article-header .eyebrow { margin-bottom: 8px; }
.article-header h1 {
    font-size: clamp(1.7rem, 3.6vw, 2.3rem);
    font-weight: 900;
    color: var(--ink-warm);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 12px;
}
.article-header .lede {
    font-size: 1.12rem;
    color: var(--ink-soft);
    line-height: 1.55;
    font-weight: 600;
}
.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 14px;
    color: var(--ink-faint);
    font-size: 0.85rem;
}
.article-meta span::before { content: "·"; margin-right: 8px; opacity: 0.5; }
.article-meta span:first-child::before { content: ""; margin: 0; }

article.resource h2 {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--ink-warm);
    margin: 36px 0 12px;
    letter-spacing: -0.005em;
}
article.resource h3 {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--ink-warm);
    margin: 24px 0 8px;
}
article.resource p {
    margin-bottom: 16px;
    color: var(--ink-deep);
    font-size: 1.02rem;
}
article.resource ul, article.resource ol {
    margin: 0 0 16px 24px;
    color: var(--ink-deep);
}
article.resource li { margin-bottom: 6px; line-height: 1.6; }

article.resource a {
    color: var(--terracotta);
    text-decoration: none;
    border-bottom: 1px dotted var(--terracotta);
}
article.resource a:hover { color: var(--ink-warm); border-color: var(--ink-warm); }

article.resource em { font-style: italic; }
article.resource strong { color: var(--ink-warm); }

article.resource blockquote {
    border-left: 3px solid var(--amber);
    padding: 6px 0 6px 18px;
    margin: 18px 0;
    color: var(--ink-soft);
    font-style: italic;
}

/* Callout boxes */
.callout {
    background: var(--cream-warm);
    border-radius: 12px;
    padding: 18px 22px;
    margin: 22px 0;
    border: 1px solid var(--hair-line);
}
.callout .label {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--terracotta);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.callout p:last-child { margin-bottom: 0; }
.callout.warn {
    background: #fff4e6;
    border-color: rgba(184, 94, 16, 0.30);
}
.callout.warn .label { color: var(--terracotta); }
.callout.warn .label::before { content: "⚠ "; }

/* Citation list */
.citations {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--hair-line);
}
.citations h2 { margin-top: 0; font-size: 1.05rem; }
.citations ol { margin-left: 22px; font-size: 0.9rem; color: var(--ink-soft); }
.citations li { margin-bottom: 8px; line-height: 1.5; }
.citations em { color: var(--ink-warm); }

/* ── PROMPT LIBRARY ────────────────────────────────────────── */
.prompt {
    background: white;
    border-radius: 14px;
    padding: 22px 24px;
    margin: 14px 0;
    border: 1px solid var(--hair-line);
    box-shadow: 0 4px 12px rgba(140,85,10,0.06);
}
.prompt-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.prompt-heading h3 {
    margin: 0;
    color: var(--ink-warm);
    font-size: 1.05rem;
    font-weight: 900;
}
.prompt-tag {
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--terracotta);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.prompt-text {
    font-style: italic;
    color: var(--ink-deep);
    font-size: 1rem;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--cream-warm);
    border-radius: 8px;
    border-left: 3px solid var(--amber);
}
.prompt-watch {
    font-size: 0.92rem;
    color: var(--ink-soft);
}
.prompt-watch strong { display: block; margin-bottom: 3px; color: var(--ink-warm); font-size: 0.78rem; letter-spacing: 0.10em; text-transform: uppercase; }
.prompt-source {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--ink-faint);
}

/* ── TEMPLATE / FORMS ──────────────────────────────────────── */
.form-card {
    background: white;
    border-radius: 16px;
    padding: 32px 36px;
    margin: 24px 0;
    border: 1px solid var(--hair-line);
    box-shadow: 0 8px 24px rgba(140,85,10,0.10);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}
.form-row.full { grid-template-columns: 1fr; }
.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.field label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ink-warm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.field input, .field textarea, .field select {
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink-deep);
    padding: 10px 12px;
    border: 1px solid var(--hair-line);
    border-radius: 8px;
    background: var(--cream);
    transition: border-color 0.15s, background 0.15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--amber);
    background: white;
}
.field textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.field .hint { font-size: 0.78rem; color: var(--ink-faint); font-weight: 600; }

.pv-toggle {
    display: inline-flex;
    background: var(--cream-warm);
    border: 1px solid var(--hair-line);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}
.pv-toggle label {
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--ink-soft);
    transition: all 0.15s;
}
.pv-toggle input[type="radio"] { display: none; }
.pv-toggle input[type="radio"]:checked + label.pv-ventral { background: var(--pv-ventral); color: white; }
.pv-toggle input[type="radio"]:checked + label.pv-sympath { background: var(--pv-sympath); color: white; }
.pv-toggle input[type="radio"]:checked + label.pv-dorsal  { background: var(--pv-dorsal); color: white; }

/* ── PROTOCOL LAYOUT ───────────────────────────────────────── */
.protocol-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    margin: 18px 0;
    align-items: flex-start;
}
.step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--amber), var(--amber-deep));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(200,130,10,0.30);
    flex-shrink: 0;
}
.step-body { padding-top: 4px; }
.step-body h3 {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    font-size: 1.05rem !important;
}
.step-body .duration {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--terracotta);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-left: 8px;
}

/* ASCA crosswalk row */
.asca-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--hair-line);
}
.asca-row:last-child { border-bottom: none; }
.asca-code {
    font-weight: 900;
    color: var(--terracotta);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}
.asca-text { font-size: 0.95rem; color: var(--ink-deep); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 720px) {
    .topbar { padding: 10px 16px; }
    .topbar-logo img { height: 44px; }
    .topbar-back { padding: 6px 10px; font-size: 0.8rem; }
    .print-btn { padding: 7px 12px; font-size: 0.8rem; }

    main.hub { padding: 36px 18px 56px; }
    .category { margin-bottom: 40px; }
    .category-header { flex-direction: column; align-items: flex-start; gap: 6px; }

    article.resource { padding: 32px 18px 56px; }
    .form-card { padding: 22px 20px; }
    .form-row { grid-template-columns: 1fr; }

    .protocol-step { grid-template-columns: 40px 1fr; gap: 12px; }
    .step-num { width: 36px; height: 36px; font-size: 0.95rem; }

    .asca-row { grid-template-columns: 80px 1fr; }
}

/* ── PRINT (Ctrl/Cmd + P → clean PDF) ──────────────────────── */
@media print {
    body { background: white !important; color: black; font-size: 11pt; }
    .topbar, .topbar-back, .print-btn, .topbar-actions, .topbar-left { display: none !important; }
    /* Print: keep just the logo, smaller */
    .topbar-logo { display: block; padding: 14pt 0; border-bottom: 1pt solid #ccc; margin-bottom: 18pt; }
    .topbar-logo img { height: 40pt; }
    .topbar { position: static; background: white; border: none; box-shadow: none; padding: 0; }

    main.hub, article.resource { max-width: 100%; padding: 0 18pt 18pt; }
    a { color: inherit; border: none !important; }

    .article-header h1, article.resource h2, article.resource h3 { color: black; page-break-after: avoid; }
    .form-card, .prompt, .protocol-step, .callout { page-break-inside: avoid; box-shadow: none; }
    .form-card { border: 1pt solid #999; }

    .field input, .field textarea, .field select { border: 1pt solid #999; background: white; }
    .pv-toggle { border: 1pt solid #999; background: white; }

    /* Print URL after links so PDF is useful offline */
    article.resource a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }

    /* Footer cite line */
    article.resource::after {
        content: "Sandstories — Clinician Resources · sandstories.app/resources";
        display: block;
        margin-top: 24pt;
        padding-top: 8pt;
        border-top: 1pt solid #ccc;
        font-size: 9pt;
        color: #777;
        text-align: center;
    }
}

/* ── TOPNAV (resources hub index) ──────────────────────────────── */
.topnav {
    position: sticky; top: 0; z-index: 100;
    background: var(--wood-dark);
    border-bottom: 2px solid var(--terracotta);
    padding: 14px 32px;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.topnav-logo { text-decoration: none; line-height: 0; }
.topnav-logo img { height: 52px; width: auto; display: block; }
.topnav-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.topnav-links a {
    color: #FDF6EC;
    text-decoration: none;
    font-weight: 700; font-size: 0.88rem;
    transition: color 0.15s;
}
.topnav-links a:hover { color: #E8BB6F; }
.topnav-cta {
    background: linear-gradient(135deg, #E8BB6F, #D4A853);
    color: white !important;
    padding: 9px 20px;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(212,168,83,0.30);
    transition: transform 0.15s, box-shadow 0.15s;
}
.topnav-cta:hover { transform: translateY(-1px); }

@media (max-width: 900px) {
    .topnav { flex-direction: column; gap: 12px; padding: 14px 20px; }
    .topnav-links { justify-content: center; gap: 12px; }
}

/* ── SITE FOOTER ─────────────────────────────────────────────── */
.site-footer {
    background: #2A1E16;
    color: #FDF6EC;
    padding: 32px 24px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
}
.site-footer a { color: #D4A853; font-weight: 700; text-decoration: none; }
.site-footer a:hover { color: #E8BB6F; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.footer-links a { margin: 0 10px; }
.site-footer .small {
    color: rgba(253,246,236,0.55);
    font-size: 0.80em;
    margin-top: 8px;
    max-width: 720px;
    margin-left: auto; margin-right: auto;
}

@media print {
    .topnav, .site-footer { display: none !important; }
}