@charset "utf-8";

/*  ----------------------------------------------  T H E M E   A D D I T I O N S   F O R   A C C E S S I B I L I T Y   */

    :root{
        --ga-green: #84e1ec;

        --ga-green-dark: rgba(120,200,210,1);
        --ga-green-dark-half: rgba(120,200,210,0.5);
        --ga-green-darkest: rgba(35,170,185,1);
        --ga-green-footer: rgba(40,90,100,1);


        --ga-orange: rgba(248,156,39,1);
        --ga-orange-dark: rgba(255,66,0,1);

        --ga-a11y-orange: #FF8000;

        --ga-a11y-marker-color:      rgba(255,128,0,1);
        --ga-a11y-marker-background: rgba(255,128,0,1);

        --ga-a11y-form-field-background: rgba(35,170,185,0.1);

    }


/*  -------------------------------------------------  temp: make the currently focussed element visible   */
/*
    *:focus{
        outline: 3px solid red;
        position: relative;

        &:after{
            content: 'Focus is here.';

            position: absolute;
            top: 0;
            right: 0;
            transform: translate( 110%, -150% );

            color: red;
            font-size: 0.8rem;
            font-weight: bold;
            text-transform: uppercase;
            white-space: nowrap;
        }
    }
*/

/*  ------------------------------------------------------------------------------------  common buttons  */
/*  -------------------------------------------------------------------------  button testchair (header)  */

    .button,
    .header-phone-1 .button-testchair,
    .pb-gallery-fabrics button {
        &:focus-visible {
            color: white;
            background-color: var(--ga-a11y-orange);
            border: 1px solid var(--ga-orange-dark);
            outline: none;
        }
    }



/*  ------------------------------------------------------------------------------------------------   A11Y SKIP LINKS  */

    .a11y--skip-link-wrp{
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-start;

        width: 100%;
        height: fit-content;
        min-height: 80px;

        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;
        transform: translateY( calc( -100% - 10px ) );


        background-color: white;
        border-bottom: 1px solid var(--ga-green-dark);

        transition: transform 0.5s;

        &:focus-within{
            transform: translateY(0);
        }

        @media only screen and (min-width: 500px) {
            flex-flow: row nowrap;
            align-items: center;
            padding: 0 25px;
        }

        .a11y--skip-link{
            width: 100%;

            display: flex;
            flex-flow: row nowrap;
            align-items: center;

            padding: 10px 30px 12px 20px;

            font-size: 2rem;
            text-decoration: none;

            @media only screen and (min-width: 500px) {
                width: fit-content;
            }

            svg{
                width: 40px;
                aspect-ratio: 1 / 1;

                margin-right: 10px;

                rotate: 180deg;

                .back-bg{ fill: var(--ga-green-dark); }
                .back-fg{
                    fill:none;
                    stroke: white;
                    stroke-width: 25;
                    stroke-linecap: round;
                }
            }

            &:focus-visible{
                color: white;
                background-color: var(--ga-green-darkest);

                svg{
                    .back-bg{ fill: white; }
                    .back-fg{ stroke: var(--ga-green-darkest); }
                }
            }

        }
    }


/*  ------------------------------------------------------------------------------------------   MOBILE TOP NAVIGATION  */
    #topnavi-mobile{
        visibility: hidden;
    }


/*  ---------------------------------------------------------------------------------------------------------   HEADER  */

    .site-branding a{

        svg {
            .ga-logo-human {
                fill: var(--ga-green);
            }

            .ga-logo-star {
                fill: var(--ga-orange);
            }

            .ga-logo-font {
                fill: black;
            }
        }

        &:focus-visible{
            svg{
                .ga-logo-human,
                .ga-logo-star,
                .ga-logo-font{
                    fill: white;
                }
            }

            &::after{
                content: ' ';
                display: block;
                width: calc(100% + 40px);
                height: calc(100% + 20px);
                position: absolute;
                top: -10px;
                left: -20px;
                z-index: -1;
                background-color: var(--ga-green-darkest);
            }
        }
    }

    /*  ------------------------------------------------------------------------------  desktop social icons   */

    .social-top {
        display: flex;

        top: 50%;
        transform: translateY(-50%);

        .social {
            display: flex;

            width: 40px;
            aspect-ratio: 1 / 1;

            flex-direction: row;
            justify-content: center;
            align-items: center;

            color: var(--ga-green-darkest);

            &:focus-visible{
                color: white;
                background-color: var(--ga-a11y-orange);
                border-radius: 5px;

                outline: none;
            }

            svg {
                fill: currentColor;
            }
        }
    }


    /*  --------------------------------------------------------  open desktop submenus when focus is within   */

    #topnavi {

        .menu {
            padding-right: 30px;

            .menu-item-has-children {

                .a11y-button-open-submenu {
                    display: none;
                }

                &:focus-within {

                    & > a {
                        background-color: var(--ga-a11y-marker-background);
                        color: #fff;
                        opacity: 0.5;

                        &:focus-visible {
                            opacity: 1;
                        }

                        span {
                            color: white;
                        }

                        &::after {
                            width: 100%;
                            border-color: white;
                        }
                    }

                    .a11y-button-open-submenu {
                        width: 30px;
                        height: 30px;

                        display: flex;
                        justify-content: center;
                        align-items: center;

                        padding: 0 0 5px;

                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translateX(100%);

                        transition: transform 0.5s, top 0.25s;

                        font-size: 3rem;
                        color: white;

                        background-color: var(--ga-a11y-marker-background);
                        border: 0;
                        border-left: 1px solid white;
                        outline: 0;

                        &:focus-visible {
                            /*    top: 30px;  */
                            background-color: var(--ga-a11y-marker-background);
                        }
                    }
                }

                ul.sub-menu {

                    visibility: hidden;
                    transition: all 0.5s;

                    &:focus-within {
                        cursor: default;

                        li {

                            &:focus-within:has( a:focus-visible ) {
                                background-color: var(--ga-a11y-marker-background);
                            }

                            a {
                                opacity: 1;

                                &:focus-visible {
                                    color: #fff;

                                    span {
                                        color: white;
                                    }

                                    &::after {
                                        border-color: white;
                                    }

                                }
                            }
                        }
                    }
                }

                &:hover,
                &.open-sub-menu {

                    .sub-menu {
                        visibility: visible;
                    }

                }
            }
        }


        .my-kto{
            height: 100%;
            top: 0;

            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            padding: 0 25px;

            &:focus-visible{
                color: white;
                background-color: var(--ga-a11y-marker-background);
            }
        }

        .basket{
            height: 100%;
            aspect-ratio: 1 / 1;

            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            top: 0;
            right: 0;

            svg{
                width: 40px;
                height: auto;

               .shopping-basket{
                    fill: white;
                }

                .shopping-basket-bg{
                    fill: var( --ga-green-dark );
                }
            }

            &:focus-visible{
                svg{
                    .shopping-basket-bg{
                        fill: var(--ga-a11y-orange);
                    }
                }
            }
        }
    }


/*  -----------------------------------------------------------------------------------------------------------   MAIN  */

    #main{
        scroll-margin-top: 200px;
    }

    #breadcrumbs,
    .content,
    .description{

        isolation: isolate;

        a:not( .button ){
            &:focus-visible {
                display: inline-block;
                position: relative;

                color: black;
                text-decoration: none;

                &:after {
                    content: " ";

                    width: calc(100% + 10px);
                    height: 100%;

                    position: absolute;
                    top: 0;
                    left: -5px;
                    z-index: -1;

                    background-color: var(--ga-green);
                    outline: 2px solid var(--ga-green);
                    outline-offset: -1px;
                }
            }
        }
    }



    #debleu-pb{

        .pb-teaser{
            &:focus-within {
                outline: 4px solid var(--ga-a11y-orange);
                outline-offset: 4px;
            }
        }

        .pb-teaser-text-3-col{
            padding-bottom: 20px;
            .pb-teaser-text-wrap{
                padding-left: 25px;
                padding-right: 25px;
            }
        }


        .pb-1-image,
        .gallery{
            height: fit-content;
            a{
                display: block;
                outline: 4px solid transparent;
                outline-offset: 4px;

                &:focus-visible {
                    outline-color: var(--ga-a11y-orange);
                }
            }
        }

        .block-text{
            a{
                &:has(img){
                    display: block;
                    margin-bottom: 6px;

                    &:focus-visible {
                        margin-bottom: 0;
                        &::after{
                            content: none;
                        }
                        img {
                            outline: 4px solid var(--ga-a11y-orange);
                            outline-offset: 4px;
                        }
                    }
                }
            }
            details{
                position: relative;

                &:focus-within{
                    &::after{
                        content: " ";

                        width: calc(100% + 10px);
                        height: calc(100% + 6px);

                        position: absolute;
                        top: -3px;
                        left: -5px;
                        z-index: -1;

                        background-color: var(--ga-green);

                    }
                }
            }
        }

        .pb-gallery {
            &:not( &.pb-gallery-fabrics ) {
                .gallery-item {
                    margin: 6px;

                    &:focus-within {
                        outline: 4px solid var(--ga-a11y-orange);
                        outline-offset: 4px;
                    }
                }
            }
        }

        .pdf-download-pdf {
            a{
                .button{
                    &:focus-visible {
                        color: white;
                        background-color: var(--ga-a11y-marker-background);
                    }
                }
            }
        }

        [id|="wpcf7"] {
            input:not( [type="submit"] ),
            textarea,
            select {
                &:focus,
                &:focus-visible {
                    outline: 4px solid var(--ga-green-darkest);
                    background-color: var(--ga-a11y-form-field-background);
                }

                &.wpcf7-not-valid:not( &:focus, &:focus-visible ) {
                    outline: 2px solid red;
                    background-color: rgba(255,0,0,0.05);
                }
            }

            .data-privacy{
                &:has( .wpcf7-not-valid ) {
                    outline: 4px solid red;
                }
            }

            input[type="submit"] {
                &:focus-visible {
                    background-color: var(--ga-a11y-marker-background);
                    border: 1px solid var(--ga-orange-dark);
                }
            }

            .wpcf7-response-output {
                margin-left: 0;
                margin-right: 0;
            }
        }
    }






    /*  ---------------------------------------------------------------------------------------------   back   */
    .back{
        width: 40px;
        aspect-ratio: 1 / 1;

        border: 0;
        outline: none;
        background: none;

        svg {
            transition: all 0.5s;

            .back-bg{ fill: none; }
            .back-fg{
                fill:none;
                stroke: var(--ga-green-footer);
                stroke-width: 25;
                stroke-linecap: round;
            }
        }

        &:hover,
        &:active{
            svg {
                .back-bg{ fill: var(--ga-green-footer); }
                .back-fg{ stroke: white; }
            }
        }

        &:focus-visible{
            svg {
                .back-bg{ fill: var(--ga-green); }
                .back-fg{ stroke: black; }
            }
        }
    }



/*  ---------------------------------------------------------------------------------------------------------   FOOTER  */

    /*  ---------------------------------------------------------------------------------------  footer logo  */
    .footer-logo{

        a {
            display: block;
            width: 100%;
            height: auto;

            svg {
                width: 100%;
                height: auto;

                .human,
                .star {
                    fill: rgba(102, 139, 144, 1);
                }

                .blob {
                    fill: rgba(32, 76, 79, 1);
                }

            }

            &:focus-visible {
                outline: none;

                svg {
                    .star {
                        fill: var(--ga-a11y-orange);
                    }

                    .human{
                        fill: white;
                    }

                    .blob {
                        fill: var(--ga-green-dark-half);
                    }
                }
            }
        }
    }


    /*  ---------------------------------------------------------------------------------  footer navigation  */

    #footer-content {

        .box.navi {

            li {

                a {
                    display: block;

                    &:focus-visible {
                        width: calc(100% + 20px);
                        height: calc(100% - 8px);
                        margin: 4px -10px;
                        padding: 2px 10px;


                        background-color: white;
                        color: var(--ga-green-footer);
                        outline: none;

                        svg {
                            fill: currentColor;
                        }
                    }
                }
            }
        }

        a.top {

            background-color: var(--ga-green-footer);
            outline: none;

            svg {
                .top-bg{      fill: white; }
                .top-fg{
                    fill:none;
                    stroke: var(--ga-green-footer);
                    stroke-width: 25;
                    stroke-linecap: round;
                }
            }

            &:focus-visible{
                svg {
                    .top-bg{ fill: var(--ga-a11y-orange); }
                    .top-fg{ stroke: white; }
                }

            }
        }

    }


    /*  -------------------------------------------------------------------------------------  footer social  */

    a.social{

        outline: none;
        /*
                svg{
                    .icon-logo{         fill: rgba(255,255,255,0.8); }
                    .icon-background {  fill: rgba(32, 76, 79, 1);   }

                }
        */
        &:focus-visible{

            svg{
                .icon-logo{         fill: var(--ga-green-footer); }
                .icon-background {  fill: white; }
            }
        }
    }


    /*  ---------------------------------------------------------------------------  copyright  */

    .copyright:focus-within{

        background-color: var(--ga-a11y-orange);

        a{
            color: white;
            outline: none;
        }

    }





/*  ------------------------------------------------------------------------------------------------------  VENDORS  */

/*  ----------------------------------------------------------------------------------   MAGNIFICENT POPUP  */

.mfp-image-holder {

    .mfp-close{

        &:focus-visible{

            padding-right: 11px;

            &::after{
                content: ' ';

                display: block;
                width: 40px;
                height: 40px;

                position: absolute;
                top: 0;
                right: 0;
                z-index: -1;
                transform: translate(0, 0);

                background-color: var(--ga-a11y-marker-background);
            }

        }
    }


    .mfp-arrow{

        &:focus-visible{

            &::before{
                content: ' ';

                display: block;
                width: 60px;
                height: 60px;

                position: absolute;
                top: 0;
                right: 0;
                z-index: -1;
                transform: translate(0, 0);

                background-color: var(--ga-a11y-marker-background);
            }
        }
    }

    .mfp-img {
        display: block;
        position: relative;

        &:focus-visible{

            &::before{
                content: ' ';

                display: block;
                width: calc( 100% + 30px );
                height: calc( 100% + 30px );

                position: absolute;
                top: -15px;
                left: -15px;
                z-index: -1;
                transform: translate(0, 0);

                background-color: var(--ga-a11y-marker-background);
            }
        }
    }

}