@import url(colors.css);
@import url(typography.css);

:root {
    --bs-border-radius: 0.75rem;
    --bs-btn-color: var(--neutral-neutral-0);
    --bs-body-font-size: 14px;
    font-size: var(--bs-body-font-size);
}

#logo {
    width: 300px;
}

#logo-footer {
    filter: saturate(0) brightness(1000%);
}

.w-fit {
    width: fit-content !important;
}

.object-fit-cover {
    object-fit: cover;
}

.direction-rtl {
    direction: rtl;
}

.section.section-image::before {
    background: rgba(var(--bs-primary-rgb), 1);
    mix-blend-mode: multiply;
}

main {
    padding-bottom: 2rem;
    background: rgba(255, 255, 255, 1);
}

.select-wrapper select {
    display: flex;
    padding: 0.75rem 0.75rem;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.25rem;
    border: 1px solid var(--neutral-neutral-40, #c5cdd4);
    background: var(--neutral-neutral-0, #fff);
    height: 3.5rem;
    color: var(--neutral-neutral-60, #4f5d6c);
    font-weight: 400;
}

.form-group input {
    padding: 0.75rem 0.75rem;
}

/* BUTTONS */
.btn {
    text-align: center;
    font-family: var(--font-text);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    padding: 0.75rem 1.25rem 0.75rem 1.5rem;
    border-radius: 0.25rem;
    text-wrap: balance;

    /* truncate3 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    &:has(.icon) {
        display: flex;
        align-items: center;
        --bs-btn-hover-bg: white;
    }
}

.btn-primary {
    color: var(--bs-white);
    background-color: var(--primary-primary-100);
    border-color: var(--primary-primary-100);
}

.btn-outline-primary {
    color: var(--primary-primary-100);
    background-color: rgba(255, 255, 255, 1);
    background-image: none;
    box-shadow: inset 0 0 0 2px var(--primary-primary-100);
}

.btn-outline-light {
    border-radius: 0.5rem;
    border: 1px solid var(--neutral-neutral-40, #c5cdd4);
    background: var(--neutral-neutral-0);
    color: var(--neutral-neutral-100);
    font-size: 1rem;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    box-shadow: none;
}

.btn-icon .icon {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
}

/* BUTTON MARKET */
.btn-market {
    --card-height: 15rem;
    --clip-border-width: 8px;
    --icon-size: 48px;
    --bg-color: var(--bg-color, #ccc);
    background-color: var(--bg-color);
    img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
    }
    .icon {
        width: var(--icon-size);
        height: var(--icon-size);
    }
    & > figure:first-child {
        height: var(--card-height);
        &::after {
            content: "";
            display: block;
            position: absolute;
            background-color: var(--bg-color);
            top: calc(100% - var(--clip-border-width));
            right: -100px;
            left: -100px;
            bottom: -100px;
            border-top: var(--clip-border-width) solid white;
            transform: rotate(5deg);
            transform-origin: bottom right;
            @media (min-width: 768px) {
                top: -100px;
                right: -100px;
                bottom: calc(-1 * var(--clip-border-width));
                left: calc(100% - var(--clip-border-width));
                border-left: var(--clip-border-width) solid white;
                transform: rotate(-15deg);
                transform-origin: bottom left;
            }
        }
    }
}

.pimcore_area_button-market + .pimcore_area_button-market {
    margin-top: 1.5rem;
}

/* HERO */
.it-hero-wrapper {
    --hero-text-color: var(--neutral-neutral-100);
    background: rgba(
        var(--hero-bg-color, var(--bs-secondary-rgb)),
        var(--bs-bg-opacity, 1)
    );

    &.it-overlay .img-responsive-wrapper:after {
        background: var(--primary-primary-20);
    }

    .go-back,
    span.publish-date {
        color: var(--hero-text-color);
        font-size: 1rem;

        .icon-primary {
            fill: var(--hero-text-color) !important;
        }
    }

    .it-hero-text-wrapper {
        max-width: 75vw;

        h1 {
            color: var(--hero-text-color);
        }

        p {
            color: var(--hero-text-color);
            font-family: var(--font-text);
            font-size: 1.25rem;
            font-weight: 400;
        }
    }

    &.it-dark {
        --hero-text-color: var(--bs-white);
        --hero-bg-color: var(--bs-primary-rgb);

        &.it-overlay .img-responsive-wrapper:after {
            background: rgba(18, 79, 141, 0.8);
        }
    }

    &:is(.mega, .home, .scroll) {
        justify-content: center;

        .it-hero-text-wrapper {
            text-align: center;
            max-width: 100%;
        }

        h1 {
            font-size: clamp(2.5rem, 0.1064rem + 7.6596vw, 7rem);
            letter-spacing: 0px;
            font-weight: 400;
            line-height: 120%;
            text-transform: uppercase;
        }
    }

    &:is(.home, .scroll) {
        img.logo-home {
            max-width: 50%;
            margin: 5rem 0;
        }
    }

    &.hero-image.home {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: -1;
        min-height: 100vh;

        &:after {
            /*content: "";*/
            background: white;
            width: 100%;
            height: 2rem;
            position: absolute;
            border-radius: 1rem 1rem 0 0;
            bottom: 0;
        }
    }
}

.hero-columns {
    margin-top: 100dvh;
    margin-bottom: 30dvh;
}

@media (min-width: 992px) {
    .it-hero-wrapper {
        min-height: 14.5rem;

        &.hero-image {
            min-height: 25rem;
        }

        &.hero-image.home {
            min-height: 100vh;
        }

        &.hero-image.mega {
            min-height: 25rem;
        }

        &.operatore {
            min-height: 25rem;

            &.operatore-ortofrutta {
                background: #b9dfb9;
            }

            &.operatore-ittico {
                background: #a8e4eb;
            }

            &.operatore-carni {
                background: #fde6a7;
            }

            &.operatore-fiori {
                background: #f7bab4;
            }

            &.operatore-logistica {
                background: #dceeff;
            }

            &.operatore-servizi {
                background: #124f8d;
                --hero-text-color: white;
            }

            .img-responsive-wrapper .img-responsive .img-wrapper img {
                object-position: bottom right;
                object-fit: contain;
            }
        }
    }
}

.scroll-downs {
    .mousey {
        width: 6px;
        padding: 8px 11px;
        height: 32px;
        border: 2px solid var(--bs-white);
        border-radius: 25px;
        opacity: 0.75;
        box-sizing: content-box;
    }

    .scroller {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--bs-white);
        animation-name: scroll;
        animation-duration: 2.2s;
        animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
        animation-iteration-count: infinite;
    }
}

@keyframes scroll {
    0% {
        opacity: 0;
    }
    10% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}

/* QUOTE */
section.sogemi-quote {
    --ribbon-height: min(100px, 10vh);
    min-height: 50vh;
    background-image: url(/images/chisiamo-quote.png);
    background-position: center;
    background-size: cover;
    color: var(--neutral-neutral-0);
    padding-bottom: var(--ribbon-height);

    .ribbon {
        width: calc(var(--ribbon-height) * 0.625);
        height: var(--ribbon-height);
    }

    figure {
        blockquote {
            border: none;
            font-size: 1.5em;
            line-height: normal;

            svg {
                width: 2em;
                height: 2em;
                display: inline-block;
                margin-bottom: 1rem;

                &:first-child {
                    vertical-align: text-bottom;
                }
                &:last-child {
                    vertical-align: text-top;
                }
            }
        }

        figcaption {
            font-size: 1em;
            line-height: normal;
        }

        @media (max-width: 600px) {
            blockquote {
                font-size: 1em;
            }
        }
    }
}

.sogemi-quote {
    quote,
    .content * {
        font-size: 2rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.25;
    }

    .author-name {
        font-family: Roboto;
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 140%;
    }

    .author-role {
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
    }
}

/* CARDS */
.arrow-ne {
    color: #0b3a67;
    transition: transform 0.15s ease;
}

.card-soft {
    background: #eef4f8;

    &:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
        transition: 0.15s ease;

        .arrow-ne {
            transform: translate(2px, -2px);
        }
    }

    &:focus {
        outline: 2px solid rgba(0, 91, 150, 0.35);
        outline-offset: 2px;
    }

    .card-title {
        color: var(--neutral-neutral-100);
        font-size: 2rem;
        font-style: normal;
        font-weight: 600;
        line-height: 140%;
    }
}

article.it-card {
    --bs-it-card-cap-padding-y: 2.5rem;
    --bs-it-card-cap-padding-x: 2.5rem;
    --bs-it-card-title-spacer-y: 1.25rem;
    --bs-it-card-spacer-x: 2.5rem;
    --bs-it-card-spacer-y: 1.5rem;
}

.it-card-image-wrapper figure:has(.pimcore_editable_image) {
    overflow: hidden;
}

.it-card-date {
    color: var(--neutral-neutral-60, #4f5d6c);
    font-size: 1rem;
    font-weight: 400;
    line-height: 140%;
}

.it-card-title {
    text-transform: unset;
    color: var(--neutral-neutral-100);
    font-family: var(--font-text);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.it-card-body {
    gap: 1.5rem;
}

.it-card-taxonomy {
    display: flex;
    height: 2.25rem;
    padding: 0.5rem 0.75rem;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.25rem;
    width: fit-content;
    background: var(--market-color, #dedede);
    color: var(--neutral-neutral-100);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

[data-item="articolo"] .it-card-taxonomy {
    color: var(--bs-white);
    background: var(--primary-primary-100);
}

.item-status {
    color: var(--color, #ccc);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
}
.item-status:before {
    content: "";
    width: 8px;
    height: 8px;
    display: inline-block;
    background: var(--color, #ccc);
    border-radius: 50%;
    margin-right: 8px;
}
.item-status--open {
    --color: #03853d;
}

.content-media .media-col :is(figure, img) {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.pimcore_area_card-image-content {
    .card:after {
        margin: 0;
    }

    p {
        color: var(--neutral-neutral-60, #4f5d6c);
    }

    .card-body {
        background: var(--neutral-neutral-20);
        width: calc(100% + 1rem);
        height: 100%;
        padding: 2rem 5rem;
        left: -1rem;
        position: relative;
    }

    &:nth-child(even) .card-body {
        background: var(--primary-primary-20, #dceeff);
    }

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

@media (max-width: 480px) {
    .pimcore_area_card-image-content {
        figure {
            height: 10rem;
        }
        .card-body {
            width: 100%;
            height: calc(100% + 1rem);
            padding: 1rem;
            left: 0;
            top: -1rem;
        }
    }
}

.card-simple .card {
    .card-body {
        border-radius: 0.5rem;
        border: 1px solid var(--neutral-neutral-40, #c5cdd4);
        display: flex;
        padding: 1.25rem 1.25rem 2.5rem 1.25rem;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
        flex: 1 0 0;
    }

    .card-media {
        text-align: center;

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

    .card-title {
        color: var(--neutral-neutral-100);
        text-align: center;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 600;
        line-height: 140%;
    }

    .card-text {
        color: var(--neutral-neutral-60, #4f5d6c);
        font-size: 1rem;
        font-style: normal;
        line-height: 140%;
        text-align: center;
        font-family: "Roboto";
    }
}

.align-items-stretch .pimcore_area_card-simple,
.align-items-stretch .pimcore_area_card-simple .card-wrapper {
    height: 100%;
}

.pimcore_area_card-icon-text {
    height: 100%;

    .container {
        padding: 2rem;
        display: flex;
        gap: 4rem;
        flex-direction: column;
        justify-content: space-between;

        .text,
        .text2 {
            color: var(--neutral-neutral-100);
            font-size: 2rem;
            font-weight: 600;
            line-height: 120%;
        }
        .text2 {
            font-size: 1.25rem;
            font-weight: 400;
            line-height: 140%;
        }
    }
}

/* sidebar */
nav.sidebar {
    .link-list-wrapper ul li {
        .icon {
            width: 1.5em;

            path {
                fill: var(--neutral-neutral-100);
            }
        }
        a span {
            color: var(--neutral-neutral-100);
            font-size: 1.25rem;
            font-weight: 600;
        }
    }

    .link-list-wrapper ul li:hover {
        .icon {
            width: 1.5em;

            path {
                fill: var(--primary-primary-100);
            }
        }
        a span {
            color: var(--primary-primary-100);
        }
    }
}

/* list simple */

.list-simple {
    .it-list-wrapper .it-list .list-item .it-right-zone .text {
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
    }

    &.no-border .list-item {
        border: 0;
        padding: 0.5rem 0 !important;
    }
}

/* Operatori */

[data-mercato="ortofrutta"] {
    --market-color: var(--foundation-green-ortofrutticolo-200, #71bf72);
}
[data-mercato="ittico"] {
    --market-color: var(--foundation-blue-ittico-b-200, #4ec8d6);
}
[data-mercato="carni"] {
    --market-color: var(--foundation-yellow-carni-y-200, #fccc4d);
}
[data-mercato="fiori"] {
    --market-color: var(--foundation-red-fiori-r-200, #ef7368);
}

.company-name {
    color: var(--neutral-neutral-100);
    font-family: var(--font-text);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.tag-mercato {
    display: flex;
    height: 2.25rem;
    padding: 0.5rem 0.75rem;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.25rem;
    background: var(--market-color, #ccc);
    width: fit-content;
    color: var(--neutral-neutral-100);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.property-label {
    color: var(--neutral-neutral-60, #4f5d6c);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.property-value {
    color: var(--neutral-neutral-100);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 1.2rem */
}

.contact-list {
    li {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .avatar {
        background-color: var(--market-color, #ccc);
    }

    .text {
        color: var(--neutral-neutral-100);
        font-size: 1.25rem;
        font-weight: 400;
    }

    .value {
        font-size: 1.25rem;
        font-weight: 700;
    }
}

/* section */
.section-card .container {
    display: flex;
    padding: 1.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2.5rem;
    flex: 1 0 0;
    border-radius: 0.5rem;
    background: var(--neutral-neutral-20);

    & > .justify-content-md-center,
    div:has(.btn) {
        justify-content: start !important;
    }
    .row.justify-content-md-center * {
        text-align: left;
    }

    .col-8,
    .col-8.text-center {
        width: 100%;
    }
}

/* TABLE */
.table {
    --bs-table-striped-bg: var(--primary-primary-0, #f5f8fc);
    --bs-table-striped-color: var(--neutral-neutral-80, #223243);

    thead {
        --bs-table-bg: var(--primary-primary-20, #dceeff);
        text-transform: uppercase;
    }
}

table:has(.ql-table-block) {
    /*text-transform: uppercase;*/
    font-size: 1.125rem;
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);

    --bs-table-striped-bg: var(--primary-primary-0, #f5f8fc);
    --bs-table-striped-color: var(--neutral-neutral-80, #223243);
    width: 100%;
    margin-bottom: 1rem;
    color: var(--bs-table-color);
    vertical-align: top;
    caption-side: bottom;
    border-collapse: collapse;
    border: 0 !important;
    font-weight: 400;

    tbody tr:nth-chid(1) {
        --bs-table-accent-bg: var(--primary-primary-20, #dceeff);
    }
}

table.ql-table-better {
    &.table.table-striped tbody > tr:nth-child(1) td {
        --bs-table-accent-bg: var(--primary-primary-20, #dceeff);
        text-transform: uppercase;
        font-weight: 600;
        vertical-align: middle;
    }

    td {
        span {
            background: none !important;
            text-align: center;
            text-transform: unset;
        }

        img {
            max-width: 10rem;
            display: block;
            height: auto;
            width: 10rem;
        }

        p,
        p.ql-table-block {
            text-align: center;
            margin-bottom: 0;
        }
    }
}

#pimcore_editable_main_10_list_documents {
    display: flex;
}

.list-documents .subtitle {
    color: var(--primary-primary-100, #124f8d);
    font-size: 1.5rem;
    font-style: normal;
    line-height: 140%;
}

/* SLIDER */

.pimcore_area_slider-images {
    background: var(--market-color);
    margin-bottom: 3rem;

    .card-title {
        color: var(--neutral-neutral-100, #00182e);
        text-align: center;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 600;
        line-height: 140%;
        text-transform: uppercase;
    }

    .it-carousel-wrapper .splide__pagination button {
        background: #4e6f91;

        &.is-active {
            background: var(--neutral-neutral-100, #00182e);
        }
    }
}

/* transizione morbida quando cambia la slide attiva */
.splide__slide {
    transition: opacity 0.3s ease;
}

/* solo la prossima slide (quella “in preview”) è al 50% */
.splide__slide.is-next {
    opacity: 0.5;
}

/* la slide attiva sempre piena */
.splide__slide.is-active {
    opacity: 1;
}

/* opzionale: evita che la preview "catturi" click/tap involontari */
.splide__slide.is-next {
    pointer-events: none;
}

/* contenitore base delle frecce */
.splide__arrow {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 1);
    border: 0;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, background 0.15s ease, opacity 0.2s;
}

/* icona SVG interna */
.splide__arrow svg {
    width: 2rem;
    height: 2rem;
    fill: var(--primary-primary-100, #124f8d);
}

/* hover / focus */
.splide__arrow:hover {
    background: rgba(255, 255, 255, 0.85);
}
.splide__arrow:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 1);
    outline-offset: 2px;
}

/* disabilitate ai bordi (se non sei in loop) */
.splide__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* posizionamento */
.splide__arrow--prev {
    left: unset;
    right: 6rem;
}
.splide__arrow--next {
    right: 1.5rem;
}

/* opzionale: posizionale verticalmente al centro del track */
.splide__track {
    position: relative;
}
.splide__arrow {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
}

.splide__arrows.splide__arrows--ltr {
    margin-bottom: 1rem;
}

/* STRIP */
.pimcore_area_cta-strip {
    margin-bottom: 4rem;

    section {
        background: var(--market-color, rgb(var(--bs-primary-rgb)));

        .text,
        a {
            color: var(--market-color-cta, white);

            svg > path {
                fill: var(--market-color-cta, white);
            }
        }
    }
}

/* CARD MARKET */

.card-mkt {
    .card {
        background: var(--market-color);
    }

    .card-img figure {
        height: 14.875rem;
        align-self: stretch;
        background: var(--market-color);
    }

    .card-title {
        font-size: 2rem;
        font-style: normal;
        font-weight: 600;
        line-height: 120%;
        color: var(--neutral-neutral-100, #00182e);
    }

    .shoulder--top {
        position: relative;
        --bg-color: var(--market-color);

        &:before {
            content: "";
            height: 6rem;
            top: -5rem;
            left: 0;
            width: 100%;
            display: block;
            position: absolute;
            background-image: linear-gradient(
                188deg,
                transparent 0,
                transparent calc(40% - 1px),
                white 40%,
                white,
                white 45%,
                var(--bg-color) calc(45% + 1px),
                var(--bg-color)
            );
        }
    }
}

/* GRID MARKET */
.grid-numbers {
    .row-cols-lg-1 .col:nth-child(1n + 1),
    .row-cols-lg-2 .col:nth-child(2n + 2),
    .row-cols-lg-3 .col:nth-child(3n + 3) {
        border-width: 0 !important;
    }

    .row-cols-lg-1 .col:nth-child(n + 2),
    .row-cols-lg-2 .col:nth-child(n + 3),
    .row-cols-lg-3 .col:nth-child(n + 4) {
        border-top: var(--bs-border-width) var(--bs-border-style)
            var(--bs-border-color) !important;
    }

    .number__value,
    .number__suffix {
        color: var(--neutral-neutral-100, #00182e);
        font-family: "Bebas Neue";
        font-size: 3rem;
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
    }

    .title {
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 600;
        line-height: 140%;
    }

    .text {
        color: var(--neutral-neutral-100, #00182e);
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
    }
}

@media (max-width: 768px) {
    .grid-numbers {
        .row-cols-md-2 .col:nth-child(1n) {
            border-right: var(--bs-border-width) var(--bs-border-style)
                var(--bs-border-color) !important;
        }

        .row-cols-md-2 .col:nth-child(2n + 2) {
            border-right-width: 0 !important;
        }

        .row-cols-md-2 .col:nth-child(n + 3) {
            border-top: var(--bs-border-width) var(--bs-border-style)
                var(--bs-border-color) !important;
        }
    }
}

@media (max-width: 425px) {
    .grid-numbers {
        .col.border-end {
            border-bottom: var(--bs-border-width) var(--bs-border-style)
                var(--bs-border-color) !important;
            border-right-width: 0 !important;
        }
    }
}

/* section content */
.pimcore_area_simple-content {
    .image picture img {
        border-radius: var(--bs-border-radius) !important;
        overflow: auto !important;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .simple-content__content:has(table) {
        max-width: 100%;
        overflow-x: auto;
    }

    @media (max-width: 800px) {
        .simple-content__content p {
            text-align: left;
        }
    }
}

/* ACCORDION */
.accordion {
    border-bottom: 0;

    .accordion-item {
        border-radius: 0.5rem;
        background: var(--neutral-neutral-20, #ecf1f8);
        display: flex;
        padding: 1.5rem;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 1.5rem;
        align-self: stretch;

        .accordion-header button {
            color: var(--neutral-neutral-100, #00182e);
            font-size: 1.5rem;
            font-style: normal;
            font-weight: 600;
            line-height: 140%;
            border: 0;

            /*
        &:after {
          content: url('data:image/svg+xml;base64,4oGo4oGoPHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTkuODk3NSAxNC42MDI2TDEyLjM5NzUgNy4xMDI2MUMxMi4yOTIgNi45OTcyOCAxMi4xNDkxIDYuOTM4MTEgMTIgNi45MzgxMUMxMS44NTA5IDYuOTM4MTEgMTEuNzA4IDYuOTk3MjggMTEuNjAyNSA3LjEwMjYxTDQuMTAyNTEgMTQuNjAyNkM0LjAwMzE1IDE0LjcwOTIgMy45NDkwNSAxNC44NTAzIDMuOTUxNjMgMTQuOTk2QzMuOTU0MiAxNS4xNDE3IDQuMDEzMjMgMTUuMjgwOCA0LjExNjI5IDE1LjM4MzhDNC4yMTkzNSAxNS40ODY5IDQuMzU4MzkgMTUuNTQ1OSA0LjUwNDEyIDE1LjU0ODVDNC42NDk4NCAxNS41NTExIDQuNzkwODggMTUuNDk3IDQuODk3NTEgMTUuMzk3NkwxMiA4LjI5NjA1TDE5LjEwMjUgMTUuMzk3NkMxOS4yMDkxIDE1LjQ5NyAxOS4zNTAyIDE1LjU1MTEgMTkuNDk1OSAxNS41NDg1QzE5LjY0MTYgMTUuNTQ1OSAxOS43ODA3IDE1LjQ4NjkgMTkuODgzNyAxNS4zODM4QzE5Ljk4NjggMTUuMjgwOCAyMC4wNDU4IDE1LjE0MTcgMjAuMDQ4NCAxNC45OTZDMjAuMDUxIDE0Ljg1MDMgMTkuOTk2OSAxNC43MDkyIDE5Ljg5NzUgMTQuNjAyNloiIGZpbGw9IiMyMjMyNDMiLz4KPC9zdmc+');
        }
        */
        }
    }
}

.cool-borders {
    position: relative;

    &:before {
        content: "";
        display: block;
        position: absolute;
        top: -1rem;
        height: 1rem;
        width: 100%;
        background: rgb(var(--bs-primary-rgb));
        background: linear-gradient(
            90deg,
            rgba(84, 178, 85, 1) 0%,
            rgba(84, 178, 85, 1) 25%,
            rgba(42, 189, 205, 1) 25%,
            rgba(42, 189, 205, 1) 50%,
            rgba(251, 193, 40, 1) 50%,
            rgba(251, 193, 40, 1) 75%,
            rgba(236, 86, 73, 1) 75%,
            rgba(236, 86, 73, 1) 100%
        );
    }
}

/* SHOWCASE */
.pimcore_area_showcase {
    a.btn {
        margin: 1.5rem auto 0 auto;
    }
    @media (min-width: 992px) {
        a.btn {
            margin: 0;
            margin-top: 1.5rem;
        }
        .pimcore_editable_image {
            max-width: 200px;
            max-height: 200px;
        }

        .showcase-container {
            --clip-width: 360px;
            --rounded-width: calc(1 * var(--bs-border-radius));
            position: relative;
            background-image: var(--sfondo);
            background-size: cover;
            background-position: center;
            margin: 100px 0;
            overflow: hidden;

            & > div {
                & > .clip {
                    align-self: end;
                    position: relative;
                    width: var(--clip-width);
                    height: 100px;
                    margin-bottom: 200px;
                    background-color: var(--bs-body-bg);
                    border-bottom-left-radius: var(
                        --bs-border-radius
                    ) !important;

                    &:before {
                        display: block;
                        position: absolute;
                        top: 0;
                        right: 100%;
                        width: var(--rounded-width);
                        height: var(--rounded-width);
                        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cdefs%3E%3Cmask%20id%3D%22mask1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%22400%22%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22white%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22400%22%20r%3D%22400%22%20fill%3D%22black%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22white%22%20mask%3D%22url(%23mask1)%22%2F%3E%3C%2Fsvg%3E");
                        content: "";
                    }

                    &:after {
                        background-color: var(--bs-body-bg);
                        display: block;
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 100%;
                        width: 100vw;
                        height: 100%;
                    }
                }

                & > .content {
                    --max-width: calc(100% - var(--clip-width));
                    align-self: start;
                    position: relative;
                    max-width: var(--max-width);
                    &:before {
                        background-color: var(--bs-body-bg);
                        display: block;
                        content: "";
                        position: absolute;
                        top: 0;
                        right: 100%;
                        width: 100vw;
                        height: 100%;
                    }

                    & > div,
                    & > .title,
                    & > .text {
                        position: relative;
                        width: fit-content;
                        line-height: 1em;
                        background-color: var(--bs-body-bg);
                        border-top-right-radius: var(
                            --bs-border-radius
                        ) !important;
                    }

                    & > div:before,
                    & > .title:before,
                    & > .text:before {
                        display: block;
                        position: absolute;
                        bottom: 0;
                        left: 100%;
                        width: var(--rounded-width);
                        height: var(--rounded-width);
                        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cdefs%3E%3Cmask%20id%3D%22mask1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%22400%22%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22white%22%2F%3E%3Ccircle%20cx%3D%22400%22%20cy%3D%220%22%20r%3D%22400%22%20fill%3D%22black%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22white%22%20mask%3D%22url(%23mask1)%22%2F%3E%3C%2Fsvg%3E");
                        content: "";
                    }

                    & > div {
                        min-width: calc(2 * var(--rounded-width));
                        max-width: 30%;
                    }

                    & > .title {
                        min-width: calc(30% + (2 * var(--rounded-width)));
                        max-width: 60%;
                    }

                    & > .text {
                        min-width: calc(60% + (2 * var(--rounded-width)));
                        max-width: 90%;
                    }
                }
            }
        }
    }
}

/* FOOTER */
footer#page-footer {
    background-color: #00182e;
    --border-radius: var(--bs-border-radius-2xl);
    margin-top: var(--border-radius) !important;
    line-height: 1.25;

    .list-group-item {
        --bs-list-group-color: white;
    }

    > div.position-relative {
        top: calc(-1 * var(--border-radius)) !important;
        margin-bottom: calc(-1 * var(--border-radius)) !important;
        border-radius: var(--border-radius) !important;
    }

    ul.it-footer-small-prints-list {
        font-size: 1rem;
    }
}

body.sogemi-page:has(.hero-image.home) footer#page-footer {
    margin-top: 0 !important;
}

/* HEADER */
header#page-header {
    border-bottom: 1px solid var(--neutral-neutral-40, #c5cdd4);
    background: var(--neutral-neutral-0, #fff);

    & + divx {
        margin-top: 10rem;
    }

    nav {
        height: 50px;
        > * {
            flex: 0 0 auto !important;
            width: auto !important;
        }
    }

    form#searchForm {
        background: var(--neutral-neutral-20);
        border: none;
        border-radius: var(--bs-border-radius);
        button,
        input {
            background: none !important;
            background-color: transparent !important;
            border: none !important;
        }
    }

    .accordion-item .arrow {
        rotate: 0deg;
        transition: rotate 0.3s ease;
    }

    .accordion-item:has(.collapse.show) .arrow {
        rotate: 180deg;
    }

    svg {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #navbar {
        height: 100px;
    }

    ul#mobile-menu .accordion-item {
        background: none;
    }
}

/* SIDEBAR MERCATO PUBBLICO */
.mercato-pubblico.sidebar-wrapper,
aside .sidebar-wrapper {
    .sidebar-linklist-wrapper {
        .link-list-wrapper {
            .link-list {
                li a {
                    display: flex;
                    flex-direction: row-reverse;
                    justify-content: left;
                    align-items: center;
                    gap: 1em;
                    font-size: 1em;
                    min-height: 64px;
                    &,
                    & span,
                    & svg {
                        font-weight: 400;
                        color: var(--neutral-neutral-100) !important;
                    }
                    &.active {
                        &,
                        & span,
                        & svg,
                        &:after {
                            font-weight: 600;
                            color: var(--bs-primary) !important;
                        }
                        &:after {
                            content: "";
                            display: block;
                            width: 6px;
                            height: 6px;
                            background-color: currentColor;
                            border-radius: 100%;
                            flex-shrink: 0;
                            flex-grow: 0;
                            position: static;
                        }
                    }
                }
            }
        }
    }
}

/* simple columns */
.multicol-section.content-center > .container > .row {
    justify-content: center;
}

/* GRID CARDS */
.grid-cards {
    .it-card-group {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 colonne */
        gap: 1rem;
        align-items: stretch; /* allunga le card per riga */
    }

    @media (max-width: 992px) {
        .it-card-group {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 576px) {
        .it-card-group {
            grid-template-columns: 1fr;
        }
    }

    .it-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .it-card .it-card-body {
        flex: 1 1 auto;
    }
    .it-card .it-card-footer {
        margin-top: auto;
        @media (max-width: 991px) {
            .btn {
                width: 100%;
                justify-content: center;
                align-items: center;
            }
        }
    }
}

/* SEARCH OPERATORI */

.search-results {
    color: var(--primary-primary-100, #124f8d);
    font-size: 1rem;

    &__count {
        font-weight: 400;
    }

    &__reset a {
        font-weight: 600;
        text-transform: uppercase;
    }
}

/* NAV TABS */
.nav-tabs {
    .nav-link {
        color: var(--neutral-neutral-80, #223243);
        font-size: 1.25rem;
        font-weight: 400;
        line-height: 140%;
        text-transform: uppercase;
        border-bottom-width: 0;
    }

    .nav-link.active,
    .nav-item.show .nav-link {
        border-bottom-width: 0;
        border-top: 2px solid var(--primary-primary-100, #124f8d);
        color: var(--primary-primary-100, #124f8d);
        background: var(--neutral-neutral-20, #ecf1f8);
    }
}

#sezioni .nav-link.active {
    background: #fff;
}

/* FLOATING MENU */
#floating-menu {
    --z-index: 100;
    --icon-size: 25px;
    #floating-menu-collapse {
        z-index: var(--z-index);
        @media (max-width: 991px) {
            a {
                width: 50%;
            }
        }
    }
    #floating-menu-button {
        transition: none;
        z-index: calc(var(--z-index) + 1);
        svg {
            width: var(--icon-size);
            height: var(--icon-size);
        }
        &:not([aria-expanded="true"]) {
            color: var(--neutral-neutral-0);
            border: 1px solid currentColor;
            background-color: var(--primary-primary-100);
            border-radius: 100%;
            .open {
                display: none;
            }
        }
        &[aria-expanded="true"] {
            background-color: transparent;
            .closed {
                display: none;
            }
        }
    }
}

/* ELEMENTI STICKY */
.sticky {
    position: sticky;
    top: 0px;
}

header ~ * .sticky {
    top: 150px;
}

/* ELEMENTI STRETCH */
.row.align-items-stretch {
    > [class^="col"],
    > [class*=" col"] {
        > a,
        > button {
            height: 100%;
        }
    }
}

.wh-icon {
    background: #25d366;
    border-radius: 50%;
    padding: 12px;
    width: 48px;
    height: 48px;
}

/* MARKET MENU */

#market-menu {
    max-width: 1000px;
    > ul {
        border-radius: var(--bs-border-radius-2xl) !important;
        @media (min-width: 768px) {
            & {
                border-radius: 150px !important;
            }
        }
        a.active {
            background-color: var(--market-color);
        }
    }
}

@media (max-width: 800px) {
    .image-full .list-item {
        flex-direction: column !important;
    }
}

/* CARD STRETCH */
.align-items-stretch .pimcore_area_card-article {
    height: 100%;
}