/*
Theme Name: Claudia Domröse
Theme URI:
Author: Novus Idea
Author URI: https://novusidea.de
Requires at least: 6.4.3
Tested up to: 6.4.3
Requires PHP: 8.2
Version: 1.0.0
Text Domain: claudia-domroese
*/

body > .wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: 0;
}

@media screen {
    body.admin-bar > .wp-site-blocks {
        min-height: calc(100vh - 32px);
    }
}

@media screen and ( max-width: 782px ) {
    body.admin-bar > .wp-site-blocks {
        min-height: calc(100vh - 46px);
    }
}

body > .wp-site-blocks > * {
    margin: 0;
}

.wp-site-blocks > .site-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex-grow: 1;
}

body > .wp-site-blocks::before,
body > .wp-site-blocks::after {
    --stain-01-width: 439px;
    --stain-02-width: 550px;
    --stain-03-width: 168px;

    background-repeat: no-repeat;
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    inset: 0;
}

@media (max-width: 979px) {
    body > .wp-site-blocks::before,
    body > .wp-site-blocks::after {
        opacity: 0.5;
    }
}

body > .wp-site-blocks::before {
    background-image:
        url('./assets/images/stain-01.svg'),
        url('./assets/images/stain-03.svg')
    ;

    background-size:
        clamp(calc(var(--stain-01-width) / 5), 39vw, var(--stain-01-width)) auto,
        clamp(calc(var(--stain-03-width) / 5), 15vw, var(--stain-03-width)) auto
    ;

    background-position:
        top left,
        bottom right
    ;
}

body > .wp-site-blocks::after {
    background-image: url('./assets/images/stain-02.svg');
    background-size: clamp(calc(var(--stain-02-width) / 5), 49vw, var(--stain-02-width)) auto;
    background-position: top left;
    z-index: 999;
}

.wp-block-navigation__responsive-container.is-menu-open {
    padding: clamp(2rem, 15vw, 5rem);
}

.wp-block-navigation__responsive-container-close svg {
    width: 1em;
    height: 1em;
}

.wp-block-buttons > .wp-block-button,
.wp-element-button, .wp-block-button__link {
    display: inline-flex;
}

.wp-block-button .wp-block-button__link:hover {
    background-color: transparent;
    color: var(--wp--preset--color--primary);
}

.is-style-outline.wp-block-button .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
}

.wp-block-navigation__responsive-container.has-background .is-style-outline.wp-block-button .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--primary) !important;
}