/* ─────────────────────────────────────────────────────────────────────
 * iTeachAI Academy — Polish v1 (Belle 2026-05-16)
 * Tactile feel without breaking the brand register.
 * Burgundy #4A1F2E + Gold #C4A35A + warm cream backgrounds.
 * Loaded last in index.html so it wins specificity over inline SPA CSS.
 * ─────────────────────────────────────────────────────────────────── */

:root {
    --polish-burgundy: #4A1F2E;
    --polish-burgundy-deep: #3a1623;
    --polish-burgundy-darker: #2d0f1a;
    --polish-gold: #C4A35A;
    --polish-gold-bright: #d8b86b;
    --polish-cream: #FAF5EE;
    --polish-cream-warm: #F4ECE0;
    --polish-shadow-sm: 0 1px 3px rgba(74, 31, 46, 0.06), 0 2px 6px rgba(74, 31, 46, 0.05);
    --polish-shadow-md: 0 4px 12px rgba(74, 31, 46, 0.10), 0 8px 24px rgba(74, 31, 46, 0.06);
    --polish-shadow-lg: 0 10px 28px rgba(74, 31, 46, 0.16), 0 18px 48px rgba(74, 31, 46, 0.10);
    --polish-shadow-gold: 0 4px 16px rgba(196, 163, 90, 0.32);
    --polish-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ═══ Buttons ═══════════════════════════════════════════════════════ */

.btn,
.btn-primary,
.cert-bundle-btn,
.hv2-cta,
.hv2-path-cta,
.cert-state-form-cta {
    transition:
        transform 220ms var(--polish-ease),
        box-shadow 220ms var(--polish-ease),
        background-color 200ms ease,
        color 200ms ease,
        letter-spacing 220ms var(--polish-ease) !important;
}

.btn-primary,
.cert-bundle-btn,
.hv2-cta {
    background: linear-gradient(180deg, var(--polish-burgundy) 0%, var(--polish-burgundy-deep) 100%) !important;
    color: var(--polish-cream) !important;
    box-shadow:
        var(--polish-shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -2px 0 rgba(0, 0, 0, 0.16) !important;
    border: 1px solid rgba(45, 15, 26, 0.5) !important;
    letter-spacing: 0.01em !important;
}

.btn-primary:hover,
.cert-bundle-btn:hover,
.hv2-cta:hover {
    transform: translateY(-1.5px);
    box-shadow:
        var(--polish-shadow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -2px 0 rgba(0, 0, 0, 0.20),
        0 0 0 2px rgba(196, 163, 90, 0.18) !important;
    letter-spacing: 0.02em !important;
}

.btn-primary:active,
.cert-bundle-btn:active,
.hv2-cta:active {
    transform: translateY(0);
    box-shadow:
        var(--polish-shadow-sm),
        inset 0 1px 2px rgba(0, 0, 0, 0.22) !important;
}

/* Secondary / outline buttons: gold border accent on hover */
.hv2-path-cta,
.hv2-inline-link,
.hv2-inline-link-lg {
    border-bottom: 1.5px solid var(--polish-burgundy) !important;
    padding-bottom: 2px;
    color: var(--polish-burgundy) !important;
    font-weight: 600 !important;
}
.hv2-path-cta:hover,
.hv2-inline-link:hover,
.hv2-inline-link-lg:hover {
    border-bottom-color: var(--polish-gold) !important;
    color: var(--polish-burgundy-deep) !important;
}

/* ═══ Home page path cards (3-card row) ════════════════════════════ */

.hv2-path {
    background: #ffffff;
    border-radius: 14px !important;
    border: 1px solid rgba(74, 31, 46, 0.10) !important;
    box-shadow: var(--polish-shadow-sm) !important;
    transition:
        transform 280ms var(--polish-ease),
        box-shadow 280ms var(--polish-ease),
        border-color 220ms ease !important;
    position: relative;
    overflow: hidden;
}

.hv2-path::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--polish-burgundy) 0%, var(--polish-gold) 100%);
    opacity: 0;
    transition: opacity 280ms var(--polish-ease);
}

.hv2-path:hover {
    transform: translateY(-4px);
    box-shadow: var(--polish-shadow-lg) !important;
    border-color: rgba(196, 163, 90, 0.40) !important;
}

.hv2-path:hover::before {
    opacity: 1;
}

.hv2-path-title {
    color: var(--polish-burgundy) !important;
}

.hv2-path-tag {
    background: rgba(196, 163, 90, 0.14) !important;
    color: var(--polish-burgundy-deep) !important;
    border: 1px solid rgba(196, 163, 90, 0.40) !important;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ═══ Cert state course-list page ══════════════════════════════════ */

/* Hero — slightly stronger framing without changing layout */
.cert-state-hero {
    position: relative;
}
.cert-state-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 88px;
    height: 3px;
    background: linear-gradient(90deg, var(--polish-burgundy), var(--polish-gold), var(--polish-burgundy));
    border-radius: 3px;
}

/* Bundle banner — gold rule + better elevation */
.cert-bundle-banner {
    box-shadow: var(--polish-shadow-md) !important;
    border-left: 4px solid var(--polish-gold) !important;
    border-radius: 12px !important;
    transition: box-shadow 220ms var(--polish-ease), transform 220ms var(--polish-ease);
}
.cert-bundle-banner:hover {
    box-shadow: var(--polish-shadow-lg) !important;
}
.cert-bundle-price {
    color: var(--polish-burgundy) !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.cert-bundle-savings {
    background: linear-gradient(180deg, #f6e4b6 0%, #e9d196 100%) !important;
    color: var(--polish-burgundy-deep) !important;
    border: 1px solid rgba(74, 31, 46, 0.10) !important;
    box-shadow: var(--polish-shadow-sm) !important;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Filter tabs — clear active state, hover lift */
.cert-filter-tab {
    transition:
        background 200ms ease,
        color 200ms ease,
        box-shadow 200ms var(--polish-ease),
        transform 200ms var(--polish-ease) !important;
    border-radius: 999px !important;
}
.cert-filter-tab:hover {
    transform: translateY(-1px);
    box-shadow: var(--polish-shadow-sm);
}
.cert-filter-active {
    background: var(--polish-burgundy) !important;
    color: var(--polish-cream) !important;
    box-shadow:
        var(--polish-shadow-md),
        inset 0 -2px 0 rgba(0, 0, 0, 0.18) !important;
}

/* Course cards — tactile lift, gold accent ring on hover */
.cert-course-card {
    background: #ffffff;
    border: 1px solid rgba(74, 31, 46, 0.10) !important;
    border-radius: 14px !important;
    box-shadow: var(--polish-shadow-sm) !important;
    transition:
        transform 260ms var(--polish-ease),
        box-shadow 260ms var(--polish-ease),
        border-color 200ms ease !important;
    position: relative;
    overflow: hidden;
}
.cert-course-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--polish-burgundy), var(--polish-gold));
    opacity: 0;
    transition: opacity 240ms var(--polish-ease);
}
.cert-course-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--polish-shadow-lg) !important;
    border-color: rgba(196, 163, 90, 0.40) !important;
}
.cert-course-card:hover::before {
    opacity: 1;
}
.cert-course-title {
    color: var(--polish-burgundy) !important;
}
.cert-price-amount {
    color: var(--polish-burgundy) !important;
    font-weight: 800 !important;
}
.cert-cat-badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.74rem;
}
.cert-hours-badge {
    background: rgba(196, 163, 90, 0.16) !important;
    color: var(--polish-burgundy-deep) !important;
    border: 1px solid rgba(196, 163, 90, 0.36) !important;
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}
.cert-recert-badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ═══ NEW: State-form banner (only renders on ID / WY) ═════════════ */

.cert-state-form-banner {
    margin: 18px auto 0;
    max-width: 1180px;
    background: linear-gradient(180deg, #FFFCF6 0%, var(--polish-cream-warm) 100%);
    border: 1.5px solid rgba(196, 163, 90, 0.45);
    border-left: 5px solid var(--polish-gold);
    border-radius: 14px;
    padding: 22px 26px;
    box-shadow: var(--polish-shadow-md);
}
.cert-state-form-inner {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: start;
}
.cert-state-form-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--polish-gold-bright) 0%, var(--polish-gold) 100%);
    color: var(--polish-burgundy-darker);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--polish-shadow-sm);
}
.cert-state-form-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--polish-burgundy-deep);
    background: rgba(74, 31, 46, 0.06);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.cert-state-form-title {
    font-family: 'Playfair Display', 'Source Serif 4', serif;
    color: var(--polish-burgundy);
    font-size: 1.45rem;
    line-height: 1.25;
    margin: 0 0 8px 0;
    font-weight: 700;
}
.cert-state-form-desc {
    color: #3a2630;
    line-height: 1.55;
    margin: 0 0 14px 0;
    max-width: 880px;
}
.cert-state-form-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, var(--polish-burgundy) 0%, var(--polish-burgundy-deep) 100%);
    color: var(--polish-cream) !important;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.98rem;
    box-shadow:
        var(--polish-shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -2px 0 rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(45, 15, 26, 0.5);
    transition: transform 220ms var(--polish-ease), box-shadow 220ms var(--polish-ease), letter-spacing 220ms var(--polish-ease);
    margin-bottom: 8px;
}
.cert-state-form-cta:hover {
    transform: translateY(-1.5px);
    letter-spacing: 0.02em;
    box-shadow:
        var(--polish-shadow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -2px 0 rgba(0, 0, 0, 0.22),
        0 0 0 2px rgba(196, 163, 90, 0.32);
}
.cert-state-form-cta-icon {
    font-size: 1.05rem;
    line-height: 1;
}
.cert-state-form-source {
    color: #6a5260;
    font-size: 0.82rem;
    margin: 6px 0 0 0;
    font-style: italic;
}

@media (max-width: 640px) {
    .cert-state-form-banner {
        padding: 18px 18px;
        margin: 14px 14px 0;
    }
    .cert-state-form-inner {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .cert-state-form-icon {
        width: 44px; height: 44px; font-size: 22px;
    }
    .cert-state-form-title {
        font-size: 1.2rem;
    }
}

/* ═══ Subtle warmth on the home recent section ════════════════════ */

.hv2-recent {
    background: linear-gradient(180deg, #FFFCF6 0%, var(--polish-cream) 100%);
}
.hv2-recent-image {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--polish-shadow-lg);
    border: 1px solid rgba(74, 31, 46, 0.08);
}
.hv2-recent-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ═══ Respect prefers-reduced-motion ══════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn-primary,
    .cert-bundle-btn,
    .hv2-cta,
    .hv2-path-cta,
    .cert-state-form-cta,
    .cert-filter-tab,
    .cert-course-card,
    .hv2-path,
    .cert-bundle-banner {
        transition: none !important;
    }
    .btn-primary:hover,
    .cert-bundle-btn:hover,
    .hv2-cta:hover,
    .cert-state-form-cta:hover,
    .cert-course-card:hover,
    .hv2-path:hover {
        transform: none !important;
    }
}