/* ══ Header moderno (06/11/2026) ═══════════════════════════════════════════════
   Markup: templates/partials/header.php · caricato dopo modern.css in templates/layout.php (id mag-header-css).
   Rollback: togliere la riga mag-header-css da layout.php (+ header.php.bak-20261106-header).
   ≥1240px: logo · menu a pillola · ricerca · azioni   |   961–1239: ricerca a comparsa (lente)   |   ≤960: menu a tendina */

.va-navbar {
    background: rgba(255, 255, 255, .82) !important;
    backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(16, 24, 40, .07) !important;
    transition: box-shadow .2s, background .2s;
}
.va-navbar.va-navbar--scrolled { background: rgba(255, 255, 255, .92) !important; box-shadow: 0 1px 0 rgba(16, 24, 40, .04), 0 8px 24px -14px rgba(16, 24, 40, .22); }
.va-navbar .va-nav-inner { height: 68px; gap: 16px; max-width: 1320px; padding: 0 24px; }

/* logo */
.va-navbar .va-nav-brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; text-decoration: none; }
.va-navbar .va-nav-brand img { width: 38px; height: auto; transition: transform .25s; }
.va-navbar .va-nav-brand:hover img { transform: rotate(-6deg) scale(1.05); }
.va-navbar .va-nav-brand-name { font-size: 19.5px; }

/* menu a pillola (stesso controllo segmentato della testata /annunci/) */
.va-navbar .va-nav-types {
    flex: 0 1 auto; justify-content: flex-start; gap: 2px;
    padding: 4px; border-radius: 999px; background: #f2f4f7; border: 1px solid #e8ebf0;
}
.va-navbar .va-nav-type {
    padding: 7px 13px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 600; color: #3d434d;
    transition: background .15s, color .15s, box-shadow .15s;
}
.va-navbar .va-nav-type .msr { font-size: 19px; color: #6b7380; transition: color .15s; }
.va-navbar .va-nav-type:hover { background: rgba(255, 255, 255, .7); color: #15171c; }
.va-navbar .va-nav-type:hover .msr { color: #2f6fe4; }
.va-navbar .va-nav-type--active, .va-navbar .va-nav-type--active:hover {
    background: #fff; color: #15171c; border: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 8px -2px rgba(16, 24, 40, .12);
}
.va-navbar .va-nav-type--active .msr { color: #2f6fe4; }

/* ricerca */
.va-search { position: relative; flex: 1 1 260px; max-width: 440px; display: flex; align-items: center; margin: 0; }
.va-search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 21px; color: #6b7380; pointer-events: none; }
.va-search input[type="search"] {
    width: 100%; height: 44px; margin: 0; padding: 0 16px 0 44px; box-sizing: border-box;
    border-radius: 999px; border: 1px solid #e8ebf0; background: #f2f4f7;
    font: 500 14.5px/1 var(--mx-font, "DM Sans","DM Sans Fallback A","DM Sans Fallback R", system-ui, sans-serif); color: #15171c;
    outline: none; transition: background .15s, border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
.va-search input[type="search"]::placeholder { color: #7a828f; }
.va-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.va-search input[type="search"]:hover { border-color: #d5dae2; }
.va-search input[type="search"]:focus { background: #fff; border-color: #9db8ec; box-shadow: 0 0 0 4px rgba(47, 111, 228, .14); }
.va-search-close { display: none; }

.va-search-list {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
    list-style: none; margin: 0; padding: 6px; min-width: 300px;
    background: #fff; border: 1px solid #e6e9ee; border-radius: 18px;
    box-shadow: 0 18px 44px -12px rgba(16, 24, 40, .28);
}
.va-search-list[hidden] { display: none; }
.va-sg { display: flex; align-items: center; gap: 11px; margin: 0; padding: 9px 12px; border-radius: 12px; cursor: pointer; color: #15171c; }
.va-sg > .msr { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; background: #eef3fd; color: #2f6fe4; }
.va-sg-lab { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.va-sg-lab small { font-size: 12px; font-weight: 500; color: #7a828f; }
.va-sg-n { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: #3d434d; background: #f2f4f7; padding: 3px 9px; border-radius: 999px; }
.va-sg.is-on, .va-sg:hover { background: #f3f6fc; }
.va-sg--all { border-top: 1px solid #eef0f3; border-radius: 0 0 12px 12px; margin-top: 4px; }
.va-sg--all > .msr:first-child { background: #f2f4f7; color: #3d434d; }
.va-sg--all > .msr:last-child { background: none; width: auto; color: #7a828f; }
.va-sg--all .va-sg-lab { font-weight: 600; font-size: 14px; }

.va-search-toggle {
    display: none; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 42px; height: 42px; padding: 0; border-radius: 999px; cursor: pointer;
    border: 1px solid #e3e6eb; background: #fff; color: #15171c; transition: background .15s, border-color .15s;
}
.va-search-toggle .msr { font-size: 22px; }
.va-search-toggle:hover, .va-search-open .va-search-toggle { background: #f2f4f7; border-color: #d5dae2; }

/* azioni */
.va-navbar .va-nav-actions { gap: 8px; flex: 0 0 auto; }
.va-navbar .va-nav-btn { height: 42px; padding: 0 17px; border-radius: 999px; font-size: 14px; }
.va-navbar .va-nav-btn--accent {
    background: #e8ff47; border-color: #d9f02f;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 4px 12px -6px rgba(140, 160, 0, .7);
    transition: transform .15s, background .15s, box-shadow .15s;
}
.va-navbar .va-nav-btn--accent:hover { background: #dcf53a; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 8px 18px -8px rgba(140, 160, 0, .8); }
.va-navbar .va-nav-btn--ghost { border-color: #e3e6eb; background: #fff; }
.va-navbar .va-nav-btn--ghost:hover { background: #f2f4f7; border-color: #d5dae2; }
.va-navbar .va-nav-avatar { border-radius: 999px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e3e6eb; }
.va-navbar .va-hamburger { width: 42px; height: 42px; border-radius: 999px; border-color: #e3e6eb; background: #fff; }
.va-navbar .va-nav-drop { border-radius: 18px; border: 1px solid #e6e9ee; box-shadow: 0 18px 44px -12px rgba(16, 24, 40, .28) !important; }

/* ── ricerca a comparsa sotto la barra ── */
@media (max-width: 1239px) {
    .va-search-toggle { display: inline-flex; }
    .va-navbar .va-nav-types { margin-left: auto; margin-right: auto; }
    .va-search {
        display: none; position: absolute; top: 100%; left: 0; right: 0; max-width: none;
        padding: 10px max(16px, calc((100% - 760px) / 2)) 14px;
        background: #fff; border-bottom: 1px solid #e8ebf0; box-shadow: 0 16px 30px -18px rgba(16, 24, 40, .3);
    }
    .va-search-open .va-search { display: flex; animation: va-search-in .16s ease-out; }
    .va-search-ico { left: calc(max(16px, calc((100% - 760px) / 2)) + 14px); top: 32px; }
    .va-search input[type="search"] { height: 46px; padding-right: 52px; font-size: 16px; }
    .va-search-close {
        display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 15px;
        right: calc(max(16px, calc((100% - 760px) / 2)) + 6px);
        width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #5d6470; cursor: pointer;
    }
    .va-search-close:hover { background: #f2f4f7; }
    .va-search-list { left: max(16px, calc((100% - 760px) / 2)); right: max(16px, calc((100% - 760px) / 2)); top: calc(100% - 6px); }
}
@keyframes va-search-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
    .va-navbar .va-nav-type { padding: 7px 11px; }
}
@media (max-width: 960px) {
    .va-navbar .va-nav-inner { height: 62px; padding: 0 16px; }
    .va-navbar .va-nav-actions { margin-left: auto; }
}
@media (max-width: 560px) {
    .va-navbar .va-nav-inner { height: 58px; padding: 0 12px; gap: 6px; }
    .va-navbar .va-nav-btn, .va-search-toggle, .va-navbar .va-hamburger { width: 40px; height: 40px; padding: 0; }
    .va-navbar .va-nav-actions { gap: 6px; }
    .va-navbar .va-nav-brand img { width: 32px; }
    .va-navbar .va-nav-brand-name { font-size: 17.5px; }
    .va-sg-n { display: none; }
}
@media (max-width: 380px) {
    .va-navbar .va-nav-brand-name { display: none; }
}

/* menu a tendina (mobile) */
.va-nav-mobile .va-mob-tile { border-radius: 16px !important; }
.va-nav-mobile .va-mob-tile--active { background: #15171c !important; color: #fff !important; border-color: #15171c !important; }
.va-nav-mobile .va-mob-tile--active .msr { color: #e8ff47 !important; }
.va-nav-mobile .va-mob-cta { border-radius: 999px !important; }

@media (prefers-reduced-motion: reduce) {
    .va-navbar .va-nav-brand img, .va-navbar .va-nav-btn--accent, .va-search-open .va-search { transition: none; animation: none; }
}