/*
 * SBS frontend design tokens and semantic typography.
 * This file is intentionally loaded after every page stylesheet. It keeps the
 * shared typeface and semantic text colours consistent while allowing each
 * component to retain the responsive size and spacing designed for its layout.
 */
:root {
    --sbs-color-blue: #0b2641;
    --sbs-color-red: #9d1b30;
    --sbs-color-white: #ffffff;
    --sbs-font-family: 'Manrope', sans-serif;
    --sbs-section-title-size: clamp(2rem, 3vw, 2.8125rem);
}

body.sbs-homepage,
body.sbs-subpage {
    color: var(--sbs-color-blue);
    font-family: var(--sbs-font-family);
}

body.sbs-homepage :where(h1, h2, h3),
body.sbs-subpage :where(h1, h2, h3) {
    color: var(--sbs-color-blue);
    font-family: var(--sbs-font-family) !important;
}

body.sbs-homepage p,
body.sbs-subpage p {
    color: var(--sbs-color-blue);
    font-family: var(--sbs-font-family) !important;
}

/* Homepage section-heading treatment, shared by semantic subpage sections. */
body.sbs-homepage main section h2:not(.placement-content__title),
body.sbs-subpage main section :is(
    h2[id$="-title"],
    h2[id$="-heading"],
    h2[class*="section-title"],
    h2[class*="section-heading"],
    h2.rt-text-style-h2,
    h2.rt-no-gap
),
body.sbs-subpage main section > h2,
body.sbs-subpage main section > :is(.container, .rt-container, .w-container) > h2,
body.sbs-subpage main section :is(
    [class*="section-heading"],
    [class*="section-header"]
) h2 {
    font-family: var(--sbs-font-family) !important;
    font-size: var(--sbs-section-title-size) !important;
    font-weight: 500 !important;
    letter-spacing: -0.04em !important;
    line-height: 1.04 !important;
    text-transform: none !important;
}

/* Award titles use the same compact card typography on every public page. */
body:is(.sbs-homepage, .sbs-subpage) :is(
    .rt-credibility__award-title,
    .sbs-award-card h3
) {
    color: var(--sbs-color-blue) !important;
    font-family: var(--sbs-font-family) !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1.35 !important;
    text-wrap: balance;
}

/* Dark and image-led surfaces always use white semantic text. */
body:is(.sbs-homepage, .sbs-subpage) :is(
    .sbs-footer,
    .sbs-subpage-banner,
    .rt-home-hero,
    .rt-hero-section,
    .rt-hero-slider,
    .announcement-hero,
    .sbs-faculty-profile__hero,
    .sbs-faculty-profile__cta,
    .program-details-reference .pd-page-banner,
    .program-details-reference .pd-course-editorial,
    .rt-placement-network,
    .rt-placement2__stats,
    .rt-why-choose,
    .sbs-why-choose,
    .rt-sbs-compare-section,
    .rt-student-success-highlight,
    .sbs-values-showcase,
    .sbs-faculty-ticker,
    .rt-home-news,
    .sbs-impact,
    .rt-contact-info,
    .programs__path--pg,
    .degree-page__features,
    .degree-page__honours,
    .sbs-inquiry-modal__visual,
    [class*="--dark"],
    [class*="__dark"],
    [class*="-dark"],
    [class*="__navy"],
    [class*="-navy"],
    [class*="__cta"],
    [class*="-cta"],
    [class*="__banner"],
    [class*="-banner"]
) :where(h1, h2, h3, p) {
    color: var(--sbs-color-white);
}

body:is(.sbs-homepage, .sbs-subpage) :is(
    .sbs-footer,
    .sbs-subpage-banner,
    .rt-home-hero,
    .rt-hero-section,
    .rt-hero-slider,
    .announcement-hero,
    .sbs-faculty-profile__hero,
    .sbs-faculty-profile__cta,
    .program-details-reference .pd-page-banner,
    .program-details-reference .pd-course-editorial,
    .rt-placement-network,
    .rt-placement2__stats,
    .rt-why-choose,
    .sbs-why-choose,
    .rt-sbs-compare-section,
    .rt-student-success-highlight,
    .sbs-values-showcase,
    .sbs-faculty-ticker,
    .rt-home-news,
    .sbs-impact,
    .rt-contact-info,
    .programs__path--pg,
    .degree-page__features,
    .degree-page__honours,
    .sbs-inquiry-modal__visual,
    [class*="--dark"],
    [class*="__dark"],
    [class*="-dark"],
    [class*="__navy"],
    [class*="-navy"],
    [class*="__cta"],
    [class*="-cta"],
    [class*="__banner"],
    [class*="-banner"]
) :where(h1, h2, h3, p) :where(span, strong, em, a) {
    color: inherit !important;
}

/* The placement background is image-led even though its class name is neutral. */
body.sbs-homepage .placement-section :is(
    .recruiters-content,
    .placement-content
) > :where(h1, h2, h3, p) {
    color: var(--sbs-color-white) !important;
}

/* Keep every inner-page hero compact while preserving the source image ratio. */
body.sbs-subpage .sbs-subpage-banner,
body.sbs-subpage .sbs-subpage-banner.sbs-subpage-banner--uploaded {
    display: flex !important;
    height: clamp(16rem, 24vw, 30rem) !important;
    overflow: hidden !important;
}

body.sbs-subpage .sbs-subpage-banner .sbs-subpage-banner__image,
body.sbs-subpage .sbs-subpage-banner.sbs-subpage-banner--uploaded .sbs-subpage-banner__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: top !important;
}

@media (max-width: 767px) {
    :root {
        --sbs-section-title-size: 1.875rem;
    }

    body.sbs-subpage .sbs-subpage-banner,
    body.sbs-subpage .sbs-subpage-banner.sbs-subpage-banner--uploaded {
        height: 15rem !important;
    }
}