@layer bootmin, thememin, constants;

/* Constants */
@layer constants {
    html {

        /** Colors */
        --canada-blue: #284162;
        --cyan: #005B4F;
        --teal: #1E6F63;
        --teal-light: #3C8A7A;
        --teal-lighter: #4A8C7E;
        --teal-dark: #005B4F;
        --teal-darker: #1B544C;
        --teal-darkest: #0F3732;
        --black: #000000;
        --grey-darkest: #404040;
        --grey: #2F2F2F;
        --grey-light: rgb(128 124 124 / 96%);
        --grey-lighter: #F1F1F1;
        --green: #A2D893;
        --yellow: #E9C46A;
        --orange: #F4A261;
        --orange-dark: #b93615;
        --brown: #362205;
        --white: #FFFFFF;
        /** Gradients */
        --teal-gradient: linear-gradient(-128deg, rgba(30, 111, 99, 1) 0%, rgba(15, 55, 50, 1) 100%);
        /** Padding */
        --padding-96: 96px;
        --padding-48: 48px;
    }
}
    /* Atomic */
    .invert {
        filter: invert(1);
    }

    .align-start {
        align-self: start;
    }

    .d-contents {
        display: contents;
    }

    /** Text */
    html {
        --font-family-Font-1: "Noto Sans", sans-serif;
    }

    .font-display {
        font-family: Lato;
        font-style: normal;
        font-weight: 700;

        &.xs {
            font-size: 24px;
            line-height: 32px;
            /* 133.333% */

        }

        &.sm {
            font-size: 30px;
            line-height: 38px;
        }
    }

    .font-semantic {
        font-family: var(--font-family-Font-1, "Noto Sans");
        font-style: normal;
        font-weight: 400;

        &.link {
            font-size: 20px;
            line-height: 1.65;
        }
    }



    /* RDX Headers */
    .rdx-header {
        background: var(--teal);
        background: var(--teal-gradient);
        color: white;

        .container {
            padding-top: 96px;
            padding-bottom: 96px;
            min-height: 500px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            h1 span {
                font-size: 22px;
                font-weight: 500;
                display: block;
                margin-bottom: 15px;
            }

            div:has(+div) h1 {
                margin-bottom: 24px;
            }

            .lead:has(+*) {
                color: var(--grey-lighter);
                margin-bottom: 50px;
            }
        }
    }

    .rdx-hero {
        padding-block: 43.47px;

        >.container {
            margin-inline: auto;

            >.row {
                display: flex;
                flex-flow: row wrap;
                align-items: center;
                min-height: 570px;
            }
        }

        a.fcac-link {
            margin-block: 36.5px 50px;
            display: block;
        }

        h1 {
            display: flex;
            flex-flow: column nowrap;
            gap: 20px;
            margin: unset;
            padding: unset;
            font-size: 60px;
            word-break: break-word;
            margin-block: 64px 36.5px;

            .shrink {
                font-size: 30px;
                font-weight: 500;
                font-family: 'Noto Sans';
            }
        }

    }

    /* RDX Headers - Mobile */
    @media (max-width: 767px) {
        .rdx-header {
            .container {
                padding-top: 35px;
                padding-bottom: 35px;

                div:has(+div) h1 {
                    margin-bottom: 16px;
                }
            }
        }
    }

    /* RDX Footer */


    .rdx-footer {
        background: var(--grey);
        color: white;

        .lead {
            font-size: 18px;
            font-weight: 600;
        }
    }

    /* RDX Accessibility Feedback */
    .rdx-accessibility {
        background: #53525c;
        color: white;
        padding: 30px 0;

        a {
            color: white;
        }

        strong {
            font-size: 26px;
        }
    }

    /* NFLS Disclaimer */
    .nfls-disclaimer {
        background: var(--teal-darker);
        color: white;
        padding: 30px 0 0 0;

        +.rdx-accessibility {
            margin-top: 0;
            padding-top: 0;
        }
    }

    /* NFLS Disclaimer - Mobile */
    @media (max-width: 767px) {
        .nfls-disclaimer {
            padding-top: 15px;
        }

        .rdx-accessibility {
            padding: 15px 0;
        }
    }


    /* NFLS Search Bar - Common */
    .search-bar {
        display: grid;
        background: var(--Base-Shades-White);
        border-radius: 22px;
        border: 2px solid var(--Neutral-600, #656565);
        grid-template-columns: auto;
        align-content: stretch;
        justify-items: stretch;
        padding: 25px 46px;

        &:has(input[type="search"]:is(:hover, :focus)) {
            border-width: 2px;
            border: 1px solid var(--RDX-Blue-400, #5997D7);
        }

        .search-field {
            border: none;
            background: none;
            outline: unset;
            padding: 0;
            min-width: 0;
            grid-area: 1 / 1;
            word-break: break-all;
            word-wrap: break-word;
            overflow-wrap: break-word;
            pointer-events: all;
        }

        span {
            display: grid;
            grid-template: auto / auto;
            margin: 0;
            padding: 0;
            align-content: stretch;
            align-items: stretch;
            justify-items: stretch;

            p {
                color: var(--grey-light);
                grid-area: 1 / 1;
                margin: 0;
                visibility: hidden;
                appearance: none;
                overflow-x: auto;
                text-wrap: nowrap;
            }

            &:has(.search-field:placeholder-shown + p) p {
                visibility: visible;
                appearance: auto;
                margin-block: auto;
                pointer-events: none;
            }
        }
    }


    /* End NFLS Search Bar */

    /* RDX Tabs */
    .rdx-tabs {
        padding: 40px 0;
        border-top: 1px solid var(--grey-lighter);
        border-bottom: 1px solid var(--grey-lighter);

        .rdx-tab {
            flex: 1;
            list-style: none;
            color: black;
            margin: 40px;
            font-weight: 600;
            cursor: pointer;

            a,
            div {
                display: flex;
                color: black;
                text-decoration: none;
                align-items: center;
                padding-bottom: 5px;
                cursor: pointer;
                border-bottom: 3px solid white;

                img {
                    margin-right: 40px;
                    width: 40px;
                    height: 40px;
                    flex: 0 0 40px;
                }

                &.active {
                    color: var(--cyan);
                    border-bottom-color: var(--green);

                    img {
                        filter: invert(26%) sepia(14%) saturate(4008%) hue-rotate(132deg) brightness(97%) contrast(101%);
                    }
                }

                span {
                    display: block;
                }
            }
        }
    }

    /* RDX Tabs - Mobile */
    @media (max-width: 767px) {
        .rdx-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;

            .rdx-tab {
                margin: 0;

                a,
                div {
                    flex-direction: column;
                    text-align: center;

                    img {
                        margin: 0;
                    }
                }
            }
        }
    }

    /* RDX Panels */
    .rdx-panel {
        border: 3px solid var(--grey-lighter);
        border-radius: 20px;

        .toggle-header {
            display: flex;
            align-items: center;
            font-weight: 600;
            cursor: pointer;
            background: none;
            border: none;
            justify-content: space-evenly;
            width: 100%;
            margin: 0;
            padding: 45px;

            img {
                margin-right: 20px;
                width: 40px;
                height: 40px;
            }

            &:hover,
            &:focus,
            &:has(span.rotated) {
                color: var(--teal-dark);

                img {
                    filter: brightness(0) saturate(100%) invert(22%) sepia(84%) saturate(391%) hue-rotate(122deg) brightness(88%) contrast(90%);
                }
            }

            .glyphicon {
                margin-left: auto;
                -webkit-transition: all 0.3s ease-in;
                -moz-transition: all 0.3s ease-in;
                -o-transition: all 0.3s ease-in;
                transition: all 0.3s ease-in;

                &.rotated {
                    -webkit-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    -o-transform: rotate(180deg);
                    transform: rotate(180deg);
                }
            }

            &+section .panel-header img {
                margin-left: 5px;
                margin-right: 25px;
                width: 30px;
                height: 30px;
            }
        }

        section {
            margin: 0 40px 40px 40px;
            padding: 40px 5px 5px 5px;
            border-top: 1px solid var(--grey-lighter);

            &:first-child {
                border-top: none;
            }

            a {
                text-decoration: unset;
                color: inherit;
            }

            .panel-header {
                display: block;
                display: flex;
                align-items: center;
                margin: 0 0 30px 0;

                h3,
                h4 {
                    margin: 0;
                }

                img {
                    margin-right: 20px;
                    width: 40px;
                    height: 40px;
                }

                &:has(img)+.panel-content {
                    margin-left: 60px;
                }

                &.sm-img img {
                    margin-right: 35px;
                    width: 20px;
                    height: 20px;
                }
            }

            .panel-content {
                margin-bottom: 70px;
            }

            a:hover,
            a:focus {
                color: var(--teal-dark);

                img {
                    filter: brightness(0) saturate(100%) invert(22%) sepia(84%) saturate(391%) hue-rotate(122deg) brightness(88%) contrast(90%);
                }
            }

            .link a,
            a.link {
                word-wrap: break-word;
                text-decoration: underline;
            }


            .data-header {
                display: flex;
                align-items: center;
                margin: 0;

                img {
                    margin-right: 10px;
                    width: 20px;
                    height: 20px;
                }

                span {
                    display: block;
                }

                +ul {
                    margin-left: 25px;
                    margin-bottom: 50px;
                }
            }
        }

        &:has(+.rdx-panel) {
            margin-bottom: 80px;
        }
    }

    @media (max-width: 767px) {
        .rdx-panel.rdx-panel .panel-content.panel-content {
            margin-left: 0px;
        }
    }


    /* Image Cards */

    .img-card-left {
        box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.1);
        border-radius: 20px;
        margin-bottom: 50px;
        display: flex;
        background: var(--white);
        color: var(--black);
        flex-flow: row wrap;
        align-content: stretch;
        overflow: hidden;

        .card-body {
            background: var(--white);
            flex: 3 1 min-content;
            position: relative;
            /* width: auto; */
        }

        h4 {
            margin: 0 0 30px 0;
        }

        .chevron {
            position: absolute;

            .glyphicon {
                font-size: 25px;
            }
        }

        .card-image {
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            flex: 1 0;
        }

    }

    @media (max-width: 767px) {
        .img-card-left {
            .card-body {
                padding: 12.5px 30px 12.5px 8px;
            }

            .chevron {
                bottom: 2.5px;
                right: 2.5px;
                padding: 6.25px 6.25px 6.25px 8.95px;
            }
        }

        .img-card-top {

            .chevron {
                bottom: 10px;
                right: 10px;

            }

            .card-image {
                min-height: 60px;
            }
        }
    }

    @media (min-width: 767px) {
        .img-card-left {
            .card-body {
                padding: 60px 20px;
            }
        }

        :is(.img-card-top, .img-card-left) {
            .chevron {
                bottom: 27px;
                right: 32px;
            }

            .card-image {
                min-height: 85px;
            }
        }
    }

    .img-card-top {
        box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.1);
        margin-bottom: 50px;
        border-radius: 20px;
        position: relative;
        display: block;
        background: white;
        color: black;
        min-height: inherit;

        h4 {
            margin: 0 0 20px 0;
        }

        .chevron {
            position: absolute;

            .glyphicon {
                font-size: 25px;
            }
        }

        .card-image {
            border-radius: 20px 20px 0 0;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
        }

        .card-body {
            justify-content: center;
            align-self: center;
            word-break: auto-phrase;
            padding: 30px;
        }
    }

    .data-card {
        background: var(--green);
        color: black;
        padding: 40px 20px;
        margin: 0 30px 30px 30px;
        justify-items: center;
        align-items: center;
        border-radius: 20px;
        display: flex;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);

        img {
            flex: 1;
            width: 60px;
            height: 60px;
            margin-right: 10px;
        }

        .data {
            flex: 2;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: center;
            font-weight: 600;

            .h2 {
                margin: 0;
            }
        }
    }

    /* Buttons */
    .btn-green {
        background: var(--green);
        color: black;
        font-weight: 600;
        border-radius: 30px;
        cursor: pointer;
        grid-template: auto auto / auto 1fr;
        font-family: 'Noto Sans';
        font-size: 20px;
        padding: 8px 20px;
    }

    .btn-cdp-primary {
        display: inline-flex;
        padding: 12px 18px;
        align-items: center;
        gap: 6px;
        border-radius: 8px;
        background: var(--Neutral-900, #3D3D3D);
        color: var(--white, #FFF);
        border: 0;
        box-sizing: content-box;

        &:hover {
            background: var(--Neutral-800, #464646);
        }

        &:focus,
        &:active {
            background: var(--Neutral-600, #656565);
            outline: 2px solid var(--Neutral-200, #DCDCDC);
            outline-offset: -2px;
        }

        &:disabled {
            background: var(--Neutral-100, #EFEFEF);
            pointer-events: none;
            color: var(--Neutral-300, #BDBDBD);
        }
    }

    .btn-blue {
        display: flex;
        padding: 12px 50px;
        justify-content: center;
        align-items: center;
        gap: 6px;
        border-radius: 360px;
        background: var(--rdx-blue-600-main, #2665AF);
        color: var(--white, #FFF);

        /* Text/xl (Default)/semi-bold */
        font-family: "Noto Sans";
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 30px;
        /* 150% */
    }

    .cdp-button:is(:not([hierarchy]), [hierarchy="primary"])[data-color="lightgreen"] {
        background-color: var(--RDX-Green-200, #C2E4B2);
        color: var(--Base-Shades-Black, #000);
        border: 1px solid var(--RDX-Green-200, #C2E4B2);

        &:hover,
        &:active {
            background-color: var(--RDX-Green-50, #f1f9ec);
        }

        &:focus {
            border: 2px solid var(--RDX-Green-400, #78bd5e);
        }
    }

    /* Lists */
    .list-img {
        list-style-type: none;

        li {
            margin-top: 15px;
            display: flex;
            align-items: center;

            img {
                margin-right: 20px;
                width: 20px;
                height: 20px;
            }

            span {
                display: block;
            }
        }

    }

    /* Accent Block */
    .accent-block {
        background: var(--teal);
        color: white;
        padding: var(--spacing-6xl) 0;
    }

    /* Default Content Margins */
    .content-section {
        padding-block: var(--spacing-9xl);
    }

    .related-section {
        margin-top: 70px;
    }

    /** Text Truncation */
    .trunc {
        overflow: hidden;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }

    .trunc-5 {
        line-clamp: 5;
        -webkit-line-clamp: 5;
    }

    .trunc-4 {
        line-clamp: 4;
        -webkit-line-clamp: 4;
    }

    .trunc-3 {
        line-clamp: 3;
        -webkit-line-clamp: 3;
    }

    .trunc-2 {
        line-clamp: 2;
        -webkit-line-clamp: 2;
    }

    .trunc-1 {
        line-clamp: 1;
        -webkit-line-clamp: 1;
    }

    /* disable ckeditor font modification */
    .ck-content {
        font-family: unset !important;
        font-size: unset !important;
        display: contents;

        :is(p, span)[style] {
            display: contents;
        }

        ol,
        ul {
            padding-left: 1ch;
        }
    }

    .ck-content-mod {
        :is(p, span, div)[style] {
            display: contents;
        }
    }


    /** Font */

    h1 .h1 {
        line-height: 1.25;
    }

    h2:not(.h1, .h3, .h3, .h4, .h5, .h6),
    .h2 {
        font-size: 2.4em;
    }

    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
        line-height: 1.4;
    }

    /** end text modifiacations */
    .hero-banner {
        display: flex;
        flex-flow: column nowrap;

        h1.hero-title {
            align-self: center;
        }

        img.hero-image {
            align-self: center;
        }

        .hero-text {
            align-self: center;

            >* {
                max-width: 65ch;
            }
        }
    }

    .radius-5 {
        border-radius: 5px;
    }

    hr {
        border: none;
        background-color: rgb(128 124 124 / 96%);
        height: 1px;
    }

    .search-preview-card {
        flex: 1;
        display: grid;
        justify-items: center;
        align-items: end;
        text-align: center;
        grid-template: 1fr 1fr min-content / minmax(auto, 146px) minmax(max-content, auto);
        padding: 47px 20px;
        gap: 8px;
        color: var(--Base-Shades-White, #fff);
        border-radius: 22px;
        border: var(--Stroke-Border-Width, 1px) solid var(--Neutral-200, #DCDCDC);
        filter: var(--shadow-xl);

        &:nth-of-type(3n + 1) {
            background-color: #2D6E51;
        }

        &:nth-of-type(3n + 2) {
            background-color: #419165;
        }

        &:nth-of-type(3n) {
            background-color: #40A551;
        }

        >img {
            aspect-ratio: 1/1;
            grid-column: 1;
            grid-row: 1 / span 3;
            justify-self: stretch;
            align-self: center;
            filter: invert(1);
            max-width: 146px;
        }

        >*:not(img) {
            grid-column: 2;
            margin: 0;
        }

        .chevron {
            position: absolute;
            bottom: 10px;
            right: 16px;
        }
    }

    @media (max-width: 992px) {
        .search-preview-card>img {
            max-width: 105px;
            margin-left: 15%;
        }
    }


    @media (max-width: 375px) {
        .container-sized {
            width: auto;
        }
    }

    @media (min-width: 375px) {
        .container-sized {
            max-width: 343px;
        }
    }

    @media (min-width: 580px) {
        .container-sized {
            max-width: 570px;
        }
    }

    @media (min-width: 768px) {
        .container-sized {
            max-width: 750px;
        }
    }

    @media (min-width: 992px) {
        .container-sized {
            max-width: 970px;
        }
    }

    @media (min-width: 1200px) {
        .container-sized {
            max-width: 1170px;
        }
    }