@font-face {
    font-family: NeueHaasGroteskDisplayPro;
    font-style: normal;
    font-weight: 500;
    src: local('Neue Haas Grotesk Display Pro'),url('./font/NeueHaasDisplayRoman.woff') format('woff')
}

@font-face {
    font-family: PPSupplyMono-Ultralight;
    font-style: normal;
    font-weight: 500;
    src: local('PPSupplyMono'),url('./font/PPSupplyMono-Ultralight.woff') format('woff')
}

@font-face {
    font-family: ABCMonumentGrotesk;
    font-style: normal;
    font-weight: 500;
    src: local('ABCMonumentGrotesk'),url('./font/ABCMonumentGrotesk-Regular.woff') format('woff')
}

:root {
    --c: #00B4FF;
    --m: #FF00FF;
    --y: #FFED00;
    --b: #000000;
    --o: #ff4328;
}


html, body {
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    position: relative;
    z-index: 1;
    background: #ffffff;
    color: #000;
}

body * {
    font-family: 'NeueHaasGroteskDisplayPro', sans-serif;
    font-weight: 500;
    transition: .5s color;
}

#swup {
    transition: opacity 150ms ease-out;
    background: white;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 2;
}

html.is-animating #swup {
    opacity: 0;
}


p {
    letter-spacing: 0.3px;
}

::selection {
    color: var(--b);
    background: var(--o);
}


footer {
    position: fixed;
    bottom: 0;
    left: 0;
}

footer img {
    width: 100vw;
    margin-bottom: -5px;
}

footer:hover {
    opacity: 0.2;
    transition: 1s opacity ease;
}


.icon-sm {
    font-size: 13px;
    margin-left: 2px;
}



/*NAV ADMIN*/
nav.nav-admin *:not(i.fa) {
    font-size: 14px;
}

nav.nav-admin {
    background: #2d2d2d;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
    align-items: center;
    z-index: 199;
}

nav.nav-admin *:not(i.fa) {
    font-family: ABC-MonumentGrotesk,Helvetica,ui-sans-serif,system-ui;
    font-weight: 500;
}


nav.nav-admin img{
    filter: invert(1);
    width: 35px;
    padding: 10px;
    object-fit: contain;
}

.admin-left {
    display: flex;
}

.nav-version {
    color: white;
    padding: 17px 16px 17px 0px;
    margin: 0;
    font-size: 12px !important;
}

.dropbtn,
.nav-admin-button {
    background-color: #04AA6D;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    text-decoration: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}

.profile-mobile {
    display: none;
}







/*MAIN CONTENT*/

.nav-main {
    width: 100%;
    padding: 0;
    z-index: 100;
    position: relative;
}

.nav-main td {
    padding: 20px 25px;
    vertical-align: middle;
}

.nav-main button {
    font-size: 16px;
    border: none;
    background: none;
    cursor: pointer;
}

.nav-main button.paragraph.active {
    color: var(--o);
}

.pagination-mark {
    display: none;
    color: var(--o);
    font-weight: normal;
    line-height: 1;
}

#swup.show-pagination-marks .pagination-mark {
    display: inline-block;
    width: 0;
    overflow: visible;
    white-space: nowrap;
    position: relative;
}

.nav-main a {
    color: #000;
    text-decoration: none;
    text-align: left;
}

.nav-main a:first-of-type span{
    vertical-align: super;
    font-size: 10px;
}


.nav-main a:last-of-type,
.nav-main td:last-of-type {
    text-align: right;
}

.nav-main td:last-of-type {
    display: flex;
    justify-content: space-between;
}



.home-main {
    width: 100%;
}

.home-main td {
    border-bottom: 1px solid;
    padding: 4px 25px;
    height: 16px;
    vertical-align: top;
}

.home-main tr:first-of-type td {
    border-top: 1px solid;
}

.home-main a {
    text-decoration: none;
    color: #000;
}

/* STORIA */

.storia-layout {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
}

.storia-crocino-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.storia-crocino [class^="crocino-"] {
    cursor: pointer;
}

.storia-modal {
    position: absolute;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px 10px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.3;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    z-index: 10;
    color: #000;
}

.storia-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.storia-modal p {
    margin: 0;
}

/* C: quadrante alto-sx → si estende a sinistra, sopra il centro */
.storia-modal-c {
    background: var(--c);
    left: 25px;
    right: 50%;
    bottom: 50%;
}

/* M: quadrante alto-dx → si estende a destra, sopra il centro */
.storia-modal-m {
    background: var(--m);
    left: 50%;
    right: 25px;
    bottom: 50%;
}

/* Y: quadrante basso-sx → si estende a sinistra, sotto il centro */
.storia-modal-y {
    background: var(--y);
    left: 25px;
    right: 50%;
    top: 50%;
}

/* K: quadrante basso-dx → si estende a destra, sotto il centro */
.storia-modal-k {
    background: var(--b);
    color: white;
    left: 50%;
    right: 25px;
    top: 50%;
}


/* CONTATTI FORM */

.contatti-layout {
    position: relative;
}

.contatti-form-wrapper {
    position: absolute;
    left: calc(4 / 6 * 100%);
    width: calc(1 / 6 * 100%);
    background: var(--y);
    color: #000;
    z-index: 10;
    padding: 0px 5px 5px;
    box-sizing: border-box;
}

.contatti-form-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    margin-bottom: 43px;
}

.contatti-form-close {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    line-height: 1;
}

.form-field {
    border-bottom: 1px solid;
    height: 18px;
    padding: 4px 0;
}

.form-field-errors {
    background: gainsboro;
    color: #000;
}

.form-field-errors ul{
    margin: 0;
    list-style: none;
    padding-left: 0;
}

.form-field input,
.form-field textarea {
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    box-sizing: border-box;
    color: inherit;
    height: 16px;
}

.form-field textarea {
    resize: none;
    height: 140px;
    display: block;
}

.form-field-message {
    border-bottom: none;
    height: 100%;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    padding-top: 8px;
}

.form-footer small {
    font-size: 10px;
    line-height: 1.4;
    flex: 1;
}

.form-footer small a {
    color: inherit;
}

.form-footer button[type="submit"] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    white-space: nowrap;
    padding: 0;
    flex-shrink: 0;
}

.nl-in {
    border: none;
    font-size: 16px;
    padding: 0;
}

input[type="submit"]{
    border: none;
    cursor: pointer;
}


/* FORM ERRORS */
.form-errors {
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
}

.form-errors li {
    font-size: 10px;
    letter-spacing: 0.03em;
    color: var(--o);
}

/* SERVIZIO */

.servizio-title {
    font-size: 5vw;
    line-height: 1 !important;
    padding-top: 0 !important;
}

.servizio-section-header {
    padding-top: 40px;
    line-height: 0.9;
}

.servizio-row {
    cursor: pointer;
}

.nocursor {
    cursor: initial;
}

.servizio-nome {
    padding: 4px 25px;
    vertical-align: top;
}

.servizio-supertitle {
    font-size: 10vw!important;
}

.servizio-expand-cell {
    border-bottom: 1px solid;
    vertical-align: top;
    padding: 0;
}

.servizio-expand-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    box-sizing: border-box;
}

.servizio-row.is-active .servizio-expand-content {
    max-height: 600px;
}

.servizio-img-wrap {
    padding-left: 20px;
    padding-right: 40px;
}

.servizio-img-wrap img {
    width: 100%;
    display: block;
    object-fit: cover;
    padding-top: 24px;
    padding-bottom: 24px;
}

.servizio-sub-item {
    border-bottom: 1px solid;
    padding: 2px 0;
}

.servizio-sub-item:first-child {

}

.servizio-sub-item:last-child {

}

.servizio-desc {
    font-size: inherit;
    line-height: 1.4;
    padding-top: 20px;

}

.servizio-expand-cell {
    padding: 0px 0px 4px 0px !important;
}


/* GLOSSARIO ALT */

.glossario-sticky-wrap {
    position: sticky;
    top: 0;
    z-index: 50;
    pointer-events: none;
}

.glossario-letter-anchor td {
    padding: 0;
    height: 0;
    border: none;
    overflow: hidden;
}

.glossario-center-marker {
    display: none;
}


/* GLOSSARIO */

.glossario {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 22vh;
}

.glossario.no-mb {
    margin-bottom: 0;
}

.glossario-item-row td {
    border-bottom: 1px solid;
    padding: 4px 25px;
    vertical-align: top;
}

.servizio-layout .glossario-item-row td {
    border-bottom: 1px solid;
    padding: 4px 25px;
    height: 16px;
    vertical-align: top;
}

.glossario-desc-content {
    max-height: 0;
    overflow: hidden;
}

.glossario-item-row .glossario-desc-cell {
    transition: max-height 4s ease;
}

.glossario-item-row:hover .glossario-desc-content {
    max-height: 400px;

}

.glossario-item-row.color-c:hover .glossario-desc-cell { background: var(--c); }
.glossario-item-row.color-m:hover .glossario-desc-cell { background: var(--m); }
.glossario-item-row.color-y:hover .glossario-desc-cell { background: var(--y); }


.glossario-item-row.color-c:hover .glossario-nome-cell,
.glossario-item-row.color-c:hover .glossario-fill-cell {
    background-image: linear-gradient(var(--c), var(--c));
    background-repeat: no-repeat;
    background-size: 100% calc(1em + 12px);
    background-position: top left;
}

.glossario-item-row.color-m:hover .glossario-nome-cell,
.glossario-item-row.color-m:hover .glossario-fill-cell {
    background-image: linear-gradient(var(--m), var(--m));
    background-repeat: no-repeat;
    background-size: 100% calc(1em + 12px);
    background-position: top left;
}

.glossario-item-row.color-y:hover .glossario-nome-cell,
.glossario-item-row.color-y:hover .glossario-fill-cell {
    background-image: linear-gradient(var(--y), var(--y));
    background-repeat: no-repeat;
    background-size: 100% calc(1em + 12px);
    background-position: top left;
}

.servizio-layout .glossario-item-row.color-c:hover td { background: var(--c); }
.servizio-layout .glossario-item-row.color-m:hover td { background: var(--m); }
.servizio-layout .glossario-item-row.color-y:hover td { background: var(--y); }

.glossario-item-row.color-c:hover,
.glossario-item-row.color-m:hover,
.glossario-item-row.color-y:hover {
    color: #000;
}

.glossario-letter-row td {
    padding: 0;
    border-bottom: 1px solid;
}

.glossario-letter {
    display: block;
    font-size: 15vw;
    /* width: 0; */
    line-height: 0.75;
    padding: 0 15px;
    vertical-align: bottom;
    padding-top: 50px;
}

/* PROGETTI */
.progetti-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    justify-content: flex-end;
}

.progetti-intro td {
    height: auto;
}

.progetti-grid {
    display: flex;
    flex-direction: column;
}

.progetti-row {
    display: flex;
    height: 80px;
}

.progetti-cell {
    height: 100%;
    transition: filter 0.3s ease;
}

.progetto-slot {
    position: relative;
    cursor: pointer;
    flex: 1 1 0 !important;
    transition: flex-grow 0.3s ease;
}

.progetto-slot:hover {
    flex-grow: 2 !important;
}

.progetto-preview {
    position: absolute;
    inset: 0;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.progetto-slot:hover .progetto-preview {
    opacity: 1;
}

.progetto-preview-nome {
    font-size: 12px;
    text-transform: capitalize;
    text-align: center;
    padding: 4px 8px;
}

.progetti-cell.is-filtered-out {
    filter: grayscale(1) opacity(0.5);
}

a.progetto-slot {
    display: block;
    text-decoration: none;
    color: inherit;
}

.home-projects-grid {

}

/* FILTRI PROGETTI */
.progetti-filtri {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
}

.filtro-group {
    display: flex;
    flex-direction: column;
}

.filtro-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    text-transform: capitalize;
    cursor: pointer;
    color: inherit;
}

.filtro-trigger-clear {
    display: none;
}

.filtro-group.is-selected .filtro-trigger-clear {
    display: inline;
}

.filtro-group.is-selected .filtro-trigger-arrow {
    display: none;
}

.filtro-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}

.filtro-group.is-open .filtro-options {
    max-height: 300px;
    margin-top: 6px;
    opacity: 1;
}

.filtro-option {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    text-transform: capitalize;
    text-align: left;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
}

.filtro-option:hover,
.filtro-option.is-active {
    opacity: 1;
}

/* FLASH MESSAGES */
.flash-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.flash {
    padding: 9px 14px;
    font-size: 13px;
    letter-spacing: 0.03em;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(6px);
    animation: flash-in 0.2s ease 0.05s forwards;
}

@keyframes flash-in {
    to { opacity: 1; transform: translateY(0); }
}

.flash-success { background: var(--y); color: #000; }
.flash-error   { background: #000;     color: #fff; }
.flash-warning { background: var(--m); color: #000; }
.flash-info    { background: var(--c); color: #000; }

/* MODAL PROGETTO */
.progetto-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 500;
    display: flex;
    align-items: flex-start;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    flex-direction: column;
}

.progetto-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.progetto-modal-panel {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    gap: 20px;
    color: #000;
}

.progetto-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    padding: 0;
    color: #000;
}

.progetto-modal-img-wrap {
    overflow: hidden;
    flex-shrink: 0;
}

.progetto-modal-img-wrap img {
    max-width: 50vw;
    width: 100%;
    object-fit: contain;
    display: block;
    background: white;
    height: 60vh;
}

.progetto-modal-meta {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.progetto-modal-tipologia {
    text-transform: uppercase;
    margin: 0 0 2px;
    background: white;
    display: inline-block;
}

.progetto-modal-anno {
    text-transform: uppercase;
    margin: 0 0 2px;
    background: white;
    display: inline-block;
}

.progetto-modal-nome {
    display: inline-block;
    font-size: 20px;
    margin: 0;
    background: white;
    text-transform: capitalize;
}

.progetto-modal-descrizione {
    max-width: 50vw;
    background: white;
    display: inline-block;
}

.progetto-modal-link {
    margin-top: 4px;
    background: white;
    display: inline-block;
    text-decoration: underline;
    color: inherit;
}

.progetto-modal-link[hidden] {
    display: none;
}

.home-mobile {
    display: none;
}

.crocino {
    display: none;
}
.nav-mobile {
    display: none;
}
.prog-footer {
    display: none;
}

.help-nav {
    padding: 4px 5px;
    font-size: 14px;
    margin-top: 0;
    color: #b8b8b8;
}

@media (prefers-color-scheme: dark) {
    body {
        background: #000;
        color: #fff;
    }

    #swup {
        background: #000;
    }

    .nav-main a {
        color: #fff;
    }

    .home-main a {
        color: #fff;
    }

    .flash-error {
        background: #fff;
        color: #000;
    }

    footer img {
        filter: invert(1);
    }

    input.nl-in {
        background: #000;
    }

    input[type="submit"] {
        background: #3c3c3c;
        color: white;
    }

    .paragraph {
        color: white;
    }

    .glossario-item-row.color-c:hover, .glossario-item-row.color-m:hover {
        color: white;
    }

    .storia-crocino [d="M106.94 0V213.87"],
    .storia-crocino [d="M0 106.94H213.87"] {
        stroke: white;
    }

    .home-mobile .generic-table tr {
        border-bottom: 1px solid white;
    }

}