/* ============================================
   LANOIRA — LUXURY MENU REDESIGN
   Overrides navigation.css mega menu defaults
   Palette: Champagne Gold #D4A373 · Blush #f6e4e4 · Deep Charcoal rgba(30,30,30)
   ============================================ */


/* ==============================
   MENU BAR — L1 NAVIGATION LINKS
   ============================== */

.menu-bar .primary-menu > .menu-item > a,
.menu-bar #primary-menu > .menu-item > a,
.menu-bar .nav-menu > .menu-item > a,
.menu-bar .primary-menu > li > a,
.menu-bar #primary-menu > li > a,
.menu-bar .nav-menu > li > a {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 1.25rem 1.75rem !important;
    transition: color 0.3s ease !important;
}

/* Hover — gold text, no background block */
.menu-bar .primary-menu > .menu-item > a:hover,
.menu-bar .primary-menu > .menu-item > a:focus,
.menu-bar #primary-menu > .menu-item > a:hover,
.menu-bar #primary-menu > .menu-item > a:focus,
.menu-bar .nav-menu > .menu-item > a:hover,
.menu-bar .nav-menu > .menu-item > a:focus,
.menu-bar .primary-menu > li > a:hover,
.menu-bar #primary-menu > li > a:hover,
.menu-bar .nav-menu > li > a:hover {
    background: transparent !important;
    color: #D4A373 !important;
}

/* Active / current ancestor — gold */
.menu-bar .primary-menu > .menu-item.current-menu-ancestor > a,
.menu-bar .primary-menu > .menu-item.current-menu-item > a,
.menu-bar #primary-menu > .menu-item.current-menu-ancestor > a,
.menu-bar #primary-menu > .menu-item.current-menu-item > a,
.menu-bar .nav-menu > .menu-item.current-menu-ancestor > a,
.menu-bar .nav-menu > .menu-item.current-menu-item > a {
    background: transparent !important;
    color: #D4A373 !important;
}


/* ==============================
   MEGA MENU CONTAINER
   ============================== */

.menu-bar .mega-menu,
.menu-bar ul.mega-menu,
.menu-bar .sub-menu.mega-menu,
.menu-bar .has-mega-menu > .mega-menu {
    border: 1px solid rgba(212, 163, 115, 0.2) !important;
    padding: 3rem !important;
}

/* Thin champagne gold accent line across the top */
.menu-bar .sub-menu.mega-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 163, 115, 0.6) 30%,
        rgba(212, 163, 115, 0.8) 50%,
        rgba(212, 163, 115, 0.6) 70%,
        transparent 100%
    );
    pointer-events: none;
}


/* ==============================
   L2 — COLUMN HEADERS
   ============================== */

.mega-menu > .menu-item > a,
.mega-menu > li > a,
ul.mega-menu > .menu-item > a,
ul.mega-menu > li > a {
    font-family: 'Playfair Display', serif !important;
    font-weight: 900 !important;
    font-style: italic !important;
    font-size: 24px !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    color: #D4A373 !important;
    border-bottom: 1px solid rgba(212, 163, 115, 0.25) !important;
    padding: 0 0 0.875rem 0 !important;
    margin-bottom: 0.875rem !important;
    transition: color 0.3s ease !important;
}

.mega-menu > .menu-item > a:hover,
.mega-menu > li > a:hover,
ul.mega-menu > .menu-item > a:hover,
ul.mega-menu > li > a:hover {
    color: #e8bc85 !important;
    padding-left: 0 !important;
}


/* ==============================
   L3 — SUB-LINKS
   ============================== */

.menu-bar .mega-menu .sub-menu .menu-item a,
.menu-bar .mega-menu .sub-menu li a,
.menu-bar ul.mega-menu .sub-menu .menu-item a,
.menu-bar ul.mega-menu .sub-menu li a {
    font-family: 'Garamond', Serif !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: 0.4px !important;
    color: rgba(246, 228, 228, 0.65) !important;
    padding: 0.45rem 0 !important;
    transition: color 0.3s ease, padding-left 0.25s ease !important;
}

.menu-bar .mega-menu .sub-menu .menu-item a:hover,
.menu-bar .mega-menu .sub-menu li a:hover,
.menu-bar ul.mega-menu .sub-menu .menu-item a:hover,
.menu-bar ul.mega-menu .sub-menu li a:hover {
    color: #D4A373 !important;
    padding-left: 0.5rem !important;
    background: transparent !important;
}


/* ==============================
   MEGA MENU ARROW BUTTON
   ============================== */

.mega-menu-arrow {
    background: rgba(212, 163, 115, 0.1) !important;
    border: 1px solid rgba(212, 163, 115, 0.25) !important;
    color: #D4A373 !important;
    transition: all 0.3s ease !important;
}

.mega-menu-arrow:hover {
    background: rgba(212, 163, 115, 0.2) !important;
    border-color: rgba(212, 163, 115, 0.5) !important;
}

/* ============================================
   MOBILE MENU — LUXURY TYPOGRAPHY
   Matches navigation.css specificity within
   @media (max-width: 1024px) blocks
   ============================================ */
 
@media (max-width: 1024px) {
 
    /* L1 — Top level links (For Him, For Her, etc.) */
    .mobile-nav-menu > li > a,
    #mobile-primary-menu > li > a {
        font-family: 'Playfair Display', serif !important;
        font-style: italic !important;
        font-weight: 800 !important;
        font-size: 18px !important;
        letter-spacing: 0.3px !important;
        color: #2c2222 !important;
    }
 
    /* L2 — Sub-menu links (Masturbators, Vibrators, etc.) */
    .mobile-nav-menu .sub-menu > li > a,
    #mobile-primary-menu .sub-menu > li > a {
        font-family: 'Playfair Display', serif !important;
        font-style: italic !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        letter-spacing: 0.3px !important;
        color: #D4A373 !important;
        background: #f9f9f9 !important;
    }
 
    /* L3 — Sub-sub-menu links (Manual Strokers, etc.) */
    .mobile-nav-menu .sub-menu .sub-menu a,
    #mobile-primary-menu .sub-menu .sub-menu a {
        font-family: 'Garamond', serif !important;
        font-style: normal !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        letter-spacing: 0.3px !important;
        color: #6b5c5c !important;
        background: #f5f5f5 !important;
    }
 
    /* Hover states */
    .mobile-nav-menu > li > a:hover,
    #mobile-primary-menu > li > a:hover {
        color: #4a0e0e !important;
        background: transparent !important;
    }
 
    .mobile-nav-menu .sub-menu > li > a:hover,
    #mobile-primary-menu .sub-menu > li > a:hover {
        color: #b8864e !important;
        background: #f5f0eb !important;
    }
 
    .mobile-nav-menu .sub-menu .sub-menu a:hover,
    #mobile-primary-menu .sub-menu .sub-menu a:hover {
        color: #D4A373 !important;
        background: #f5f0eb !important;
    }
 
    /* Divider lines — warm tint instead of plain grey */
    .mobile-nav-menu li,
    #mobile-primary-menu li {
        border-bottom: 1px solid rgba(212, 163, 115, 0.15) !important;
    }
 
    /* Sub-menu background — warm off-white */
    #mobile-primary-menu ul.sub-menu,
    .mobile-nav-menu ul.sub-menu {
        background: #faf8f6 !important;
        border-top: 1px solid rgba(212, 163, 115, 0.2) !important;
    }
}