/* Fonts */
:root {
    --font-body: "Archivo", sans-serif;
    --font-condensed: "wdth" 87.5; 
    --font-expanded: "wdth" 125;
}

/* Font Sizing */

:root {
    /* Font size scale - Major third scale */
    --fs-xs: clamp(0.75rem, 0.8rem + 0.25vw, 0.9rem);
    --fs-sm: clamp(0.825rem, 0.85rem + 0.25vw, 0.95rem);
    --fs-base: clamp(0.9125rem, 0.975rem + 0.25vw, 1rem);
    --fs-md: clamp(1.125rem, 1.075rem + 0.375vw, 1.375rem);
    --fs-lg: clamp(1.25rem, 1.175rem + 0.5vw, 1.75rem);
    --fs-xl: clamp(1.5rem, 1.375rem + 0.75vw, 2.25rem);
    --fs-2xl: clamp(1.875rem, 1.675rem + 1vw, 3rem);
    --fs-3xl: clamp(2.25rem, 1.975rem + 1.5vw, 4rem);
    /* Display sizes for dramatic headings */
    --fs-display-1: clamp(3rem, 2.5rem + 2vw, 5.5rem);
    --fs-display-2: clamp(3.75rem, 3rem + 3vw, 7rem);
    /* Line height scale */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.45;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    /* Display specific line heights */
    --leading-display: 1.05; /* Tighter leading for large display text */
}

/* General Body */

body, html {
    font-family: var(--font-body);
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    color: var(--black);
    font-size: var(--fs-base);
    line-height: var(--leading-normal);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* for sticky elements/header */
    /* overflow-x: clip; */
}

/* Headings */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .display-1, .display-2 {
    font-variation-settings: var(--font-condensed);
    font-weight: 300;
    margin-top: 2rem;
    &:first-child {
        margin-top: 0;
    }
}

h1, .h1 {
    font-size: var(--fs-3xl);
    line-height: var(--leading-tight);
    margin-bottom: 0.75em;
}

.h1 {
    @media (max-width:1399px) {
        font-size: var(--fs-2xl);
    }
}

h2, .h2 {
    font-size: var(--fs-2xl);
    line-height: var(--leading-tight);
    margin-bottom: 0.65em;
}

h3, .h3 {
    font-size: var(--fs-xl);
    line-height: var(--leading-snug);
    margin-bottom: 0.6em;
}

h4, .h4 {
    font-size: var(--fs-lg);
    line-height: var(--leading-snug);
    margin-bottom: 0.5em;
}

h5, .h5 {
    font-size: var(--fs-md);
    line-height: var(--leading-normal);
    margin-bottom: 0.5em;
}

h6, .h6 {
    font-variation-settings: var(--font-expanded); 
    font-size: var(--fs-sm);
    line-height: var(--leading-snug);
    margin-bottom: 0.5em;
    text-transform: uppercase;
    font-weight: 600;
}

.text-white {
    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .display-1, .display-2 {
        color: var(--white);
    }
}

/* Extra Display Headings */

.display-1 {
    font-size: var(--fs-display-1);
    line-height: var(--leading-display);
    margin-bottom: 0.75em;
}

.display-2 {
    font-size: var(--fs-display-2);
    line-height: var(--leading-display);
    margin-bottom: 0.75em;
}

/* Content */

.font-body {
    font-family: var(--font-body);
    font-weight: 400;
}

.font-headline {
    font-weight: 400;
    font-variation-settings: var(--font-condensed);
}

.font-headline-alt {
    font-weight: 900;
    font-variation-settings: var(--font-expanded);
}

.text-bold-style {
    strong {
        font-variation-settings: var(--font-expanded);
        font-weight: 700;
        margin-top: 2rem;
        &:first-child {
            margin-top: 0;
        }
    }
}

.add-span-bold {
    span {
        font-weight: 900;
        font-variation-settings: var(--font-expanded); 
        text-transform: uppercase;
        letter-spacing: -.05em;
    }
}

p {
    margin-top: 0;
    margin-bottom: clamp(1rem, 0.95rem + 0.25vw, 1.5rem);
}

.p {
    font-size: inherit;
    text-transform: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
}

h2.p {
    margin-bottom: clamp(1rem, 0.95rem + 0.25vw, 1.5rem);
}

.fs-large {
    font-size: var(--fs-md);
}

.fs-base {
    font-size: var(--fs-base);
}

.fs-small {
    font-size: var(--fs-sm);
}

.fs-x-small {
    font-size: var(--fs-xs);
}

.bold, strong {
    font-weight: 700;
}

.xbold {
    font-weight: 900;
}

.fw-regular {
    font-weight: 400;
}

.text-underline {
    text-decoration: underline;
}

.text-gradient {
    background-image: linear-gradient(to right, var(--blue), var(--black));
    color: transparent;
    background-clip: text;
}

ul.list-none {
    list-style: none;
    padding-left: 0;
}

ul {
    padding-left: 1.25rem;
    li {
        margin-bottom: 0.25rem; /* Set to desired margin */
    }
}

.navbar ul li {
    margin-bottom: 0; /* Remove on nav list */
}

hr {
    color: var(--medium-gray);
    opacity: 1;
    margin: 2rem 0;
}

hr.small-margin {
    margin: 1.25rem 0;
}

.bg-yellow hr {
    color: var(--black);
}

/* List that centers on mobile */
@media (max-width:767px) {
    ul.md-center-text {
        list-style: none;
        padding-left: 0;
        li {
            position: relative;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            &:before {
                content: "";
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%);
                height: 1px;
                width: 5rem;
                background-color: var(--white-sand);
            }

            &:last-child {
                margin-bottom: 0;
                padding-bottom: 0;
                &:before {
                    display: none;
                }
            }
        }
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Links */

a {
    color: inherit; /* Set to desired color */
    transition: all .25s;
    outline: 0;
}

    a:hover, a:focus {
        color: inherit;
    }

    a.blank {
        color: inherit;
        text-decoration: none;
    }

    a.blank:hover, a.blank:focus {
        text-decoration: none;
    }

    a.blank.hover-orange:hover {
        color: #ef4f35;
    }

    a.hover-underline {
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }

a.underline-link {
    text-decoration-color: var(--blue);
    white-space: nowrap;

    &:hover {
        text-decoration-color: var(--black);
    }
}