/*
 * Shared section-heading system
 *
 * This file is intentionally loaded after page-specific styles. Hero H1s and
 * smaller card headings retain their own hierarchy; section H2s and their
 * eyebrow labels use one consistent treatment throughout the website.
 */

:root {
    --section-heading-color: #111;
    --section-heading-size: clamp(31px, 3vw, 46px);
    --section-heading-size-mobile: clamp(30px, 9vw, 39px);
    --section-eyebrow-color: #f04a14;
    --section-eyebrow-line: #ff8b5d;
}


/* The supplied WhatsApp artwork is the complete button, without a background shell. */
.hero-whatsapp-call,
.corporate-training-page .ct-hero-whatsapp-btn {
    display: block !important;
    width: 64px !important;
    min-width: 64px !important;
    min-height: 0 !important;
    height: 64px !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.hero-whatsapp-call>img,
.corporate-training-page .ct-hero-whatsapp-btn>img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.hero-whatsapp-call:hover,
.corporate-training-page .ct-hero-whatsapp-btn:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-2px);
}

/*
 * All "Ask Mia for Guidance" controls share the quiz-button appearance.
 * Width, height and padding remain owned by each page/component.
 */
[data-open-mia-chat] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 1px solid var(--edu-orange, #ff5a16) !important;
    border-radius: 21px !important;
    background: #ffffff !important;
    color: var(--edu-orange, #ff5a16) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color .25s ease, background .25s ease,
        box-shadow .25s ease, transform .25s ease !important;
}

[data-open-mia-chat] .mia-guidance-icon {
    flex-basis: 24px !important;
    width: 24px !important;
    height: 24px !important;
}

[data-open-mia-chat]:hover {
    background: var(--edu-orange, #ff5a16) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(255, 90, 22, .23) !important;
    transform: translateY(-2px) !important;
}

[data-open-mia-chat]:focus-visible {
    outline: 3px solid rgba(255, 90, 22, .25) !important;
    outline-offset: 3px;
}

/* One shared visual system for all hero CTAs across the website. */
:is(.hero-cta,
    .ps-actions > .ps-btn,
    .university-hero__actions > .university-hero__action,
    .schx-hero__actions > .schx-hero__button,
    .pq2-hero-actions > .btn,
    .career-hero .career-primary,
    .career-hero .career-secondary,
    .contact-hero-actions > a,
    .tc-guide-actions > .btn,
    .standard-page-hero > .container .btn) {
    box-sizing: border-box !important;
    min-height: 58px !important;
    min-width: 210px;
    padding: 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border: 1px solid #ff5a16 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #ff5a16 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: none !important;
    transition: color .25s ease, background .25s ease,
        box-shadow .25s ease, transform .25s ease !important;
}

/* Keep CTA labels and icons at exactly the same visual scale on every hero. */
:is(.hero-cta, .ps-actions > .ps-btn,
    .university-hero__actions > .university-hero__action,
    .schx-hero__actions > .schx-hero__button, .pq2-hero-actions > .btn,
    .career-hero .career-primary, .career-hero .career-secondary,
    .contact-hero-actions > a, .tc-guide-actions > .btn,
    .standard-page-hero > .container .btn) :is(strong, small, .mia-guidance-label, .ps-btn__copy, .schx-hero__button-copy, .ct-hero-contact-label) {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

:is(.hero-cta, .ps-actions > .ps-btn,
    .university-hero__actions > .university-hero__action,
    .schx-hero__actions > .schx-hero__button, .pq2-hero-actions > .btn,
    .career-hero .career-primary, .career-hero .career-secondary,
    .contact-hero-actions > a, .tc-guide-actions > .btn,
    .standard-page-hero > .container .btn) :is(svg, .mia-guidance-icon, i) {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
}

/* Primary hero action. */
:is(.hero-cta,
    .ps-actions > .ps-btn--primary,
    .university-hero__actions > .university-hero__action:not(.university-hero__action--light),
    .schx-hero__actions > .schx-hero__button:not(.schx-hero__button--light),
    .pq2-hero-actions > .btn-primary,
    .career-hero .career-primary,
    .contact-hero-actions > .contact-primary-btn,
    .tc-guide-actions > .tc-guide-primary-btn,
    .standard-page-hero > .container .btn-primary) {
    background: #ff5a16 !important;
    color: #ffffff !important;
}

:is(.hero-cta,
    .ps-actions > .ps-btn,
    .university-hero__actions > .university-hero__action,
    .schx-hero__actions > .schx-hero__button,
    .pq2-hero-actions > .btn,
    .career-hero .career-primary,
    .career-hero .career-secondary,
    .contact-hero-actions > a,
    .tc-guide-actions > .btn,
    .standard-page-hero > .container .btn):hover {
    background: #e34b10 !important;
    border-color: #e34b10 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(255, 90, 22, .23) !important;
    transform: translateY(-2px) !important;
}

:is(.university-hero__actions,
    .schx-hero__actions,
    .pq2-hero-actions,
    .contact-hero-actions,
    .tc-guide-actions) {
    gap: 12px !important;
}

/* The nursery/pre-school pair uses two equal-height CTA cards. */
.ps-actions>.ps-btn {
    height: 58px !important;
}

@media (max-width: 720px) {

    :is(.hero-cta,
        .ps-actions > .ps-btn,
        .university-hero__actions > .university-hero__action,
        .schx-hero__actions > .schx-hero__button,
        .pq2-hero-actions > .btn,
        .career-hero .career-primary,
        .career-hero .career-secondary,
        .contact-hero-actions > a,
        .tc-guide-actions > .btn,
        .standard-page-hero > .container .btn) {
        min-height: 54px !important;
        min-width: 0;
        padding: 0 18px !important;
        font-size: 13px !important;
    }

    .ps-actions>.ps-btn {
        height: 58px !important;
    }

    :is(.hero-cta, .ps-actions > .ps-btn,
        .university-hero__actions > .university-hero__action,
        .schx-hero__actions > .schx-hero__button, .pq2-hero-actions > .btn,
        .career-hero .career-primary, .career-hero .career-secondary,
        .contact-hero-actions > a, .tc-guide-actions > .btn,
        .standard-page-hero > .container .btn) :is(strong, small, .mia-guidance-label, .ps-btn__copy, .schx-hero__button-copy, .ct-hero-contact-label) {
        font-size: 13px !important;
    }
}

main h2.site-centered-heading {
    color: var(--section-heading-color) !important;
    font-size: var(--section-heading-size) !important;
    font-weight: 750 !important;
    letter-spacing: -0.04em !important;
    line-height: 1.08 !important;
}

main .site-centered-heading-copy {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Keep highlighted words typographically consistent with their heading. */
main h2.site-centered-heading strong,
main h2.site-centered-heading>span {
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
}

/* Nursery/Pre-school labels keep their compact size and use shared side lines. */
main h2.ps-section-title::before,
main h2.ps-section-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    flex: 0 0 44px;
    border-radius: 999px;
    background: var(--section-eyebrow-line);
}

main h2.ps-section-title>span {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

/* Replace the Nursery/Pre-school hero sparkle with a simple line. */
main .ps-kicker:not(.site-centered-eyebrow)::after {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    flex: 0 0 44px;
    border-radius: 999px;
    background: var(--section-eyebrow-line);
}

/* Matches section-eyebrow, *-eyebrow, *__eyebrow and equivalent kickers. */
main :is(.section-eyebrow,
    [class$="-eyebrow"],
    [class$="__eyebrow"],
    [class$="-kicker"],
    [class$="__kicker"]).site-centered-eyebrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 13px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--section-eyebrow-color) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.035em !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    gap: 13px !important;
}

main :is(.section-eyebrow,
    [class$="-eyebrow"],
    [class$="__eyebrow"],
    [class$="-kicker"],
    [class$="__kicker"]).site-centered-eyebrow::before,
main :is(.section-eyebrow,
    [class$="-eyebrow"],
    [class$="__eyebrow"],
    [class$="-kicker"],
    [class$="__kicker"]).site-centered-eyebrow::after {
    content: "" !important;
    display: block !important;
    width: 44px !important;
    height: 2px !important;
    flex: 0 0 44px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--section-eyebrow-line) !important;
}

@media (max-width: 720px) {
    main h2.site-centered-heading {
        font-size: var(--section-heading-size-mobile) !important;
    }

    main h2.ps-section-title::before,
    main h2.ps-section-title::after {
        width: 23px;
        flex-basis: 23px;
    }

    main :is(.section-eyebrow,
        [class$="-eyebrow"],
        [class$="__eyebrow"],
        [class$="-kicker"],
        [class$="__kicker"]).site-centered-eyebrow {
        gap: 10px !important;
        font-size: 12px !important;
    }

    main :is(.section-eyebrow,
        [class$="-eyebrow"],
        [class$="__eyebrow"],
        [class$="-kicker"],
        [class$="__kicker"]).site-centered-eyebrow::before,
    main :is(.section-eyebrow,
        [class$="-eyebrow"],
        [class$="__eyebrow"],
        [class$="-kicker"],
        [class$="__kicker"]).site-centered-eyebrow::after {
        width: 23px !important;
        flex-basis: 23px !important;
    }
}