/* General site-wide CSS lives here */

.home-background-img {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Specific header styles for the home page */

body.page-template-home-page navbar {
    background-color: unset;
}
body.page-template-home-page navbar .custom-logo-link img {
    filter: brightness(0) invert(1);
}

body.page-template-home-page navbar.uk-active {
    background-color: var(--wp--preset--color--bg);
    transition: background-color 1s;
}
body.page-template-home-page navbar.uk-active .custom-logo-link img {
    filter: unset;
    transition: filter 1s;
}
body.page-template-home-page navbar .uk-navbar-item > a {
    color: var(--wp--preset--color--text-on-dark);
}
header navbar .uk-navbar-item > a, body.page-template-home-page navbar.uk-active .uk-navbar-item > a {
    color: var(--wp--preset--color--text);
}
header navbar .uk-navbar-item > a.uk-active {
    color: var(--wp--preset--color--active);
}
header navbar .uk-navbar-item > .uk-dropdown {
    min-width: 15rem;
}
body.page-template-home-page navbar #hamburger-nav-button svg {
    color: var(--wp--preset--color--text-on-dark);
}
header navbar #hamburger-nav-button svg,
body.page-template-home-page navbar.uk-active #hamburger-nav-button svg {
    color: var(--wp--preset--color--text);
}
header .custom-logo-link > img {
    min-width: 8.5rem;
    width: 8.5rem;
}
/* Header */
.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
    font-family: var(--wp--preset--font-family--indivisbile);
    font-size: 1rem;
    font-weight: bold;
}
header navbar {
    padding: 0 var(--wp--custom--margin-sm);
}
header navbar.uk-active {
    box-shadow: 0 0 1rem 0 rgb(0 0 0 / 15%);
}
header .uk-navbar-container {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.uk-navbar-container:not(.uk-navbar-transparent) {
    background-color: var(--wp--preset--color--bg);
}
@media (min-width: 960px) {
    header navbar {
        padding: 0 var(--wp--custom--margin-lg);
    }
}
header .uk-navbar a {
    color: var(--wp--preset--color--text);
}
header .uk-navbar-left, header .uk-navbar-right {
    gap: 2rem;
}
header .uk-navbar-item {
    min-height: var(--wp--custom--menu-navbar-height-sm);
}
header .sticky-placeholder {
    height: var(--wp--custom--menu-navbar-height-sm) !important;
}

@media (min-width: 960px) {
    header .uk-navbar-item {
        min-height: var(--wp--custom--menu-navbar-height-lg);
    }
    header .sticky-placeholder {
        height: var(--wp--custom--menu-navbar-height-lg) !important;
    }
}


/* Thumb menu / mobile menu */
#hamburger-nav {
    padding-top:0.75rem;
    position: relative;
    overflow-y: auto;
    margin-bottom: 5rem;
    background-color: var(--wp--preset--color--bg);
    color: var(--wp--preset--color--text);
    display: flex;
    flex-direction: column;
    gap: 1em;
    box-sizing: border-box;
    top: 80px !important;
}
#hamburger-nav-button svg {
    height: 2em;
    width: 2.5em;
}
#hamburger-nav > ul > li {
    margin: 0 var(--wp--custom--margin-sm);
    padding-top: 0.75em;
    padding-bottom: 0.25em;
    font-size:clamp(1.1em,2.2vw,2em);
}
#hamburger-nav > ul > li, #hamburger-nav .nav-footer .footer-links {
    border-top: 1px solid #ffffff80;
    margin: 0 var(--wp--custom--margin-sm);
    padding-top: 0.75em;
}
#hamburger-nav > ul > li:last-of-type {
    border-bottom: 1px solid #ffffff80;
}
#hamburger-nav .mobile-menu {
    flex: 1;
}
#hamburger-nav .nav-footer {
    box-sizing: border-box;
    width: 100%;
    margin: 2em 0;
}
#hamburger-nav .nav-footer .footer-links {
    display: flex;
    flex-direction: row;
}
#hamburger-nav .nav-footer a:first-of-type {
    flex: 1;
}
#hamburger-nav a {
    color: var(--wp--preset--color--text);
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    flex-direction: row;
}
#hamburger-nav .nav-footer a {
    font-size: 0.9em;
    font-weight: 300;
}
#hamburger-nav .uk-nav li.uk-parent {
    position: relative;
}
#hamburger-nav .uk-nav li.uk-parent > a::after {
    content: url('data:image/svg+xml,\00003csvg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\00003cpath fill="%23EA002A" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z">\00003c/path>\00003c/svg>');
    height: 24px;
    width: 30px;
    color: var(--wp--preset--color--active);
    position: absolute;
    right: 0;
    top: 0.75em;
}
#hamburger-nav .uk-nav li.uk-open > a::after {
    color: var(--wp--preset--color--active);
    transform: rotateZ(-180deg) translateY(-8px);
    transition: transform 0.3s ease-in;
}
#hamburger-nav .uk-nav .uk-parent ul li {
    padding-left: 0em;
    font-size:clamp(1.1em,2.4vw,2em);
}
#hamburger-nav .uk-nav .uk-parent ul li a {
    color: var(--wp--preset--color--text);
    font-weight: 400;
}

@media (max-width: 960px) {
    header .uk-navbar-container[aria-expanded="true"] {
        background-image: "";
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
    }
    header .uk-navbar-container[aria-expanded="true"] .uk-button-primary {
        background: var(--wp--preset--color--bg);
        color: var(--wp--preset--color--active) !important;
    }
    header .uk-navbar-container[aria-expanded="true"] .uk-navbar a {
        color: var(--wp--preset--color--text);
    }
}


/***** Styles of various content */

/* This only lives on the home page / about page */
body.page-template-home-page .home-background-img {
    display: flex;
    flex-direction: column;
    position: relative;
}
body.page-template-home-page .main-tagline {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 var(--wp--custom--margin-sm);
    padding-bottom: 10em;
}
body.page-template-home-page .vision-statement {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: var(--wp--custom--margin-sm);
    background-color: var(--wp--preset--color--bg);
    width: 95%;
    box-sizing: border-box;
}
body.page-template-home-page .vision-statement p {
    margin: 0;
    line-height: 1.25em;
    font-size: 0.8em;
    font-weight: 400;
}
body.page-template-home-page .main-tagline h1 {
    color: var(--wp--preset--color--text-on-dark);
    font-weight: 600;
    font-size: clamp(2em, 8vw, 4rem);
}
@media (min-width: 640px) {
    body.page-template-home-page .main-tagline {
        max-width: 70%;
    }
    body.page-template-home-page .vision-statement {
        padding: var(--wp--custom--margin-lg);
        width: 60%;
    }
    body.page-template-home-page .vision-statement p {
        line-height: 1.75em;
        font-size: 1em;
    }
}
@media (min-width: 960px) {
    body.page-template-home-page .main-tagline {
        padding-left: var(--wp--custom--margin-lg);
        padding-right: var(--wp--custom--margin-lg);
    }
}