/*
 * rollsfloor-header-nav-fix.css
 * Fixes dropdown/submenu positioning on all pages (services, about, contact, etc.)
 * The homepage and product-detail pages work because their Elementor post CSS
 * already supplies these rules. This file makes them universal.
 *
 * USAGE: enqueue / link this file in header.php AFTER all other stylesheets.
 *   <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/header-nav-fix.css" media="all" />
 */

/* ── 0. Global CSS variable fallbacks ────────────────────────────────────────
   The header's Elementor post-17 CSS uses --e-global-color-* variables that
   are normally defined in elementor-post-9 (the kit CSS), scoped to
   .elementor-kit-9 on the body. On inner pages (service details, about,
   contact, etc.) the static-page head does NOT include that stylesheet, so
   the variables resolve to nothing and the header loses its white background,
   pill border-radius, and correct link colours.

   Fix: define the same variables on :root so they are always available. */
:root {
    --e-global-color-primary:         #1D1D1D;
    --e-global-color-secondary:       #FFFFFF;
    --e-global-color-text:            #575757;
    --e-global-color-accent:          #ca0a0f;
    --e-global-color-accentsecondary: #D5B471;
    --e-global-color-white:           #FFFFFF;
    --e-global-color-black:           #000000;
    --e-global-color-divider:         #1D1D1D14;
    --e-global-color-darkdivider:     #FFFFFF14;
    --e-global-color-background:      #F7F7F7;

    --e-global-typography-primary-font-family:   "ClashGrotesk-Variable";
    --e-global-typography-primary-font-size:     48px;
    --e-global-typography-primary-font-weight:   500;
    --e-global-typography-primary-line-height:   1.1em;
    --e-global-typography-secondary-font-family: "ClashGrotesk-Variable";
    --e-global-typography-secondary-font-size:   20px;
    --e-global-typography-secondary-font-weight: 500;
    --e-global-typography-secondary-line-height: 1.2em;
    --e-global-typography-text-font-family:      "Inter";
    --e-global-typography-text-font-size:        16px;
    --e-global-typography-text-font-weight:      400;
    --e-global-typography-text-line-height:      1.6em;
    --e-global-typography-accent-font-family:    "Inter";
    --e-global-typography-accent-font-size:      16px;
    --e-global-typography-accent-font-weight:    600;
    --e-global-typography-accent-line-height:    1em;
}

/* ── 1. Header outer container ─────────────────────────────────────────────
   Use a descendant selector (not >) so this rule fires regardless of any
   extra wrapper divs that some pages (e.g. products, WooCommerce) insert
   between .elementor-17 and .elementor-element-6daa84a. */
.elementor-17 .elementor-element-6daa84a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
}

/* ── 2. Inner container – prevent nav items from wrapping ───────────────── */
.elementor-17 .elementor-element-afd9735 {
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
}

/* ── 3. Nav menu – keep all top-level items on one row ─────────────────── */
.elementor-17 .ekit-wid-con .elementskit-navbar-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* ── 4. Each top-level nav item must be positioned:relative ─────────────── 
   This is the anchor point for the first-level dropdown panel. */
.elementor-17 .elementskit-navbar-nav > li.nav-item {
    position: relative !important;
}

/* ── 5. First-level dropdown panel ─────────────────────────────────────── */
.elementor-17 .elementskit-navbar-nav > li > .elementskit-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
    min-width: 220px !important;
    /* visibility is toggled by JS/hover; preserve those states */
}

/* ── 6. Second-level (flyout) items must also be position:relative ──────── */
.elementor-17 .elementskit-dropdown > li.nav-item {
    position: relative !important;
}

/* ── 7. Third-level (flyout) dropdown panel ─────────────────────────────── 
   Must sit flush to the RIGHT of its parent li, NOT break out of the DOM
   and float as a separate detached block. */
.elementor-17 .elementskit-dropdown > li > .elementskit-dropdown {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;     /* attach to the right edge of the parent item */
    right: auto !important;
    z-index: 1001 !important;
    min-width: 220px !important;
}

/* Flip to left side if near the right viewport edge */
@media (min-width: 1025px) {
    .elementor-17 .elementskit-dropdown > li:hover > .elementskit-dropdown {
        /* JS adds .active; this handles pure-CSS hover fallback */
        display: block !important;
    }
}

/* ── 8. Prevent the nav menu row from collapsing on inner pages ─────────── 
   Some pages don't load elementor-post-17 CSS which normally sets min-height
   on the header row. Guard against zero-height collapse. */
.elementor-17 .elementor-element-afd9735.e-con {
    min-height: 80px !important;
    align-items: center !important;
}

/* ── 9. Mobile – reset flyout to stack vertically ───────────────────────── */
@media (max-width: 1024px) {
    .elementor-17 .elementskit-dropdown > li > .elementskit-dropdown {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        box-shadow: none !important;
    }
}

/* fixed section */
/* Hide ALL elementskit indicators everywhere - stop JS fighting */
/* .elementskit-submenu-indicator {
    display: none !important;
} */

/* Draw arrow on the LI that has children, targeting the direct child anchor */
/* .elementskit-navbar-nav > li.menu-item-has-children > a::after,
.elementskit-dropdown li.menu-item-has-children > a::after {
    content: "\203A" !important;
    display: inline-block !important;
    margin-left: 5px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    font-style: normal !important;
    font-weight: normal !important;
    opacity: 1 !important;
    visibility: visible !important;
} */

/* Top level uses down-pointing › rotated */
/* .elementskit-navbar-nav > li.menu-item-has-children > a::after {
    content: "\203A" !important;
    display: inline-block !important;
    transform: rotate(90deg) !important;
    transform-origin: center !important;
    margin-left: 5px !important;
    font-size: 14px !important;
} */

/* Submenu items keep › pointing right */
/* .elementskit-dropdown li.menu-item-has-children > a::after {
    content: "\203A" !important;
    transform: none !important;
} */

/* Remove down arrow from top-level nav items (Services, Products) */
/* .elementskit-navbar-nav > li.menu-item-has-children > a::after {
    display: none !important;
} */


/* ends */

/* Generic ElementsKit menu fallback for non-Elementor pages */
.elementskit-menu-container .elementskit-navbar-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.elementskit-menu-container .elementskit-navbar-nav > li.nav-item {
    position: relative !important;
}

.elementskit-menu-container .elementskit-navbar-nav > li > .elementskit-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1000 !important;
    min-width: 220px !important;
}

.elementskit-menu-container .elementskit-dropdown > li.nav-item {
    position: relative !important;
}

.elementskit-menu-container .elementskit-dropdown > li > .elementskit-dropdown {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    right: auto !important;
    z-index: 1001 !important;
    min-width: 220px !important;
}

.elementskit-menu-container .elementskit-navbar-nav .menu-item-has-children > a,
.elementskit-menu-container .elementskit-dropdown .menu-item-has-children > a,
.menu-item-has-children > a {
    position: relative !important;
    padding-right: 1.85em !important;
}

/* Hide all plugin-generated submenu indicators globally */
.elementskit-menu-container .elementskit-submenu-indicator,
.elementskit-menu-container .ekit-submenu-indicator-icon,
.elementskit-submenu-indicator,
.ekit-submenu-indicator-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Top-level items (Services, Products) - down arrow on ALL pages */
.elementskit-menu-container .elementskit-navbar-nav > li.menu-item-has-children > a::after,
.elementskit-menu-container .elementskit-navbar-nav > li.elementskit-dropdown-has > a::after,
.elementskit-navbar-nav > li.menu-item-has-children > a::after,
.elementskit-navbar-nav > li.elementskit-dropdown-has > a::after,
li.nav-item.menu-item-has-children > a::after {
    content: "\203A" !important;
    position: absolute !important;
    right: 0.4em !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(90deg) !important;
    color: currentColor !important;
    font-size: 14px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    font-style: normal !important;
    font-weight: normal !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Submenu items (Carpets, Parquet etc) - right arrow on ALL pages */
.elementskit-menu-container .elementskit-dropdown li.menu-item-has-children > a::after,
.elementskit-menu-container .elementskit-dropdown li.elementskit-dropdown-has > a::after,
.elementskit-dropdown li.menu-item-has-children > a::after,
.elementskit-dropdown li.elementskit-dropdown-has > a::after {
    content: "\203A" !important;
    position: absolute !important;
    right: 0.4em !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: currentColor !important;
    font-size: 14px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    font-style: normal !important;
    font-weight: normal !important;
    opacity: 1 !important;
    visibility: visible !important;
}