/*
    Theme Name:   Nàutic Parc
    Author:       Dorado + Cárdenas
    Template:     bricks
    Version:      1.0
    Text Domain:  nautic
*/

:root {
    --border-focus-color: #7b7b7b;
    --wp--preset--font-size--small: var(--text-s, 13px);
    --wp--preset--font-size--medium: var(--text-m, 20px);
    --wp--preset--font-size--large: var(--text-l, 36px);
    --wp--preset--font-size--x-large: var(--text-xl, 42px);
}


/* Pàgines sense imatge de capçalera */

    .bricks-is-frontend:not(.cap-transparent) {
    padding-top: 72px;
    }

    .bricks-is-frontend:not(.cap-transparent) #brx-header {
    background-color: var(--primary);
    }


/*
    Caixes ample total alineades
*/

    .ms-container {
        padding-left: max(var(--espai-seccio-x), calc( (100vw - var(--ample-contenidor) ) / 2 + var(--espai-seccio-x) ));
    }

    .me-container {
        padding-right: max(var(--espai-seccio-x),  calc( (100vw - var(--ample-contenidor) ) / 2 + var(--espai-seccio-x) ));
    }


/*
    Focus
*/

    body.bricks-is-frontend :focus {
        outline: none;
    }

    body.bricks-is-frontend :focus-visible {
        outline: 2px solid var(--border-focus-color, #7b7b7b);
    }


/*
    Elements clicables
*/

    .bricks-is-frontend .clicable {
        position: relative; 
    }

    .bricks-is-frontend .clicable * {
        /*position: static;*/
    }

    .bricks-is-frontend a.clicable__link::after,
    .bricks-is-frontend .clicable .clicable__link a::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
    }

    .bricks-is-frontend .clicable .clicable__link--top {
        z-index: 2;
    }


/*
    Utilitats
*/

    .ocult:not(:focus):not(:active) {
        clip: rect(0 0 0 0); 
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap; 
        width: 1px;
    }

    .multiplica::after {
        content: "";
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        display: block;
        mix-blend-mode: multiply;
    }


/* Gutenberg */

    .wp-block-gallery img {
    border-radius: 8px;
    }

/*
    Menú mòbil
*/


    .brxe-offcanvas.brx-open .brx-offcanvas-inner {
        overflow-x: hidden;
    }

    .brxe-offcanvas.brx-open .bricks-nav-menu-wrapper {
        position: relative
    } 

    .brxe-offcanvas.brx-open .bricks-nav-menu .brx-submenu-positioned {
        opacity: 1;
        visibility: visible;
        left: 0% !important;
        top: 0;
        width: 100%;
        height: 100%;
        white-space: normal;
        transition: transform 0.3s ease;
        transform: translateX(100%);
    }

    .brxe-offcanvas.brx-open .bricks-nav-menu .brx-submenu-positioned.is-active {
        transform: translateX(0);
    }

    .brxe-offcanvas.brx-open .bricks-nav-menu:has(.sub-menu.is-active) > li > a {
        pointer-events: none;
    }

    .brxe-offcanvas.brx-open .bricks-nav-menu li {
        line-height: 1.4;
        margin-block: 1.5rem;
    }

    .brxe-offcanvas.brx-open li.menu-item-has-children {
        position: static;
    }

    .brxe-offcanvas.brx-open .brx-submenu-toggle > a {
    width: 100%;
    }

    .brxe-offcanvas.brx-open .menu-back-button {
        width: 100%;
        padding: 15px;
        cursor: pointer;
        font-weight: bold;
        list-style: none;
        color: black;
        background: none;
    }


/*
    Targeta regal
*/

    .modalPromo-trigger {
        position: fixed;
        cursor: pointer;
        bottom: 110px;
        width: 230px;
        right: -100px;
        -webkit-animation: pulse1 1.5s infinite;
        transition: all 1.5s;
        overflow: visible !important;
        z-index: 999;
    }
    .modalPromo-trigger:hover,
    .modalPromo-trigger.active {
        right: -50px;
        -webkit-animation: none;
    }

    .modalPromo-trigger.hidden,
    .modalPromo-trigger.hidden.active {
        right: -150%;
    }

    .modalPromo-trigger svg {
        width: 100%;
    }

    @media (max-width:480px) {
        .modalPromo-trigger {
            bottom: 55px;
            width: 195px;
            right: -90px;
        }

    }

    #olas_fondo {
        animation: linear infinite alternate;
        animation-name: olas;
        animation-duration: 2s;
    }
    #olas_frente {
        animation: linear infinite alternate;
        animation-name: olas;
        animation-duration: 3s;
    }
    #gotas {
        animation: linear infinite alternate;
        animation-name: olas;
        animation-duration: 4s;
    }

    /* Modal */
    
    .modalPromo {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0, 0, 0); /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
        -webkit-animation-name: fadeIn; /* Fade in the background */
        -webkit-animation-duration: 0.4s;
        animation-name: fadeIn;
        animation-duration: 0.4s;
        z-index: 99999999;
    }

    .modalPromo-content {
        position: fixed;
        bottom: 0;
        width: 400px;
        max-width: 80%;
        height: auto;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        -webkit-animation-name: slideIn;
        -webkit-animation-duration: 0.4s;
        animation-name: slideIn;
        animation-duration: 0.4s;
    }

    @media (max-width: 700px) and (orientation: landscape) {
        .modalPromo-content {
            width: auto;
            height: 650px;
            max-height: 95%;
            max-width: inherit;
        }
    }

    /* The Close Button */
    .modalCloser {
        color: white;
        font-size: 28px;
        font-weight: bold;
        position: absolute;
        top: 25px;
        right: 25px;
        width: 10%;
        text-align: center;
        z-index: 99999;
    }

    .modalCloser:hover,
    .modalCloser:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }


/*
    Targeta grups
*/

    .modalPromoGrups-trigger {
        position: fixed;
        cursor: pointer;
        bottom: 320px;
        width: 230px;
        right: -90px;
        transition: all 1.5s;
        z-index: 999;
        -webkit-animation: pulse1 1.5s infinite;
    }
    .modalPromoGrups-trigger:hover {
        right:-50px;
    }
    .modalPromoGrups-trigger.hidden {
        right: -150%;
    }
    @media (max-width:480px) {
        .modalPromoGrups-trigger {
            width: 150px;
            right: -30px;
            bottom: 220px;
        }
    }


    @keyframes pulse1 {
        0% {
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
        }

        50% {
            -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform: scale(1.1);
        }

        100% {
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
        }
    }

    @-webkit-keyframes olas {
        0% {
            left: -10px;
            transform: translateX(-10px);
        }
        100% {
            left: 10px;
            transform: translateX(10px);
        }
    }

    @-webkit-keyframes slideIn {
        from {
            bottom: -300px;
            opacity: 0;
        }
        to {
            bottom: 0;
            opacity: 1;
        }
    }

    @keyframes slideIn {
        from {
            bottom: -300px;
            opacity: 0;
        }
        to {
            bottom: 0;
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }