/**
    3.00 - Custom styles.
 */
body {
    background: var(--black);
}
p:empty {
    margin: 0;
}

h2 {
    --font-family: var(--font-family-alt);
}

main a img {
    box-shadow: 3px 3px 2px var(--color-charlie);
}
main img {
    border: 4px solid var(--color-alpha);
}
main .has-bg-alpha img {
    border-color: var(--color-delta);
}
main .front-hero img {
    border: 0;
}

.richtext-image {
    max-width: 380px;
}
.richtext-image.left {
    float: left;
    margin: 0 20px 20px 0;
}
.richtext-image.right {
    float: right;
    margin: 0 0 20px 20px;
}
.hero-top .richtext-image {
    max-width: 100%;
}


.gallery .image-link img {
    aspect-ratio: 1;
    object-fit: cover;
}


/**
    3.10 - header.
 */
@media (hover: hover) {
    .menu-header a:hover {
        filter: brightness(5);
    }
}
.menu-header {
    background: var(--white);
    border-top: 60px solid transparent;
    margin: auto;
    max-width: 1200px;
    position: relative;
}
.menu-header::before {
    background: repeating-linear-gradient(var(--black), var(--black) 20%, var(--white) 20%, var(--white) 40%);
    content: '';
    cursor: pointer;
    display: block;
    height: 30px;
    left: 20px;
    position: absolute;
    top: -45px;
    transition: background-color 300ms;
    width: 70px;
}
.menu-header > div {
    background: var(--black);
}
.menu-header .on-open {
    display: none;
    padding: 20px 10px;
}
.menu-header .image-link .mobile-text {
    display: none;
}
@media (max-width: 959px) {
    .menu-header.open .on-open {
        background: var(--white);
        display: block;
        width: 100vw;
    }
    .menu-header.open::before {
        border-color: var(--white);
        filter: invert(1);
    }
    .menu-header.open .flex {
        display: block;
    }
    .menu-header.open .block-image_link {
        --font-size: 25px;
        --font-weight: 700;
        --line-height: 50px;
    }
    .menu-header.open .block-image_link .image-link {
        text-decoration: none;
    }
    .menu-header.open .block-image_link .image-link.is-active {
        --color-link: var(--black);
    }
    .menu-header.open .block-image_link .mobile-text::before {
        content: '\00bb';
        font-size: 1.5em;
        padding: 0 5px 0 10px;
    }
    .menu-header.open .block-image_link img {
        display: none;
    }
    .menu-header.open .block-image_link .mobile-text {
        display: block;
        text-align: left;
    }
}
@media (min-width: 960px) {
    .menu-header {
        border: 0;
    }
    .menu-header::before {
        display: none;
    }
    .menu-header .on-open {
        display: flex;
    }
    .menu-header .image-link {
        justify-content: center;
    }
}


/**
    3.11 - footer.
 */
.menu-footer .social-links {
    margin: auto;
    width: max-content;
}
.menu-footer .social-links .grid-item:not(:last-child) {
    position: relative;
}
.menu-footer .social-links .grid-item:not(:last-child)::after {
    background: var(--color-delta);
    bottom: 33%;
    content: '';
    display: block;
    position: absolute;
    right: calc((var(--margin) + 1px) / -2);
    top: 33%;
    width: 1px;
}


/**
    3.90 - Custom magic classes.
 */
div:has(> .has-full-bg.has-bg-alpha) {
    background: var(--color-alpha);
}
div:has(> .has-full-bg.has-bg-bravo) {
    background: var(--color-bravo);
}
div:has(> .has-full-bg.has-bg-charlie) {
    background: var(--color-charlie);
}
div:has(> .has-full-bg.has-bg-delta) {
    background: var(--color-delta);
}

.has-inner-max {
    padding-left: max(calc(1.5 * var(--margin)), calc(50vw - (var(--max-width) / 2)));
    padding-right: max(calc(1.5 * var(--margin)), calc(50vw - (var(--max-width) / 2)));
}

.front-hero {
    padding: 20px 10px;
}
@media (min-width: 760px) {
    .front-hero .hero-mobile {
        display: none;
    }
    .front-hero .hero-top {
        display: block;
    }
}