/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* Product thumbnail images - only target thumbnails, not indicators */
#mega-menu-menu-1 a.mega-menu-link img.menu-product-thumbnail {
    float: right !important;
    width: 87px !important;
    height: 87px !important;
    margin-left: 10px !important;
    order: 2 !important;
}

/* Product title text - prevent wrapping */
#mega-menu-menu-1 a.mega-menu-link .menu-product-title {
    display: inline-block !important;
    max-width: calc(100% - 100px) !important;
}

/* ================================================
   Produkter/Products Menu - Auto-generated items hover fix
   ================================================ */

/* Make auto-generated submenus visible on hover */
@media only screen and (min-width: 1025px) {
    /* Level 1: Show submenu when hovering Produkter (Danish) or Products (English) */
    #mega-menu-menu-1 li.mega-menu-item-11700:hover > ul.mega-sub-menu,
    #mega-menu-menu-1 li.mega-menu-item-11721:hover > ul.mega-sub-menu {
        visibility: visible !important;
        opacity: 1 !important;
        transform: translate(0, 0) !important;
    }

    /* Level 2: Show submenu when hovering auto-generated categories */
    #mega-menu-menu-1 li.mega-menu-item-auto-generated.mega-menu-item-has-children:hover > ul.mega-sub-menu {
        visibility: visible !important;
        opacity: 1 !important;
        transform: translate(0, 0) !important;
        display: block !important;
    }

    /* Also handle nested submenus */
    #mega-menu-menu-1 li.mega-menu-item-auto-generated.mega-menu-item-has-children:hover > ul.mega-sub-menu li.mega-menu-item-has-children:hover > ul.mega-sub-menu {
        visibility: visible !important;
        opacity: 1 !important;
        transform: translate(0, 0) !important;
        display: block !important;
    }
}

/* ================================================
   Header Category Styling (overskrift_sub_level)
   ================================================ */

/* Style header categories with blue background */
#mega-menu-menu-1 li.mega-menu-item-header > a.mega-menu-link,
#mega-menu-menu-1 li.mega-menu-item-header > a.mega-menu-link:link,
#mega-menu-menu-1 li.mega-menu-item-header > a.mega-menu-link:visited {
    background-color: #005a87 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Keep hover effect on headers (they should be clickable) */
#mega-menu-menu-1 li.mega-menu-item-header > a.mega-menu-link:hover,
#mega-menu-menu-1 li.mega-menu-item-header:hover > a.mega-menu-link {
    background-color: #005a87 !important;
    color: #ffffff !important;
}

/* Ensure all menu items have indicators on the right */
#mega-menu-menu-1 li.mega-menu-item-has-children > a.mega-menu-link:after {
    float: right !important;
    margin-left: auto !important;
}

/* Keep mega-indicator always to the right - matching bbtfiberoptic.dk */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children > a.mega-menu-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}


/* ================================================
   Add dropdown indicator to top-level Produkter/Products menu
   ================================================ */

/* DESKTOP: HIDE the arrow on Produkter menu */
@media only screen and (min-width: 1025px) {
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-11700 > a.mega-menu-link::after,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-11721 > a.mega-menu-link::after {
        display: none !important;
        content: none !important;
    }
}

/* MOBILE ONLY: Add indicator to Produkter menu (Danish - mega-menu-item-11700) */
@media only screen and (max-width: 1024px) {
    /* Hide Max Mega Menu's default indicator on Produkter/Products */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-11700 > a.mega-menu-link > span.mega-indicator,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-11721 > a.mega-menu-link > span.mega-indicator {
        display: none !important;
    }

    /* Add our custom indicator */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-11700 > a.mega-menu-link::after {
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 800 !important;
        font-size: 12px !important;
        content: "\f107" !important; /* fa-angle-down */
        margin-left: auto !important; /* Push to the right */
        display: inline-block !important;
    }

    /* Add indicator to Products menu (English - mega-menu-item-11721) */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-11721 > a.mega-menu-link::after {
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 800 !important;
        font-size: 12px !important;
        content: "\f107" !important; /* fa-angle-down */
        margin-left: auto !important; /* Push to the right */
        display: inline-block !important;
    }
}

/* Style the top-level menu items with children to show indicator */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout > a.mega-menu-link > span.mega-indicator:after {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    content: "\f107" !important; /* fa-angle-down */
}

/* Submenu indicators (pointing right) */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-flyout li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    content: "\f105" !important; /* fa-angle-right */
}

/* Mobile: indicator pointing up when menu is open */
@media only screen and (max-width: 1024px) {
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item > ul.mega-sub-menu {
    display: none !important;
    visibility: visible;
    opacity: 1;
  }
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu,
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu.mega-menu-item.mega-toggle-on ul.mega-sub-menu {
    display: block !important;
  }
    /* Make entire menu item clickable - not just the arrow */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children {
        cursor: pointer !important;
    }

    /* Ensure mobile menu items are clickable and show pointer */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children > a.mega-menu-link {
        cursor: pointer !important;
        pointer-events: auto !important;
        width: 100% !important;
        display: block !important;
    }

    /* Make sure indicators are clickable */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
        pointer-events: auto !important;
    }

    #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator::after {
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 800 !important;
        font-size: 12px !important;
        content: "\f106" !important; /* fa-angle-up */
    }

    /* Mobile: Produkter/Products menu when open (Danish & English) */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-11700.mega-toggle-on > a.mega-menu-link::after,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-11721.mega-toggle-on > a.mega-menu-link::after {
        content: "\f106" !important; /* fa-angle-up */
    }

    /* Mobile: Fix navigation width - remove horizontal margins */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item {
        display: list-item !important;
        margin: 0 !important;
    }

    /* Mobile: Fix parent container to align items vertically */
    .elementor-widget-maxmegamenu {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        position: absolute;
        right: 106px;
        top: 43px;
        z-index:999999;
    }
    .cpel-switcher--drop-to-down {
        left: -76px;
    }

    /* Mobile: Fix navigation wrapper to not be full width */
    #mega-menu-wrap-menu-1 {
        width: auto !important;
        margin-left: 10px !important;
    }
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
	    vertical-align: sub;
	}

}
@media only screen and (max-width: 767px) {
#mega-menu-menu-1 a.mega-menu-link img.menu-product-thumbnail {
	margin-top: 10px;
}
    .elementor-widget-maxmegamenu {
        right: 50%;
        top: 62%;
        transform: translate(24px, 0px);
    }
    .elementor-widget-search-form {
        right: 45px;
    }
    .cpel-switcher--drop-to-down {
        left: 35px;
    }
}




/* ================================================
   Category Sidebar Styling
   ================================================ */

.fiber-category-sidebar {
    width: 100%;
}

/* Category items - list style with image on right */
.fiber-category-sidebar a.fiber-cat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #00537f;
    padding: 12px 15px;
    border-bottom: 1px solid #5AC8FA;
    transition: all 0.2s ease;
}

.fiber-category-sidebar a.fiber-cat-item:hover {
    background-color: #f5f5f5;
}

/* Category content wrapper (left side) */
.fiber-category-sidebar .fiber-cat-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    font-family: "Barlow", Sans-serif;
}

/* Category name */
.fiber-category-sidebar .fiber-cat-name {
    font-size: 16px;
    font-weight: 500;
    color: #00537f;
    margin-bottom: 6px;
}

/* Read more text */
.fiber-category-sidebar .fiber-cat-read-more {
    font-size: 0.8em;
    font-weight: 500;
    color: #5AC8FA;
}

/* Category thumbnail (right side) */
.fiber-category-sidebar .fiber-cat-thumb {
    width: 87px;
    height: 87px;
    object-fit: cover;
    margin-left: 15px;
    flex-shrink: 0;
}

/* Current active category */
.fiber-category-sidebar a.fiber-cat-item.current-cat {
    background-color: #f0f0f0;
}

.fiber-category-sidebar a.fiber-cat-item.current-cat .fiber-cat-name {
    font-weight: 600;
}

/* ================================================
   Force Mobile Dropdown Toggle Functionality
   ================================================ */
@media only screen and (max-width: 1024px) {
    /* Ensure Produkter/Products menu items have proper display on mobile */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-11700,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-11721 {
        position: relative !important;
    }

    /* Force submenus to be absolutely positioned on mobile */
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-11700 > ul.mega-sub-menu,
    #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item-11721 > ul.mega-sub-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        background: white !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
        z-index: 999999 !important;
    }
}