/* ---------- Shared variables ---------- */

@font-face {
    font-family: "Plaster";
    font-display: swap;
    src: url("/Catalyst/Fonts/Plaster-Regular.woff2") format("woff2");
    src: url("/Catalyst/Fonts/Plaster-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Fraunces";
    font-display: swap;
    src: url("/Catalyst/Fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.woff2") format("woff2");
    src: url("/Catalyst/Fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.woff2") format("truetype");
}

@font-face {
    font-family: "Fraunces-Bold";
    font-display: swap;
    src: url("/Catalyst/Fonts/Fraunces_72pt-Bold.woff2") format("woff2");
    src: url("/Catalyst/Fonts/Fraunces_72pt-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Fraunces-Italic";
    font-display: swap;
    src: url("/Catalyst/Fonts/Fraunces_72pt-Italic.woff2") format("woff2");
    src: url("/Catalyst/Fonts/Fraunces_72pt-Italic.ttf") format("truetype");
}

@font-face {
    font-family: "Baloo2";
    font-display: swap;
    src: url("/Catalyst/Fonts/Baloo2-Regular.woff2") format("woff2");
    src: url("/Catalyst/Fonts/Baloo2-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Baloo2-Bold";
    font-display: swap;
    src: url("/Catalyst/Fonts/Baloo2-Bold.woff2") format("woff2");
    src: url("/Catalyst/Fonts/Baloo2-Bold.ttf") format("truetype");
}

:root {
    --forest-color: #2e6a32;
    --kelly-color: #40ad48;
    --taupe-color: #848e8a;
    --teal-color: #1fbdc6;
    --ocean-color: #00acd4;
    --slate-color: #4680a8;
    --magenta-color: #c24097;
    --salmon-color: #f06687;
    --red-color: #d12229;
    --sage-color: #d0d896;
    --gold-color: #fdb813;
    --spring-color: #ccde68;
    --tan-color: #f4ecd0;
    --oldLogoTeal-color: #5ff3e0;
}

/* ---------- Header banner ---------- */

.banner {
    background: var(--forest-color);
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: max(max(14vh, 145px), min(14vw, 145px));
    width: 100%;
}

.bannerBoxLeft {
    display: flex;
}

.bannerBoxRight {
    display: flex;
    justify-content: right;
}

.tagline {
    color: var(--gold-color);
    font-size: max(2.8vh, max(20px, min(2.8vw, 28px)));
    align-self:center;
    margin-right: max(3vh, 3vw);
    text-align:center;
    font-family: Plaster, ui-serif;
}

.homepageLink {
    display: flex;
    text-decoration: none;
}

.logo {
    width: max(24vh, min(24vw, 270px));
    min-width: 180px;
    margin-left: max(3vh, 3vw);
    margin-bottom: max(1vh, 1vw);
}

@media (width < 435px) {
    .logo {
        width: 90%;
    }
    .tagline {
        font-size: max(max(2vh, 20px), min(2vw, 20px));
    }
}

/* ---------- Navigation bar ---------- */

.navBar {
    margin-right: 24px;
}

.navBarList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media (width >= 555px) {
    .navBarList {
        justify-content: right;
    }
}

.navBarListItem {
    list-style-type: none;
    border: max(0.5vh, min(0.5vw, 5px)) solid white;
    border-radius: max(max(0.5vh, 5px), max(0.5vw, 5px));
    background-color: var(--spring-color);
    padding: max(max(0.5vh, 5px), min(0.5vw, 5px))
        max(max(0.5vh, 5px), min(0.5vw, 5px));
    font-family: Fraunces, ui-sans-serif;
    width: max(max(10.5vh, 105px), min(10.5vw, 105px));
    display: grid;
}

.navBarListItem:hover {
    background-color: var(--tan-color);
}

.navItem {
    text-decoration: none;
    color: black;
    justify-self: center;
    align-self: center;
    font-size: max(2.25vh, max(19px, min(2.25vw, 22.5px)));
}

/* ---------- Footer ---------- */

.contactBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: max(max(4vh, 40px), min(4vw, 40px));
    margin-bottom: max(max(4vh, 40px), min(4vw, 40px));
    justify-content: center;
}

.emailBox, .phoneBox {
    justify-self: center;
    align-self: center;
    display: grid;
    width: calc(100%/2);
    margin-bottom: max(max(4vh, 40px), min(4vw, 40px));
}

.emailBox {
    min-width: max(25vh, 250px);
}

.phoneLink, .emailLink {
    justify-self: center;
    align-self: center;
    display: grid;
    text-decoration: none;
}

.phoneText, .emailText {
    margin-top: max(max(1vh, 10px), min(1vw, 10px));
    font-family: Baloo2-Bold, ui-sans-serif;
    justify-self: center;
    align-self: center;
    color: var(--forest-color);
}

.phoneText {
    white-space: nowrap;
}

.phoneIcon {
    height: max(7vh, 7vw, 70px);
    max-height: 70px;
    justify-self: center;
    align-self: center;
}

.emailIcon {
    justify-self: center;
    align-self: center;
}