/* ================================================================
   MAXVIBE TOP HEADER — dedicated stylesheet
   Moved out of Customizer Additional CSS on 2026-06-17.

   Two physically separate header elements share this file:
   1) <header class="site-main-header">  — logo + amp(knobs) images.
      IMPORTANT: .logo and .amp are NOT wrapper containers — the
      classes are applied directly to the <img> tags themselves
      (confirmed via inspecting the live DOM). There is no nested
      <img> inside .logo or .amp to target with a descendant
      selector — `.logo img` / `.amp img` match nothing at all.
      (markup output by add_logo_and_amp_to_header() in functions.php)
   2) <header class="bs-default">        — the red bar + nav menu
      (markup/styling originally defined only in Additional CSS)

   This file holds STRUCTURE only (position, display, transforms).
   All resolution-dependent VALUES are produced by the companion
   plugin "maxvibe-header-settings" (Settings > MaxVibe Header),
   which prints a <style> block in wp_head per saved resolution
   range:
     --bar-h, --radius → still CSS custom properties, referenced
       here via var() (.bs-default height, mega-menu-wrap
       position/height)
     .bs-default's z-index → NO CSS custom property, no !important.
       Printed directly by the plugin (bar_z) per resolution range,
       same treatment as .logo/.amp's z-index below.
     --menu-w, --menu-font, --item-gap → NO LONGER CSS variables.
       The plugin outputs literal px values directly into
       #mega-menu-wrap-primary's width, ul.mega-menu's gap,
       and .mega-menu-link's font-size/padding — this file
       deliberately omits those properties so the plugin's output
       is the only source for them.
     .logo / .amp top, z-index, width → NO CSS custom property
       involved at all (--header-h was retired). Each of these three
       properties is printed directly by the plugin per resolution
       range (logo_top/logo_z/logo_w and the amp_* equivalents),
       straight onto .logo / .amp themselves — since that IS the
       <img>, not a container around one. `height` is deliberately
       left unset (auto) everywhere, so each image's own aspect
       ratio determines its rendered height. This file omits all
       three properties for both selectors.
     .logo / .amp left → NOT a flat px value. The plugin takes two
       numbers per resolution range (logo_left_start/logo_left_end
       and the amp_* equivalents — the value at the range's min
       width and at its max width) and prints a `calc(Npx + Mvw)`
       expression that linearly interpolates between them across
       that exact range, so left keeps moving smoothly while the
       window is resized within a range instead of staying flat
       and only jumping at the boundary. This file omits left
       entirely for both selectors.

   No fallback/default values are declared anywhere in this file —
   per explicit instruction, a resolution outside every configured
   range simply leaves top/left/z-index/width undefined, and leaves
   the image at its native intrinsic size.
   ================================================================ */


/* ----------------------------------------------------------------
   1. Header-only rule, no media query, originally line 29
   ---------------------------------------------------------------- */

#mega-sub-menu-6597 {position: relative; left: 40px !important}


/* ----------------------------------------------------------------
   2. Mega-menu item / submenu styling (originally lines 59-151)
   ---------------------------------------------------------------- */

#mega-menu-item-8068 > a.mega-menu-link {
    color: #a8ff2a !important;
    background: transparent !important;
    opacity: 1 !important;
    filter: none !important;
}

#mega-menu-item-8068 > a.mega-menu-link:hover,
#mega-menu-item-8068:hover > a.mega-menu-link {
    color: #ffffff !important;
    background: transparent !important;
}

#mega-menu-item-8068 > a.mega-menu-link:link,
#mega-menu-item-8068 > a.mega-menu-link:visited,
#mega-menu-item-8068 > a.mega-menu-link:focus,
#mega-menu-item-8068 > a.mega-menu-link:focus-visible,
#mega-menu-item-8068 > a.mega-menu-link:active,
#mega-menu-item-8068:focus-within > a.mega-menu-link,
#mega-menu-item-8068.mega-current-menu-item > a.mega-menu-link,
#mega-menu-item-8068.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-item-8068.mega-toggle-on > a.mega-menu-link,
#mega-menu-item-8068.mega-item-open > a.mega-menu-link {
    color: #a8ff2a !important;
    background: transparent !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

li#mega-menu-item-8068 {
    opacity: 1 !important;
}

ul #mega-sub-menu-8166 {
	padding-bottom:10px !important;
	margin-top:-1px !important;
	border-radius: 30px;
	margin-left: -65px !important;
  z-index: 999;
}

ul #mega-sub-menu-13312 {
	padding-bottom:10px !important;
	margin-top:-1px !important;
	border-radius: 30px;
	margin-left: -40px !important;
  z-index: 999;
}

@media (min-width:1024px) and (max-width:1279px) {
	ul.mega-sub-menu {
	padding-bottom:10px !important;
	margin-top:-1px !important;
	border-radius: 30px;
	margin-left:-50px !important;
		z-index: 999;}
}

.mega-menu-row {
    position: relative;
    margin-top: 5px !important;
}

#mega-menu-wrap-primary .mega-menu-item-has-children {
    position: relative;
}
#mega-menu-wrap-primary .mega-menu-link {
	    justify-content: center !important;
    text-align: center !important;
	padding-left: 100px; padding-right 0px !important
}

ul#mega-menu-primary {padding-left:20px !important; min-width: 750px !important;}


/* ----------------------------------------------------------------
   3. Mobile: hide logo/amp/navigation (originally lines 732-739,
      inside the larger max-width:1023px mobile block)
   ---------------------------------------------------------------- */

@media (max-width: 1023px) {
    .amp,
    .logo {
        display: none;
    }

    .navigation {
        display: none;
    }
}


/* ----------------------------------------------------------------
   4. (retired) Desktop logo/amp z-index used to live here as a
      hardcoded !important rule (originally lines 981-987). It has
      been removed entirely — !important would always beat the
      plugin's per-range z-index output regardless of source order,
      so leaving it in place would make the new logo_z/amp_z admin
      fields silently do nothing. z-index is now controlled
      exclusively by the plugin (section 5 below has no z-index
      declaration for .logo/.amp at all).
   ---------------------------------------------------------------- */


/* ----------------------------------------------------------------
   5. Core header system (originally lines 1245-1378)
      NOTE: ".band-image-box img" originally shared this media query
      block but is unrelated to the header — it was left behind in
      Additional CSS, not moved here.
   ---------------------------------------------------------------- */

@media (min-width: 1024px) {
    /* --bar-h, --radius, --menu-w, --menu-font, --item-gap are NOT
       given default values here — they are produced entirely by the
       maxvibe-header-settings plugin's per-resolution-range output. If a
       viewport falls outside every configured range, these are intentionally
       left undefined (no fallback), per the user's explicit decision. */

    /* z-index : NOT declared here. Printed per resolution range by
       the plugin (bar_z), same treatment as .logo/.amp's z-index. */
    .bs-default {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--bar-h);
        background: #c90000;
        border-bottom: 1px solid silver;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    }

    #mega-menu-wrap-primary {
        position: fixed;
        top: calc(var(--bar-h) / 2);
        left: 50vw;
        transform: translate(-50%, -50%);
        /* width: set per resolution range by maxvibe-header-settings plugin */
        height: calc(var(--bar-h) * 0.74);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
        z-index: 999994 !important;
    }

    #mega-menu-wrap-primary > * {
        border-radius: var(--radius);
    }

    #mega-menu-wrap-primary ul.mega-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        /* gap: set per resolution range by maxvibe-header-settings plugin */
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #mega-menu-wrap-primary .mega-menu-link {
        line-height: 1;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        /* font-size, padding: set per resolution range by maxvibe-header-settings plugin */
        overflow: visible;
        text-overflow: ellipsis;
    }
}

@media (min-width: 1024px) {
    /* top, z-index, width : NOT declared here. All three are printed
       per resolution range by the maxvibe-header-settings plugin
       (logo_top/logo_z/logo_w), straight onto .logo itself — .logo
       IS the <img> tag, not a wrapper around one. left is ALSO not
       declared here, but for a different reason: it's not a flat
       value at all, it's a calc(Npx + Mvw) interpolation between
       logo_left_start and logo_left_end, printed by the same plugin.
       height is intentionally never set anywhere (stays auto), so
       the image keeps its own aspect ratio at any width. */
    .logo {
        position: fixed;
        transform: translate(-100%, -50%);
        display: inline-block;
    }

    /* top, z-index, width : printed per resolution range by the
       plugin (amp_top/amp_z/amp_w), straight onto .amp itself —
       same situation as .logo, .amp IS the <img> tag. left is also
       not declared here, but it's a calc(Npx + Mvw) interpolation
       between amp_left_start and amp_left_end, not a flat value.
       display is inline-block (not flex) because there is nothing
       to lay out inside it; the gap/align-items that used to live
       here assumed multiple knob images as children, which doesn't
       match the actual markup (one combined image, class on the
       img itself), so they were removed as dead weight. */
    .amp {
        position: fixed;
        transform: translateY(-50%);
        display: inline-block;
    }

    body {
        padding-top: var(--bar-h);
    }
}