/*
Theme Name: Romaned
Theme URI: 
Author: Amazing - Full Stack Creatives
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: romaned
Tags: 
*/

/* OVERWRITES MOBILE */
@media only screen and (max-width: 782px) {

    /* Verminderen extreme witruimtes vanuit standaard WP */
    :root :where(.is-layout-flex) {
        row-gap: 1rem;
    }
    :root :where(.is-layout-constrained) > * {
        margin-block-start: 1rem;
    }

    /* Slider block min-height weg */
    .wp-block-group:has(figure.is-style-swiper) {
        min-height: unset !important;
    }
}

/* GLOBALS */
html {
    -webkit-text-size-adjust: 100%;
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
    scroll-behavior: smooth;
}
a,
.wp-block-button__link {
    transition: all 0.2s ease;
}
a:where(:not(.wp-element-button)) {
    font-size: inherit;
    text-underline-offset: 3px;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}
strong {
    font-weight: 700;
}
.entry-content {
    overflow: hidden; /* Prevent horizontal scroll for off-canvas elements */
    margin-top: 0 !important;
}
.swiper-prev,
.swiper-next {
    cursor: pointer;
}

/* UTILITIES */
.container-break-out-right {
    margin-right: calc(-50vw + 50%) !important;

    @media only screen and (max-width: 782px) {
        margin-left: calc(-50vw + 50%) !important;
    }

    > .swiper {
        overflow: visible;
        max-width: unset
    }
}
.container-break-out-left {
    margin-left: calc(-50vw + 50%) !important;
    max-width: calc(var(--wp--style--global--content-size) + ((100vw - var(--wp--style--global--content-size)) / 2)) !important;
}
.radius-top-right {
    border-top-right-radius: var(--wp--preset--spacing--80);
}
.header-100vh {
    min-height: calc(100vh - 100px) !important;
}

/* GRADIENTS */
.has-custom-hard-whitesmall-blue-gradient-background {
    background: linear-gradient(180deg, rgba(255,255,255,0) 140px, rgb(0,85,173,1) 140px) !important; /* Overwrite because of pixel value */
}
.has-custom-hard-white-blue-gradient-background {
    @media only screen and (max-width: 782px) {
        --wp--preset--gradient--custom-hard-white-blue: linear-gradient(180deg, rgba(255, 255, 255, 0) 100px, rgb(0, 85, 173) 100px);
    }
}
.has-custom-hard-white-gray-gradient-background {
    @media only screen and (max-width: 782px) {
        --wp--preset--gradient--custom-hard-white-gray: linear-gradient(180deg,rgba(255,255,255,0) 100px, rgb(241,242,244) 100px);
    }
}
.has-custom-hard-white-blue-gradient-background {
    @media only screen and (max-width: 782px) {
        --wp--preset--gradient--custom-hard-blue-white: linear-gradient(0deg, rgba(255, 255, 255, 0) 100px, rgb(0, 85, 173) 100px);
    }
}

/* GRADIENT BANNER */
.has-custom-roma-gradient-background.full-col-inner-width:not(.block-editor-block-list__block) {
    @media only screen and (min-width: 782px) {
        position: relative;
        background: none !important; /* Relocated gradient because of radial */

        &::after {
            content: '';
            width: 65vw;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: auto;
            bottom: 0;
            background: var(--wp--preset--gradient--custom-roma) !important;
            z-index: -1;
        }
    }
}

/* BUTTONS */
.wp-block-button.is-style-outline {
    .wp-element-button {
        border: 1px solid var(--wp--preset--color--custom-gray);
        padding: 1.75rem 2rem;
    }
    .wp-element-button:hover {
        border-color: transparent;
        background-color: var(--wp--preset--color--custom-primary);
        color: var(--wp--preset--color--white);
        box-shadow: var(--wp--preset--shadow--button-shadow);
    }
}
.wp-block-button.is-style-button-secondary {
    .wp-element-button {
        font-size: var(--wp--preset--font-size--body);
        font-weight: 400;
        padding: 0.125rem 2rem 0.125rem 0;
        background-color: unset;
        color: var(--wp--preset--color--custom-black);
        background: url(assets/imgs/icon-arrow-right-green.svg) no-repeat right center / 18px;
        text-decoration: none;
        border-radius: 0;
        border-bottom: 1px solid transparent;
    }
    .wp-element-button:hover {
        border-color: var(--wp--preset--color--custom-gray-dark);
    }
}
.btn-cta-phone,
.btn-cta-form {
    display: inline-block;
    text-decoration: none;
    border-radius: 9999px; /* Equal to WP-preset */
    line-height: 1.3;
}
.btn-cta-phone {
    border: 1px solid var(--wp--preset--color--custom-tertiary-light);
}

/* QUOTE */
.wp-block-quote {
    > :first-child {
        padding: var(--wp--preset--spacing--60);
        position: relative;

        &::before,
        &::after {
            content: '';
            width: 42px;
            height: 54px;
            display: block;
            position: absolute;
            background: url(assets/imgs/icon-quote-top.svg) no-repeat center / 42px;
        }
        &::before {
            top: 0;
            left: 0;
        }
        &::after {
            bottom: 0;
            right: 0;
            background-image: url(assets/imgs/icon-quote-bottom.svg);
        }
    }
}

/* BREAKCRUMB */
.yoast-breadcrumbs {
    * {
        font-weight: 600;
        font-size: var(--wp--preset--font-size--xxsmall);
        color: var(--wp--preset--color--custom-black);
    }
    > span {
        display: flex;
        align-items: center;
    }
    .icon-chevron-right {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 0.75rem;
        background: url(assets/imgs/icon-chevron-right.svg) no-repeat center;
        background-size: contain;
    }
}

.has-intro-font-size {
    line-height: 1.7;
}

/* GALLERY */
.wp-block-gallery {
    @media only screen and (max-width: 1080px) {
        column-gap: var(--wp--preset--spacing--40) !important;
    }
    .wp-block-image {
        @media only screen and (max-width: 600px) {
            width: 100% !important;
        }
    }
    .wp-block-image:last-child {        
        &::after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            transform: translateX(100%);
            width: 120px;
            height: 120px;
            background: var(--wp--preset--color--custom-secondary);

            @media only screen and (max-width: 782px) {
                width: 60px;
                height: 60px;
            }
        }
    }
}


/* NAVIGATION */
.wp-block-navigation {
    .wp-block-navigation-item:hover,
    .current-menu-item {
        color: var(--wp--preset--color--custom-primary);
    }
    .wp-block-navigation__submenu-container {

        @media only screen and (max-width: 600px) {
            padding-top: 1rem !important;
        }

        border: none !important;

        a.wp-block-navigation-item__content {
            padding-left: 1.5rem;
            padding-right: 1.5rem;

            &:hover {
                background: var(--wp--preset--color--custom-secondary);
            }
        }    
    }
    .wp-block-navigation__submenu-icon,
    .wp-block-navigation__submenu-icon svg {
        width: 12px;
        height: 14px;
    }
}
.wp-block-navigation__responsive-container-open {
    width: 35px;
    height: 28px;
    background: url(assets/imgs/icon-menu.svg) no-repeat center;
    background-size: 35px auto;

    svg {
        display: none !important;
    }
}
.wp-block-navigation__responsive-container-close {
    width: 27px;
    height: 27px;
    background: url(assets/imgs/icon-close.svg) no-repeat center;
    background-size: 27px auto;

    svg {
        display: none !important;
    }
}
.wp-block-navigation__responsive-container-content {
    row-gap: var(--wp--preset--spacing--50);

    @media only screen and (min-width: 600px) {
        row-gap: var(--wp--preset--spacing--10);
    }
}

/* LOGO */
.logo-payoff {
    @media only screen and (max-width: 960px) {
        display: none;
    }

    img {
        display: block;
    }
}

/* SEARCH */
.wp-block-search__button {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;

    svg {
        width: auto;
        height: 37px;
        transform: rotateY(180deg);
    }
}

.wp-block-search.wp-block-search__button-only {
    position: relative;

    @media only screen and (max-width: 600px) {
        width: 100%;
    }

    .wp-block-search__input {        
        @media only screen and (min-width: 600px) {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 1;
        }
    }
}
.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__input {
    @media only screen and (max-width: 600px) {
        width: 100% !important;
        flex-basis: auto;
        flex-grow: 1;
        border: 1px solid var(--wp--preset--color--custom-gray) !important;
    }
}

/* PRE-FOOTER */
.pre-footer {
    > .wp-block-media-text__content {
        padding: 0;
    }
}

/* FOOTER */
footer.wp-block-template-part {
    margin-top: 0;
}

/* HEADER 100VH */
.header-100vh-group {
    @media only screen and (max-width: 600px) {
        flex-wrap: wrap;
    }
}
.header-100vh-anchor {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    @media only screen and (min-width: 600px) {
        width: 100px;
        aspect-ratio: 1 / 1;
    }
}
.header-100vh-caption {
    @media only screen and (max-width: 600px) {
        padding: var(--wp--preset--spacing--50) !important;
    }
    @media only screen and (max-width: 960px) {
        padding: var(--wp--preset--spacing--60) !important;
    }
}

.is-style-arrow.wp-block-post-navigation-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}
.is-style-arrow .wp-block-post-navigation-link__arrow-previous,
.is-style-arrow .wp-block-post-navigation-link__arrow-next {
    @media only screen and (min-width: 960px) {
        width: 7.5rem;
        aspect-ratio: 1 / 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--wp--preset--color--custom-secondary);
        font-size: 1.875em;
        font-weight: normal !important;
    }
}

/* Swiper slider block */
.wp-block-amazing-swiper-block-swiper-container .swiper-wrapper {
    padding-bottom: 1.25rem; 
}

.wp-block-amazing-swiper-block-swiper-container {
    overflow: clip;
}

.wp-block-amazing-swiper-block-swiper-container .swiper-pagination {
    top: unset;
    bottom: 1rem;
}

.wp-block-amazing-swiper-block-swiper-container .swiper-button-next,
.wp-block-amazing-swiper-block-swiper-container .swiper-button-prev {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    bottom: 5px;
    top: unset;
}