@layer reset {
    /* 1. Use a more-intuitive box-sizing model */
    *, *::before, *::after {
        box-sizing: border-box;
    }

    /* 2. Remove default margin */
    * {
        margin: 0;
    }

    /* 3. Enable keyword animations */
    @media (prefers-reduced-motion: no-preference) {
        html {
            interpolate-size: allow-keywords;
        }
    }

    body {
        /* 4. Add accessible line-height */
        line-height: 1.5;
        /* 5. Improve text rendering */
        -webkit-font-smoothing: antialiased;
    }

    /* 6. Improve media defaults */
    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
    }

    /* 7. Inherit fonts for form controls */
    input, button, textarea, select {
        font: inherit;
    }

    button {
        cursor: pointer;
        background-color: transparent;
        border: none;
    }

    /* 8. Avoid text overflows */
    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }

    /* 9. Improve line wrapping */
    p {
        text-wrap: pretty;
    }
    h1, h2, h3, h4, h5, h6 {
        text-wrap: balance;
    }

    /*
    10. Create a root stacking context
    */
    #root, #__next {
        isolation: isolate;
    }
}

/*
font-family: avenir-lt-pro, sans-serif;
font-weight: 800;
font-style: normal;

font-family: avenir-lt-pro, sans-serif;
font-weight: 400;
font-style: normal;
*/

:root {
    /* Primary: Green #3fae49 */
    --primary: light-dark(oklch(0.6651855376 0.1727716379 144.7854519648), oklch(0.6651855376 0.1727716379 144.7854519648));
    --primary-hover: light-dark(oklch(0.765 0.173 144.7854519648), oklch(0.765 0.173 144.7854519648));
    --primary-ultra-light: light-dark(oklch(0.95 0.098 144.7854519648), oklch(0.1 0.042 144.7854519648));
    --primary-ultra-dark: light-dark(oklch(0.1 0.042 144.7854519648), oklch(0.95 0.098 144.7854519648));
    --primary-light: light-dark(oklch(0.85 0.173 144.7854519648), oklch(0.25 0.106 144.7854519648));
    --primary-dark: light-dark(oklch(0.25 0.106 144.7854519648), oklch(0.85 0.173 144.7854519648));
    --primary-semi-light: light-dark(oklch(0.65 0.173 144.7854519648), oklch(0.35 0.149 144.7872245229));
    --primary-semi-dark: light-dark(oklch(0.35 0.149 144.7872245229), oklch(0.65 0.173 144.7854519648));

    /* Secondary: purple #23408f */
    --secondary: light-dark(oklch(0.3983061809 0.1356053628 265.398001852), oklch(0.3983061809 0.1356053628 265.398001852));
    --secondary-hover: light-dark(oklch(0.458 0.136 265.398001852), oklch(0.458 0.136 265.398001852));
    --secondary-ultra-light: light-dark(oklch(0.9521826914 0.025 265.398001852), oklch(0.190689585 0.131 265.398001852));
    --secondary-ultra-dark: light-dark(oklch(0.190689585 0.131 265.398001852), oklch(0.9521826914 0.025 265.398001852));
    --secondary-light: light-dark(oklch(0.8580978914 0.076 265.389896391), oklch(0.3170770848 0.136 265.398001852));
    --secondary-dark: light-dark(oklch(0.3170770848 0.136 265.398001852), oklch(0.8580978914 0.076 265.389896391));
    --secondary-semi-light: light-dark(oklch(0.6586006874 0.136 265.398001852), oklch(0.3960409508 0.136 265.398001852));
    --secondary-semi-dark: light-dark(oklch(0.3960409508 0.136 265.398001852), oklch(0.6586006874 0.136 265.398001852));


    --base: light-dark(oklch(0.249 0.044 239), oklch(0.249 0.044 239));
    --base-hover: light-dark(oklch(0.2683784797 0.048548049 238.8026841502), oklch(0.2683784797 0.048548049 238.8026841502));
    --base-ultra-light: light-dark(oklch(0.9616872616 0.0142153687 238.0080311686), oklch(0.2244439512 0.0376286857 237.5618433042));
    --base-ultra-dark: light-dark(oklch(0.2244439512 0.0376286857 237.5618433042), oklch(0.9616872616 0.0142153687 238.0080311686));
    --base-light: light-dark(oklch(0.8867610709 0.0436744016 235.4340412275), oklch(0.3913353164 0.078317139 240.4653532284));
    --base-dark: light-dark(oklch(0.3913353164 0.078317139 240.4653532284), oklch(0.8867610709 0.0436744016 235.4340412275));
    --base-semi-light: light-dark(oklch(0.7391319327 0.100237618 237.1743256572), oklch(0.4926486473 0.1027452428 241.8246813884));
    --base-semi-dark: light-dark(oklch(0.4926486473 0.1027452428 241.8246813884), oklch(0.7391319327 0.100237618 237.1743256572));
    --neutral: light-dark(oklch(0 0 0), oklch(0 0 0));
    --neutral-hover: light-dark(oklch(0 0 0.1), oklch(0 0 0.1));
    --neutral-ultra-light: light-dark(oklch(0.95 0 0.1), oklch(0.2 0 0.1));
    --neutral-ultra-dark: light-dark(oklch(0.1 0 0.1), oklch(0.95 0 0.1));
    --neutral-light: light-dark(oklch(0.85 0 0.1), oklch(0.25 0 0.1));
    --neutral-dark: light-dark(oklch(0.25 0 0.1), oklch(0.85 0 0.1));
    --neutral-semi-light: light-dark(oklch(0.65 0 0.1), oklch(0.35 0 0.1));
    --neutral-semi-dark: light-dark(oklch(0.35 0 0.1), oklch(0.65 0 0.1));
    --black: light-dark(#000, #fff);
    --black-trans-90: color-mix(in oklch, var(--black) 90%, transparent);
    --black-trans-80: color-mix(in oklch, var(--black) 80%, transparent);
    --black-trans-50: color-mix(in oklch, var(--black) 50%, transparent);
    --black-trans-30: color-mix(in oklch, var(--black) 30%, transparent);
    --black-trans-20: color-mix(in oklch, var(--black) 20%, transparent);
    --black-trans-10: color-mix(in oklch, var(--black) 10%, transparent);
    --black-trans-00: color-mix(in oklch, var(--black) 0%, transparent);
    --white: light-dark(#fff, #000);

    --bg-surface: oklch(0.2672 0.0099 248.2); /* oklch(0.2672 0.0099 248.2) */

    --text-dark: var(--black);
    --text-light: var(--white);
    --text-alt: light-dark(oklch(0.5452 0 0), oklch(0.5452 0 0));

    --body-bg-color: var(--white);
    --text-color-body: var(--text-dark);
    
    --text-xs: clamp(0.75rem, calc(-0.1858782904vw + 0.7918226153rem), 0.6331290249rem);
    --text-s: clamp(0.8125rem, calc(0.0500373602vw + 0.8012415939rem), 0.8439609902rem);
    --text-m: clamp(1rem, calc(0.1988071571vw + 0.9552683897rem), 1.125rem);
    --text-m-minus: calc(var(--text-m) * 0.9);
    --text-l: clamp(1.2rem, calc(0.4765407555vw + 1.09277833rem), 1.499625rem);
    --text-xl: clamp(1.44rem, calc(0.8890658052vw + 1.2399601938rem), 1.999000125rem);
    --text-xxl: clamp(1.728rem, calc(1.489729092vw + 1.3928109543rem), 2.6646671666rem);

    --text-4xl: clamp(2.03rem, calc(4.01vw + 1.23rem), 4.74rem);

    --base-font-family: avenir-lt-pro, Helvetica, Arial, sans-serif;
    --text-font-family: var(--base-font-family);
    --text-font-weight: 400;
    --text-s-line-height: calc(4px + 2ex);
    --text-line-height: calc(6px + 2ex);
    --text-l-line-height: calc(8px + 2ex);
    --text-xl-line-height: calc(10px + 2ex);
    --text-xxl-line-height: calc(12px + 2ex);
    --text-text-wrap: pretty;
    --text-color: var(--black);

    --h6: clamp(0.75rem, calc(-0.073993329vw + 0.766648499rem), 0.7034766944rem);
    --h5: clamp(0.8125rem, calc(0.1991800137vw + 0.7676844969rem), 0.9377344336rem);
    --h4: clamp(1.125rem, calc(0.1988071571vw + 1.0802683897rem), 1.25rem);
    --h3: clamp(1.35rem, calc(0.5029821074vw + 1.2368290258rem), 1.66625rem);
    --h2: clamp(1.62rem, calc(0.9560417495vw + 1.4048906064rem), 2.22111125rem);
    --h1: clamp(1.944rem, calc(1.6170835726vw + 1.5801561962rem), 2.9607412963rem);

    --heading-font-family: var(--base-font-family);
    --heading-line-height: calc(4px + 2ex);
    --heading-font-weight: 800;
    --heading-text-wrap: balance;
    --heading-color: var(--primary);
    --heading-text-transform: uppercase;

    --space-xs: clamp(0.8441720333rem, calc(-0.0172384889vw + 0.8480506933rem), 0.8333333333rem);
    --space-s: clamp(1.1252813203rem, calc(0.1983597291vw + 1.0806503813rem), 1.25rem);
    --space-m: clamp(1.5rem, calc(0.5964214712vw + 1.365805169rem), 1.875rem);
    --space-l: clamp(1.9995rem, calc(1.2930417495vw + 1.7085656064rem), 2.8125rem);
    --space-xl: clamp(2.6653335rem, calc(2.4706425447vw + 2.1094389274rem), 4.21875rem);
    --space-xxl: clamp(3.5528895555rem, calc(4.4138933511vw + 2.5597635515rem), 6.328125rem);

    --content-width: 85.375rem;
    --content-gap: var(--space-s);
    --container-gap: var(--space-xl);
    --grid-gap: var(--space-m);

    --section-space-xs: clamp(1.6883440665rem, calc(1.2909040692vw + 1.3978906509rem), 2.5rem);
    --section-space-s: clamp(2.2505626407rem, calc(2.3847910288vw + 1.7139846592rem), 3.75rem);
    --section-space-m: clamp(3rem, calc(4.1749502982vw + 2.0606361829rem), 5.625rem);
    --section-space-l: clamp(3.999rem, calc(7.0592445328vw + 2.4106699801rem), 8.4375rem);
    --section-space-xl: clamp(5.330667rem, calc(11.6510266402vw + 2.709186006rem), 12.65625rem);
    --section-space-xxl: clamp(7.105779111rem, calc(18.8923990282vw + 2.8549893296rem), 18.984375rem);

    --section-padding-block: var(--section-space-m);
    --gutter: clamp(1rem, calc(6.3618290258vw + -0.4314115308rem), 5rem);

    --grid-1: repeat(1, minmax(0, 1fr));
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
    --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
    --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
    --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
    --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
    --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);

    --card-padding: var(--space-m);
    --card-gap: var(--content-gap);

    --radius: 3px;

    /* button stuff */
    --btn-padding-block: 0.75em;
    --btn-padding-inline: var(--space-xl);
    --btn-min-width: 8.75rem;
    --btn-width: max-content;
    --btn-line-height: 1;
    --btn-font-size: var(--text-m);
    --btn-font-weight: 700;
    --btn-font-style: normal;
    --btn-text-decoration: none;
    --btn-text-decoration-hover: none;
    --btn-letter-spacing: 0.05rem;
    --btn-text-transform: uppercase;
    --btn-border-width: 2px;
    --btn-outline-border-width: 2px;
    --btn-border-style: solid;
    --btn-border-radius: var(--radius);
    --btn-radius: var(--radius);
    --btn-justify-content: center;
    --btn-text-align: center;

    --box-shadow-sm: 0 0 20px color-mix(in srgb, black 10%, transparent);
    --box-shadow-md: 0 0 40px color-mix(in srgb, black 10%, transparent);
    --box-shadow-lg: 0 0 60px color-mix(in srgb, black 20%, transparent);
    --box-shadow-xl: 0 0 80px color-mix(in srgb, black 30%, transparent);

    --text-shadow-md: 4px 3px 8px color-mix(in srgb, black 55%, transparent);

    --transition-duration: 0.3s;
    --transition-timing: ease-in-out;
    --transition-delay: 0s;
    --transition: 0.3s ease-in-out 0s;
}

@layer base {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-padding-top: 100px;
    }

    body {
        min-block-size: 100dvh;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }

    :where(body) {
        /* color-scheme: only light; */
        color-scheme: light dark;
        background: var(--body-bg-color);
    }

    img {
        max-width: 100%;
        height: auto;
        display: block;
    }
}

@layer typography {
    :where(body) {
        font-size: var(--default-font-size, var(--text-m));
        font-family: var(--text-font-family);
        color: var(--text-color-body);
        line-height: var(--text-line-height);
        text-wrap: var(--text-text-wrap);
    }

    body :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
        margin-block: 0;
    }

    :where(p) {
        line-height: var(--text-line-height, calc(6px + 2ex));
    }

    h1, :where(.h1), h2, :where(.h2), h3, :where(.h3), h4, :where(.h4), h5, :where(.h5), h6, :where(.h6)
    {
        font-family: var(--heading-font-family);
        line-height: var(--heading-line-height);
        font-weight: var(--heading-font-weight);
        text-wrap: var(--heading-text-wrap);
        text-transform: var(--heading-text-transform);
        color: var(--heading-color);
    }

    h1, .h1 {
        font-size: var(--h1);
    }

    h2, .h2 {
        font-size: var(--h2);
    }

    h3, .h3 {
        font-size: var(--h3);
    }

    h4, .h4 {
        font-size: var(--h4);
    }

    h5, .h5 {
        font-size: var(--h5);
    }

    h6, .h6 {
        font-size: var(--h6);
    }

    a {
        color: var(--primary);
        transition: color var(--transition);

        &:hover {
            color: var(--primary-ultra-dark);
        }
    }

    .text-primary {
        color: var(--primary);
    }

    .eyebrow {
        font-size: var(--text-l);
        text-transform: uppercase;
        font-weight: calc( var(--text-font-weight) * 1.5);
        color: var(--text-alt);
        font-family: var(--base-font-family);
    }

    .lede {
        font-size: var(--text-l);
        color: var(--text-alt);
        line-height: var(--text-xxl-line-height);
    }

    .address {
        font-size: var(--text-s);
        line-height: var(--text-s-line-height);
        font-style: italic;

        br + & {
            margin-block-start: var(--space-xs);
        }
    }

    .text-m-minus {
        font-size: var(--text-m-minus);
    }

    .team-text {
        font-size: var(--text-s);

        @media(width >= 768px) {
            font-size: var(--text-m-minus);
        }
    }

    ul {
        padding-inline-start: var(--space-s);
    }

    .flex-inline-list {
        display: flex;
        flex-direction: row;
        gap: var(--content-gap);
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .teams-definition-list {
        font-size: var(--text-s);
        line-height: var(--text-s-line-height);

        :has(> &) {
            container-type: inline-size;
        }

        @container (inline-size >= 11rem) {
            font-size: var(--text-m);
        }

        dd {
            /* padding-inline-start: var(--space-s); */

            + dt {
                margin-block-start: calc( var(--space-xs) / 1.5);
            }
        }
    }
}

@layer structure {
    :where(section:not(section section)) {
        display: flex;
        flex-direction: column;
        padding-block: var(--section-padding-block);
        padding-inline: var(--gutter);
        gap: var(--container-gap);

        > :where(div, ul, ol) {
            gap: var(--content-gap);
        }
    }

    :where(.container) {
        inline-size: 100%;
        display: flex;
        flex-direction: column;
        max-inline-size: var(--content-width, 1366px);
        align-self: center;
    }

    .hero-salem {
        --shape-max-inline-size: 100%;
        --brand-max-inline-size: clamp(9.38rem, 16.76vi + 3.34rem, 16.75rem);
        --bg-underlay-offset: clamp(1.56rem, 10.65vi + -2.27rem, 6.25rem);
        --bg-img-start: 11%;
        
        overflow: unset !important; /* slogan image uses negative bottom margin on mobile */

        @media (width >= 430px) {
            --shape-max-inline-size: 90%;
        }

        @media (width >= 500px) {
            --shape-max-inline-size: 85%;
        }

        @media (width >= 768px) {
            --shape-max-inline-size: 80%;
            --bg-img-start: 25%;
        }

        @media (width >= 1200px) {
            --shape-max-inline-size: 66%;
            --bg-img-start: center;
        }

        @media (width >= 1920px) {
            --shape-max-inline-size: 60%;
        }

        @media (width >= 2220px) {
            --shape-max-inline-size: 50%;
        }

        @media (width >= 2300px) {
            --shape-max-inline-size: 40%;
        }

        .hero-salem__branding {
            inline-size: var(--shape-max-inline-size);
            background: black;
            clip-path: polygon(100% 0, 0 0, 0 100%);
            padding: var(--gutter);
            padding-block-end: calc( var(--section-padding-block) * 2);

            .hero-salem__brand {
                max-inline-size: var(--brand-max-inline-size);
            }
        }

        .hero-salem__slogan {
            --slogan-img-max-inline-size: clamp(10.94rem, 57.53vi + -9.77rem, 36.25rem); /* clamp(12.5rem, 53.98vi + -6.93rem, 36.25rem) */
            display: flex;
            flex-direction: column;
            padding-inline: var(--gutter);
            gap: var(--container-gap);

            .container {
                align-items: flex-end;
            }

            img {
                position: relative;
                max-inline-size: var(--slogan-img-max-inline-size);

                @media (width <= 430px) {
                    margin-block-end: calc( var(--space-xs) * -1);
                    position: relative;
                    z-index: 1;
                }
            }
        }

        .background-media {
            &[data-style-option="underlay"] {
                --overlay-color: var(--secondary) url(../imgs/bgp-lines-nested.svg) no-repeat;
                &:after {
                    inset: 0 0 var(--bg-underlay-offset) 0 !important;
                    z-index: -1;
                    background-size: cover !important;
                    background-position: right bottom !important;

                    @media (width <= 576px) {
                        background-position: 30% bottom !important;
                    }
                }
            }

            .background-media__img {
                object-position: var(--bg-img-start) bottom;
            }
        }
    }

    .body-salem__grid {
        display: flex;
        flex-direction: column;
        gap: var(--section-padding-block);
    }

    .main-salem__grid {
        display: flex;
        flex-direction: column;
        gap: var(--section-padding-block);

        :where(section:not(section section)) {
            padding-block: 0;
        }
    }

    :where(.intro-salem) {
        .intro-salem__heading {
            max-inline-size: 50ch;
            font-size: var(--h4);

            span {
                font-weight: 400;
            }
        }

        .intro-salem__lede {
            max-inline-size: 70ch;
        }
    }

    :where(.footer-salem) {
        /* for the dimensions, I'm getting the max size from the actual image size, for minimum i'm dividing by 2 */
        --bg-img-w: clamp(20.38rem, 63.67vi + -10.19rem, 40.75rem);
        --bg-img-h: clamp(9.44rem, 29.49vi + -4.72rem, 18.88rem);
        --bg-img-offset: clamp(6.44rem, 20.12vi + -3.22rem, 12.88rem);

        --bg-arc-w: clamp(16.38rem, 51.17vi + -8.19rem, 32.75rem);
        --bg-arc-h: clamp(3.38rem, 10.55vi + -1.69rem, 6.75rem);
        display: flex;
        flex-direction: column;
        padding-block: calc( var(--section-padding-block) / 4);
        padding-inline: var(--gutter);
        gap: var(--container-gap);
        background: var(--secondary);
        color: #fff;

        @media (width >= 768px) { 
            margin-block-start: calc( var(--bg-img-h) - var(--section-padding-block) );
        }
        

        .container {
            position: relative;

            @media (width >= 768px) {
                &:before, &:after {
                    content: "";
                    position: absolute;
                    background-position: center !important;
                    background-size: contain !important;
                }

                &:before {
                    right: var(--bg-img-offset);
                    bottom: calc( var(--section-padding-block) / -4);
                    width: var(--bg-img-w);
                    height: var(--bg-img-h);
                    background: url('../imgs/tire-helmet-graphic_v2.webp') no-repeat;
                    z-index: 1;
                }

                &:after {
                    right: 0;
                    bottom: calc( (var(--text-m) * 1.125) + (var(--section-padding-block) / 4) + 2px);
                    width: var(--bg-arc-w);
                    height: var(--bg-arc-h);
                    background: url('../imgs/bg-ftr-arc.webp') no-repeat;
                }
            }
        }
    }
}

@layer buttons {
    [class*="btn--"]:where(:not(.btn--none)) {
        background: var(--btn-background);
        color: var(--btn-text-color);
        padding-block: var(--btn-padding-block);
        padding-inline: var(--btn-padding-inline);
        inline-size: var(--btn-width, auto);
        min-inline-size: var(--btn-min-width);
        line-height: var(--btn-line-height);
        font-size: var(--btn-font-size, var(--text-m));
        font-weight: var(--btn-font-weight);
        font-style: var(--btn-font-style);
        text-transform: var(--btn-text-transform);
        letter-spacing: var(--btn-letter-spacing);
        text-decoration: var(--btn-text-decoration);
        border-width: var(--btn-border-width);
        border-style: var(--btn-border-style);
        border-radius: var(--btn-border-radius);
        border-color: var(--btn-border-color);
        transition: var(--btn-transition, var(--transition));
        justify-content: var(--btn-justify-content, center);
        text-align: var(--btn-text-align, center);
        display: var(--btn-display, inline-flex);
        align-items: var(--btn-align-items, center);
        cursor: pointer;
    }

    [class*="btn--"]:where(:not(.btn--none)):hover {
        background: var(--btn-background-hover);
        color: var(--btn-text-color-hover);
        border-color: var(--btn-border-color-hover);
        text-decoration: var(--btn-text-decoration-hover);
    }

    .btn--primary {
        --btn-background: var(--primary);
        --btn-background-hover: var(--primary-hover);
        --btn-text-color: white;
        --btn-text-color-hover: white;
        --btn-border-color: var(--primary);
        --btn-border-color-hover: var(--primary-hover);
        --focus-color: var(--primary-light);
    }

    .btn--black {
        --btn-background: var(--black);
        --btn-background-hover: var(--white);
        --btn-text-color: var(--white);
        --btn-text-color-hover: var(--black);
        --btn-border-color: var(--black);
        --btn-border-color-hover: var(--black);
        --focus-color: var(--white);
    }

    .btn--outline {
        --btn-background: var(--white);
        --btn-background-hover: var(--black);
        --btn-text-color: var(--black);
        --btn-text-color-hover: var(--white);
        --btn-border-color: var(--black);
        --btn-border-color-hover: var(--black);
        --focus-color: var(--white);
    }
}

@layer tables {
    .table-salem {
        /* Table-specific tokens with fallbacks */
        --table-font-family: var(--base-font-family, Arial, sans-serif);
        --table-font-size: var(--text-m, 1rem);
        --table-line-height: var(--text-line-height, 1.5);

        --table-day-font-size: var(--text-l, 1.5rem);
        
        /* Spacing */
        --table-cell-padding-block: var(--space-xs, 0.5rem);
        --table-cell-padding-inline: var(--space-s, 0.75rem);
        --table-border-width: 1px;
        
        /* Colors - Row backgrounds */
        --table-row-bg: var(--white, #ffffff);
        --table-row-bg-break: var(--base-ultra-light, #efefef);
        --table-row-bg-sub: var(--neutral-ultra-light, #efefef);
        
        /* Colors - Day header (primary) */
        --table-day-bg: var(--primary, #01a706);
        --table-day-color: var(--white, #ffffff);
        
        /* Colors - Column header (dark navy secondary) */
        --table-header-bg: var(--secondary, #001738);
        --table-header-color: #ffffff;
        
        /* Colors - Borders & text */
        --table-border-color: var(--base-light);
        --table-text-color: var(--black, #000000);

        --table-scrollable-h: clamp(18.75rem, 31.65vi + 3.56rem, 31.25rem);

        /* Wrapper layout */
        inline-size: 100%;
        max-block-size: var(--table-scrollable-h);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        /* Table element */
        .table-salem__table {
            inline-size: 100%;
            min-inline-size: 600px;
            border-collapse: collapse;
            border-spacing: 0;
            font-family: var(--table-font-family);
            font-size: var(--table-font-size);
            line-height: var(--table-line-height);
            color: var(--table-text-color);
            background-color: var(--table-row-bg);
        }

        /* All cells (th and td) */
        th,
        td {
            padding-block: var(--table-cell-padding-block);
            padding-inline: var(--table-cell-padding-inline);
            border: var(--table-border-width) solid var(--table-border-color);
            vertical-align: top;
            text-align: start;
        }

        /* Column widths via nth-child */
        th:nth-child(1),
        td:nth-child(1) {
            inline-size: 18%;
            /* white-space: nowrap; */
        }

        th:nth-child(2),
        td:nth-child(2) {
            inline-size: 38%;
        }

        th:nth-child(2):last-child,
        td:nth-child(2):last-child {
            inline-size: 82%;
        }

        th:nth-child(3),
        td:nth-child(3) {
            inline-size: 24%;
        }

        th:nth-child(4),
        td:nth-child(4) {
            inline-size: 20%;
        }

        /* Thead styling */
        .table-salem__head {
            :where(tr) {
                background-color: var(--table-header-bg);
            }

            :where(th) {
                background-color: var(--table-header-bg);
                color: var(--table-header-color);
                font-weight: 700;
                text-align: center;
                position: -webkit-sticky; /* for Safari */
                position: sticky;
                top: -1px; /* otherwise we see some text running behind the very top of the cells */
                z-index: 10;

                &:first-child
                {
                    left: 0;
                    z-index: 11;
                }

                /* because of the scrolling, without this we lose the borders on the sticky cells */
                &:after {
                    content: "";
                    position: absolute;
                    inset: -1px;
                    top: 0;
                    border: var(--table-border-width) solid var(--table-border-color);
                    height: 100%;
                }
            }
        }

        /* Tbody base rows */
        .table-salem__body {
            :where(tr) {
                background-color: var(--table-row-bg);
            }

            td {
                background-color: var(--table-row-bg);

                &:first-child:not(.not-row-parent) {
                    position: -webkit-sticky; /* for Safari */
                    position: sticky;
                    left: 0;

                    &:before, &:after {
                        content: "";
                        position: absolute;
                        left: calc( var(--table-border-width) * -1);
                        top: 0;
                        width: var(--table-border-width);
                        height: 100%;
                        background: var(--table-border-color);
                    }

                    &:after {
                        left: unset;
                        right: calc( var(--table-border-width) * -1);
                    }
                }
            }
        }

        .table-salem__body tr:not(.table-salem__row--day):not(.table-salem__row--header) td:nth-child(1):not(.not-row-parent) {
            font-weight: 700;
        }

        /* Row modifier: Day header (green) */
        .table-salem__row--day {
            background-color: var(--table-day-bg);
            
            & td {
                background-color: var(--table-day-bg);
                color: var(--table-day-color);
                font-weight: 700;
                border-color: var(--table-day-bg);
                padding-block: calc(var(--table-cell-padding-block) * 0.75);
                font-size: var(--table-day-font-size);
            }
        }

        /* Row modifier: Column header in body (dark navy) */
        .table-salem__row--header {
            --table-border-color: var(--secondary-light);
            background-color: var(--table-header-bg);
            
            & td {
                background-color: var(--table-header-bg);
                color: var(--table-header-color);
                font-weight: 700;
                text-align: center;
            }
        }

        /* Row modifier: Break/meal (light gray) */
        .table-salem__row--break {
            background-color: var(--table-row-bg-break);
            
            & td {
                background-color: var(--table-row-bg-break);
            }
        }

        /* Row modifier: Sub-item (very light gray)
        & .table-salem__row--sub {
            background-color: var(--table-row-bg-sub);
            
            & td {
                background-color: var(--table-row-bg-sub);
            }
        } */

        /* Row modifier: Highlight/announcement */
        .table-salem__row--highlight {
            background-color: var(--table-row-bg);
            
            & td {
                background-color: var(--table-row-bg);
            }
        }
    }
}

@layer accordion {
    .etch-accordion {
        /* etch accordion */
        --etch-accordion-gap: 0.5rem;
        --etch-accordion-background: var(--body-bg-color, #fff);

        /* etch accordion item */
        --etch-accordion-item-border-radius: 0.5rem;
        --etch-accordion-item-border: 1px solid light-dark( var(--primary-semi-light), var(--primary) );
        --etch-accordion-item-text-color: var(--black, #222);
        --etch-accordion-item-padding-inline: 1rem;
        --etch-accordion-item-padding-block: 1rem;

        /* etch accordion button */
        --etch-accordion-button-padding: var(--etch-accordion-item-padding-inline) var(--etch-accordion-item-padding-block);
        --etch-accordion-button-outline: 2px solid #2466e8;
        --etch-accordion-button-outline-offset: 2px;
        --etch-accordion-button-background: var(--primary, #ebf0f9);
        --etch-accordion-button-color-hover: #ffffff;

        /* etch accordion svg */
        --etch-accordion-svg-rotate: 180deg;
        --etch-accordion-svg-transition-duration: var(--etch-accordion-transition-duration);
        --etch-accordion-svg-transition-timing-function: var(--etch-accordion-transition-timing-function);

        /* etch accordion panel */
        --etch-accordion-panel-padding-inline: var(--etch-accordion-item-padding-inline);
        --etch-accordion-panel-transition-duration: var(--etch-accordion-transition-duration);
        --etch-accordion-panel-transition-timing-function: var(--etch-accordion-transition-timing-function);

        --etch-accordion-icon-w: 24px;
        --etch-accordion-icon-h: var(--etch-accordion-icon-w);

        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--etch-accordion-gap);
        background: var(--etch-accordion-background);

        :where(.etch-accordion__item) {
            color: var(--etch-accordion-item-text-color);
            border: var(--etch-accordion-item-border);
            border-radius: var(--etch-accordion-item-border-radius);
        }

        :where(.etch-accordion__header) {
            font-size: var(--h4);
        }

        :where(.etch-accordion__button) {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: var(--etch-accordion-button-padding);
            color: var(--etch-accordion-item-text-color);
            cursor: pointer;
            align-items: center;
        }

        .etch-accordion__button-text {
            text-align: start;

            span {
                font-weight: 200;
            }
        }

        :where(.etch-accordion__button:focus-visible) {
            outline: var(--etch-accordion-button-outline);
            outline-offset: var(--etch-accordion-button-outline-offset);
            background: var(--etch-accordion-button-background);
        }

        :where(.etch-accordion__button:hover) {
            background: var(--etch-accordion-button-background);
            color: var(--etch-accordion-button-color-hover);
            border-radius: calc( var(--etch-accordion-item-border-radius) - 1px);
        }

        :where(.etch-accordion__button svg) {
            transition: transform var(--etch-accordion-svg-transition-duration) var(--etch-accordion-svg-transition-timing-function);
            min-inline-size: var(--etch-accordion-icon-w);
            min-block-size: var(--etch-accordion-icon-h);
        }

        :where(.etch-accordion__button[aria-expanded='true']) {
            --etch-accordion-item-text-color: #fff;
            border-bottom: var(--etch-accordion-item-border);
            background: var(--etch-accordion-button-background);
            border-top-left-radius: calc( var(--etch-accordion-item-border-radius) - 1px);
            border-top-right-radius: calc( var(--etch-accordion-item-border-radius) - 1px);

            &:hover {
                --etch-accordion-button-background: var(--primary-semi-light);
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
        }

        :where(.etch-accordion__button[aria-expanded='true'] svg) {
            transform: rotate(var(--etch-accordion-svg-rotate));
        }

        :where(.etch-accordion__panel) {
            /* keep at 0px to avoid animation issues */
            max-height: 0;
            overflow: hidden;
            transition: max-height var(--etch-accordion-panel-transition-duration) var(--etch-accordion-panel-transition-timing-function);
        }

        :where(.etch-accordion__panel[hidden]) {
            display: none;
        }

        :where(.etch-accordion__content) {
            padding-inline: var(--etch-accordion-item-padding-inline);
            padding-block: var(--etch-accordion-item-padding-block);
        }
    }
}

@layer utilities {
    .background-media {
        :has(> &) {
            position: relative;
            isolation: isolate;
            overflow: clip;
        }

        pointer-events: none;
        position: absolute;
        inset: 0;
        z-index: -1;
        margin-block-end: 0;

        &::after {
            content: '';
            background: var(--overlay-color);
            opacity: var(--overlay-opacity);
            position: absolute;
            inset: 0;
            display: var(--overlay-display);
            mix-blend-mode: var(--overlay-blend-mode);
        }

        &[data-has-overlay='true'] {
            --overlay-display: true;
        }

        .background-media__img {
            position: absolute;
            inset: 0;
            inline-size: 100%;
            block-size: 100%;
            object-fit: cover;
        }
    }

    /* Visually hidden but accessible to screen readers */
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    @media (width < 768px) {
        .d-sm-inline {
            display: inline !important;
        }

        .d-sm-none {
            display: none !important;
        }
    }

    @media (width >= 768px) {
        .d-md-block {
            display: block !important;
        }

        .d-md-none {
            display: none !important;
        }
    }
}