/*
 * Theme Name: empathy
 * Description: empathy wp project
 * Author: webits.gr
*/


:root {
    --side-padding: min(5%, 2rem);
    --max-content-width: 73rem;
    --content-width: min(var(--max-content-width), calc(100% - 2 * var(--side-padding)));
    --side-total: calc(50% - var(--content-width) / 2);
    --grid-gap: 1.5rem;
    --font-display: "Lexend Exa", sans-serif;
    --font-body: "Inter", sans-serif;

    --wp--preset--color--black: #000000;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--base: #354DB4;
    --wp--preset--color--base-dark: #002F66;
    --wp--preset--color--base-light: #1982FA;
    --wp--preset--color--base-lighter: #2489ff;
    --wp--preset--color--accent-a: #99FFC2;
    --wp--preset--color--accent-b: #9719FA;
    --wp--preset--color--eu-blue: #003399;

    --bleed-bottom: 1rem;
}


body {
    --body-bg-color: var(--wp--preset--color--white);
    background-color: var(--body-bg-color);
    font-family: var(--font-body);
}


body.nav-open {
    
    --gradient-factor: 16vw;
    background-color: var(--wp--preset--color--base-dark);
    background-size: 100vw 100vh;
    background-image: 
        linear-gradient(to right, 
            var(--wp--preset--color--base-light) 0%,
            transparent 25%,
            transparent 75%,
            var(--wp--preset--color--base-light)), 

        repeating-linear-gradient(-15deg, 
                        var(--wp--preset--color--accent-a),
                        var(--wp--preset--color--accent-a) var(--gradient-factor), 
                        var(--wp--preset--color--base-light) var(--gradient-factor), 
                        var(--wp--preset--color--base-light) calc(var(--gradient-factor) * 2), 
                        var(--wp--preset--color--accent-b) calc(var(--gradient-factor) * 2), 
                        var(--wp--preset--color--accent-b) calc(var(--gradient-factor) * 3));

    
    &.theme-color--base-dark {
        background-color: var(--wp--preset--color--base);
    }

    .global-header {
        box-shadow: 0 0.5rem 10rem hsla(212, 100%, 20%, 0.5);
    }
   
    .lang,
    .breadcrumbs {
        visibility: hidden;
    }

    .content-wrapper, footer {
        transition: opacity 0.3s ease-out;
        opacity: 0;
    }

    .page-title__wrap > *,
    .page-title__wrap::before,
    .page-title__wrap::after,
    .page-title {
        display: none;
    }


}

h1, h2 {
    font-weight: normal;
    font-family: var(--font-display);
    letter-spacing: -0.05em;
}

img {
    max-width: 100%;
    height: auto;
}


.theme-color--base {
    --theme-bg-color: var(--wp--preset--color--base);
    --theme-text-color: var(--wp--preset--color--white);
}

.theme-color--base-dark {
    --theme-bg-color: var(--wp--preset--color--base-dark);
    --theme-text-color: var(--wp--preset--color--white);
}

.theme-color--base-light {
    --theme-bg-color: var(--wp--preset--color--base-light);
    --theme-text-color: var(--wp--preset--color--white);
}

.theme-color--accent-a {
    --theme-bg-color: var(--wp--preset--color--accent-a);
    --theme-text-color: var(--wp--preset--color--base-dark);
}

.theme-color--accent-b {
    --theme-bg-color: var(--wp--preset--color--accent-b);
    --theme-text-color: var(--wp--preset--color--white);
}

.page-layout {
    container: layout / inline-size;
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "start . header header . end"
                         "start . main main . end"
                         "start . footer footer . end";
    grid-template-columns: var(--side-padding) 1fr calc(var(--content-width) / 2) calc(var(--content-width) / 2) 1fr var(--side-padding);
    
    /* large screens */

    @media screen and (min-width: 93.75em) {
        --content-side-ratio: 0.16;
        --content-main-ratio: calc(1 - var(--content-side-ratio));
        grid-template-areas: "start . header header . end"
                             "start . main main . end"
                             "start . footer footer . end";
        grid-template-columns: var(--side-padding) 1fr calc(var(--content-width) * var(--content-main-ratio)) calc(var(--content-width) * var(--content-side-ratio)) 1fr var(--side-padding);
    }
    
}

.page-layout > * {
    --side-padding: min(5cqi, 2rem);
    --content-width: min(var(--max-content-width), calc(100cqi - 2 * var(--side-padding)));
    --side-total: calc(50cqi - var(--content-width) / 2);
    grid-column: main-start / main-end;
}

.page-layout > .full-bleed {
    grid-column: 1 / -1;
}

.global-header {
    --circle-size: 5.125rem;
    --max-circle-size: min(var(--circle-size), 100%);
    --padding-block-end: 4rem;
    display: grid;
    margin-block-end: calc(var(--padding-block-end) + var(--bleed-bottom));

    &:not(:has(.page-title__wrap)) {
        padding-block-end: calc(var(--padding-block-end) + var(--bleed-bottom));
    }

    &.content-bleed {
        margin-block-end: 0;
    }

    grid-template-columns: subgrid;
    grid-template-areas: ". . logo lang lang ."
                         ". . logo  nav . ."
                         ". . crumbs crumbs . ."
                         ". . title title . .";
    column-gap: var(--grid-gutter);
    background-color: var(--theme-bg-color);
    color: var(--theme-text-color);
    a {
        color: inherit;
    }

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }



    .lang {
        grid-area: lang;
        position: relative;
        display: flex;
        gap: 1em;
        justify-content: flex-end;
        z-index: 0;
        align-items: center;
        &::before {
            position: absolute;
            content: '';
            display: block;
            block-size: 100%;
            inline-size: 100cqi;
            inset-block-start: 0;
            inset-inline-end: 0;
            transform: translateX(min(5cqi, 2rem));
            background-color: var(--wp--preset--color--base);
            z-index: -1;
        }

        li {
            border-block: 0.2rem solid transparent;
        }

        .current-language-menu-item {
            border-block-start: 0.2rem solid var(--wp--preset--color--accent-a);
        }

        a {
            display: block;
            padding: 0.2em;
            padding-block: 0.5em;
            text-decoration: none;
            color: var(--wp--preset--color--white);
        }
    }
    
    .site-logo {
        grid-area: logo;
        min-width: var(--side-padding);
        position: relative;
        grid-row: 1 / span 2;
        margin-block-start: 1rem;
        max-width: var(--max-circle-size);
        img {
            max-width: 100%;
        }
    }
    
    #nav-main {
        padding-block-start: 1rem;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: var(--side-padding);
        grid-area: nav;
        margin-inline-start: auto;
        align-items: end;
        justify-content: flex-start;
        ul {
            display: none;
            a {
                text-decoration: none;
                opacity: 0;
            }
        }

        .menu-group {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.75em;
            .nav-logo--white {
                display: none;
            }
            :is(.theme-color--base-dark, .theme-color--accent-b) & {
                .nav-logo {
                    display: none;
                }
                .nav-logo--white {
                    display: block;
                }
            }
          
        }

        .global-nav-toggle {
            cursor: pointer;
            width: var(--circle-size);
            max-width: var(--max-circle-size);
            appearance: none;
            border: none;
            background-color: transparent;
            padding: 1em 0.2em;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            background-color: var(--wp--preset--color--base-dark);
            color: var(--wp--preset--color--white);
            outline: 0rem solid transparent;
            transition: all 0.25s ease-out;
            &:hover {
                outline-width: 0.2rem;
                outline-color: var(--wp--preset--color--base-dark);
            }
            .theme-color--base-dark & {
                background-color: var(--wp--preset--color--accent-a);
                color: var(--wp--preset--color--base-dark);
                &:hover {
                    outline-color: var(--wp--preset--color--accent-a);
                }
            }
            margin-inline-start: var(--grid-gap);
            ;
            svg {
                width: 100%;
                path {
                    fill: var(--theme-text-color);
                }
            }
          
        }
    
        #global-nav-close {
            display: none;
        }

        body.nav-open & {

            grid-column: 1 / nav-end;

       

            #global-nav-close {
                display: block;
            }

            #global-nav-open {
                display: none;
            }
            ul {
                margin-block-start: 1em;
                margin-block-end: 2em;
                margin-inline-end: calc(var(--side-padding) * -1);
                align-self: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.5em;
                a {
                    display: block;
                    padding: 0.5em;
                    animation: fade-in 0.3s ease-out forwards;
                }

                @media screen and (min-width: 45rem) {
                   align-self: flex-end;
                   margin-inline-end: 0;
                   align-items: flex-end;
                }
            }
        }
    }

    
    .breadcrumbs {
        grid-area: crumbs;
        a {
            position: relative;
            display: flex;
            padding-block: 1.5em;
            font-size: 0.85rem;
            width: fit-content;
            gap: 0.5em;
            &::after {
                content: '...';
                display: inline-block;
            }
        }
    }

    .page-title {
        margin-block: 0;
        font-size: 2rem;
        font-weight: 300;
        text-wrap: balance;
        text-transform: uppercase;
        @media screen and (min-width: 48rem) {
            font-size: 4.5rem;
            
        }
    }

    .page-title--simple {
        grid-area: title;
        margin: 0;
        margin-block-start: 1em;
        grid-row: auto / span 2;
    }
    
    .page-title__wrap {
        display: grid;
        position: relative;
        z-index: 0;
        grid-area: title;
        margin: 0;
        grid-row: auto / span 2;
        grid-template-columns: subgrid;
        grid-template-rows: var(--circle-size) 1fr;
        color: var(--wp--preset--color--black);

        .global-header:not(:has(.breadcrumbs)) & {
            margin-block-start: 4rem;
        }
    }

    .page-title__wrap::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: var(--wp--preset--color--white);
        border: 0.1rem solid black;
        z-index: 0;
    }

    .page-title__wrap > * {
        position: relative;
    }

    .page-title__wrap::after {
        content: '';
        grid-column: 1 / -1;
        grid-row: 2 / -1;
        width: 100cqi;
        height: calc(var(--bleed-bottom) + 100% + var(--padding-block-end));
        transform: translateX(calc(var(--side-total) * -1));
        background-color: var(--body-bg-color);
        z-index: -1;
    }    
    
    .page-title__content {
        grid-column: title-start / title-end;
        grid-row: 1 / -1;
        display: flex;
        flex-direction: column;
        padding-block: 1.25rem;
        gap: 1rem;
        flex-grow: 1;

        &>* {
            margin-inline: 2rem;
        }
    }



    /* header on large screens */

    @media (min-width: 93.75em) {
        grid-template-areas: ". logo lang lang lang ."
                             ". logo crumbs nav . ."
                             ". logo title nav . .";
   
        .site-logo {
            grid-row: 1 / -1;
            margin-inline-start: auto;
            margin-inline-end: var(--grid-gap);
            max-width: min(5rem, 100%);
        }
        #nav-main {
            grid-row: 2 / -1;
        }
        .breadcrumbs {
            align-self: end;
            margin-block-start: 1em;
        }
    }
 
}

/* header end */

.content-wrapper {
    padding-block-end: 4rem;
    &:not(:has(*)) {
        padding: 0;
    }
    &.columns:has(.side-content) {
        display: grid;
        row-gap: 4rem;
        column-gap: 4rem;
        @media screen and (min-width: 65rem) {
            grid-template-columns: 22rem 1fr;
            & > * {
                grid-column: 2 / -1;
            }
            .side-content {
                grid-column: 1 / 2;
            }
        }
       @media screen and (min-width: 93.75em) {
        grid-column: main-start / span 1;
   
       }
    }
}

.toc {
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        li {
            border: 0.1rem solid var(--wp--preset--color--black);
            &:not(:first-child) {
                border-block-start: none;
            }
        }
        a {
            display: block;
            padding-block: 0.3em;
            padding-inline: 0.5em;
            text-decoration: none;
            color: var(--wp--preset--color--black);
        }
    }
}

.cms-content {

    line-height: 1.4;
    --measure: 55ch;

    .content-wrapper:not(:has(.side-content)) &:not(.columns) {
        --measure: 65ch;
    }

    > * {
        margin-block-start: 0;
    }

    > * + * {
        margin-block-start: 1.5rem;
    }

    h1, h2 {
        text-wrap: balance;
        font-weight: 300;
        * + & {
            margin-block-start: 3rem;
        }
    }

    .wp-block-heading a.anchor {
        display: none;
    }

    .wp-block-heading a {
        color: currentColor;
        text-decoration-color: blue;
        text-underline-offset: 0.1em;
    }

    :is(p, ul, ol) {
        max-width: var(--measure);
        text-wrap: pretty;
    }

    li > :is(ul, ol) {
        margin-block-start: 1rem;
    }   

    li + li {
        margin-block-start: 1rem;
    }
}

#footer {

    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1; 
    background-color: var(--wp--preset--color--base-dark);
    padding-block-end: 1rem;



    @media screen and (min-width: 48rem) {
    }

   .eu-logos {

    grid-column: main-start / main-end;
    width: auto;
    max-width: 100%;
    margin-block-start: 1rem;
    margin-block-end: 2rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: start;
    align-items: center;
    padding: 1rem;
    padding-inline: 3%;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--white);

       figure {
        margin: 0;
       }

       a {
           display: block;
           text-decoration: none;
           min-inline-size: 10rem;
       }

       @media screen and (min-width: 48rem) {
        flex-direction: row;
        width:max-content;
        margin-inline-start: auto;
        margin-block-start: 1rem;
           justify-content: end;
       }
    }
   
}


.nav-footer {
    grid-column: main-start / main-end;
    transform: translateY(calc(var(--bleed-bottom) * -1));
    ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
        gap: 0.1rem;
        list-style: none;
        padding:0;
        margin: 0;
    }

    .link-text {
        display: block;
        padding-inline-end: 1rem;
        text-wrap: balance;
    }

    .menu-item {
        --theme-bg-color: var(--wp--preset--color--accent-a);
        --theme-text-color: var(--wp--preset--color--base-dark);
        padding: 1.5rem;
        background-color: var(--theme-bg-color);
        color: var(--theme-text-color);
        a {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            aspect-ratio: unset;
            gap: 0.5em;
            font-family: var(--font-display);
            color: currentColor;
            text-decoration: none;
            font-size: 1.5rem;
            font-weight: 300;
            @media screen and (min-width: 48rem) {
                aspect-ratio: 1 / 0.5;
            }
        }
        svg {
            width: 1rem;
            align-self: flex-end;
            path {
                fill: currentColor;
            }    
        }
        &:nth-child(3n+1) {
            --theme-bg-color: var(--wp--preset--color--accent-a);
            --theme-text-color: var(--wp--preset--color--base-dark);
        }
        &:nth-child(3n+2) {
            --theme-bg-color: var(--wp--preset--color--base-light);
            --theme-text-color: var(--wp--preset--color--white);
        }
        &:nth-child(3n+3) {
            --theme-bg-color: var(--wp--preset--color--accent-b);
            --theme-text-color: var(--wp--preset--color--white);
        }

        &.current-menu-item {
            a {
                text-decoration: underline;
                text-decoration-thickness: 0.05em;
                text-underline-offset: 0.1em;
                text-decoration-style: wavy;
            }
            svg {
                transform: rotate(-90deg);
            }
        }
      
    }
    
}



.cards {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
   align-content: start;
   gap: 1rem;
   margin-block-end: 3rem;
   margin-block-start: calc(-1 * var(--bleed-bottom));
   article {
    padding: 1.5rem;
    border: 0.1rem solid var(--wp--preset--color--black);
    background-color: var(--wp--preset--color--white);
    h2 {
        font-size: 1.2rem;
        text-wrap: balance;
        font-family: var(--font-display);
        font-weight: 300;
    }
    a {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        aspect-ratio: 1 / 0.5;
        text-decoration: none;
        color: var(--wp--preset--color--black);
        text-transform: uppercase;
    }
    svg {
        width: 1rem;
        align-self: flex-end;
        path {
            fill: currentColor;
        }    
    }
   }
   
}

.meta-tags {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-transform: uppercase;
    gap: 0.25em;
    font-size: 0.8rem;

    span {

        padding-inline: 0.5em;
        padding-block: 0.2em;
        display: block;
        color: var(--wp--preset--color--white);
        background-color: var(--wp--preset--color--accent-b);
        &:nth-child(2n) {
            background-color: var(--wp--preset--color--black);
        }

    }

    .cards:has(.tag--accent) & {

        span {

            background-color: var(--wp--preset--color--black);

            &.tag--accent {
                background-color: var(--wp--preset--color--accent-b);
            }

        }

    }
    
}

.home {
    background-color: var(--wp--preset--color--base-lighter);
    #footer {
        background-color: transparent;
    }
    .page-title__wrap {
        h1 {
            text-transform: none;
        }
        h2 {
            text-wrap: balance;
        }
        p {
            text-wrap: balance;
        }
        &::after {
            background-image: 
       
                linear-gradient(to bottom, 
                    var(--wp--preset--color--accent-a) 0%, 
                    var(--wp--preset--color--accent-a) 33%, 
                    var(--wp--preset--color--base-light) 33%, 
                    var(--wp--preset--color--base-light) 66%, 
                    var(--wp--preset--color--accent-b) 66%, 
                    var(--wp--preset--color--accent-b) 100%);
        }

        @media screen and (min-width: 48rem) {
            margin-block-end: 4rem;
            
        }
        @media screen and (min-width: 93.75em) {
            &::after {
                background-image: 
                    linear-gradient(to right, 
                        var(--wp--preset--color--base-light) 0%,
                        transparent 25%,
                        transparent 75%,
                        var(--wp--preset--color--base-light)), 
                    linear-gradient(to bottom, 
                        var(--wp--preset--color--accent-a) 0%, 
                        var(--wp--preset--color--accent-a) 33%, 
                        var(--wp--preset--color--base-light) 33%, 
                        var(--wp--preset--color--base-light) 66%, 
                        var(--wp--preset--color--accent-b) 66%, 
                        var(--wp--preset--color--accent-b) 100%);
            }
        }
       
    }

}

.disclaimer {
    grid-column: main;
    color: var(--wp--preset--color--white);
    text-wrap: pretty;
    font-size: 0.95rem;
    line-height: 1.4;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateX(2.5em);
    }
    to {
        opacity: 1;
    }
    
}