/* ============ TOKENS ============ */
:root {
    --section-y: 64px;
    --section-gutter-x: 50px;
    --section-accent: #018584;

    --section-heading-gap: 72px;
    --section-heading-size: 24px;
    --section-heading-line: 36px;
    --section-title-size: 36px;
    --section-title-line: 46px;
    --section-underline-width: 100px;
    --section-underline-offset: 30px;

    --page-banner-header: 80px;
    --page-banner-height: 300px;
    --page-banner-y: 32px;
    --page-banner-title-size: 40px;
}

@media (max-width: 1024px) {
    :root {
        --section-y: 48px;
        --section-gutter-x: 30px;

        --section-heading-gap: 44px;
        --section-heading-size: 22px;
        --section-heading-line: 32px;
        --section-title-size: 30px;
        --section-title-line: 38px;
        --section-underline-width: 80px;
        --section-underline-offset: 20px;

        --page-banner-height: 250px;
        --page-banner-y: 28px;
        --page-banner-title-size: 32px;
    }
}

@media (max-width: 767px) {
    :root {
        --section-y: 32px;
        --section-gutter-x: 20px;

        --section-heading-gap: 36px;
        --section-heading-size: 20px;
        --section-heading-line: 28px;
        --section-title-size: 26px;
        --section-title-line: 34px;
        --section-underline-width: 60px;
        --section-underline-offset: 16px;

        --page-banner-height: 200px;
        --page-banner-y: 24px;
        --page-banner-title-size: 24px;
    }
}

/* ============ PAGE BANNER ============ */

/* Header-adjacent selector matches the theme's specificity so it can't
   re-apply its fixed height and 220/160px padding. The banner is pulled up
   under the header by exactly --page-banner-header. */
#page-title.page-banner,
#header[data-transparent="true"]+#page-title.page-banner {
    display: flex;
    align-items: center;
    height: auto;
    min-height: var(--page-banner-height);
    padding: calc(var(--page-banner-header) + var(--page-banner-y)) 0 var(--page-banner-y);
    top: calc(var(--page-banner-header) * -1);
    margin-bottom: calc(var(--page-banner-header) * -1);
}

#page-title.page-banner>.container {
    width: 100%;
    padding-left: var(--section-gutter-x);
    padding-right: var(--section-gutter-x);
}

#page-title.page-banner .page-title>h1 {
    color: #fff;
    font-size: var(--page-banner-title-size);
    line-height: 1.25;
    letter-spacing: -.5px;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: break-word;
    margin: 0;
}

/* ============ SECTION BLOCK ============ */

/* #page-content variant beats the theme's #page-content padding without !important */
.section-block,
#page-content.section-block {
    padding: var(--section-y) 0;
    margin: 0;
}

.section-block>.container {
    padding-left: var(--section-gutter-x);
    padding-right: var(--section-gutter-x);
}

/* ============ SECTION HEADING ============ */

.section-heading {
    text-align: center;
    margin: 0 0 var(--section-heading-gap);
}

.section-heading h1,
.section-heading h2 {
    position: relative;
    font-size: var(--section-heading-size);
    line-height: var(--section-heading-line);
    letter-spacing: -.5px;
    margin: 0;
}

/* h1 = page title, one step larger than section headings */
.section-heading h1 {
    font-size: var(--section-title-size);
    line-height: var(--section-title-line);
}

.section-heading h1:before,
.section-heading h2:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--section-underline-offset) * -1);
    width: var(--section-underline-width);
    height: 2px;
    margin: 0 auto;
    background-color: var(--section-accent);
}

/* subtitle sits below the underline */
.section-heading p {
    margin: calc(var(--section-underline-offset) + 24px) 0 0;
}

.section-heading--light h1,
.section-heading--light h2,
.section-heading--light p {
    color: #fff;
}

/* ============ CAROUSEL ============ */

.cstm-carousel .flickity-page-dots {
    bottom: 0;
}