/**
 * ONHYM Mobile Navigation — Premium Redesign
 *
 * Targets: Elementor Pro nav-menu widget (layout: dropdown, dropdown: mobile)
 *          using menu "mobile menu" (ID 46) with SmartMenus accordion engine.
 *
 * Selectors use .elementor-nav-menu--burger as root context so
 * desktop navigation is NEVER touched.
 *
 * Color palette (ONHYM brand):
 *   Green:  #0F766E   Gold: #C9A227
 *   White:  #ffffff   Ink:  #1F2937
 *
 * @package OnhymBranding
 * @version 1.0.0
 */

/* ── CSS Custom Properties ──────────────────────────────────────────────── */
.elementor-nav-menu--burger {
    --onhym-green:      #0F766E;
    --onhym-green-dk:   #0B5953;
    --onhym-gold:       #C9A227;
    --onhym-gold-bg:    rgba(201, 162, 39, 0.10);
    --onhym-white:      #ffffff;
    --onhym-ink:        #1F2937;
    --onhym-muted:      #6B7280;
    --onhym-border:     #E5E7EB;
    --onhym-bg:         #F8FAFC;
    --onhym-bg-hover:   #F0FDF9;
    --onhym-radius:     10px;
    --onhym-shadow-xs:  0 1px 4px rgba(0, 0, 0, 0.07);
    --onhym-shadow-sm:  0 2px 12px rgba(15, 118, 110, 0.10);
    --onhym-font:       'Work Sans', -apple-system, BlinkMacSystemFont,
                        'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DROPDOWN CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */

.elementor-nav-menu--burger
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    background:    var(--onhym-white) !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow:    var(--onhym-shadow-sm) !important;
    border-top:    3px solid var(--onhym-green) !important;
    padding:       0 !important;
    overflow:      hidden !important;
}

/* Menu root <ul> */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu.sm-vertical {
    background: transparent !important;
    padding:    0 0 8px !important;
    margin:     0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEVEL 1 — Main Navigation
   Large · Bold · White background · 56px touch target
   ═══════════════════════════════════════════════════════════════════════════ */

.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item {
    border-bottom: 1px solid var(--onhym-border) !important;
    margin:        0 !important;
    padding:       0 !important;
    background:    transparent !important;
}

.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item:last-child {
    border-bottom: none !important;
}

.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > a {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    min-height:      56px !important;
    padding:         14px 20px !important;
    font-family:     var(--onhym-font) !important;
    font-size:       16px !important;
    font-weight:     600 !important;
    line-height:     1.3 !important;
    letter-spacing:  -0.01em !important;
    color:           var(--onhym-ink) !important;
    background:      var(--onhym-white) !important;
    text-decoration: none !important;
    border:          none !important;
    transition:      background 0.22s ease, color 0.22s ease !important;
}

/* L1 — hover (closed) */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > a:hover {
    background: var(--onhym-bg-hover) !important;
    color:      var(--onhym-green) !important;
}

/* L1 — open / highlighted */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > a.highlighted {
    background: var(--onhym-green) !important;
    color:      var(--onhym-white) !important;
}

/* L1 — current page ancestor */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > a.current {
    color:      var(--onhym-green) !important;
    background: var(--onhym-bg-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEVEL 2 — Section Groups (Card layout)
   Smaller · Uppercase · Green text · Rounded card
   ═══════════════════════════════════════════════════════════════════════════ */

/* L2 container — the card background */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu {
    background:    var(--onhym-bg) !important;
    padding:       12px 14px !important;
    margin:        0 !important;
    border-top:    1px solid var(--onhym-border) !important;
    box-shadow:    inset 0 3px 6px rgba(0, 0, 0, 0.04) !important;
}

/* L2 card items */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu > .menu-item {
    background:    var(--onhym-white) !important;
    border-radius: var(--onhym-radius) !important;
    margin-bottom: 8px !important;
    box-shadow:    var(--onhym-shadow-xs) !important;
    overflow:      hidden !important;
}

.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu > .menu-item:last-child {
    margin-bottom: 0 !important;
}

/* L2 header links (parents, e.g. "INVEST IN HYDROCARBONS") */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu > .menu-item > a {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    min-height:      52px !important;
    padding:         12px 16px !important;
    font-family:     var(--onhym-font) !important;
    font-size:       11.5px !important;
    font-weight:     700 !important;
    line-height:     1.3 !important;
    letter-spacing:  0.7px !important;
    text-transform:  uppercase !important;
    color:           var(--onhym-green) !important;
    background:      transparent !important;
    text-decoration: none !important;
    border:          none !important;
    transition:      background 0.22s ease, color 0.22s ease,
                     border-radius 0.22s ease !important;
}

/* L2 — open */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu > .menu-item > a.highlighted {
    background:    var(--onhym-green) !important;
    color:         var(--onhym-white) !important;
    border-radius: var(--onhym-radius) var(--onhym-radius) 0 0 !important;
}

/* L2 — simple links (no children: e.g. "Midstream") */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu
> .menu-item:not(.menu-item-has-children) > a {
    text-transform: none !important;
    font-size:      15px !important;
    font-weight:    500 !important;
    letter-spacing: 0 !important;
    color:          var(--onhym-ink) !important;
}

.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu
> .menu-item:not(.menu-item-has-children) > a:hover {
    background: var(--onhym-bg-hover) !important;
    color:      var(--onhym-green) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEVEL 3 — Page Links (Gold left-border accent)
   Normal weight · Left indent · 48px touch target
   ═══════════════════════════════════════════════════════════════════════════ */

/* L3 container */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu
> .menu-item > .sub-menu {
    background: var(--onhym-white) !important;
    padding:    6px 0 10px !important;
    margin:     0 !important;
    border-top: 1px solid var(--onhym-border) !important;
}

/* L3 items */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu
> .menu-item > .sub-menu > .menu-item {
    margin:     2px 12px 2px 14px !important;
    padding:    0 !important;
    background: transparent !important;
    border-radius: 0 6px 6px 0 !important;
    overflow:   hidden !important;
}

/* L3 links */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu
> .menu-item > .sub-menu > .menu-item > a {
    display:         flex !important;
    align-items:     center !important;
    justify-content: flex-start !important;
    min-height:      48px !important;
    padding:         10px 14px 10px 14px !important;
    font-family:     var(--onhym-font) !important;
    font-size:       14px !important;
    font-weight:     400 !important;
    line-height:     1.4 !important;
    color:           var(--onhym-ink) !important;
    background:      transparent !important;
    text-decoration: none !important;
    text-transform:  none !important;
    letter-spacing:  0 !important;
    border-left:     3px solid var(--onhym-gold) !important;
    border-top:      0 !important;
    border-right:    0 !important;
    border-bottom:   0 !important;
    transition:      background 0.2s ease, color 0.2s ease,
                     border-color 0.2s ease !important;
}

/* L3 — hover / current */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu
> .menu-item > .sub-menu > .menu-item > a:hover,
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu
> .menu-item > .sub-menu > .menu-item > a.current {
    background:        var(--onhym-gold-bg) !important;
    color:             var(--onhym-green) !important;
    border-left-color: var(--onhym-green) !important;
}

/* L3 — items WITH children (e.g. Mining labs, Petroleum labs) */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu
> .menu-item > .sub-menu > .menu-item.menu-item-has-children > a {
    font-weight:       600 !important;
    color:             var(--onhym-green) !important;
    justify-content:   space-between !important;
    border-left-color: var(--onhym-green) !important;
}

.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu
> .menu-item > .sub-menu > .menu-item.menu-item-has-children > a.highlighted {
    background:        var(--onhym-green) !important;
    color:             var(--onhym-white) !important;
    border-left-color: var(--onhym-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEVEL 4 — Deep links (Lab sub-pages: Geochemistry, Palynology…)
   Small · Muted color · Compact
   ═══════════════════════════════════════════════════════════════════════════ */

/* L4 container */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu
> .menu-item > .sub-menu > .menu-item > .sub-menu {
    background:  var(--onhym-bg) !important;
    padding:     4px 0 6px !important;
    margin:      0 0 4px 18px !important;
    border-left: 2px solid var(--onhym-gold-bg) !important;
    border-top:  1px solid var(--onhym-border) !important;
}

/* L4 links */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu
> .menu-item > .sub-menu > .menu-item > .sub-menu > .menu-item > a {
    display:         flex !important;
    align-items:     center !important;
    min-height:      44px !important;
    padding:         8px 14px 8px 18px !important;
    font-family:     var(--onhym-font) !important;
    font-size:       13px !important;
    font-weight:     400 !important;
    line-height:     1.4 !important;
    color:           var(--onhym-muted) !important;
    background:      transparent !important;
    text-decoration: none !important;
    text-transform:  none !important;
    letter-spacing:  0 !important;
    border:          none !important;
    transition:      color 0.2s ease, background 0.2s ease !important;
}

.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu
> .menu-item > .sub-menu > .menu-item > .sub-menu > .menu-item > a:hover,
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item > .sub-menu
> .menu-item > .sub-menu > .menu-item > .sub-menu > .menu-item > a.current {
    color:      var(--onhym-green) !important;
    background: var(--onhym-bg-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHEVRONS — CSS chevron, color inherits from text, smooth rotation
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide original indicator text/icon */
.elementor-nav-menu--burger .sub-arrow {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           26px !important;
    height:          26px !important;
    min-width:       26px !important;
    margin-left:     auto !important;
    flex-shrink:     0 !important;
    font-size:       0 !important;        /* hide any icon/text */
    line-height:     0 !important;
    transition:      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position:        relative !important;
}

/* CSS chevron via rotated border */
.elementor-nav-menu--burger .sub-arrow::after {
    content:      '' !important;
    display:      block !important;
    width:        8px !important;
    height:       8px !important;
    border-right: 2.5px solid currentColor !important;
    border-bottom:2.5px solid currentColor !important;
    transform:    rotate(45deg) translateY(-2px) !important;
    opacity:      0.75 !important;
}

/* Chevron when open — rotates 180° */
.elementor-nav-menu--burger a.highlighted > .sub-arrow::after {
    transform:    rotate(-135deg) translateY(-2px) !important;
    opacity:      1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HAMBURGER TOGGLE — accessible touch target
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   HAMBURGER TOGGLE — match width/height of EN and search buttons (~46px)
   Without this override Elementor sets width:27px via widget CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

.elementor-nav-menu--burger .elementor-menu-toggle {
    width:  46px !important;
    height: 46px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERRIDE Elementor inline widget styles
   The widget sets hover/active bg to #B4E717 (neon green) — replace with
   ONHYM brand colors.
   ═══════════════════════════════════════════════════════════════════════════ */

.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
.elementor-item:hover,
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
.elementor-item.elementor-item-active,
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
.elementor-item.highlighted,
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
.elementor-sub-item:hover,
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
.elementor-sub-item.elementor-item-active,
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
.elementor-sub-item.highlighted {
    background-color: transparent !important;
}

/* Disable Elementor's widget-level color override to allow our styles */
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
a.elementor-item,
.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
a.elementor-sub-item {
    color: inherit !important;
    fill:  inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS — sub-menu slide (SmartMenus inline overflow during animation)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Prevent content flash during SmartMenus slide animation */
.elementor-nav-menu--burger .sub-menu {
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEPARATOR between L1 items
   ═══════════════════════════════════════════════════════════════════════════ */

.elementor-nav-menu--burger
.elementor-nav-menu--dropdown
ul.elementor-nav-menu > .menu-item + .menu-item {
    /* already handled by border-bottom on each item */
}