/**
 * GLOBAL (GENERAL) STYLES
 * This file is loaded in both the WordPress frontend and the backend.
 */



/* LAYOUT / GRID
==================================================================================================== */

body .is-layout-constrained > .wp-block-post-content {
    max-width: unset;
}

:where(.is-style-content-section, .content-section),
body.page-template-page-no-title .wp-block-post-content:not(:has(> :where(.is-style-content-section, .content-section))),
body.page-template-default .site-main {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-top: var(--wp--custom--spacing--section);
    padding-bottom: var(--wp--custom--spacing--section);
    gap: var(--wp--custom--spacing--gap-large);
    position: relative;
}

:where(.is-style-content-section-small, .content-section-small){
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-top: var(--wp--custom--spacing--section-small);
    padding-bottom: var(--wp--custom--spacing--section-small);
}

:where(.wp-site-blocks) > .site-main,
footer.site-footer {
    margin-top: 0;
}



/* TYPOGRAPHY 
==================================================================================================== */

b, strong {
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
    margin-block: 0;
}

@media (max-width: 600px) {
    h1, h2, h3, h4, h5, h6 {
        text-wrap: pretty;
        hyphens: auto;
    }
}

a:not([class]) {
    color: inherit;
    text-underline-offset: .25ex;
    text-decoration-thickness: .15ex;
    transition: .2s ease-in-out;

    &:hover, &:focus-visible {
        text-decoration-color: inherit;
        text-decoration-thickness: .25ex;
        text-underline-offset: .5ex;
    }
}

/* :root :where(.is-layout-constrained) > p,
:root :where(.is-layout-flow) > p {
    margin-top: 1rem;
} */

.centered {
    text-align: center;
}


/* VARIOUS BLOCK STYLES 
==================================================================================================== */

.wp-block-image.is-style-tv-slightly-rounded-image img {
    border-radius: var(--wp--custom--border-radius--regular);
}
.wp-block-media-text.is-style-tv-slightly-rounded-image img {
    border-radius: var(--wp--custom--border-radius--regular);
}

.wp-block-group.is-style-tv-section-heading {
    gap: var(--wp--custom--spacing--gap-xsmall);
}

.wp-block-group.is-style-tv-section-intro {
    gap: var(--wp--custom--spacing--gap-small);
}

.wp-block-file * + .wp-block-file__button {
    display: inline-flex;
    gap: 0.5rem;
}

.wp-block-group.is-style-tv-section-intro > p:last-child {
    font-size: var(--wp--preset--font-size--medium);
}

.content-section-small > .wp-block-paragraph {
    font-size: var(--wp--preset--font-size--large);
    font-weight: 500;
}

.product-offer .wp-block-group-is-layout-flex {
    gap: var(--wp--custom--spacing--gap-large);
}

@media (max-width: 600px) {
    .product-offer .wp-block-group-is-layout-flex {
        gap: var(--wp--custom--spacing--gap-regular);
    }
}
@media (max-width: 440px) {
    .product-offer .wp-block-group-is-layout-flex {
        gap: var(--wp--custom--spacing--gap-small);
    }
}



/* PATTERN & STYLES 
==================================================================================================== */




/* SITE HEADER & NAVIGATION
==================================================================================================== */

/* Navigation
------------------------------------------------------------------------------------------ */
.site-header .wp-block-navigation__container {
    column-gap: 1rem;
    row-gap: 0.5rem;
}
.site-header .wp-block-navigation-item__label {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    transition: color 0.2s ease-in-out;
}
.site-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    padding: 0.25em clamp(0.15em, 2vw, 0.75em);
    border-radius: var(--wp--custom--border-radius--small);
    transition: background-color 0.2s ease-in-out;
}

/* Navigation Submenu open
------------------------------------------------------------------------------------------ */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    display: grid;
    padding: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
}
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
    align-items: center;
    padding: 0;
}
.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    align-items: center;
}
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__label {
    font-size: var(--wp--preset--font-size--large);
}



/* SITE FOOTER
==================================================================================================== */
   

footer.site-footer .wp-block-group.is-layout-flex:has(.wp-block-wxblock-copyright) {
    row-gap: 0.5em;
}
footer.site-footer .wp-block-navigation-item:where(:hover, .current-menu-item) a {
    text-decoration: underline;
}


/* BLOCK QUOTE
==================================================================================================== */

.wp-block-quote {
    position: relative;
    text-align: center;
    padding: 3rem 4.5rem;
    border-radius: var(--wp--custom--border-radius--regular);
    background-color: var(--wp--preset--color--beige);
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: 300;
    max-width: var(--wp--style--global--content-size);
    margin: 0;
}

.wp-block-quote::before,
.wp-block-quote::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 36px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* unten links */
.wp-block-quote::before {
    left: 25px;
    bottom: 20px;
    background-image: url("../images/quote-open.svg");
}

/* oben rechts */
.wp-block-quote::after {
    right: 25px;
    top: 20px;
    background-image: url("../images/quote-close.svg");
}

.content-section.has-black-background-color {
    color: var(--wp--preset--color--white);
}

.content-section.has-black-background-color h2 {
    color: var(--wp--preset--color--pink-light);
}




.product-offer > .wp-block-group {
    border-bottom: 1px solid var(--wp--preset--color--pink-light);
    padding-block: 1rem;
    font-family: var(--wp--preset--font-family--cal-sans);
    justify-content: center;
    margin-block-start: 0;
}

.product-offer > .wp-block-group:last-child {
    border-bottom: none;
}

.product-offer > .wp-block-group > p:first-child {
    font-size: var(--wp--preset--font-size--h-2);
    color: var(--wp--preset--color--beige);
}

.product-offer > .wp-block-group > p:last-child {
    font-size: var(--wp--preset--font-size--h-3);
}


.wp-block-group.centered-listing > .wp-block-group {
    gap: var(--wp--preset--spacing--8);
}

.wp-block-group.centered-listing > .wp-block-group:not(:last-child) {
    border-bottom: 2px solid var(--wp--preset--color--pink-light);
    width: 100%;
    padding-bottom: 2.5rem;
}

.wp-block-group.centered-listing > .wp-block-group:not(:first-child) {
    padding-top: 1rem;
}




.content-section > .wp-block-group > p:last-child,
.content-section:not(.has-black-background-color) > p:last-child {
    font-size: var(--wp--preset--font-size--large);
    font-weight: 500;
}

.content-section > .wp-block-group > p:first-child {
    color: var(--wp--preset--color--grey);
}

.content-section.has-black-background-color > .wp-block-group > p:first-child {
    color: var(--wp--preset--color--beige);
}