/*
Theme Name: borkotheme Standard Reasonbikes
Template: borkotheme-standard
Author: borkograph
Author URI: https://borkograph.de/
Description: borkotheme Standard Child Theme für Reasonbikes
Version: 1.0.2
*/


:root {
    /* Font Family */
    --font-menu: 'Bangers';
    --border-radius: 30px;

}

main img {
    border-radius: var(--border-radius);
}

main h1,
main h2,
main img {
    margin-bottom: calc(3 * var(--space));
}

main h1,
main h2 {
    font-family: var(--font-menu);
    letter-spacing: 2px;
}

main h1 {
    font-size: calc(1.6* var(--font-size-title));
}

:where(.is-layout-flex) {
    gap: calc(3 * var(--space));
}

.site-header {
    height: auto;
    aspect-ratio: 3/2;
    background: transparent;
    position: relative;
}

.nav-container {
    height: var(--menu-height);
    color: var(--color-text);
    justify-content: center;
}

.main-nav .menu a {
    font-family: var(--font-menu);
    font-weight: 400;
    font-size: var(--font-size-title);
    color: #000;
}

.main-nav .menu .current-menu-item>a,
.main-nav .menu .current_page_item>a {
    font-weight: 400;
}

.nav-container {
    max-width: 100%;
}

.site-branding {
    position: absolute;
    left: var(--space);
    top: var(--space);
    display: flex;
    align-items: start;
}

.custom-logo {
    max-height: 200px;
}

.main-nav .menu {
    gap: calc(var(--space)*5);
}

.site-footer {
    padding-bottom: 0;
    background-color: transparent;
}

.outer-footer-container {
    background-color: #363f84;
}

.footer-container {

    padding: calc(var(--menu-height) / 2) var(--space);

}

.skyline-footer {
    margin-bottom: -4px;
}

.main-nav .menu .current-menu-item>a,
.main-nav .menu .current_page_item>a {
    color: #fff;
}

.background-layer-wrapper {
    overflow-x: hidden;
}

@media (max-width: 1350px) {
    .nav-container {
        justify-content: end;
    }

    .main-nav .menu {
        gap: calc(var(--space) * 2);
    }

    .main-nav .menu a {

        font-size: calc(var(--font-size-title) - 3px);
    }

    .custom-logo {
        max-height: 100px;
        max-width: 130px;
    }
}

@media (max-width: 768px) {
    main h1 {
        font-size: var(--font-size-title);
    }

    .nav-container {
        justify-content: end;
    }

    .main-nav .menu a {
        color: #fff;
    }

    .menu-toggle span {
        background: #000;
    }

    .custom-logo {
        max-height: 100px;
        max-width: 130px;
    }

    .menu-toggle.active span {
        background: #fff;
    }

    .main-nav .menu .current-menu-item>a,
    .main-nav .menu .current_page_item>a {
        opacity: 0.7;
    }

}