/*
Theme Name: Integrates
Theme URI: 
Author: Eurac Research Renene
Author URI: 
Description: 
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: integrates
Tags: 
*/


:root {
    --wp--preset--font-size--x-large: 56px;
    --wp--preset--font-size--large: 48px;
    --wp--preset--font-size--medium: 40px;

    --bold-border-w: 38px;
    --color-rect-size: 136px;
    --frame-border-radius: 200px;
}


html {
    scroll-behavior: smooth;
}

nav {
    font-family: Aptos;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    color: var(--wp--preset--color--viola-1);
}

nav .wp-block-navigation__container li:first-child {
    color: var(--wp--preset--color--orange-2);
}

.home-heading {
  position: relative; /* establishes stacking context */
  z-index: 1000;
}

.home-heading::before {
    content: "";
    display: flex;
    background-image: url("assets/images/Quadri.png");

    width: 481px;
    height: 941px;

    position: absolute;
    top:0;
    right: 0;
    z-index: -1;
}

.home-heading-media {
    top: -150px;
    top: -89px;
    z-index: 1000;
}

.home-heading-media figure:first-child {
    padding-left: 12px;
    /* olga: upd, prende tutte e due immagini */
}

.home-section-1 {
    position: relative;
    border-left: var(--bold-border-w) solid var(--wp--preset--color--viola-1);
}

.home-section-1::before {
    content: "";
    display: inline-block;
    width: 286px;
    height: 320px;
    background-image: url("assets/images/quadri-section-1.svg");

    position: absolute;

    top: -287px;
    left: -113px;
}

.home-section-1::after {
    content: "";
    display: inline-block;
    width: var(--color-rect-size);
    height: var(--color-rect-size);
    background-color: var(--wp--preset--color--orange-2);
    border-top-right-radius: calc(var(--color-rect-size)/3);
    border-bottom-left-radius: calc(var(--color-rect-size)/3);

    position: absolute;
    bottom: calc(0px - var(--color-rect-size));
}

.home-section-1-1 {
    padding-left: calc(var(--color-rect-size) + var(--bold-border-w));
    /* padding-left: 175px; */
    margin-top: -60px;
}

.home-section-1-1 h3 {
    padding-left: 3rem;

}


.tools-logo {
    max-width: min(70vw, 566px);
    max-width: 350px;
}


.bold-orange {
    /* padding-left: 158px; */
}

.bold-orange strong {
    color: var(--wp--preset--color--orange-2);
}

.text-nowrap {
    white-space: nowrap;
}

.home-section-3::before {
    content: "";
    display: inline-block;
    width: 231px;
    height: 375px;
    background-image: url("assets/images/quadri-section-3.svg");

    position: relative;
    top: 75px;
}


.graph-wrap {
    display: flex;
    flex-direction: column;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.graph-wrap iframe {
    border: none;
    border-top-right-radius: var(--frame-border-radius);
    max-width: none;

    position: relative;
    max-width: calc(100% - var(--color-rect-size)*2);
}

.graph-wrap::before {
    content: "";
    display: flex;
    width: var(--color-rect-size);
    height: var(--color-rect-size);
    background-color: var(--wp--preset--color--orange-2);
    border-top-right-radius: calc(var(--color-rect-size)/4);
    border-bottom-left-radius: calc(var(--color-rect-size)/4);

    position: relative;
}

.graph-wrap::after {
    content: "";
    display: flex;
    width: var(--color-rect-size);
    height: var(--color-rect-size);
    background-color: var(--wp--preset--color--rosa);
    border-top-right-radius: calc(var(--color-rect-size)/4);
    border-bottom-left-radius: calc(var(--color-rect-size)/4);

    position: relative;
    right: calc(var(--color-rect-size) - 100%);
}





.demos-grid {
    max-width: calc(100% - 143px - 143px);
}


.demos-section::before {
    content: "";
    display: flex;
    background-image: url("assets/images/quadri-section-4.png");
    background-repeat: no-repeat;

    width: 443px;
    height: 950px;

    position: absolute;
    scale: 0.8;
    top: -208px;
    right: -45px;
}

.demo-card {
    max-width: 620px;
}

.demo-card img {
    max-height: 300px;
}

.demo-card.tl-br-radius {
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.demo-card.tl-br-radius img {
    border-top-left-radius: 40px;
}


.demo-card.tr-bl-radius {
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
}

.demo-card.tr-bl-radius img {
    border-top-right-radius: 40px;
}





.home-section-5-1 {
    border-left: var(--bold-border-w) solid var(--wp--preset--color--viola-1);
}

.home-section-5-1::before {
    content: "";
    display: inline-block;
    width: 320px;
    height: 405px;
    background-image: url("assets/images/quadri-section-5.svg");
    background-repeat: no-repeat;

    position: absolute;
    top: -405px;
    left: -181px;
}



.wp-social-link-linkedin {
    background-color: var(--wp--preset--color--orange-2);
}

.wp-social-link-chain {
    background-image: url('assets/images/zenodo-icon.svg');
    background-size: contain;
}

.wp-social-link-chain svg {
    opacity: 0;
}


/* news filter  */

    .news-filters {
      display: flex;
      justify-content: center;
    }

    .news-filters label {
      padding: 8px 16px;
      margin: 4px 8px;
      color: var(--wp--preset--color--viola-3);
      border: 1.5px solid var(--wp--preset--color--viola-3);
      text-transform: uppercase;
      border-radius: 12px;
      cursor: pointer;

        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
        supported by Chrome, Edge, Opera and Firefox */
    }

    .news-filters label:has(input:checked) {
        color: white;
    }

    .news-filters label.rosa-filter:has(input:checked) {
        background-color: #C59DC8;
        border-color: #C59DC8;
    }

    .news-filters label.viola-filter:has(input:checked) {
        background-color: var(--wp--preset--color--viola);
        border-color: var(--wp--preset--color--viola);
    }

    .news-filters input {
      display: none;
    }

    .news-filters span {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .news-filters span::before {
        content: "";
        width: 24px;
        height: 24px;

        position: relative;
        display: inline-block;
    }

    .rosa-filter span::before {
        background-image: url('assets/images/news-btn-icon.svg');
    }

    .viola-filter span::before {
        background-image: url('assets/images/event-btn-icon.svg');
    }

    .rosa-filter:has(input:checked) span::before {
        background-image: url('assets/images/news-btn-icon-white.svg');
    }

    .viola-filter:has(input:checked) span::before {
        background-image: url('assets/images/event-btn-icon-white.svg');
    }

/* end news filter  */


    .post-card img {
        border-radius: 20px;
        border-top-right-radius: 0;
    }

    .post-card::before {
        content: "";

        display: flex;
        position: absolute;
        width: 109px;
        height: 48px;
        z-index: 1000;
        right: 0;
     }

    .category-event .post-card::before {
        background-image: url('assets/images/event-icon.svg');
    }

    .category-news .post-card::before {
        background-image: url('assets/images/news-icon.svg');
    }

/* gallery */
    .scroll-gallery {
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        columns: 1;
        scroll-behavior: smooth;

        flex-wrap: nowrap;
        gap: 2rem !important;
    }

    .scroll-gallery {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
    }
    .scroll-gallery::-webkit-scrollbar { 
        display: none;  /* Older Safari and Chromium */
    }

    .scroll-gallery figure {
        min-width: calc(25% - 1.5rem);
    }

    .scroll-gallery::column {
        scroll-snap-align: center;
    }

    .scroll-gallery::scroll-button(*) {
        border: 0;
        opacity: 0.7;
        cursor: pointer;

        width: 36px;
        height: 36px;
        background: none;
        background-image: url('assets/images/next-icon.svg');
    }

    .scroll-gallery::scroll-button(*):hover,
    .scroll-gallery::scroll-button(*):focus {
        opacity: 1;
    }

    .scroll-gallery::scroll-button(*):active {
        translate: 1px 1px;
    }

    .scroll-gallery::scroll-button(*):disabled {
        opacity: 0.2;
        cursor: unset;
    }

    .scroll-gallery::scroll-button(left) {
        content: "";
        transform: rotate(180deg);
    }

    .scroll-gallery::scroll-button(right) {
        content: "";
    }

    .scroll-gallery {
        anchor-name: --my-carousel;
    }

    .scroll-gallery::scroll-button(*) {
        position: absolute;
        position-anchor: --my-carousel;
    }

    .scroll-gallery::scroll-button(left) {
        right: calc(anchor(center) - 60px + 36px*2);
        bottom: calc(anchor(bottom) - 50px);
    }

    .scroll-gallery::scroll-button(right) {
        left: calc(anchor(center) + 80px - 36px*2);
        bottom: calc(anchor(bottom) - 50px);
    }
/* end gallery */


/* RESPONSIVE */

/* X-Small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px */

@media screen and (max-width: 992px) {
    
    .home-heading::before {
        opacity: 0.4; 
    }

}


@media screen and (max-width: 768px) {
    :root {
        --bold-border-w: 16px;
        --color-rect-size: 70px;
        --frame-border-radius: 80px;


        --wp--preset--font-size--x-large: 48px;
        --wp--preset--font-size--large: 40px;
        --wp--preset--font-size--medium: 32px;
    }

    .home-heading-media figure:first-child {
        padding-left: 0;
    }

    .home-section-1::after {
        content: none;
    }

    .home-section-1-1 {
        padding: 0 24px;
    }

    .home-section-1-1::before {
        content: "";
        display: flex;
        background-image: url("assets/images/quadri-section-1-1-b.svg");
        background-repeat: no-repeat;

        width: 110px;
        height: 126px;

        position: relative;
        left: -24px;
        top: 64px;
    }

    .home-section-1-1 h3 {
        text-align: center;
    }

    .home-section-3::before {
        margin-bottom: 24px;
        top: 0;
    }

    .graph-wrap {
        --color-rect-size: 45px;
    }

    .graph-wrap iframe {
        height: 600px;
    }

    .demos-section::before {
        background-image: url('assets/images/quadri-section-4-mob.svg');
        width: 182px;
        height: 422px;
        top: -260px;

        right: -19px; /* olga: temp, finchè non ho immagine bella        */
    }

    .demo-card.tl-br-radius, 
    .demo-card.tr-bl-radius {
        border-radius: 0;
        border-top-right-radius: 40px;
        border-bottom-right-radius: 40px;
    }

    .demo-card.tl-br-radius img, 
    .demo-card.tr-bl-radius img {
        border-radius: 0;
        border-top-right-radius: 40px;
    }

    .home-section-5-1::before {
        background-image: url('assets/images/quadri-section-5-mob.svg');
    }

    /* .scroll-gallery {
        display: grid !important;
        olga: se voglio dimostrarli in 2 righe
    } */

    .scroll-gallery figure {
        min-width: calc(50% - 1rem);
        /* min-width: 200px; */
        /* grid-row-start: 1; */
    }

    /* .scroll-gallery figure:nth-child(even) {
        min-width: calc(50% - 1rem);
        grid-row-start: 2;
        margin-top: 2rem;
    } */

}


/* query loop is-carousel */
    .is-carousel {
        overflow-x: scroll;
        scroll-snap-type: x proximity;
        columns: 1;
        scroll-behavior: smooth;

        display: flex !important;
        flex-wrap: nowrap;
        gap: 2rem !important;
    }


    .is-carousel {
        /* ul style */
        display: flex;
        flex-wrap: nowrap;
        width: calc(100% - 100px);
        margin-left: 50px;
    }

    .is-carousel {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
    }
    .is-carousel::-webkit-scrollbar { 
        display: none;  /* Older Safari and Chromium */
    }

    .is-carousel li {
        min-width: calc(35% - 1.5rem);
    }

    .is-carousel::column {
        scroll-snap-align: center;
    }

    .is-carousel::scroll-button(*) {
        border: 0;
        opacity: 0.7;
        cursor: pointer;

        width: 36px;
        height: 36px;
        background: none;
        background-image: url('assets/images/next-icon.svg');
    }

    .is-carousel::scroll-button(*):hover,
    .is-carousel::scroll-button(*):focus {
        opacity: 1;
    }

    .is-carousel::scroll-button(*):active {
        translate: 1px 1px;
    }

    .is-carousel::scroll-button(*):disabled {
        opacity: 0.2;
        cursor: unset;
    }

    .is-carousel::scroll-button(left) {
        content: "";
        transform: rotate(180deg);
    }

    .is-carousel::scroll-button(right) {
        content: "";
    }

    .is-carousel {
        anchor-name: --my-carousel;
    }

    .is-carousel::scroll-button(*) {
        position: absolute;
        position-anchor: --my-carousel;
    }

    .is-carousel::scroll-button(left) {
        top: anchor(center);
        left: calc(anchor(left) - 50px);
    }

    .is-carousel::scroll-button(right) {
        top: anchor(center);
        right: calc(anchor(right) - 50px);
    }

    @media screen and (width < 781px) {
        .is-carousel li {
            min-width: calc(100% - 0rem);
        }
    }
/* end qs is carousel */