/*
 * VerAuto header restyling - V5
 * Scoped to the Motorcycle layout override.
 */

:root {
    --verauto-header-height: 86px;
    --verauto-header-bg: #ffffff;
    --verauto-header-text: #15171a;
    --verauto-header-muted: #70757d;
    --verauto-header-border: rgba(21, 23, 26, 0.10);
    --verauto-header-shadow: 0 10px 30px rgba(20, 27, 35, 0.06);
    --verauto-pill-bg: #15171a;
    --verauto-pill-text: #ffffff;
}

/* Remove spacing left behind by the legacy top bar/header styles. */
#top-bar {
    display: none !important;
}

.verauto-motorcycle-header,
.verauto-motorcycle-header * {
    box-sizing: border-box;
}

.verauto-motorcycle-header {
    position: relative;
    z-index: 999;
    width: 100%;
    background: var(--verauto-header-bg);
    border-bottom: 1px solid var(--verauto-header-border);
}

.verauto-motorcycle-header.header-listing-fixed {
    position: sticky;
    top: 0;
    box-shadow: var(--verauto-header-shadow);
}

body.admin-bar .verauto-motorcycle-header.header-listing-fixed {
    top: 32px;
}

.verauto-motorcycle-header .verauto-nav-shell {
    min-height: var(--verauto-header-height);
    background: var(--verauto-header-bg) !important;
}

.verauto-motorcycle-header .verauto-header-container {
    min-height: var(--verauto-header-height);
    display: flex;
    align-items: center;
    gap: 28px;
    width: 100%;
}

.verauto-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.verauto-logo {
    display: inline-flex !important;
    align-items: center;
    line-height: 1;
}

.verauto-logo img {
    display: block;
    width: auto !important;
    height: 48px;
    max-width: 180px;
    object-fit: contain;
}

.verauto-brand-name {
    color: var(--verauto-header-text);
    font-size: 24px;
    font-weight: 800;
    text-decoration: none;
}

.verauto-desktop-nav {
    flex: 1 1 auto;
    min-width: 0;
}

.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li {
    float: none !important;
    display: block;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a {
    display: flex !important;
    align-items: center;
    min-height: var(--verauto-header-height);
    padding: 0 !important;
    color: var(--verauto-header-text) !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity 160ms ease;
}

.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a:hover,
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-item > a,
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-ancestor > a {
    opacity: 0.58;
}

.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.menu-item-has-children > a:after {
    content: "\f107";
    font-family: FontAwesome;
    font-size: 11px;
    margin-left: 6px;
}

/* Keep existing WordPress submenu functionality, but modernize its surface. */
.verauto-motorcycle-header .verauto-menu .sub-menu {
    min-width: 220px;
    padding: 10px 0 !important;
    background: #fff !important;
    border: 1px solid var(--verauto-header-border) !important;
    border-radius: 12px;
    box-shadow: 0 18px 46px rgba(20, 27, 35, 0.12);
}

.verauto-motorcycle-header .verauto-menu .sub-menu li a {
    padding: 10px 18px !important;
    color: var(--verauto-header-text) !important;
    background: transparent !important;
    text-transform: none !important;
    font-size: 14px;
    font-weight: 500;
}

.verauto-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.verauto-phone-button {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 17px 8px 13px;
    border-radius: 999px;
    background: var(--verauto-pill-bg) !important;
    color: var(--verauto-pill-text) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: transform 160ms ease, opacity 160ms ease;
}

.verauto-phone-button:hover {
    color: var(--verauto-pill-text) !important;
    opacity: 0.86;
    transform: translateY(-1px);
}

.verauto-phone-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.13);
    font-size: 13px;
}

.verauto-phone-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.verauto-phone-kicker {
    font-size: 10px;
    line-height: 1.05;
    font-weight: 600;
    opacity: 0.66;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.verauto-phone-number {
    font-size: 13px;
    line-height: 1.15;
    font-weight: 700;
    white-space: nowrap;
}

/* Tablet: reduce spacing so the primary menu remains on one line. */
@media (min-width: 992px) and (max-width: 1230px) {
    .verauto-motorcycle-header .verauto-header-container {
        gap: 18px;
    }

    .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu {
        gap: 15px;
    }

    .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a {
        font-size: 12px;
    }

    .verauto-phone-button {
        padding-right: 13px;
    }

    .verauto-phone-kicker {
        display: none;
    }
}

/* Mobile header */
@media (max-width: 767px) {
    :root {
        --verauto-header-height: 68px;
    }

    body.admin-bar .verauto-motorcycle-header.header-listing-fixed {
        top: 46px;
    }

    .verauto-motorcycle-header .verauto-header-container {
        min-height: var(--verauto-header-height);
        gap: 12px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .verauto-logo img {
        height: 38px;
        max-width: 145px;
    }

    .verauto-header-actions {
        margin-left: auto;
    }

    .verauto-mobile-call {
        width: 42px;
        height: 42px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--verauto-header-border);
        border-radius: 50%;
        color: var(--verauto-header-text) !important;
        background: #fff;
        font-size: 15px;
        text-decoration: none !important;
    }

    .verauto-motorcycle-header .verauto-mobile-menu-trigger {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        float: none !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 10px !important;
        display: inline-flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        border: 0 !important;
        border-radius: 50%;
        background: var(--verauto-pill-bg) !important;
        box-shadow: none !important;
    }

    .verauto-motorcycle-header .verauto-mobile-menu-trigger span {
        display: block !important;
        width: 18px !important;
        height: 2px !important;
        margin: 0 auto !important;
        background: #fff !important;
        border: 0 !important;
    }

    .verauto-mobile-nav-wrap {
        width: 100%;
        background: #fff;
    }

    .verauto-motorcycle-header .verauto-mobile-menu-holder {
        position: relative;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border-top: 1px solid var(--verauto-header-border);
        box-shadow: 0 18px 32px rgba(20, 27, 35, 0.07);
    }

    .verauto-motorcycle-header .verauto-mobile-menu-holder .container {
        width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }

    .verauto-motorcycle-header .verauto-mobile-menu {
        margin: 0 !important;
        padding: 8px 0 14px !important;
        list-style: none;
    }

    .verauto-motorcycle-header .verauto-mobile-menu > li {
        float: none !important;
        display: block;
        margin: 0 !important;
        border-bottom: 1px solid rgba(21, 23, 26, 0.07);
    }

    .verauto-motorcycle-header .verauto-mobile-menu > li:last-child {
        border-bottom: 0;
    }

    .verauto-motorcycle-header .verauto-mobile-menu > li > a {
        display: block !important;
        padding: 15px 2px !important;
        color: var(--verauto-header-text) !important;
        background: transparent !important;
        font-size: 15px;
        line-height: 1.3;
        font-weight: 600;
        text-transform: none !important;
        text-decoration: none !important;
    }

    .verauto-motorcycle-header .verauto-mobile-menu .sub-menu {
        position: static !important;
        display: block;
        min-width: 0;
        padding: 0 0 8px 14px !important;
        border: 0 !important;
        border-radius: 0;
        box-shadow: none;
    }
}

@media (max-width: 782px) and (min-width: 768px) {
    body.admin-bar .verauto-motorcycle-header.header-listing-fixed {
        top: 46px;
    }
}

/* =========================================================
   VERAUTO V4 - TRANSPARENT OVERLAY HEADER
   La home parte sotto la header, come nel concept di test.
   Sulle pagine interne resta una superficie chiara leggibile.
   ========================================================= */

:root {
    --verauto-overlay-text: #ffffff;
    --verauto-overlay-border: rgba(255, 255, 255, 0.22);
    --verauto-overlay-pill: rgba(255, 255, 255, 0.12);
    --verauto-scrolled-bg: rgba(12, 15, 18, 0.86);
}

/* HOME: vera sovrapposizione trasparente sul primo blocco/hero. */
body.home .verauto-motorcycle-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background: transparent !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        backdrop-filter 220ms ease;
}

body.admin-bar.home .verauto-motorcycle-header {
    top: 32px;
}

body.home .verauto-motorcycle-header .verauto-nav-shell,
body.home .verauto-motorcycle-header .verauto-header-container {
    background: transparent !important;
}

/* Testi/menu chiari sopra le immagini della hero. */
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a,
body.home .verauto-brand-name {
    color: var(--verauto-overlay-text) !important;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.18);
}

/* CTA telefono in vetro, non in blocco nero pieno. */
body.home .verauto-phone-button {
    color: #fff !important;
    background: var(--verauto-overlay-pill) !important;
    border: 1px solid var(--verauto-overlay-border) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.home .verauto-phone-icon {
    background: rgba(255,255,255,0.14);
}

/* Dopo 40px di scroll: mantiene l'overlay ma diventa leggibile e sticky. */
body.home .verauto-motorcycle-header.is-scrolled {
    background: var(--verauto-scrolled-bg) !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Le pagine interne non necessariamente hanno una hero scura: header chiara. */
body:not(.home) .verauto-motorcycle-header {
    position: sticky !important;
    top: 0;
    background: #fff !important;
    border-bottom: 1px solid rgba(21, 23, 26, 0.10) !important;
    box-shadow: 0 8px 24px rgba(20, 27, 35, 0.05) !important;
}

body.admin-bar:not(.home) .verauto-motorcycle-header {
    top: 32px;
}

/* Dropdown desktop: resta leggibile anche con header trasparente. */
body.home .verauto-motorcycle-header .verauto-menu .sub-menu li a {
    text-shadow: none;
}

/* MOBILE: overlay trasparente in alto, pannello menu solido quando aperto. */
@media (max-width: 767px) {
    body.admin-bar.home .verauto-motorcycle-header,
    body.admin-bar:not(.home) .verauto-motorcycle-header {
        top: 46px;
    }

    body.home .verauto-mobile-call {
        color: #fff !important;
        background: rgba(255,255,255,0.10) !important;
        border-color: rgba(255,255,255,0.25) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    body.home .verauto-motorcycle-header .verauto-mobile-menu-trigger {
        background: rgba(255,255,255,0.12) !important;
        border: 1px solid rgba(255,255,255,0.24) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    body.home .verauto-motorcycle-header.is-scrolled .verauto-mobile-menu-trigger {
        background: rgba(255,255,255,0.16) !important;
    }

    body.home .verauto-mobile-nav-wrap,
    body.home .verauto-motorcycle-header .verauto-mobile-menu-holder {
        background: rgba(12, 15, 18, 0.96) !important;
        border-top-color: rgba(255,255,255,0.10) !important;
    }

    body.home .verauto-motorcycle-header .verauto-mobile-menu > li {
        border-bottom-color: rgba(255,255,255,0.10) !important;
    }

    body.home .verauto-motorcycle-header .verauto-mobile-menu > li > a {
        color: #fff !important;
    }
}

/*
 * OPZIONE LOGO BIANCO:
 * Se il logo attuale e' scuro e perde contrasto sulla hero,
 * decommentare la regola qui sotto.
 *
 * body.home .verauto-logo img {
 *     filter: brightness(0) invert(1);
 * }
 */

/* =========================================================
   VERAUTO V5 - TRUE HERO OVERLAY / MOTORS STICKY CONFLICT FIX
   ========================================================= */

/*
 * IMPORTANT: V5 no longer outputs the parent-theme classes
 * header-listing-fixed / header-listing-unfixed. Those classes can trigger
 * Motors' own sticky-header JS and leave a header-height spacer above the hero.
 */

/* Neutralize any decorative background painted by the original motorcycle nav. */
body.home .verauto-motorcycle-header,
body.home .verauto-motorcycle-header .stm_mc-nav,
body.home .verauto-motorcycle-header .verauto-nav-shell,
body.home .verauto-motorcycle-header .verauto-header-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.home .verauto-motorcycle-header .stm_mc-nav::before,
body.home .verauto-motorcycle-header .stm_mc-nav::after,
body.home .verauto-motorcycle-header::before,
body.home .verauto-motorcycle-header::after {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* True overlay: header never occupies vertical space above the hero. */
body.home .verauto-motorcycle-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 99999 !important;
    margin: 0 !important;
    border: 0 !important;
}

body.admin-bar.home .verauto-motorcycle-header {
    top: 32px !important;
}

/* Remove common spacer elements that may have been left by Motors sticky logic. */
body.home .stm-header-placeholder,
body.home .header-placeholder,
body.home .stm-sticky-placeholder,
body.home .stm-sticky-header-placeholder {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* At page top the surface must be fully transparent. */
body.home .verauto-motorcycle-header:not(.is-scrolled) {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Only after scrolling do we paint the dark glass surface. */
body.home .verauto-motorcycle-header.is-scrolled {
    background: rgba(12, 15, 18, 0.84) !important;
    background-color: rgba(12, 15, 18, 0.84) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* Keep the nav itself transparent while the parent supplies the scrolled glass. */
body.home .verauto-motorcycle-header.is-scrolled .stm_mc-nav,
body.home .verauto-motorcycle-header.is-scrolled .verauto-nav-shell,
body.home .verauto-motorcycle-header.is-scrolled .verauto-header-container {
    background: transparent !important;
}

@media (max-width: 782px) {
    body.admin-bar.home .verauto-motorcycle-header {
        top: 46px !important;
    }
}

/* =========================================================
   VERAUTO V6 - TOP GRADIENT + SCROLLED SATIN GLASS
   ========================================================= */

:root {
    --verauto-top-gradient-1: rgba(7, 12, 14, 0.78);
    --verauto-top-gradient-2: rgba(7, 12, 14, 0.46);
    --verauto-top-gradient-3: rgba(7, 12, 14, 0.16);
    --verauto-glass-bg: rgba(13, 18, 20, 0.66);
    --verauto-glass-border: rgba(255, 255, 255, 0.12);
}

/* Keep the real header surface transparent; V6 paints visual surfaces separately. */
body.home .verauto-motorcycle-header {
    background: transparent !important;
    background-color: transparent !important;
    isolation: isolate;
}

/* Top-of-page gradient, extended below the 86px navigation bar. */
body.home .verauto-motorcycle-header::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 148px !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 1 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: linear-gradient(
        180deg,
        var(--verauto-top-gradient-1) 0%,
        var(--verauto-top-gradient-2) 42%,
        var(--verauto-top-gradient-3) 72%,
        rgba(7, 12, 14, 0) 100%
    ) !important;
    transition: opacity 220ms ease !important;
}

/* The actual glass pane is a second layer and is invisible at the top. */
body.home .verauto-motorcycle-header::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    background: var(--verauto-glass-bg) !important;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    transition: opacity 220ms ease, border-color 220ms ease !important;
}

/* Content always stays above the gradient/glass layers. */
body.home .verauto-motorcycle-header .stm_mc-nav,
body.home .verauto-motorcycle-header .verauto-nav-shell,
body.home .verauto-motorcycle-header .verauto-header-container {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
}

/* Scrolled state: fade out gradient and fade in satin glass. */
body.home .verauto-motorcycle-header.is-scrolled::before {
    opacity: 0 !important;
}

body.home .verauto-motorcycle-header.is-scrolled::after {
    opacity: 1 !important;
    border-bottom-color: var(--verauto-glass-border) !important;
}

/* Parent itself stays transparent: the ::after layer provides the satin surface. */
body.home .verauto-motorcycle-header.is-scrolled {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Make the phone CTA slightly more defined once the glass header is active. */
body.home .verauto-motorcycle-header.is-scrolled .verauto-phone-button {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
}

@media (max-width: 767px) {
    body.home .verauto-motorcycle-header::before {
        height: 118px !important;
    }

    body.home .verauto-motorcycle-header::after {
        backdrop-filter: blur(16px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
    }
}

/* ==========================================================
   VERAUTO V7 - NAV: HOVER PILL + CURRENT PAGE UNDERLINE
   Reference: test header interaction.
   ========================================================== */

/* Keep invisible padding around every link so the hover pill does not
   change the menu geometry when it appears. */
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu {
    gap: 8px !important;
}

.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a {
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    opacity: 1 !important;
    transition:
        color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease !important;
}

/* Hover: translucent rounded pill, like the Consegne item in the test. */
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a:hover,
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a:focus-visible {
    opacity: 1 !important;
    background: rgba(18, 24, 28, 0.065) !important;
    box-shadow: inset 0 0 0 1px rgba(18, 24, 28, 0.035) !important;
}

/* Overlay/home version: white glass pill over the hero. */
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a:hover,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a:focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.11) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.045),
        0 6px 18px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
}

/* On the satin/scrolled header, make the hover pill just a little clearer. */
body.home .verauto-motorcycle-header.is-scrolled .verauto-desktop-nav .verauto-menu > li > a:hover,
body.home .verauto-motorcycle-header.is-scrolled .verauto-desktop-nav .verauto-menu > li > a:focus-visible {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* Current page: full-opacity text + short cyan underline under the label.
   We draw it on LI because A::after may already be used by dropdown arrows. */
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-item > a,
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current_page_item > a,
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-ancestor > a,
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current_page_ancestor > a {
    opacity: 1 !important;
}

.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-item::after,
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current_page_item::after,
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-ancestor::after,
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current_page_ancestor::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -8px;
    height: 3px;
    border-radius: 999px;
    background: #079bd7;
    box-shadow: 0 0 10px rgba(7, 155, 215, 0.16);
    pointer-events: none;
}

/* Keep the current-page underline visible even while that same item is hovered. */
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-item:hover::after,
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current_page_item:hover::after,
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-ancestor:hover::after,
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current_page_ancestor:hover::after {
    opacity: 1;
}

/* Keyboard accessibility without changing the mouse visual. */
.verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a:focus-visible {
    outline: 2px solid rgba(7, 155, 215, 0.75) !important;
    outline-offset: 2px;
}

/* ==========================================================
   VERAUTO V8 - HOVER MATCHES "CHIAMACI" GLASS CTA
   Keeps the cyan underline only for the current page.
   ========================================================== */

/* Neutralize any inherited Motors/theme hover accent. */
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li:hover > a,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a:hover,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a:focus-visible {
    color: #fff !important;
    background: var(--verauto-overlay-pill) !important;
    border: 1px solid var(--verauto-overlay-border) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    text-shadow: none !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
}

/* Same slightly stronger glass used by the CTA once the header is satin/scrolled. */
body.home .verauto-motorcycle-header.is-scrolled .verauto-desktop-nav .verauto-menu > li:hover > a,
body.home .verauto-motorcycle-header.is-scrolled .verauto-desktop-nav .verauto-menu > li > a:hover,
body.home .verauto-motorcycle-header.is-scrolled .verauto-desktop-nav .verauto-menu > li > a:focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    box-shadow: none !important;
}

/* Do not let legacy motorcycle menu rules paint a blue hover layer. */
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li:hover,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-item:hover,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current_page_item:hover {
    background: transparent !important;
}

/* Current-page underline stays cyan; the hover surface itself stays grey/glass. */
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-item:hover::after,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current_page_item:hover::after,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-ancestor:hover::after,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current_page_ancestor:hover::after {
    background: #079bd7 !important;
}

/* ==========================================================
   VERAUTO V9 - INTERACTION POLISH
   Smooth glass hover, no layout shift, refined current item.
   ========================================================== */

/* Reserve the border in the resting state so hover never changes dimensions. */
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a {
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    transition:
        background-color 180ms cubic-bezier(.2,.7,.2,1),
        border-color 180ms cubic-bezier(.2,.7,.2,1),
        color 160ms ease,
        box-shadow 180ms cubic-bezier(.2,.7,.2,1),
        opacity 160ms ease !important;
}

/* Glass hover: same visual language as the CHIAMACI CTA. */
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li:hover > a,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a:hover,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a:focus-visible {
    color: #fff !important;
    background-color: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.22) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 5px 16px rgba(0,0,0,.08) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
}

/* On the satin header the pill remains visible but not brighter than the CTA. */
body.home .verauto-motorcycle-header.is-scrolled .verauto-desktop-nav .verauto-menu > li:hover > a,
body.home .verauto-motorcycle-header.is-scrolled .verauto-desktop-nav .verauto-menu > li > a:hover,
body.home .verauto-motorcycle-header.is-scrolled .verauto-desktop-nav .verauto-menu > li > a:focus-visible {
    background-color: rgba(255,255,255,.13) !important;
    border-color: rgba(255,255,255,.20) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 5px 16px rgba(0,0,0,.07) !important;
}

/* Pressed state: tiny material response without movement. */
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a:active {
    background-color: rgba(255,255,255,.17) !important;
    border-color: rgba(255,255,255,.25) !important;
    transition-duration: 70ms !important;
}

/* Current page: no permanent pill, only the cyan indicator shown in the test. */
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-item:not(:hover) > a,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current_page_item:not(:hover) > a,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-ancestor:not(:hover) > a,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current_page_ancestor:not(:hover) > a {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
}

/* Refine the active underline: compact, clean and slightly luminous. */
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-item::after,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current_page_item::after,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current-menu-ancestor::after,
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li.current_page_ancestor::after {
    height: 2px !important;
    bottom: -6px !important;
    border-radius: 2px !important;
    background: #079bd7 !important;
    box-shadow: 0 0 7px rgba(7,155,215,.24) !important;
}

/* Keep focus accessible while retaining the same glass shape. */
body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a:focus-visible {
    outline: 1px solid rgba(255,255,255,.55) !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    body.home .verauto-motorcycle-header .verauto-desktop-nav .verauto-menu > li > a {
        transition: none !important;
    }
}