/*
    Theme Name:   Salers GM
    Author:       Indaba Solutions
    Template:     bricks
    Version:      1.0
    Text Domain:  salersgm
*/

    :root {

        --ample-contenidor: 1366px;
        
        /*  Colors */
        --color-primari: #C70036;
        --color-primari-hover: #98032C;
        --color-secundari: #680808;
        --color-accio: #C70036;
        --color-accio-hover: #98032C;
        --color-text: #2B2B2B;
        --color-clar: white;
        --color-fosc: black;
        --color-vora: hsla(0, 0%, 50%, 0.25);
        --color-ombra: hsla(0, 0%, 0%, 0.15);

        /* Textos */
        /* https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=360&minRatio=1.125&maxFontSize=22&maxWidth=1366&maxRatio=1.2&steps=s%2Cbase%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=base&prefix=text&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=10&decimals=2&previewFont=Nunito&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1366 */
        --text-s: clamp(1.64rem, 0.1vi + 1.6rem, 1.74rem);
        --text-base: clamp(1.8rem, 0.2vi + 1.73rem, 2rem);
        --text-m: clamp(1.98rem, 0.32vi + 1.87rem, 2.3rem);
        --text-l: clamp(2.18rem, 0.46vi + 2.01rem, 2.64rem);
        --text-xl: clamp(2.4rem, 0.64vi + 2.16rem, 3.04rem);
        --text-2xl: clamp(2.64rem, 0.86vi + 2.33rem, 3.5rem);
        --text-3xl: clamp(2.9rem, 1.12vi + 2.5rem, 4.02rem);
        /* https://www.fluid-type-scale.com/calculate?minFontSize=20&minWidth=360&minRatio=1.25&maxFontSize=22&maxWidth=1366&maxRatio=1.333&steps=6%2C5%2C4%2C3%2C2%2C1%2Ctitol&baseStep=4&prefix=h&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=10&decimals=2&previewFont=Manrope&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1366 */
        --h6: clamp(1.18rem, -0.05vi + 1.2rem, 1.13rem);
        --h5: clamp(1.42rem, 0.08vi + 1.39rem, 1.5rem);
        --h4: clamp(1.7rem, 0.3vi + 1.59rem, 2rem);
        --h3: clamp(2.04rem, 0.62vi + 1.82rem, 2.67rem);
        --h2: clamp(2.45rem, 1.1vi + 2.05rem, 3.55rem);
        --h1: clamp(2.94rem, 1.79vi + 2.29rem, 4.74rem);
        --h-titol: clamp(3.53rem, 2.77vi + 2.53rem, 6.31rem);

        /* Espais */
        --espai-xs: clamp(0.9rem, calc(0.07vw + 0.88rem), 0.98rem);
        --espai-s: clamp(1.27rem, calc(0.19vw + 1.21rem), 1.47rem);
        --espai-m: clamp(1.8rem, calc(0.38vw + 1.68rem), 2.2rem);
        --espai-l: clamp(2.54rem, calc(0.72vw + 2.31rem), 3.3rem);
        --espai-xl: clamp(3.6rem, calc(1.29vw + 3.19rem), 4.95rem);
        --espai-2xl: clamp(5.09rem, calc(2.23vw + 4.37rem), 7.42rem);
        --espai-3xl: clamp(7.2rem, calc(3.77vw + 5.99rem), 11.14rem);
        --espai-4xl: clamp(10.18rem, calc(6.24vw + 8.18rem), 16.71rem);

        --espai-seccio-x: var(--espai-l);
        --espai-seccio-y: var(--espai-2xl);

        /* Radis */
        --radi-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
        --radi-s: clamp(0.6rem, calc(-0.26vw + 0.88rem), 0.8rem);
        --radi-m: clamp(1rem, calc(-0.26vw + 1.28rem), 1.2rem);
        --radi-l: clamp(1.6rem, calc(-0.51vw + 2.16rem), 2rem);
        --radi-xl: clamp(2.6rem, calc(-0.77vw + 3.45rem), 3.2rem);
        --radi-tot: 999rem;

        /* Ombres */
        --ombra-xs: 0 1px 2px var(--color-ombra);
        --ombra-s: 0 1.5px 3px var(--color-ombra);
        --ombra-m: 0 2px 6px var(--color-ombra);
        --ombra-l: 0 3px 12px var(--color-ombra);
        --ombra-xl: 0 6px 48px var(--color-ombra);

        /* Botons */
        --text-boto: 1em;
        --padding-boto: .5em 1em;
        --vora-boto: 1px;
        --radi-boto: 0;

        /* Gutenberg */
        --wp--preset--font-size--small: var(--text-s);
        --wp--preset--font-size--medium: var(--text-m);
        --wp--preset--font-size--large: var(--text-l);
        --wp--preset--font-size--x-large: var(--text-xl);
        --wp--preset--spacing--20: 0.44rem;
        --wp--preset--spacing--30: var(--espai-s);
        --wp--preset--spacing--40: var(--espai-m);
        --wp--preset--spacing--50: var(--espai-l);
        --wp--preset--spacing--60: var(--espai-xl);
        --wp--preset--spacing--70: var(--espai-2xl);
        --wp--preset--spacing--80: var(--espai-3xl);

    }

    .color-primari {
        color: var(--color-primari);
    }

    .color-secundari {
        color: var(--color-secundari);
    }

    .fons-primari {
        background-color: var(--color-primari);
    }

    .fons-secundari {
        background-color: var(--color-secundari);
    }

    .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;
    }

    h1, h2, h3 {
        line-height: 1.2;
    }

    p {
        margin-bottom: 1em;
    }

    .espaiat-m > * + * {
        margin-top: var(--espai-m);
    }

    .espaiat-g > * + * {
        margin-top: var(--espai-g);
    }
    
    header .brx-submenu-toggle svg {
        max-width: 1em;
    }
    
    .text-light {
        font-weight: 300;
    }

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


/*
    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;
    }


/*
    Widgets
*/

    .brxe-wordpress {
        width: 100%;
        padding: 2rem 3rem 3rem;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
    }

    .brxe-wordpress .bricks-widget-title {
        position: relative;
        margin-bottom: 1em;
        padding-bottom: 10px;
        border-bottom: 1px solid #e6e6e6;
    }

    .brxe-wordpress .bricks-widget-title::after {
        content: '';
        width: 45px;
        height: 2px;
        background-color: var(--color-primari);
        position: absolute;
        bottom: -1px;
        left: 0;
    }

        
/*
    Capçalera
*/


    #brx-header > :not(.ample-total) {
        padding-left: var(--espai-seccio-x);
        padding-right: var(--espai-seccio-x);
    }

    .cap-enganxosa {
        --fons-seccio-fixa: white;
        --altura-seccio-fixa: 10rem;
    }

    .cap-enganxosa.bricks-is-frontend.admin-bar #brx-header #seccio-fixa {
        top: 32px;
        top: var(--wp-admin--admin-bar--height);
    }

    .cap-enganxosa #brx-header #seccio-fixa,
    .cap-solapada #brx-header #seccio-fixa {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        transition: background-color .2s,transform .4s, top .5s;
        width: 100%;
        z-index: 998;
        padding-left: var(--espai-seccio-x);
        padding-right: var(--espai-seccio-x);
    }

    .cap-enganxosa #brx-header #seccio-fixa {
        position: fixed;
    }

    .cap-enganxosa #brx-header #seccio-fixa.scrolling,
    .cap-enganxosa:not(.cap-negativa) #seccio-fixa {
        background-color: var(--fons-seccio-fixa);
        box-shadow: 0 5px 15px -8px rgb(0 0 0 / 10%);
    }

    .cap-enganxosa #brx-header #seccio-fixa.slide-up {
        overflow-x: hidden;
        top: -100% !important;
    }

    .cap-enganxosa:not(.cap-solapada) {
        margin-top: var(--altura-seccio-fixa);
    }

    .cap-negativa #brx-header #seccio-fixa:not(.scrolling),
    .cap-negativa .bricks-mobile-menu-toggle { 
        color: white 
    } 


/*
    Caixes ample total alineades
*/

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

    .marge-dret-automatic {
        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 #7b7b7b;
    }


/*
    Plantilles per defecte del Bricks
*/

    .layout-default .brxe-container {
        padding-left: var(--espai-seccio-x);
        padding-right: var(--espai-seccio-x);
    }

    body > article#brx-content {
        padding: var(--espai-seccio-y) var(--espai-seccio-x);
    }


/*
    Gutenberg
*/

    .wp-block-heading {
        margin-bottom: .5em;
    }

    .wp-block-button .wp-block-button__link {
        font-size: .85em;
        font-weight: 500;
        background-color: var(--color-accio);
        padding: var(--padding-boto);
        border-width: var(--vora-boto);
        border-radius: var(--radi-boto);
        text-transform: uppercase;
    }
    .wp-block-button.is-style-outline .wp-block-button__link {
        background-color: var(--color-clar);
    }

    .wp-block-columns.is-layout-flex {
        column-gap: 3em;
    }

    .wp-block-column > .wp-block-image:first-child, 
	.wp-block-column > .wp-block-video:first-child, 
	.wp-block-column > figure[class^=wp-block-]:first-child {
        margin-top: 0.5em;
    }




/*
    Millores de l'editor de blocs
*/

    .sagnat-esquerre-1 {
        padding-left: 40px !important;
    }

    .sagnat-esquerre-2 {
        padding-left: 80px !important;
    }

    .sagnat-esquerre-3 {
        padding-left: 120px !important;
    }

    
/*
    Seccions
*/

    .avantitol-seccio + .titol-seccio {
        margin-top: var(--espai-s);
    }