﻿*{margin:0;padding:0;box-sizing:border-box;}
/*ELEMENTI*/
.d-none{display:none!important;}
.checkbox-label a{text-decoration:underline;}
.btn-primary {
    background: #F65980;
    color: #fff;
    border-radius: 12px;
    padding: 0.6rem 1.25rem;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.2rem;
    cursor: pointer;
    border: none;
    text-align: center;
    margin-right:15px;
}

.btn-primary:hover {transform: translateY(-1px);background-color:#DE2C58;color:white;}
#atom-nav:hover{background-color:#DE2C58;color:white;}
.btn-secondary {
    background: #fff;
    border: 3px solid var(--ink);
    color: var(--ink);
    border-radius: 12px;
    padding: .44rem 3rem;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.2rem;
    cursor: pointer;
    text-align: center;
}
.btn-secondary:hover {transform: translateY(-1px);background-color:#F65980;color:white;border:3px solid #F65980;}

#newsletter-error {display: none;color: #d00;margin-top: 8px;}
.wrap-pagination{display:block;}
/*==========HEADER==========*/
#new-header{height:90px;}
.new-container{max-width:1720px;margin:auto;}
.small-new-container{width:1320px;margin:auto;}
.xsmall-new-container{width:1100px;margin:auto;}
.xxsmall-new-container{width:876px;margin:auto;}
.header-container{height:100%;max-width:90vw !important;}
.header-row{display:flex;padding:20px 0px;height:100%;align-items:center;justify-content:space-between;}
.header-img{height:100%}
.header-img img{height:100%;object-fit:cover;}
.header-img-mobile{height:90%;display:none;}
.header-img-mobile img{height:100%;object-fit:cover;}
.left-header {width: 35%;height: 100%;display: flex;align-items: center;position:relative;z-index:1}
.center-header{width:15%;}
.right-header{width:40%;position:relative;z-index:1;}
.left-header-text h3{font-size:2rem;}
.left-header-text p{font-size:1rem;color:var(--rosaScuro);font-weight:700;}
.center-header,.header-logo{height:100%;}
.header-logo{text-align:center;}
.header-logo img {height:100%;object-fit:cover;}
.header-nav{display:flex;align-items:center;gap:35px;justify-content:end;}
.header-nav a{font-size:0.875rem;font-weight:700;}
#atom-nav{color:white;background-color:var(--rosaScuro);padding:10px 20px;border-radius:10px;}
#s {height:44px;border-radius:10px;font-size:0.875rem;margin-bottom:0px !important}
.header-nav-mobile{display:none;}
.header-button{display:flex;align-items:center;column-gap:10px}
#search-btn {border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;}
/*==========ATOM-SEARCH========================*/
.atom-search {
    display: flex;
    height: 36px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.atom-search-icon{height:100%;flex-shrink:0;}
.atom-search-icon button {
    height: 100%;
    width: 36px;
    border: none;
    background-color: #EFF3F4;
    cursor:pointer;
}
.atom-input-field form{height:100%;}
.atom-input-field input[type="text"] {
    width: 100%;
    height: 36px !important;
    background-color: #EFF3F4;
    padding:0px;
    border-radius:0px;
    border:none;
}
.atom-input-field input[type="text"]:focus,
.atom-input-field input[type="text"]:focus-visible,
.atom-input-field input[type="text"]:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
.atom-form {width: 0px;transition: width 500ms ease-in-out;}
.atom-search.open .atom-form{width:215px;transition:width 500ms ease-in-out;}
.atom-off-form{width:100%;}
.atom-off-input-field{flex-grow:1}
.atom-off-input-field input[type="text"] {
    width: 100%;
    height: 36px !important;
    background-color: #EFF3F4;
    padding:0px;
    border-radius:0px;
}
.atom-off-input-field input[type="text"]:focus,
.atom-off-input-field input[type="text"]:focus-visible,
.atom-off-input-field input[type="text"]:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.footer {
    background-image: url('/image/linee footer.png' )
    ;background-size: cover; /* riempie lo schermo */
    background-position: center; /* centrata */
    background-repeat: no-repeat;
}

@media(max-width:2200px) {
.new-container{width:90vw;margin:auto;}
.small-new-container{width:60vw;margin:auto;}
.xsmall-new-container{width:50vw;margin:auto;}
.xxsmall-new-container{width:40vw;margin:auto;}
}

@media (max-width:1700px) {
    header .search-wrap {text-align: center;margin-bottom: 0px!important;}
    .right-header {width: 45%;}
    header .search-wrap #s {width: 100% !important;}
    .archivio-box {padding: 60px 35px;}
}

@media(max-width:1450px){
    .small-new-container {width: 70vw;margin: auto;}
    .right-header {width: 56%;}
    .header-nav {gap: 25px;}
}
@media(max-width:1100px){
    .small-new-container {width: 90vw;}
    .header-img-mobile {display: block;}
    .header-img {display: none;}
    .header-nav-mobile{display:flex;justify-content:end;}
    .header-nav{display:none;}
}
@media(max-width:576px){
    .header-img-mobile img {height: 85%;}
}

/*========OFFCANVAS===========*/
:root {
    --offcanvas-width: 320px;
    --transition-speed: 0.3s;
    --transition-ease: ease;
}
#offcanvasTitle {
    height: 30px
}

#offcanvasTitle img {
    height: 100%
}
/* BACKDROP */
.offcanvas-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed) var(--transition-ease), visibility var(--transition-speed) var(--transition-ease);
    z-index: 40;
}

/* PANEL */
.offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--offcanvas-width);
    max-width: 100%;
    height: 100%;
    background: var(--ink);
    color: #e5e7eb;
    transform: translateX(100%);
    transition: transform var(--transition-speed) var(--transition-ease);
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    outline: none;
}
.offCanvasRow {padding: 15px 0px;}
.offcanvas-header {padding: 20px 20px 20px;height: 85px;display: flex;align-items: center;justify-content: space-between;gap: 1rem;}
.offCanvas-btn {height: 100%;display: flex;column-gap: 10px;}
#search-off-btn {height: 100%;background: transparent;border: none;display:flex;align-items:center;}
#search-off-btn img{height: 100%;}

#closeOffcanvas {height: 100%;background: transparent;border: none;display:flex;align-items:center;}
#closeOffcanvas img{height: 60%;}
.offcanvas-body {
    padding: 50px 20px 30px;
    overflow-y: auto;
    font-size: 0.95rem;
    height:100%;
}

.offcanvas-body ul {
    list-style: none;
    margin-top: 0.5rem;
}

.offcanvas-body li + li {
    margin-top: 0.4rem;
}

.offcanvas-link {
    display: block;
    border-radius: 0.5rem;
    text-decoration: none;
    color: #e5e7eb;
    transition: background var(--transition-speed) var(--transition-ease), transform var(--transition-speed) var(--transition-ease);
    font-size:1.3rem;
    line-height:1.55rem;
    font-weight:700;
}

/*.icon-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    transition: background var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease), transform var(--transition-speed) var(--transition-ease);
}*/



/* STATES */
body.is-offcanvas-open .offcanvas {
    transform: translateX(0%);
}

body.is-offcanvas-open .offcanvas-backdrop {
    opacity: 1;
    visibility: visible;
}

.offcanvas-page1 {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--offcanvas-width);
    max-width: 100%;
    height: 100%;
    background: var(--ink);
    color: #e5e7eb;
    transform: translateX(100%);
    transition: transform var(--transition-speed) var(--transition-ease);
    z-index: 999999999;
    display: flex;
    flex-direction: column;
    outline: none;
}
.offcanvas-page1.open {
    transform: translateX(0%);
}
.offcanvas-body.page1 ul {
    list-style: none;
    margin-bottom:20px;
}

.offcanvas-body.page1 li + li {
    margin-top: 0;
}

.offcanvas-page2 {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--offcanvas-width);
    max-width: 100%;
    height: 100%;
    background: var(--ink);
    color: #e5e7eb;
    transform: translateX(100%);
    transition: transform var(--transition-speed) var(--transition-ease);
    z-index: 999999999;
    display: flex;
    flex-direction: column;
    outline: none;
}

.offcanvas-page2.open {
    transform: translateX(0%);
}

.offcanvas-body.page2 ul {
    list-style: none;
    margin-bottom: 20px;
}

.offcanvas-body.page2 li + li {
    margin-top: 0;
}

/*#settori-aside-button{display:flex;justify-content:space-between;}*/
.offcanvas-body{display:flex;flex-direction:column;}
.offcanvas-top-body{flex-grow:1;display:flex;flex-direction:column;}
.freccia{display:flex;height:100%;}
.freccia img{height:10px;transition:transform 500ms ease-in-out;}
hr {border: 0.5px solid #adc5d03d;}
#settori-aside-button{flex-grow:0;transition:flex-grow 500ms ease-in-out;display:flex;flex-direction:column;}
#settori-aside-button.drop{flex-grow:1;transition:flex-grow 500ms ease-in-out;align-items:start;}
#settori-aside-button.drop .freccia img {transform:rotate(-180deg);transition:transform 500ms ease-in-out;}
#settori-aside-button.drop #offCanvas-settori{flex-grow:1;}
#offCanvas-settori{opacity:0;height:0px;transition:opacity 500ms ease-in-out,height 500ms ease-in-out;overflow:scroll;}
#settori-aside-button.drop #offCanvas-settori{opacity:1;transform:scale(1);transition:opacity 500ms ease-in-out;}
#settori-aside-button.drop .drop-header{margin-bottom:20px;}
.drop-header{width:100%;display:flex;justify-content:space-between;}
#drop-btn{background:transparent;border:none}
.indice-categoria-titolo{font-size:1.125rem;line-height:1.5rem;font-weight:400;}
.sottoSettore{font-size:1.25rem;line-height:1.5rem;font-weight:400;text-decoration:underline;margin-bottom:10px;}
.indice-categoria-offcanvas{
    margin-bottom: 10px;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
}
.indici-trigger-offcanvas{display:flex;align-items:center;}
.drop-btn-categoria{border:none;background:transparent;display:flex;align-items:center;}
.indice-categoria-offcanvas.selected {color: white;background-color: var(--ink)}
.indice-categoria-titolo-offcanvas {padding: 10px 10px;font-size:1.25rem;line-height:1.5rem;font-weight:400;}
.indice-categoria-panel-offcanvas {display: grid;grid-template-rows: 0fr;transition: grid-template-rows 300ms ease;}
.indice-categoria-inner-panel-offcanvas {overflow: hidden;padding: 0 18px;line-height: 1.5;}
.indice-categoria-offcanvas.open .indice-categoria-panel-offcanvas {grid-template-rows: 1fr;}
/*.indice-categoria-inner-panel-offcanvas {padding: 12px 18px 18px 28px;}*/
.indice-categoria-offcanvas.open .indice-categoria-inner-panel-offcanvas {padding: 12px 18px 18px 28px;}
.indice-categoria-offcanvas.open .freccia-categoria img {transform: rotate(-180deg);transition: transform 500ms ease-in-out;}
.offcanvas-cta{width:100%;}
.offcanvas-cta a{width:100%;display:inline-block;}
#gradient-positioning{position:relative;}
#gradient {
    background: #004F70;
    background: linear-gradient(0deg,rgba(0, 79, 112, 1) 0%, rgba(0, 79, 112, 0.44) 50%, rgba(0, 79, 112, 0) 100%);
    height: 34px;
    width: 100%;
    position: absolute;
    top: -46px;
    display:none
}
#gradient.open{display:block;}
/* Mobile pieno schermo */
@media (max-width: 640px) {
    :root {
        --offcanvas-width: 90%;
    }

    .offcanvas {
        border-radius: 0;
    }
}



/*========SEARCH OFFCANVAS========================*/
:root {
    --offcanvas-header-overlay: rgba(0,0,0,.55);
}
/* Header demo (puoi rimuoverlo se ti serve solo il pannello) */
.offcanvas-header-header{
    position: sticky;
    top: 0;
    background: white;
    border-bottom: 1px solid #e6e6e6;
    padding: 12px 14px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    z-index: 1; /* non interferisce grazie a z-index più alti del pannello */
}

.offcanvas-header-brand{
    font-weight: 700;
    letter-spacing: .2px;
}

.offcanvas-header-search-btn{
    appearance: none;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
    display:flex;
    align-items:center;
    gap: 8px;
}
.offcanvas-header-search-btn:active{ transform: translateY(1px); }

main{
    padding: 18px 14px;
    max-width: 820px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Overlay scuro */
.offcanvas-header-overlay{
    position: fixed;
    inset: 0;
    background: var(--offcanvas-header-overlay);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 999;
}

/* Pannello search che scende dall'alto */
.offcanvas-header-search-panel{
    position: fixed;
    top: 0; left: 0; right: 0;
    transform: translateY(-110%);
    transition: transform .28s cubic-bezier(.2,.9,.2,1);
    z-index: 1000;

    background: #fff;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
    padding: 12px;
}

.offcanvas-header-search-inner{
    max-width: 820px;
    margin: 0 auto;
}

.offcanvas-header-search-header{
    display:flex;
    align-items:center;
    justify-content:end;
    margin-bottom: 10px;
    font-weight: 650;
}

.offcanvas-header-close-btn{
    appearance: none;
    border: none;
    background: transparent;
    font-size: 20px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 10px;
}
.offcanvas-header-close-btn:active{ background: #f2f2f2; }

.offcanvas-header-search-input{
    width:100%;
    font-size:16px;          /* evita zoom iOS */
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #ddd;
    outline: none;
}
.offcanvas-header-search-input:focus{ border-color:#aaa; }

.offcanvas-header-hint{
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

/* Stato APERTO (classe sul body) */
body.offcanvas-header-search-open .offcanvas-header-overlay{
    opacity: 1;
}
body.offcanvas-header-search-open .offcanvas-header-search-panel{
    transform: translateY(0);
}

/* blocca scroll background */
body.offcanvas-header-search-open{
    overflow: hidden;
    touch-action: none;
}

#offcanvas-header-searchInput {
    background-color: var(--color-blue-light);
    overflow: hidden;
    border-radius: 3px;
    border: 0px;
    padding: 15px;
    font-size: var(--heading-5);
    color: var(--color-blue);
    text-decoration: none;
    background-image: url(/image/search-icon.svg);
    background-repeat: no-repeat;
    background-position: right +20px center;
    background-size: 25px;
}