/**
 * Frontend styles for the theme
 *
 * Enqueued in the frontend and the WordPress editor.
 */
@layer utilities;

/* HTML */
html {
    scroll-behavior: smooth;
}

/* Add padding to elements with background color */
.has-background:not(.wp-element-button):not(.wp-block-sowmedia-icon),
[class*="is-style-section-"] {
    padding: var(--wp--custom--spacing--padding--background);
    border-radius: var(--wp--preset--border-radius--md);
}

/* Add simple hover effect to text links */
p>a,
li>a {
    transition: opacity 0.3s ease;

    &:hover {
        opacity: 0.8;
    }
}

.has-primary-background-color .has-primary-background-color,
.has-primary-background-color .is-style-section-primary,
.has-base-to-primary-linear-half-gradient-background .has-primary-background-color,
.has-base-to-primary-linear-half-gradient-background .is-style-section-primary,
.is-style-section-primary .is-style-section-primary,
.is-style-section-primary .has-primary-background-color{
    background-color: color-mix(in srgb, var(--wp--preset--color--primary) 80%, var(--wp--preset--color--base) 25%);
}

.alignfull + .alignfull {
    margin-top: 0;
}

* {
    box-sizing: border-box;
}

/* Header */
.wp-site-blocks > header.wp-block-template-part {
    z-index: 1000;
    position: sticky;
    top: 0;

    @media screen and (min-width: 1060px) {
        top: var(--wp-admin--admin-bar--height, 0);
    }

    &::before {
        content: "";
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    &:has(+ .entry-content > :first-child.wp-block-cover)::before,
    &:has(+ .wp-block-cover)::before {
        content: "";
        position: fixed;
        top: 0;
        width: 100%;
        height: 100px;
        background: linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--secondary) 25%, transparent), transparent);
    }

    &.has-scrolled:has(+ .entry-content > :first-child.wp-block-cover)::before,
    &.has-scrolled:has(+ .wp-block-cover)::before {
        transform: translateY(-100%);
        opacity: 0;
    }

    & > .wp-block-group {
        padding: 0 var(--wp--preset--spacing--50);
    }

    & + * {
        margin-top: -124px !important;
        @media screen and (max-width: 600px) {
            margin-top: -80px !important;
        }
        &:is(.wp-block-group[class*="is-style-section-"]),
        &:is(.wp-block-post-content) > :first-child.alignfull:not(.wp-block-cover):not(.wp-block-sowmedia-hero-slider) {
            padding-top: calc( var(--wp--custom--spacing--padding--section) + 124px ) !important;
            @media screen and (max-width: 600px) {
                padding-top: calc( var(--wp--custom--spacing--padding--section) + 80px ) !important;
            }
        }
        &:is(.wp-block-group:not([class*="is-style-section"])):has(>.wp-block-group[class*="is-style-section-"]) {
            padding-top: 124px !important;
            @media screen and (max-width: 600px) {
                padding-top: 80px !important;
            }
        }
    }

    .wp-block-site-logo {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    &.has-scrolled {

        & .wp-block-site-logo {
            opacity: 0;
            transform: translateY(-20px);
        }

    }
}

/* Hero sections */
.wp-site-blocks:has(> .wp-block-template-part + .wp-block-group:not([class*="is-style-section"]) > .wp-block-group[class*="is-style-section-primary"] .visual--tr) {
    background-color: var(--wp--preset--color--primary);
}
.wp-site-blocks:has(> .wp-block-template-part +.wp-block-group:not([class*="is-style-section"]) > .wp-block-group[class*="is-style-section-primary-alt"] .visual--tr) {
    background-color: color-mix(in srgb, var(--wp--preset--color--primary) 80%, var(--wp--preset--color--base) 25%);
}
.wp-site-blocks:has(> .wp-block-template-part + .wp-block-group:not([class*="is-style-section"]) > .wp-block-group[class*="is-style-section-secondary"] .visual--tr) {
    background-color: var(--wp--preset--color--secondary);
}
.wp-site-blocks > .wp-block-template-part + .wp-block-group:not([class*="is-style-section"]) > .wp-block-group[class*="is-style-section"]:has(.visual--tr) {
    overflow: visible;
}
.wp-site-blocks > .wp-block-template-part + .wp-block-group:not([class*="is-style-section"]) > .wp-block-group[class*="is-style-section"]:has(.visual--tr) + .wp-block-group[class*="is-style-section"] {
    background: transparent;
}

/* Footer */
.wp-site-blocks > footer.wp-block-template-part .wp-block-group > p > a {
    &:hover {
        text-decoration: underline;
    }
}