/*
SERPIFAI SITEWIDE COMPACT HEADINGS
Simple premium treatment:
- smaller headings
- solid deep violet on light backgrounds
- solid off-white on dark backgrounds
- no gradients
*/

:root {
    --serpifai-heading-light: #35127E;
    --serpifai-heading-dark: #F7FAFC;
}

/* Page titles */
:where(main, [role="main"], .site-main, .page-main) h1,
:where(.hero, .page-hero, .resource-hero, .sample-hero, .toolkit-hero) h1 {
    max-width: 22ch;
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--serpifai-heading-light) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(2rem, 3.5vw, 3.15rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.038em !important;
    text-wrap: balance;
}

/* Section titles */
:where(main, [role="main"], .site-main, .page-main) h2,
:where(.section-heading, .section-header, .content-heading) h2 {
    max-width: 30ch;
    margin-top: 0;
    margin-bottom: 0.85rem;
    color: var(--serpifai-heading-light) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(1.5rem, 2.35vw, 2.1rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.03em !important;
    text-wrap: balance;
}

/* Card and subsection titles */
:where(main, [role="main"], .site-main, .page-main) h3 {
    margin-top: 0;
    margin-bottom: 0.55rem;
    color: inherit;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(1.02rem, 1.35vw, 1.22rem) !important;
    line-height: 1.24 !important;
    letter-spacing: -0.016em !important;
}

/* Dark sections */
:where(
    .dark,
    .theme-dark,
    .section-dark,
    .dark-section,
    .system-subsection,
    .founder-release-gate,
    [data-theme="dark"]
) :where(h1, h2, h3) {
    color: var(--serpifai-heading-dark) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Keep component headings compact and readable. */
:where(
    .card,
    .panel,
    .system-view-card,
    .founder-release-gate__grid,
    .faq-item,
    .feature-card,
    .form-card
) :where(h2, h3) {
    max-width: none;
}

@media (max-width: 720px) {
    :where(main, [role="main"], .site-main, .page-main) h1,
    :where(.hero, .page-hero, .resource-hero, .sample-hero, .toolkit-hero) h1 {
        font-size: clamp(1.9rem, 8vw, 2.5rem) !important;
    }

    :where(main, [role="main"], .site-main, .page-main) h2,
    :where(.section-heading, .section-header, .content-heading) h2 {
        font-size: clamp(1.4rem, 6.2vw, 1.85rem) !important;
    }

    :where(main, [role="main"], .site-main, .page-main) h3 {
        font-size: clamp(1rem, 4.5vw, 1.16rem) !important;
    }
}

@media (max-width: 390px) {
    :where(main, [role="main"], .site-main, .page-main) h1,
    :where(.hero, .page-hero, .resource-hero, .sample-hero, .toolkit-hero) h1 {
        font-size: 1.9rem !important;
    }

    :where(main, [role="main"], .site-main, .page-main) h2,
    :where(.section-heading, .section-header, .content-heading) h2 {
        font-size: 1.4rem !important;
    }
}