/* kumbh-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Kumbh Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/kumbh-sans-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/inter-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    /* Font */
    --primaryColor: #7FB428;
    --primaryColorLight: #EBF9DD;
    --primaryTextColorDark: #000000;
    --standardPadding: 10px;
    --secondary: #295606;
    --secondaryLight: #9EFF00;
    --headerColor: #EBF9DD4F;
    --bodyTextColor: #191F0F;
    --bodyTextColorWhite: #ffffff;
    /* 13px - 16px */
    --topperFontSize: clamp(1rem, 4vw, 1.6rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;

    /* x, y, blur, color+opacity */
    --dropShadowBottom: drop-shadow(0px 4px 6.2px #0000001A);
    --dropShadowTop: drop-shadow(0px -4px 6.2px #0000001A);
    --dropBoxShadow: 0px 4px 6.2px #0000001A;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
    --textShadowStandard: 2px 2px 5px black;
    --textShadowThin: 1.2px 1.2px 1px black;
    --textShadowUltraThin: .5px .5px 1px black;
    --textShadowLight: 2px 2px 5px white;
    --lightGreyBorder: 2px solid #D9D9D9;
    --scrollBarBackground: #31660733;

}

/* All screen sizes */
@media only screen and (min-width: 0px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        color: var(--bodyTextColor);
        font-size: 13px;
    }

    body {
        font-display: fallback;
        font-family: "Kumbh Sans", Tahoma, sans-serif;
        font-size: 13px;
        line-height: 1.6;
        letter-spacing: 0.1px;
        word-spacing: 1px;
        background-color: #fff;
    }

    section {
        padding: var(--sectionPadding);
    }

    .unselectable {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    hr {
        height: 1px;
        margin: 25px 0;
        background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0)), color-stop(0.5, #333333), to(rgba(0, 0, 0, 0)));
        background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0));
        background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0));
        background: -o-linear-gradient(left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0));
        background: linear-gradient(to left, rgba(0, 0, 0, 0), #333333, rgba(0, 0, 0, 0));
        border: 0;
    }

    hr:after {
        display: block;
        content: '';
        height: 30px;
        background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 116, color-stop(0%, #cccccc), color-stop(100%, rgba(255, 255, 255, 0)));
        background-image: -webkit-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
        background-image: -moz-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
        background-image: -o-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
        background-image: radial-gradient(farthest-side at center top, #cccccc 0%, rgba(255, 255, 255, 0) 100%);
    }

    /* ********************************* 
     * Hamburger icon styling 
     ********************************* */
    #hamburger-icon {
        /* Hamburger icon attributes */
        width: 60px;
        height: 45px;
        position: relative;
        cursor: pointer;

        /* Initial setup */
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);

        /* Animation changes */
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }

    #hamburger-icon span {
        /* Hamburger icon attributes */
        display: block;
        background: var(--primaryColor);
        position: absolute;
        width: 100%;
        left: 0;

        /* Changable attributes */
        height: 9px;
        border-radius: 9px;
        opacity: 1;

        /* Initial setup */
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);

        /* Animation changes */
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    #hamburger-icon span:nth-child(1) {
        top: 0px;
    }

    #hamburger-icon span:nth-child(2),
    #hamburger-icon span:nth-child(3) {
        top: 18px;
    }

    #hamburger-icon span:nth-child(4) {
        top: 36px;
    }

    #hamburger-icon.open-navigation span:nth-child(1) {
        top: 18px;
        width: 0%;
        left: 50%;
    }

    #hamburger-icon.open-navigation span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #hamburger-icon.open-navigation span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    #hamburger-icon.open-navigation span:nth-child(4) {
        top: 18px;
        width: 0%;
        left: 50%;
    }

    /* ********************************* 
     * standard font setup 
     ********************************* */
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.4rem;
    }

    h3 {
        font-size: 2.2rem;
    }

    h4 {
        font-size: 1.7rem;
    }

    p,
    a {
        font-size: 1.2rem;
        font-family: "Inter", Tahoma, sans-serif;
    }

    a {
        text-decoration: none;
    }

    /* ********************************* 
     * one offs
     ********************************* */
    .active-link {
        font-weight: bold;
        text-decoration-line: underline;
    }

    /* ********************************* 
     * text to button styling 
     ********************************* */
    a.btn {
        border: none;
        padding: 15px 50px;
        background-color: var(--primaryColorLight);
        border-radius: 50px;
        line-height: 4rem;
    }

    a.btn-primary {
        background-color: var(--primaryColor);
        color: var(--bodyTextColorWhite);
    }

    .primary-color {
        font-size: inherit;
        color: var(--primaryColor);
        text-shadow: var(--textShadowUltraThin);
    }

    .secondary-color {
        font-size: inherit;
        color: var(--primaryColorLight);
    }

    .bold {
        font-size: inherit;
        font-weight: bold;
    }

    /* ****************
     * topper bar
     **************** */
    #topper,
    #bottom-bar {
        width: 100%;
        /* Use variable value, if found; Use #000 as a fallback */
        background-color: var(--primaryColor, #000);
        padding: var(--standardPadding);
        padding-bottom: 5px;
        display: flex;
        justify-content: space-between;
    }

    #topper *,
    #bottom-bar * {
        color: var(--primaryColorLight);
        font-size: var(--topperFontSize);
        text-shadow: var(--textShadowThin);
    }

    /* ****************
     * navigation-bar
     **************** */
    #navigation-bar {
        display: flex;
        background-color: #ffffff;
        justify-content: space-between;
        padding: var(--standardPadding);
        filter: var(--dropShadowBottom);
    }

    #navigation-bar nav ul {
        list-style-type: none;
        padding: var(--standardPadding);
    }

    #navigation-bar nav ul li a {
        padding: var(--standardPadding);
    }

    #navigation-bar nav ul li a:hover {
        text-decoration: underline;
    }

    .nav-logo-image {
        width: clamp(25vw, 30vw, 35vw);
    }

    /* ****************
     * footer section
     **************** */
    #footer-section {
        filter: var(--dropShadowTop);
        padding: var(--standardPadding);
        background-color: #ffffff;
    }

    #footer-image-container {
        /* border: 1px solid black; */
        text-align: center;
    }

    #footer-newsletter-sign-up-form {
        margin: auto;
        width: 75%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 25px 0px;
    }

    #footer-newsletter-sign-up-form input {
        border: var(--lightGreyBorder);
        border-radius: 25px;
        padding: var(--standardPadding);
        filter: var(--dropShadowBottom);
    }

    #footer-newsletter-sign-up-form button {
        border: none;
        border-radius: 25px;
        padding: 10px 0px;
        background-color: var(--primaryColor);
        color: var(--primaryColorLight);
        text-shadow: var(--textShadowThin);
    }

    #footer-newsletter-sign-up-form button:hover {
        cursor: pointer;
    }

    #footer-nav-container {
        text-align: center;
    }

    #footer-nav-container ul {}

    #footer-nav-container ul li {
        list-style-type: none;
        padding: 10px 0px;
    }

    #footer-nav-container ul li a:hover {
        text-decoration: underline;
    }
}

/* Mobile friendly layout (phones and small tablets 992px and down) */
@media only screen and (max-width: 992px) {
    * {
        font-size: 10px;
    }

    #navigation-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    #navigation-bar nav {
        display: none;
        flex: 100vw;
        flex-direction: column;
        text-align: end;
    }

    #navigation-bar nav ul {}

    #navigation-bar nav ul li {
        margin: 10px 0px;
    }
}

/* Tiny devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 420px) {
    * {
        font-size: 13px;
    }
}

/* Tiny devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 500px) {
    * {
        font-size: 14px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    * {
        font-size: 16px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    * {
        font-size: 19px;
    }

    /* ************************************
     * Navigation section
     ************************************ */
    #navigation-bar nav {
    } 

    #navigation-bar nav ul {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-top: 10px;
    }

    #hamburger-icon {
        display: none;
    }

    /* ****************
     * footer section
     **************** */
    #footer-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #footer-image-container {
        grid-row: 1 / span 2;
        margin: auto 0px; /* Center vertically */
    }

    #footer-nav-container ul {
        display: flex;
        flex-direction: row;
        gap: 25px;
        justify-content: center;
        padding: var(--standardPadding);
    }

    #footer-section div {
        /* border: 1px solid green; */
    }

    #footer-newsletter-sign-up-form {

    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    * {
        font-size: 19px;
    }
}