/* 

Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
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: 2.0.0
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


SETUP INSTRUCTIONS:
-------------------
1. Add these classes in Elementor:
   - "sticky-header" on header section
   - "navigation" on navigation menu element
   - "logo" on logo element
   - "header-cta" on CTA button containers

2. Replace color variables:
   - var(--e-global-color-afd537f) = Your sticky background color
   - var(--e-global-color-primary) = Your primary brand color
   - var(--e-global-color-5c1bf53) = Your hover/accent color

3. Update button selectors:
   - Change "#watch-live" to match your button ID/class

4. Adjust header height:
   - Set --header-height to match your design (currently 120px)

5. Remove sections you don't need:
   - ElementsKit carets section if not using ElementsKit menus
   - CTA button section if no buttons in header
   - Logo scale if you don't want scaling
*/

/* ==========================================================================
   STICKY HEADER + MENU STATE MANAGEMENT
   ==========================================================================
   This stylesheet controls:
   • Sticky header behavior
   • Parent vs child active menu states
   • Hover behavior
   • Dropdown + caret color logic
   • CTA and logo styling
   • Elementor / ElementsKit edge cases

   IMPORTANT:
   - CSS order matters
   - Many rules intentionally use !important to override Elementor defaults
   ========================================================================== */


/* ==========================================================================
   VARIABLES
   ==========================================================================
   Centralized custom properties used throughout the header
   -------------------------------------------------------------------------- */
header.sticky-header {
  /* Fixed header height (prevents jump on sticky) */
  --header-height: 120px;

  /* Global transition easing for header animations */
  --transition: .35s ease;
}


/* ==========================================================================
   BASE HEADER STATE (NON-STICKY)
   ==========================================================================
   Default header appearance before sticky activates
   -------------------------------------------------------------------------- */
header.sticky-header {
  background-color: transparent;
  transition:
    background-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition),
    opacity var(--transition);
  will-change: transform, opacity;
}


/* ==========================================================================
   HEADER HEIGHT STABILITY
   ==========================================================================
   Prevents Elementor sticky shrink / jump issues
   -------------------------------------------------------------------------- */
header.sticky-header > .elementor-container {
  min-height: var(--header-height) !important;
  transition: none; /* Disable height animation */
}


/* ==========================================================================
   ACTIVE / ANCESTOR MENU FIXES (WORDPRESS LOGIC)
   ==========================================================================
   WordPress adds .current-menu-ancestor to parents of child pages.
   These rules ensure:
   • Only the actual child is styled as active
   • Parents do not inherit active styles
   • Hover still works correctly
   -------------------------------------------------------------------------- */

/* NON-STICKY: Parent should look like a normal top-level link */
header.sticky-header:not(.elementor-sticky--active)
.navigation
.elementskit-navbar-nav > li.current-menu-ancestor > a {
  color: var(--e-global-color-afd537f) !important;
}

/* NON-STICKY: Parent caret should not inherit active color */
header.sticky-header:not(.elementor-sticky--active)
.navigation
.elementskit-navbar-nav > li.current-menu-ancestor > a
> .elementskit-submenu-indicator {
  color: inherit !important;
}

/* NON-STICKY: Restore hover color for parent text */
header.sticky-header:not(.elementor-sticky--active)
.navigation
.elementskit-navbar-nav > li.current-menu-ancestor:hover > a {
  color: var(--e-global-color-5c1bf53) !important;
}

/* NON-STICKY: Restore hover color for parent caret */
header.sticky-header:not(.elementor-sticky--active)
.navigation
.elementskit-navbar-nav > li.current-menu-ancestor:hover > a
> .elementskit-submenu-indicator {
  color: var(--e-global-color-5c1bf53) !important;
}

/* GLOBAL: Active (current) menu item text color */
.navigation
.elementskit-navbar-nav > li.current-menu-item > a {
  color: var(--e-global-color-5c1bf53) !important;
}


/* ==========================================================================
   STICKY HEADER STATE
   ==========================================================================
   Applied when Elementor adds .elementor-sticky--active
   -------------------------------------------------------------------------- */
header.sticky-header.elementor-sticky--active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;

  /* Sticky background + shadow */
  background-color: var(--e-global-color-primary) !important;
  box-shadow: 0 4px 33px rgba(0, 0, 0, 0.07) !important;
}

/* Prevent Elementor sticky effects from shrinking header */
header.sticky-header.elementor-sticky--effects > .elementor-container {
  min-height: var(--header-height) !important;
}


/* ==========================================================================
   HIDE-ON-SCROLL STATE (JS CONTROLLED)
   ==========================================================================
   Header slides out of view when scrolling down
   -------------------------------------------------------------------------- */
header.sticky-header.header-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}


/* ==========================================================================
   STICKY – TOP-LEVEL NAVIGATION TEXT COLORS
   ==========================================================================
   Only applies when header is sticky
   -------------------------------------------------------------------------- */

/* Sticky: default top-level link color */
header.sticky-header.elementor-sticky--active
.navigation
.elementskit-navbar-nav > li > a {
  color: var(--e-global-color-afd537f) !important;
}

/* Sticky: hover color for top-level links */
header.sticky-header.elementor-sticky--active
.navigation
.elementskit-navbar-nav > li:hover > a {
  color: var(--e-global-color-5c1bf53) !important;
}


/* ==========================================================================
   STICKY – SUBMENU TEXT COLORS
   ==========================================================================
   Explicitly redefines submenu behavior lost during sticky override
   -------------------------------------------------------------------------- */

/* Sticky: default submenu text color */
header.sticky-header.elementor-sticky--active
.navigation
.elementskit-submenu-panel a {
  color: var(--e-global-color-primary) !important;
}

/* Sticky: submenu hover color */
header.sticky-header.elementor-sticky--active
.navigation
.elementskit-submenu-panel li:hover > a {
  color: var(--e-global-color-5c1bf53) !important;
}

/* Sticky: active submenu item */
header.sticky-header.elementor-sticky--active
.navigation
.elementskit-submenu-panel li.current-menu-item > a {
  color: var(--e-global-color-5c1bf53) !important;
}


/* ==========================================================================
   LOGO COLOR (SVG ONLY)
   ==========================================================================
   Changes logo fill when header is sticky
   -------------------------------------------------------------------------- */
header.sticky-header.elementor-sticky--active .logo svg {
  fill: var(--e-global-color-afd537f);
}


/* ==========================================================================
   CTA BUTTON STYLES (JET BUTTON)
   ==========================================================================
   Adjust to match brand styling during sticky state
   -------------------------------------------------------------------------- */

/* Button border */
header.sticky-header.elementor-sticky--active
#watch-live .jet-button__plane-normal {
  border-color: var(--e-global-color-afd537f);
  border-width: 1.5px;
}

/* Button text */
header.sticky-header.elementor-sticky--active
#watch-live span {
  color: var(--e-global-color-afd537f);
}

/* Button hover text */
header.sticky-header.elementor-sticky--active
#watch-live:hover span {
  color: white;
}

/* Button hover background */
header.sticky-header.elementor-sticky--active
#watch-live:hover .jet-button__plane-hover {
  background-color: var(--e-global-color-primary);
}


/* ==========================================================================
   ELEMENTSKIT CARET (SUBMENU INDICATOR) STYLES
   ==========================================================================
   Carets are styled independently from text
   -------------------------------------------------------------------------- */

/* Base caret behavior */
header.sticky-header .elementskit-submenu-indicator {
  margin-top: 5px;
  transition: color .3s ease;
}

/* Sticky: default caret color (top-level) */
header.sticky-header.elementor-sticky--active
.elementskit-submenu-indicator {
  color: var(--e-global-color-afd537f) !important;
}

/* Sticky: top-level caret hover color */
header.sticky-header.elementor-sticky--active
.navigation
.elementskit-navbar-nav > li:hover > a
> .elementskit-submenu-indicator {
  color: var(--e-global-color-5c1bf53) !important;
}

/* Sticky: submenu caret default color */
header.sticky-header.elementor-sticky--active
.navigation
.elementskit-submenu-panel
.elementskit-submenu-indicator {
  color: var(--e-global-color-primary) !important;
}

/* Sticky: submenu caret hover color */
header.sticky-header.elementor-sticky--active
.navigation
.elementskit-submenu-panel li:hover > a
> .elementskit-submenu-indicator {
  color: var(--e-global-color-5c1bf53) !important;
}

/* Rotate caret for nested submenus */
header.sticky-header
.elementskit-submenu-panel
.menu-item-has-children > a
> .elementskit-submenu-indicator {
  transform: rotate(-90deg) !important;
}


/* ==========================================================================
   ELEMENTOR STICKY SPACER FIX
   ==========================================================================
   Prevents layout gaps caused by Elementor spacer element
   -------------------------------------------------------------------------- */
header.elementor-sticky__spacer > * {
  display: none !important;
}