/* Intestazione e linea multicolore */
#masthead {
    background: #fff;
    box-shadow: 0 4px 18px rgba(12, 27, 61, .06);
}
#masthead::after {
    content: "";
    display: block;
    width: 100%;
    height: 6px;
    background: linear-gradient(
        90deg,
        #00c8bd 0%,
        #00a9df 23%,
        #7855f5 43%,
        #e735aa 62%,
        #ff5064 81%,
        #ffb64b 100%
    );
}
#masthead .site-header-row-container-inner {
    background: #fff;
}
#masthead .site-branding img.custom-logo {
    max-height: 112px !important;
    width: auto;
}
#masthead .site-header-row {
    min-height: 126px;
}

/* Elimina i precedenti separatori */
#masthead .main-navigation .primary-menu-container > ul > li::before,
#masthead .main-navigation .primary-menu-container > ul > li::after {
    content: none !important;
    display: none !important;
}

/* Menu desktop */
#masthead .main-navigation .primary-menu-container > ul {
    gap: clamp(3px, .65vw, 12px);
    align-items: center;
}
#masthead .main-navigation .primary-menu-container > ul > li > a {
    color: #102044;
    font-size: clamp(14px, 1.05vw, 18px);
    font-weight: 700;
    line-height: 1.3;
    padding: 14px 12px !important;
    border-radius: var(--si-header-button-radius, 3px);
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}
#masthead .main-navigation .primary-menu-container > ul > li > a:hover {
    color: #008f91;
    background: #e7f7f7;
}
#masthead .main-navigation .primary-menu-container > ul > li.current-menu-item > a {
    color: #fff !important;
    background: #009b9b;
    box-sizing: border-box;
    height: var(--si-header-button-height, 44px);
    min-height: var(--si-header-button-height, 44px);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
}
#masthead .main-navigation .primary-menu-container > ul > li.si-menu-add > a {
    border-radius: var(--si-header-button-radius, 3px);
    background: #ff5264 !important;
    color: #fff !important;
    padding: 15px 20px !important;
    margin-left: 8px;
}
#masthead .si-menu-add > a::before,
#mobile-drawer .si-menu-add > a::before {
    content: "+";
    margin-right: 8px;
}
#masthead .main-navigation .primary-menu-container > ul > li.si-menu-add > a:hover {
    background: #ed4055 !important;
}
#masthead a:focus-visible,
#mobile-drawer a:focus-visible {
    outline: 3px solid #00a9b0;
    outline-offset: 3px;
}

/* Menu mobile: mantiene il funzionamento nativo di Kadence */
#mobile-drawer .drawer-inner {
    background: #fff;
    color: #102044;
}
#mobile-drawer .drawer-header {
    border-bottom: 5px solid transparent;
    border-image: linear-gradient(
        90deg, #00c8bd, #00a9df, #7855f5, #e735aa, #ff5264, #ffb64b
    ) 1;
}
#mobile-drawer .mobile-navigation ul li a {
    color: #102044;
    font-size: 17px;
    font-weight: 700;
    padding: 14px 18px;
    border-bottom: 1px solid #edf0f5;
}
#mobile-drawer .mobile-navigation ul li.current-menu-item > a {
    color: #087f83;
    background: #e5f6f6;
    border-radius: 9px;
}
#mobile-drawer .mobile-navigation ul li.si-menu-add > a {
    background: #ff5264;
    color: #fff;
    border-radius: var(--si-header-button-radius, 3px);
    margin: 18px 0 8px;
    text-align: center;
    border-bottom: 0;
}
#masthead .menu-toggle-open {
    color: #102044;
}

@media (max-width: 1199px) {
    #masthead .main-navigation .primary-menu-container > ul {
        gap: 2px;
    }
    #masthead .main-navigation .primary-menu-container > ul > li > a {
        font-size: 14px;
        padding: 12px 7px !important;
    }
    #masthead .main-navigation .primary-menu-container > ul > li.si-menu-add > a {
        padding: 13px 12px !important;
        margin-left: 3px;
    }
}
@media (max-width: 767px) {
    #masthead .site-branding img.custom-logo {
        max-height: 86px !important;
    }
    #masthead .site-header-row {
        min-height: 100px;
    }
    #masthead::after {
        height: 5px;
    }
}
@media (prefers-reduced-motion: reduce) {
    #masthead .main-navigation a {
        transition: none !important;
    }
}

/* Linea superiore con colori invertiti */
#masthead::before {
    content: "";
    display: block;
    width: 100%;
    height: 6px;
    background: linear-gradient(
        90deg,
        #ffb64b 0%,
        #ff5064 19%,
        #e735aa 38%,
        #7855f5 57%,
        #00a9df 77%,
        #00c8bd 100%
    );
}
@media (max-width: 767px) {
    #masthead::before {
        height: 5px;
    }
}

/* Header della stessa larghezza su tutte le pagine */
#masthead .site-header-row-container-inner > .site-container {
    width: 100% !important;
    max-width: 1600px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: auto;
    margin-right: auto;
}

/* Impedisce al pulsante di passare alla seconda riga */
#masthead .main-navigation .primary-menu-container > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
}
#masthead .main-navigation .primary-menu-container > ul > li {
    flex: 0 0 auto;
}
#masthead .site-header-main-section-right {
    min-width: 0;
}

@media (min-width: 1025px) and (max-width: 1350px) {
    #masthead .main-navigation .primary-menu-container > ul {
        gap: 3px !important;
    }
    #masthead .main-navigation .primary-menu-container > ul > li > a {
        font-size: 15px !important;
        padding: 13px 9px !important;
    }
    #masthead .main-navigation .primary-menu-container > ul > li.si-menu-add > a {
        padding: 14px 16px !important;
        margin-left: 5px !important;
    }
}

/* Menu desktop vicino al logo */
@media (min-width: 1025px) {
    #masthead .site-header-row {
        grid-template-columns: auto minmax(0, 1fr) !important;
        column-gap: 32px !important;
    }
    #masthead .site-header-main-section-right {
        justify-content: flex-start !important;
    }
    #masthead .main-navigation .primary-menu-container > ul {
        justify-content: flex-start !important;
    }
}

/* Almeno 50 px tra logo e menu */
@media (min-width: 1025px) {
    #masthead .site-header-row {
        column-gap: 50px !important;
    }
}

/* Sposta logo e menu verso destra, mantenendo spazio disponibile */
@media (min-width: 1400px) {
    #masthead .site-header-row-container-inner > .site-container {
        padding-left: 115px !important;
        padding-right: 20px !important;
    }
}
/* Mondo SalsaItalia: one set of dropdown rules; mobile keeps native vertical flow. */
#masthead{position:relative;z-index:1000;overflow:visible}
#masthead .si-world-menu>a[role=button]{cursor:pointer}
#masthead .si-world-menu .sub-menu{box-sizing:border-box;border:0;border-radius:3px}
#masthead .si-world-menu>.sub-menu{
    left:var(--si-world-menu-left,12px);right:auto;width:220px;min-width:220px;max-width:calc(100vw - 24px);
    z-index:1001;height:auto!important;max-height:none!important;overflow:visible!important;
    padding:0;box-shadow:0 10px 30px #122a4820;
}
#masthead .si-world-menu .sub-menu>li{display:block!important;position:relative;float:none;box-sizing:border-box;width:100%;min-width:0;max-width:100%;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;height:auto;max-height:none;opacity:1;visibility:inherit}
#masthead .si-world-menu .sub-menu a,#masthead .si-world-menu .si-menu-label{
    display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin:0;
    border:0;border-radius:0;box-shadow:none;outline-offset:-3px;
    white-space:normal;overflow-wrap:break-word;
}
#masthead .si-world-menu .si-menu-label{cursor:default;color:inherit}
#masthead .si-world-menu .sub-menu .sub-menu{
    left:100%;right:auto;top:0;width:220px;min-width:220px;margin:0;padding:6px 0;
    box-shadow:0 10px 30px #122a4820;overflow:visible;
}
#masthead .si-world-menu .si-submenu-left>.sub-menu{left:auto;right:100%}
#masthead .si-world-menu .sub-menu .sub-menu::before{content:"";position:absolute;top:0;bottom:0;left:-6px;width:6px}
#masthead .si-world-menu .si-submenu-left>.sub-menu::before{left:auto;right:-6px}
#masthead .si-world-menu .sub-menu .nav-drop-title-wrap{display:flex;align-items:center;justify-content:space-between;gap:8px}
#masthead .si-world-menu .sub-menu .dropdown-nav-toggle{flex:0 0 auto;transform:none}
#masthead .si-world-menu .sub-menu .dropdown-nav-toggle .kadence-svg-iconset{transform:none}
#masthead .si-world-menu .sub-menu .dropdown-nav-toggle svg{transform:rotate(-90deg)}
#masthead .si-world-menu .sub-menu .si-submenu-left>.nav-drop-title-wrap .dropdown-nav-toggle svg,
#masthead .si-world-menu .sub-menu .si-submenu-left>a .dropdown-nav-toggle svg{transform:rotate(90deg)}
#mobile-drawer .si-world-menu [role=button]{cursor:pointer}
#mobile-drawer .si-menu-label{display:block;padding:14px 18px;font-size:17px;font-weight:700;color:#405774;border-bottom:1px solid #edf0f5}
#mobile-drawer .si-world-menu .sub-menu{box-sizing:border-box;border-radius:3px}
#mobile-drawer .si-world-menu .sub-menu li,#mobile-drawer .si-world-menu .sub-menu a{box-sizing:border-box;min-width:0;border:0;border-radius:0}
#mobile-drawer .si-world-menu .sub-menu .sub-menu{padding-left:16px}
#masthead .si-world-menu>a[data-si-world-toggle]:focus-visible,#mobile-drawer a[data-si-world-toggle]:focus-visible{outline:3px solid #00a9b0;outline-offset:3px}

/* Shared header dropdown palette follows Kadence's current Attività palette. */
#masthead,#mobile-drawer{--si-dropdown-bg:var(--global-palette3,#181c24);--si-dropdown-text:var(--global-palette8,#f7fafc);--si-dropdown-hover:var(--global-palette4,#2d3748);--si-dropdown-active:var(--global-palette9,#fff);--si-dropdown-divider:rgba(255,255,255,.14)}
#masthead .main-navigation .sub-menu,#masthead .si-account-panel,#mobile-drawer .mobile-navigation .sub-menu{background:var(--si-dropdown-bg);color:var(--si-dropdown-text);border-radius:3px;padding-block:0}
#masthead .si-account-panel{padding-inline:0;border-color:var(--si-dropdown-divider)}
#masthead .main-navigation .sub-menu>li,#masthead .si-account-panel li,#mobile-drawer .mobile-navigation .sub-menu>li{border-bottom:1px solid var(--si-dropdown-divider)}
#masthead .main-navigation .sub-menu>li:last-child,#masthead .si-account-panel li:last-child,#mobile-drawer .mobile-navigation .sub-menu>li:last-child{border-bottom:0}
#masthead :is(.main-navigation .sub-menu,.si-account-panel) a,#mobile-drawer .mobile-navigation .sub-menu a,#mobile-drawer .mobile-navigation .sub-menu .drawer-nav-drop-wrap{color:var(--si-dropdown-text);background:transparent;border:0;border-radius:0}
#masthead :is(.main-navigation .sub-menu,.si-account-panel) a,#mobile-drawer .mobile-navigation .sub-menu a{box-sizing:border-box;padding:12px 14px;min-height:44px;font-size:15px;line-height:1.45;white-space:normal;overflow-wrap:break-word;width:100%}
#masthead :is(.main-navigation .sub-menu,.si-account-panel) a:is(:hover,:focus-visible),#mobile-drawer .mobile-navigation .sub-menu a:is(:hover,:focus-visible){background:var(--si-dropdown-hover);color:var(--si-dropdown-active)}
#masthead .main-navigation .sub-menu .current-menu-item>a,#masthead .si-account-panel a[aria-current=page],#mobile-drawer .mobile-navigation .sub-menu .current-menu-item>a{background:var(--si-dropdown-hover);color:var(--si-dropdown-active);box-shadow:inset 3px 0 var(--global-palette1,#00a9b0)}
#masthead :is(.main-navigation .sub-menu,.si-account-panel) :is(a,button):focus-visible,#mobile-drawer .mobile-navigation .sub-menu :is(a,button):focus-visible{outline:2px solid var(--global-palette9,#fff);outline-offset:-3px}
#masthead .main-navigation .sub-menu .si-menu-label,#mobile-drawer .mobile-navigation .sub-menu .si-menu-label{color:var(--si-dropdown-text);padding:12px 14px}
#mobile-drawer .mobile-navigation .sub-menu .drawer-sub-toggle{color:var(--si-dropdown-text);background:transparent;border-color:var(--si-dropdown-divider)}
#mobile-drawer .mobile-navigation .sub-menu .sub-menu{padding-left:12px}

#masthead .si-account-panel{max-height:calc(100dvh - 130px);overflow-y:auto}
#masthead .si-world-menu .sub-menu .sub-menu{max-height:var(--si-submenu-height,calc(100dvh - 180px));overflow-y:auto;overflow-x:hidden}

#masthead .main-navigation .sub-menu{width:220px;min-width:220px;max-width:calc(100vw - 24px)}

/* Dropdowns remain above a wrapped account trigger; its panel still opens on top. */
#masthead .si-account-access{z-index:auto}
#masthead .si-account-panel{z-index:1004}
#masthead .main-navigation .si-header-submenu-inactive>.sub-menu{opacity:0!important;visibility:hidden!important;pointer-events:none}

/* Header CTA shares the account control's external height at every breakpoint. */
#masthead .main-navigation .primary-menu-container>ul>li.si-menu-add>a,
#mobile-drawer .mobile-navigation ul li.si-menu-add>a{
 box-sizing:border-box;height:var(--si-header-button-height,44px);min-height:var(--si-header-button-height,44px);
 padding-top:0!important;padding-bottom:0!important;display:flex;align-items:center;justify-content:center;
}
#mobile-drawer .mobile-navigation #mobile-menu>li>a,
#mobile-drawer .mobile-navigation #mobile-menu>li>.drawer-nav-drop-wrap{border-radius:var(--si-header-button-radius,3px)}
#masthead .main-navigation .primary-menu-container a:is(:hover,:focus-visible),
#mobile-drawer .mobile-navigation :is(a,.drawer-nav-drop-wrap):is(:hover,:focus-visible,:focus-within){border-radius:var(--si-header-button-radius,3px)}

/* Homepage: reduce the add-listing button width by 10px in total. */
body.home #masthead .main-navigation .primary-menu-container > ul > li.si-menu-add > a {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

@media (min-width: 1025px) and (max-width: 1350px) {
    body.home #masthead .main-navigation .primary-menu-container > ul > li.si-menu-add > a {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }
}

/* Approved header mockup: retain the 126px white row/logo and stack existing actions.
 * The real menu CTA stays in its native list: same link, tooltip and keyboard order.
 * Its containing block is the right header section, not the dropdown list.
 */
@media (min-width:1200px) {
 #masthead #main-header .site-header-main-section-right {
  position:relative;flex-wrap:nowrap;padding-right:220px;box-sizing:border-box;
 }
 #masthead #main-header .main-navigation,
 #masthead #main-header .main-navigation .primary-menu-container,
 #masthead #main-header .main-navigation .primary-menu-container>ul {position:static}
 #masthead #main-header .main-navigation .primary-menu-container>ul {gap:clamp(3px,.5vw,8px)!important}
 #masthead #main-header .main-navigation .primary-menu-container>ul>li:not(.si-menu-add)>a {padding-inline:9px!important;white-space:nowrap}
 #masthead #main-header .main-navigation .primary-menu-container>ul>li.si-menu-add {
  position:absolute;right:0;top:calc(50% - 42px);width:196px;height:38px;margin:0;
 }
 #masthead #main-header .main-navigation .primary-menu-container>ul>li.si-menu-add>a {
  width:196px;height:38px;min-height:38px;padding:0 10px!important;margin:0!important;
 }
 #masthead #main-header .si-account-access {
  position:absolute;right:0;top:calc(50% + 4px);width:196px;height:38px;margin:0;padding:0;
 }
 #masthead #main-header .si-account-toggle {
  box-sizing:border-box;width:196px;min-width:196px;height:38px;min-height:38px;
  padding:0 10px;justify-content:center;
 }
 #masthead #main-header .si-account-panel {top:calc(100% + 8px);left:auto;right:0;width:220px}
}
/* Native mobile navigation takes over before the seven full-size labels collide. */
@media (min-width:1025px) and (max-width:1199px) {
 #masthead #main-header {display:none!important}
 #masthead #mobile-header {display:block!important}
}
@media (min-width:1025px) and (max-width:1199px) {
 #masthead #mobile-header .site-header-main-section-right {justify-content:flex-end!important}
}