/*
    Theme Name:   Katrin Müller
    Author:       Indaba Solutions
    Template:     bricks
    Version:      1.0
    Text Domain:  katrin
*/

    :root {

        --ample-contenidor: 1366px;
        
        /*  Colors */
        --color-primari: black;
        --color-primari-hover: #91A007;
        --color-secundari: #f89f73;
        --color-accio: #91A007;
        --color-accio-hover: #c6db0a;
        --color-text: #000;
        --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=16&minWidth=360&minRatio=1.125&maxFontSize=18&maxWidth=1366&maxRatio=1.2&steps=s%2Cbase%2Cm%2Cl%2Cxl&baseStep=base&prefix=text&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 */
        --text-s: clamp(1.42rem, 0.08vi + 1.39rem, 1.5rem);
        --text-base: clamp(1.6rem, 0.2vi + 1.53rem, 1.8rem);
        --text-m: clamp(1.8rem, 0.36vi + 1.67rem, 2.16rem);
        --text-l: clamp(2.02rem, 0.56vi + 1.82rem, 2.59rem);
        --text-xl: clamp(2.28rem, 0.83vi + 1.98rem, 3.11rem);
        /* 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.26rem, calc(-0.32vw + 1.37rem), 1.01rem);
        --h5: clamp(1.42rem, calc(-0.09vw + 1.45rem), 1.35rem);
        --h4: clamp(1.6rem, calc(0.26vw + 1.52rem), 1.8rem);
        --h3: clamp(1.8rem, calc(0.77vw + 1.55rem), 2.4rem);
        --h2: clamp(2.02rem, calc(1.5vw + 1.54rem), 3.2rem);
        --h1: clamp(2.28rem, calc(2.54vw + 1.46rem), 4.26rem);
        --h-titol: clamp(2.56rem, calc(4vw + 1.28rem), 5.68rem);

        /* Espais */
        --espai-xs: clamp(1.02rem, calc(0.36vw + 0.91rem), 1.4rem);
        --espai-s: clamp(1.28rem, calc(0.67vw + 1.07rem), 1.98rem);
        --espai-m: clamp(1.6rem, calc(1.15vw + 1.23rem), 2.8rem);
        --espai-l: clamp(2rem, calc(1.87vw + 1.4rem), 3.96rem);
        --espai-xl: clamp(2.5rem, calc(2.96vw + 1.55rem), 5.6rem);
        --espai-2xl: clamp(3.13rem, calc(4.58vw + 1.66rem), 7.92rem);
        --espai-3xl: clamp(3.91rem, calc(6.97vw + 1.68rem), 11.19rem);
        --espai-4xl: clamp(4.88rem, calc(10.46vw + 1.53rem), 15.83rem);

        --espai-seccio-x: var(--espai-m);
        --espai-seccio-y: var(--espai-3xl);

        /* 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: 100px;

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

    }

    .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: 1em;
        background-color: var(--color-accio);
        padding: var(--padding-boto);
        border-width: var(--vora-boto);
    }
    .wp-block-button.is-style-outline .wp-block-button__link {
        background-color: var(--color-clar);
    }


    
/*
    Seccions
*/

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