/*
Theme Name: Eprefix bootstrap Block editor theme
Theme URI:
Description:
Version: 6.0
Author: Gary McClumpha & James Richards
Author URI: http://eprefix.co.uk
*/

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Akkurat Light Pro';
    font-size: 0.9375rem;
    line-height: 1.33em;
    font-weight: 300;
    font-style: normal;
    color: #151F33;
    background-color: #FFFEFE;
    line-height: 1.33em;
}

.site-content {
    flex: 1 0 auto;
    /* 2 */
    width: 100%;
    min-height: 0.01px;
    padding-top: 6.1rem;
}

.fade-content {
    opacity: 0;
}

.footerholder {
    flex-shrink: 0;
    background-color: #151F33;
}

.btn-donate {
    width: 5rem;
    height: 2.5rem;
    color: #151F33;
    background-color: #E5FCF5;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* .row {
    --bs-gutter-x: 2.5rem;
} */

.vh-fix {
    height: 100vh;
    height: 100dvh;
}

.image-fill {
    position: absolute;
    top: 0;
    object-fit: cover;
    font-family: "object-fit: cover;";
    width: 100%;
    height: 100%;
}

.video-fill {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    width: 100%;
    height: 100%;
}

.text-light {
    color: #E5FCF5 !important;
}

#top-bar {
    height: 6.125rem;
    background-color: #fff;
    z-index: 1000;
}

#top-bar::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #151F33;
}

@media (max-width: 767px) {
    #top-bar {
        height: 4.5rem;
    }
    #top-bar .container::after {
        width: calc(100% - 2.5rem);
    }
}

.site-logo {
    width: 16rem;
}



.secondary-nav li a {
    text-decoration: none;
    color: #FFFCF3;
}

h1,h2,h3,h4 {
    font-family: 'ABC Arizona Flare';
    text-transform: uppercase;
}

h1 {
    font-size: 3.75rem;
    line-height: 1.33em;
}

h2 {
    font-size: 1.875rem;
    line-height: 1.5em;
}

h3 {
    font-size: 1.5625rem;
    line-height: 1.6em;
}

h4 {
    font-size: 1.25rem;
    line-height: 1.25em;
}

p {
    font-size: 0.9375rem;
    line-height: 1.33em;
}

.page-title {
    padding-top: 7rem;
}

.body-sm {
    font-size: 0.75rem;
    line-height: 1.5em;
}

.community-categories li {
    color: #667F7D;
}

.community-categories li.active {
    color: #B02E0C;
}

.community-categories li {
    cursor: pointer;
}

.community-list-item {
    height: 25.5rem;
    padding: 1.25rem;
    background-color: #C5D7D2;
}

.community-list h4 {
    color: #B02E0C;
}

.community-list .city {
    color: #119DA4;
}

.community-list span {
    width: 1.75rem;
}

.custom-slider .slide {
    height: 25.5rem;
    padding: 2rem 1.25rem;
}

.custom-slider .light-slide {
    color: #FFFDF7;
}

.fade-in-slider .slick-slide {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-slider.is-visible .slick-slide {
    opacity: 1;
    transform: translateY(0);
}

.slick-nav {
    margin-top: 1.25rem;
}

.slick-arrow {
    cursor: pointer;
    user-select: none;
}

.slick-arrow svg {
    width: 2.5rem;
    height: 2.5rem;
}

.slick-arrow svg rect,
.slick-arrow svg path,
.slick-arrow svg line {
    transition: 0.3s;
}

.post-navigation .nav-links {
    gap: 0.625rem;
}

.post-navigation .slick-arrow svg rect {
    fill: #151F33;
}
.post-navigation .slick-arrow svg path,
.post-navigation .slick-arrow svg line {
    stroke: #C5D7D2;
}
.post-navigation .slick-arrow.disabled {
    opacity: 0.2;
    cursor: initial;
}

@media (hover: hover) {
    .btn-donate:hover {
        background-color: #a3b9b3;
    }
    .slick-arrow:hover svg rect {
        fill: #151F33;
    }
    .slick-arrow:hover svg path,
    .slick-arrow:hover svg line {
        stroke: #C5D7D2;
    }
    .post-navigation .slick-arrow:not(.disabled):hover svg rect {
        fill: #C5D7D2;
    }
    .post-navigation .slick-arrow:not(.disabled):hover svg path,
    .post-navigation .slick-arrow:not(.disabled):hover svg line {
        stroke: #151F33;
    }
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 576px) {
}

@media (min-width: 768px) {
    html {
        font-size: 1.143676vw !important;
    }
    .container-fluid {
        max-width: 97.25vw;
    }
    .custom-slider .slick-track {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .custom-slider .slick-slide {
        margin-right: 1.25rem;
    }
    .custom-slider .slick-list {
        margin-right: -1.25rem;
    }
    .community-list .header {
        height: 40%;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 0.85rem;
    }
    .site-content {
        padding-top: 4.5rem;
    }
    .container-fluid {
        max-width: 540px;
    }
    .site-logo {
        width: 11rem;
    }
    h1 {
        font-size: 2.75rem;
    }
    h2 {
        font-size: 1.2rem;
    }
    h3 {
        font-size: 1rem;
    }
    h4 {
        font-size: 1rem;
    }
    .page-title {
        padding-top: 3rem;
    }
    .section-title {
        font-size: 1.15rem;
    }
    .community-list-item {
        height: 23rem;
    }
}
@media (max-width: 567px) {
    .container-fluid {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@font-face {
    font-family: 'Akkurat Pro';
    src: url('fonts/AkkuratPro-Bold.woff2') format('woff2'),
        url('fonts/AkkuratPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Akkurat Light Pro';
    src: url('fonts/AkkuratLightPro.woff2') format('woff2'),
        url('fonts/AkkuratLightPro.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Arizona Flare';
    src: url('fonts/ABCArizonaFlare-Regular.woff2') format('woff2'),
        url('fonts/ABCArizonaFlare-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.arizona-flare {
    font-family: 'ABC Arizona Flare';
}