/**
 * rz-design-system.css
 * Global styles for pages using .rz-page, .rz-* content classes.
 * These are the inline styles that come from the page content — having them
 * here as well means they load from cache rather than inline on every page.
 *
 * @package Rhizarthrose_Child
 */

/* ── Shared tokens ────────────────────────────────────────────────────────── */

.rz-page {
    --rz-teal:      #0d7377;
    --rz-teal-dark: #064e50;
    --rz-amber:     #e67e22;
    font-family:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    color:          #1e293b;
    line-height:    1.7;
}

.rz-page * { box-sizing: border-box; }

/* ── Layout ────────────────────────────────────────────────────────────────── */

.rz-container {
    max-width:    1200px;
    margin-inline: auto;
    padding-inline: 24px;
}

.rz-section { padding-block: 56px; }
.rz-section-alt { background: #f8fafc; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.rz-hero {
    background:    linear-gradient(135deg, #0d5c6b 0%, #0d7377 100%);
    padding-block: 52px;
    border-radius: 12px;
    color:         #ffffff;
    margin-bottom: 40px;
}

.rz-hero h1 {
    font-size:   clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    color:       #ffffff;
    line-height: 1.2;
    margin-bottom: 12px;
}

.rz-hero p {
    font-size:  1.05rem;
    color:      rgba(255,255,255,.87);
    max-width:  680px;
}

.rz-hero-badge {
    display:      inline-block;
    background:   rgba(255,255,255,.15);
    color:        rgba(255,255,255,.9);
    font-size:    0.75rem;
    font-weight:  700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding:      5px 14px;
    margin-bottom: 16px;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */

.rz-card {
    background:    #ffffff;
    border:        1px solid #e2e8f0;
    border-radius: 10px;
    padding:       28px;
    transition:    box-shadow 200ms ease, transform 200ms ease;
}

.rz-card:hover {
    box-shadow: 0 6px 24px rgba(13,92,107,.12);
    transform:  translateY(-3px);
}

.rz-card-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   20px;
}

.rz-card-teal { border-left: 4px solid #0d5c6b; }
.rz-card-amber { border-left: 4px solid #e67e22; }
.rz-card-green { border-left: 4px solid #16a34a; }

.rz-card h3 {
    font-size:   1.05rem;
    font-weight: 700;
    color:       #1e293b;
    margin-bottom: 8px;
}

.rz-card p {
    font-size:  0.9rem;
    color:      #475569;
    margin:     0;
}

/* ── Content boxes ─────────────────────────────────────────────────────────── */

.rz-takeaway {
    background:   #f0fdfa;
    border-left:  4px solid #0d7377;
    border-radius: 0 6px 6px 0;
    padding:      20px 24px;
    margin-block: 28px;
}

.rz-warning-box {
    background:   #fffbeb;
    border-left:  4px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    padding:      20px 24px;
    margin-block: 28px;
    color:        #92400e;
}

.rz-info-box {
    background:   #eff6ff;
    border-left:  4px solid #3b82f6;
    border-radius: 0 6px 6px 0;
    padding:      20px 24px;
    margin-block: 28px;
}

.rz-stat-box {
    background:    #f0fdfa;
    border:        1px solid #ccfbf1;
    border-radius: 8px;
    padding:       24px;
    text-align:    center;
}

/* ── Section headers ───────────────────────────────────────────────────────── */

.rz-section-header {
    font-size:     1.4rem;
    font-weight:   800;
    color:         #1e293b;
    padding-bottom: 12px;
    border-bottom: 2px solid #e6f4f7;
    margin-bottom: 24px;
}

.rz-section-subtitle {
    color:       #64748b;
    font-size:   0.95rem;
    margin-top:  6px;
}

/* ── Medical disclaimer ────────────────────────────────────────────────────── */

.rz-disclaimer {
    background:    #fffbeb;
    border:        1px solid #fde68a;
    border-left:   4px solid #f59e0b;
    border-radius: 6px;
    padding:       18px 22px;
    font-size:     0.875rem;
    color:         #92400e;
    line-height:   1.65;
    margin-top:    40px;
}

/* ── CTAs ─────────────────────────────────────────────────────────────────── */

.rz-cta-link {
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    font-weight:  600;
    color:        #0d5c6b;
    font-size:    0.9rem;
    transition:   color 140ms ease;
}

.rz-cta-link:hover { color: #094a57; }

.rz-next-step {
    background:    #f0fdfa;
    border:        1px solid #ccfbf1;
    border-radius: 8px;
    padding:       20px 24px;
    margin-top:    32px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .rz-card-grid {
        grid-template-columns: 1fr;
    }

    .rz-hero {
        padding-block: 36px;
    }
}