/*
 * Municipal hero typography
 *
 * Script typography is reserved for primary page titles. Supporting labels
 * remain in the established sans-serif system so every header stays legible.
 */
:root {
    --pina-script-font: "Satisfy", "Segoe Script", "Brush Script MT", cursive;
    --pina-gold: #ffc936;
    --pina-gold-readable: #9a6b00;
}

html body main :is(
    .hero-copy,
    .about-hero__copy,
    .programs-hero-copy,
    .calendar-hero,
    .tourism-hero,
    .tourism-detail-hero,
    .contact-hero,
    .updates-hero,
    .services-finder-hero,
    .transparency-title,
    .transparency-hero,
    .public-hero,
    .page-title,
    .program-detail-hero,
    .news-article-hero
) h1 {
    font-family: var(--pina-script-font) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.08 !important;
    letter-spacing: .005em !important;
    text-transform: none !important;
}

html body main .hero-copy h1 {
    font-size: clamp(3.5rem, 6.2vw, 6rem) !important;
}

html body main :is(
    .about-hero__copy,
    .programs-hero-copy,
    .calendar-hero,
    .tourism-hero,
    .tourism-detail-hero,
    .contact-hero,
    .updates-hero,
    .services-finder-hero,
    .transparency-title,
    .transparency-hero,
    .public-hero,
    .page-title,
    .program-detail-hero,
    .news-article-hero
) h1 {
    font-size: clamp(3rem, 5.1vw, 5.15rem) !important;
}

/* Replace green editorial labels with a legible municipal-gold treatment. */
html body main :is(
    .section-label,
    .tourism-kicker,
    .contact-kicker,
    .updates-kicker,
    .calendar-kicker,
    .services-finder-kicker,
    .about-eyebrow
) {
    color: var(--pina-gold-readable) !important;
    font-size: clamp(.76rem, .72rem + .16vw, .9rem) !important;
    line-height: 1.4 !important;
}

/* Gold over dark or photographic headers can use the brighter wordmark tone. */
html body main :is(
    .hero,
    .about-hero,
    .programs-hero,
    .calendar-hero,
    .tourism-hero,
    .tourism-detail-hero,
    .contact-hero,
    .updates-hero,
    .public-hero,
    .transparency-hero
) :is(
    .section-label,
    .tourism-kicker,
    .contact-kicker,
    .updates-kicker,
    .calendar-kicker,
    .about-eyebrow
) {
    color: var(--pina-gold) !important;
}

@media (max-width: 720px) {
    html body main .hero-copy h1,
    html body main :is(
        .about-hero__copy,
        .programs-hero-copy,
        .calendar-hero,
        .tourism-hero,
        .tourism-detail-hero,
        .contact-hero,
        .updates-hero,
        .services-finder-hero,
        .transparency-title,
        .transparency-hero,
        .public-hero,
        .page-title,
        .program-detail-hero,
        .news-article-hero
    ) h1 {
        font-size: clamp(2.65rem, 13vw, 4rem) !important;
        line-height: 1.08 !important;
    }
}

@media print {
    html body main h1 {
        font-family: Georgia, "Times New Roman", serif !important;
    }
}