@layer layout {
    .home .site-main header .wp-block-cover {
        height: 80vh;
        max-height: 40rem;
    }

    .wp-site-blocks {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }
}

@layer base {
    /* Body styling - theme.json usually handles this, but can be a fallback or override */
    body {
        font-family: var(--wp--preset--font-family--nunito-sans, "Nunito Sans", sans-serif);
        color: var(--wp--preset--color--contrast, #4A4A4A);
        background-color: var(--wp--preset--color--base, #F8F7F4);
    }

    p, li, dd, blockquote {
        text-wrap: pretty;
    }

    .wp-block-heading {
        text-wrap: balance;
    }

    .wp-block-button {
        font-weight: 650;
    }

    .wp-element-button {
        line-height: 1.4 !important;
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    }

    nav a {
        font-weight: 700;
        color: var(--wp--preset--color--contrast, #4A4A4A);
    }

    @media (min-width: 768px) {
        h1 {
            font-size: 3rem;
        }

        h2 {
            font-size: 2rem;
        }
    }
}

@layer components {
    .is-layout-grid li > article {
        min-height: 100%;
    }
}

@layer utility {
    /* Additional global styles can go here */
    .visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .text-small {
        font-size: 0.875rem; /* 14px */
    }

    .text-reduced {
        font-size: 0.875em; /* 14px */
    }
}

/* Unlayerd styles to fight against specificity issues */

@media (min-width: 1400px) {
    html {
        font-size: 20px;
    }
}

@media (min-width: 1800px) {
    html {
        font-size: 24px;
    }
}

body {
    background-color: #F6F3EF;
}

/* Headings styling - theme.json usually handles this */
h1, h2, h3, h4, .wp-block-heading {
    font-family: var(--wp--preset--font-family--playfair-display, "Playfair Display", serif);
    color: var(--wp--preset--color--ternary, #333333);
}


header.wp-block-template-part,
footer.wp-block-template-part,
.site-header,
.site-main,
.site-footer,
.section {
    margin-block: 0;
    min-width: 0;
}

.site-header-container,
.site-footer-container,
.section {
    padding-inline: 1rem;
}

.site-header-container {
    padding-block: 0.5rem;
}

.site-footer-container {
    padding-block: 1.5rem;
}

.wp-block-site-logo .custom-logo {
    width: clamp(60px, 5vw, 200px);
}   

.section {
    padding-block: 3rem;
    overflow-x: clip;
}

.home header.wp-block-template-part {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.hero-section {
    padding: 0;
}

.home .wp-block-site-logo img {
    filter: invert(1);
}

.wp-block-button .wp-block-button__link.has-accent-cta-background-color:hover {
    background-color: color-mix(in srgb, var(--wp--preset--color--accent-cta), black 15%) !important;
}

.button-cta .wp-element-button {
    box-shadow: 0 0.2em 0.5em hsla(0, 5%, 60%, 0.6);
}

.site-footer .contact-options {
    margin-block: 2.5rem
}

.site-footer .contact-options .wp-block-media-text {
    grid-template-columns: 2rem max-content !important;
    gap: 1rem
}

.site-footer .contact-options .wp-block-media-text__content {
    width: max-content;
    padding-inline: 0
}

.site-footer .contact-options .wp-block-media-text__content p {
    margin: 0;
}

.wp-block-navigation {
    row-gap: 0.75rem;
}

a:where(:not(.wp-element-button)) {
    color: color-mix(in srgb, var(--wp--preset--color--accent-cta), black 10%);
}

@media (max-width: 599px) {
    .hero-section {
        padding-top: 2.5rem;
    }

    .hero-section .wp-block-cover__image-background {
        -webkit-mask-image: linear-gradient(45deg, transparent 20%, black 70%);
        mask-image: linear-gradient(45deg, transparent 20%, black 70%);
    }
    
    /* .home .entry-content > header h1 {
        text-shadow: 3px 0 0 rgb(255 255 255 / 0.85);
    } */

    .site-footer .contact-options .wp-block-media-text {
        grid-template-columns: 1fr !important;
        justify-content: center;
    }

    .site-footer .contact-options .wp-block-media-text__media {
        width: 2rem;
        margin: auto;
    }

    .site-footer .contact-options .wp-block-media-text__content {
        text-align: center;
    }

    .clients-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
        width: 100%
    }
}