/**
 * File: header-mega-menu-images.css
 * Purpose: Controls dynamic image background changes in mega menu dropdowns (desktop only)
 * Usage: Applies to `.main-nav .mega-menu` structure, targeting `.menu-image` blocks
 * Dependencies: Requires menu HTML structure where `.menu-header` and `.menu-image` are siblings
 *
 * Notes:
 * - Uses advanced CSS selectors including `:has()` and `~` to conditionally update images
 * - Image block appears as the last `<li class="menu-image">` in each submenu
 * - Each menu section (e.g. Collections, Ceiling, Wall) is targeted using `nth-child`
 * - Supports hover and focus-based interaction for keyboard accessibility
 * - Resets to default images when no submenu item is hovered or focused
 * - Images are controlled via CSS variables (e.g., --menu-image-collection-ds-artdeco)
 *
 *
 * ATTENTION: Mega-menus are currently not in use on this site.  This file is out of date. 
 * If enabling mega-menus in the future, update this file to the correct amount of menu items
 * and declare and update scoped variables. 
 * See REFERENCE-BACKUP-header-mega-menu-image.css for build reference.
 * Remove this note when mega-menu is enabled.
 */




/* ------------------------- * 
* ---- Scoped Variables ---- *
---------------------------- */

.main-nav {
    --mega-menu-image-bg-color: var(--white);
    --mega-menu-fallback-image: url('/wp-content/uploads/2025/04/menu-image-test-1920x674_01.webp'); /* example image url */
}

/* ====================================================================================
   GLOBAL STYLES – Applies to all mega menu image containers
======================================================================================= */

/* Mega menu image container */
.main-nav .mega-menu > ul > li.menu-image {
    margin-right: 20px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center !important;
    transition: all 500ms ease-in-out !important;
    background-color: var(--mega-menu-image-bg-color);
}


/* ------- Image Container Images ------- */
/* Default background image if no other exists */
.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-image {
    background-image: var(--mega-menu-fallback-image);
}


/* ========================================================================================
    WALL MENU STYLES – Mega menu section 1 - Single Column Layout
   Applies to: .main-nav li:nth-child(1 of .mega-menu)
======================================================================================== */
.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-image {
    background-image: var(--menu-image-wall);
}

/* Detect hover on submenu items (.sconces, .adawall, .bathroomwall, .ledwall, .outdoorwall) and apply effect to .menu-header */
.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-header > ul > li:hover + li.menu-header,
.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-header > ul > li:focus-within + li.menu-header
{
    background-color: inherit; /* Ensure hover is registered */
}

/* Update .menu-image when hovering over different wall items */
.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-header:has(ul > li.sconces:hover) + li.menu-image,
.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-header:has(ul > li.sconces:focus-within) + li.menu-image
{
    background-image: var(--menu-image-wall-sconces);
}

.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-header:has(ul > li.adawall:hover) + li.menu-image,
.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-header:has(ul > li.adawall:focus-within) + li.menu-image
{
    background-image: var(--menu-image-wall-ada);
}

.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-header:has(ul > li.bathroomwall:hover) + li.menu-image,
.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-header:has(ul > li.bathroomwall:focus-within) + li.menu-image
{
    background-image: var(--menu-image-wall-bathroom);
}

.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-header:has(ul > li.ledwall:hover) + li.menu-image,
.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-header:has(ul > li.ledwall:focus-within) + li.menu-image
{
    background-image: var(--menu-image-wall-led);
}

.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-header:has(ul > li.outdoorwall:hover) + li.menu-image,
.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-header:has(ul > li.outdoorwall:focus-within) + li.menu-image
{
    background-image: var(--menu-image-wall-outdoor);
}

/* --- Reset to default image when not hovering ---------------------------------------- */
.main-nav li:nth-child(1 of .mega-menu) ul > li.menu-header:not(:has(ul > li:hover)) + li.menu-image
{
    background-image: var(--menu-image-wall);
}