/**
 * Porto Child Theme — Usatomania
 * 
 * Header, Top Banner, Mobile Menu, Navigation, CTA Buttons
 */

/* =============================================
   14. TASK 5.3 — Hide "Impostazioni/Settings" in Mobile Menu
   ============================================= */
/* Hide Account/Settings tab in mobile nav — keep only the first (Menu) tab.
   Use nth-child(n+3) instead of :last-child to avoid hiding the menu
   when Porto DOM has a single nav-sections pair. */
.nav-sections .nav-sections-items > *:nth-child(n+3) {
    display: none !important;
}


/* =============================================
   15. TASK 5.4 — Remove "Menu" and "Features" Nav Items
   ============================================= */
.navigation li.level0 > a span:not([class]) {
    /* Nav items are controlled by Megamenu admin - use CSS to hide specific ones */
}
/* Hide nav items by their text content - using attribute selectors on links */
.navigation li.level0 a[href*="/menu"],
.navigation li.level0 a[href*="/features"],
.navigation li.level0 a[href*="menu.html"],
.navigation li.level0 a[href*="features.html"] {
}
/* Also hide the parent li if possible */
.navigation li.level0:has(> a[href*="/menu"]),
.navigation li.level0:has(> a[href*="/features"]),
.navigation li.level0:has(> a[href*="menu.html"]),
.navigation li.level0:has(> a[href*="features.html"]) {
}


/* =============================================
   16. TASK 5.5 — Mobile Logo: Centered & Larger
   ============================================= */
@media (max-width: 767px) {
    .page-header .header-main .header.content.header-row {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .page-header .header-main .header-left {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }
    .page-header .header-main .header-left .nav-toggle {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    .page-header .header-main .header-left .logo {
        margin: 0 auto;
    }
    .page-header .header-main .header-left .logo img {
        max-height: 38px;
        width: auto;
        height: auto;
    }
    .page-header .header-main .header-right {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    .page-header .header-main .header-center {
        width: 100%;
        justify-content: flex-start;
    }
}


/* =============================================
   20. TASK 5.9 — Top Banner: Copy Usatomania
   ============================================= */
/* Banner styling - the text content is set via CMS/admin config */
.page-header .main-panel-top,
.page-header .header-top,
.topbar-wrapper,
.top-bar {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.5px;
}


/* =============================================
   28. HEADER — Top Bar Info & Social Styling
   ============================================= */
/* Top bar contact info row */
.usm-header-top-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.usm-header-top-info a {
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
}
.usm-header-top-info a:hover {
    color: var(--usm-gold, #efbf17);
}
.usm-header-top-info i {
    margin-right: 3px;
}
/* Gap separator */
.header-top .gap {
    opacity: 0.3;
    margin: 0 6px;
}
@media (max-width: 767px) {
    .usm-header-top-info {
        display: none;
    }
    .header-top .gap {
        display: none;
    }
}


/* =============================================
   29. HEADER — Menu CTA Appuntamenti Styling
   ============================================= */
/* CTA "Prenota Appuntamento" nel menu header desktop */
.sw-megamenu .usm-menu-cta > a.level-top {
    background-color: var(--usm-gold, #efbf17) !important;
    font-weight: 700 !important;
    border-radius: 6px;
    padding: 8px 18px !important;
    margin-left: 10px;
    transition: all 0.3s ease;
}
.sw-megamenu .usm-menu-cta > a.level-top:hover {
    background-color: var(--usm-primary, #EBBD17) !important;
    color: #fff !important;
}
.sw-megamenu .usm-menu-cta > a.level-top i {
    margin-right: 5px;
}


/* =============================================
   30. MOBILE — CTA Appuntamenti Fixed Bottom
   ============================================= */
/* Bottone fisso in basso su mobile per prenotare appuntamento */
.usm-mobile-cta-bar {
    display: none;
}
@media (max-width: 767px) {
    .usm-mobile-cta-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: var(--usm-primary, #EBBD17);
        padding: 0;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    }
    .usm-mobile-cta-bar a {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        font-size: 14px;
        padding: 16px 12px;
        min-height: 56px; /* touch target >= 44px */
        text-align: center;
        gap: 8px;
    }
    .usm-mobile-cta-bar a.usm-cta-primary {
        background: black;
        color: var(--usm-primary, #EBBD17);
    }
    .usm-mobile-cta-bar a.usm-cta-secondary {
        background: var(--usm-primary, #EBBD17);
        color: #fff;
    }
    .usm-mobile-cta-bar a:active {
        opacity: 0.85;
    }
    .usm-mobile-cta-bar i {
        font-size: 16px;
    }
    /* Prevent content from being hidden behind the fixed bar */
    body {
        padding-bottom: 56px;
    }
    /* Ensure cart summary on cart page isn't hidden behind our bar */
    .checkout-cart-index .cart-summary {
        bottom: 56px;
    }
}


/* =============================================
   31. HEADER — Mobile Touch Targets & Spacing
   ============================================= */
@media (max-width: 767px) {
    /* Ensure all header interactive elements have min 44px touch target */
    .page-header .nav-toggle,
    .page-header .action.showcart,
    .page-header .header-right a,
    .page-header .header-right button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Search trigger — ensure visible and tappable */
    .page-header .block-search .action.search,
    .page-header .minisearch .action.search {
        min-width: 44px;
        min-height: 44px;
    }
    /* Nav panel: ensure links are tappable */
    .nav-sections .navigation li.level0 > a {
        padding: 14px 16px;
        min-height: 48px;
        display: flex;
        align-items: center;
        font-size: 15px;
    }
    /* Sticky header on mobile — ensure it doesn't overflow */
    .page-header.sticky-header {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}


/* =============================================
   32. HEADER — Notice Bar Close Button Hide
   ============================================= */
/* Porto notice bar: hide close button to keep brand message always visible */
.porto-block-html-top .close-notice,
.porto-block-html-top .porto-notice-close {
    display: none !important;
}


/* ==========================================================================
   #39 — FLOATING APPOINTMENT CTA (desktop only)
   ========================================================================== */
.usm-floating-cta {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1;
}
.usm-floating-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--usm-gold, #efbf17);
    color: var(--usm-primary, #EBBD17);
    padding: 14px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    line-height: 1;
}
.usm-floating-btn:hover {
    background: var(--usm-primary, #EBBD17);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
    text-decoration: none !important;
}
.usm-floating-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
}
/* Hide on mobile (mobile CTA bar is already visible) */
@media (max-width: 767px) {
    .usm-floating-cta { display: none; }
}


/* ============================================
   #53 — MENU DESKTOP: nomi corti, no overflow
   ============================================ */
@media (min-width: 992px) {
    .navigation .level0 > a {
        font-size: 13px !important;
        padding: 10px 12px !important;
        white-space: nowrap;
        letter-spacing: 0;
    }
    /* Megamenu dropdown (no accordion) — clean look */
    .navigation .level0 .submenu {
        background: #fff;
        border-top: 3px solid var(--usm-primary, #EBBD17);
        box-shadow: 0 8px 30px rgba(0,0,0,.12);
        padding: 20px 25px;
    }
    .navigation .level0 .submenu .level1 > a {
        font-size: 13px;
        color: #333;
        padding: 6px 0;
    }
    .navigation .level0 .submenu .level1 > a:hover {
        color: var(--usm-primary, #EBBD17);
    }
    /* Menu items: compact spacing */
    .navigation .level0 {
        margin: 0 !important;
    }
}


/* ============================================
   #54 — MENU MOBILE: lista pulita, no accordion brutto
   ============================================ */
@media (max-width: 991px) {
    /* Mobile nav: clean vertical list */
    .nav-sections-item-content .navigation .level0 > a {
        font-size: 14px;
        padding: 12px 15px;
        border-bottom: 1px solid #eee;
        color: #333;
    }
    .nav-sections-item-content .navigation .level0.active > a,
    .nav-sections-item-content .navigation .level0 > a:hover {
        color: var(--usm-primary, #EBBD17);
        background: #f8f8f8;
    }
    /* Submenu: indented, clean */
    .nav-sections-item-content .navigation .level0 .submenu a {
        font-size: 13px;
        padding: 10px 15px 10px 30px;
        border-bottom: 1px solid #f4f4f4;
    }
}


/* Additional Rules */
@media (min-width: 992px) {
    .page-header.type14 .navigation:not(.side-megamenu) > ul {
        flex-wrap: unset !important;
    }
}

/* --- ANNOUNCE BAR (marquee) --- */
.usm-hp-announce {
    background: black;
    overflow: hidden;
    height: 42px;
    display: flex;
    align-items: center;
}
.usm-hp-announce-track {
    display: flex;
    animation: usm-hp-marquee 40s linear infinite;
    white-space: nowrap;
}
.usm-hp-announce-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 48px;
    color: var(--hp-sage-light);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.usm-hp-dot {
    width: 4px;
    height: 4px;
    background: var(--hp-rust);
    border-radius: 50%;
    flex-shrink: 0;
}
@keyframes usm-hp-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}