/* components.css — shared component library
 *
 * Originally PLN-021 (CSS Component System, 9/10 shipped s192-s193, plan closed
 * s295 2026-05-15 via str-takase PLN audit pass). Phase 6 (card migration) was
 * deferred and the plan deleted; rationale + safe-list rehomed below at the
 * natural point of work.
 *
 * ── Phase 6 deferral (CARDS) — rationale for any future card-touch ─────
 *
 * Card component (.card) adds border/padding that CONFLICTS with the existing
 * borderless card variants throughout the site (Phase 8 imp s192 attempted
 * migration, reverted cleanly). To reattempt card consolidation:
 *
 *   - Either: add `.card--borderless` modifier variant (no border, inherits
 *     only the hover shadow); migrate concept-card / word-card to base `.card`
 *     and apply `--borderless` where needed.
 *   - Or: adjust `.card` base to zero padding + transparent border, let each
 *     consumer add its own padding/border explicitly.
 *
 * Card migration requires finding actual HTML elements that need the class
 * attribute (not just searching for CSS class names) — see safe-list below.
 *
 * ── Phase 8 consolidation SAFE-LIST — 7 CSS-only selectors ─────────────
 *
 * These 7 CSS selectors have NO corresponding HTML class attribute anywhere
 * in templates/ or static/js/. Element is styled by parent context or
 * generated by JS without these class names. Do NOT remove duplicate CSS
 * rules from these selectors during any future consolidation pass — the
 * styling is still load-bearing, just not directly addressable:
 *
 *   .cta-button       .copy-btn       .text-input-submit
 *   .verify-box       .portfolio-item .hero-card
 *   .cw-featured-card
 *
 * If you ARE migrating one of these, find the actual HTML element first
 * (likely needs a new class attribute added) before consolidating CSS.
 * ─────────────────────────────────────────────────────────────────────── */

/* ── GROUP 1: Global heading scale ───────────────────────────── */
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }

/* ── GROUP 2: .btn-primary (maroon gradient — buy/pay/submit) ── */
.btn-primary {
    display: inline-block;
    padding: 1rem 3rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(to bottom, var(--btn-primary-from), var(--btn-primary-to));
    border: 1px solid var(--btn-primary-border);
    border-bottom: 3px solid var(--btn-primary-border-bottom);
    border-radius: var(--radius-lg);
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    text-decoration: none;
    text-align: center;
}
.btn-primary:hover {
    background: linear-gradient(to bottom, #b03838, #901010);
    border-color: #700;
    border-bottom-color: #500;
    box-shadow: 0 3px 6px rgba(0,0,0,0.22), 0 6px 12px rgba(0,0,0,0.08),
                inset 0 1px 0 rgba(255,255,255,0.25);
    transform: translateY(-1px);
    color: #fff;
}
.btn-primary:active {
    background: linear-gradient(to bottom, #700000, #600000);
    transform: translateY(2px);
    border-bottom-width: 1px;
    box-shadow: 0 0 2px rgba(0,0,0,0.12), inset 0 2px 4px rgba(0,0,0,0.15);
}
.btn-primary:disabled {
    background: #999;
    border-color: #888;
    border-bottom: 3px solid #777;
    cursor: wait;
    box-shadow: none;
    transform: none;
}

/* ── GROUP 3: .btn-secondary (dark gradient — search/action/CTA) */
.btn-secondary {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(to bottom, var(--btn-secondary-from), var(--btn-secondary-to));
    border: 1px solid var(--btn-secondary-border);
    border-bottom: 3px solid var(--btn-secondary-border-bottom);
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.06),
                inset 0 1px 0 rgba(255,255,255,0.15);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    text-decoration: none;
    text-align: center;
}
.btn-secondary:hover {
    background: linear-gradient(to bottom, #444, #222);
    box-shadow: 0 3px 6px rgba(0,0,0,0.22), 0 6px 12px rgba(0,0,0,0.08),
                inset 0 1px 0 rgba(255,255,255,0.2);
    transform: translateY(-1px);
    color: #fff;
}
.btn-secondary:active {
    background: linear-gradient(to bottom, #111, #000);
    transform: translateY(2px);
    border-bottom-width: 1px;
    box-shadow: 0 0 2px rgba(0,0,0,0.12), inset 0 2px 4px rgba(0,0,0,0.15);
}

/* ── GROUP 4: .btn-flat (solid maroon, no gradient) ──────────── */
.btn-flat {
    display: inline-block;
    padding: 0.85rem 2.5rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    text-align: center;
}
.btn-flat:hover {
    background: #600;
    color: #fff;
}
.btn-flat:disabled {
    background: #999;
    cursor: not-allowed;
}

/* ── GROUP 5: Size modifiers ─────────────────────────────────── */
.btn-sm {
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    border-bottom-width: 2px;
}
.btn-lg {
    padding: 1.25rem 3.5rem;
    font-size: 1.4rem;
}

/* ── GROUP 6: .card ──────────────────────────────────────────── */
.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: box-shadow 0.2s;
}
.card:hover {
    box-shadow: var(--shadow-card-hover);
}
.card--flush {
    padding: 0;
}

/* ── GROUP 7: Utility classes ──────────────────────────────── */
.clear-both { clear: both; }
.text-right { text-align: right; }