/**
 * JAIR Transportation - Sticky Transparent Header with Black-on-Scroll
 * Header stays fixed. Transparent at top, solid black on scroll.
 *
 * DOM structure (Elementor v4):
 *   .header_area (fixed wrapper - my code)
 *     > .elementor.elementor-8545
 *       > .e-con.e-parent (absolutely positioned - the visible header row)
 *         > .e-con.e-child (inner flex - logo/menu/phone)
 */

/* ============================================
   Fixed wrapper - just anchors position
   ============================================ */
.header_area {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background: transparent;
}

/* Slide-down entry animation */
.header_area {
    animation: jairHeaderSlideDown 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes jairHeaderSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ============================================
   The ACTUAL visible header row (Elementor top-level container)
   Transparent at top, solid black on scroll.
   ============================================ */
.header_area .e-con.e-parent,
.header_area > .elementor > .e-con,
.header_area .elementor-8545 > .e-con {
    background-color: transparent !important;
    transition: background-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s ease,
                border-color 0.4s ease,
                padding 0.35s ease !important;
    border-bottom: 1px solid transparent;
}

/* SCROLLED: solid black */
.header_area.jair-scrolled .e-con.e-parent,
.header_area.jair-scrolled > .elementor > .e-con,
.header_area.jair-scrolled .elementor-8545 > .e-con {
    background-color: #000000 !important;
    border-bottom-color: rgba(228, 182, 79, 0.22) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

/* Also darken wrapper as a safety net */
.header_area.jair-scrolled {
    background: #000000;
}

/* ============================================
   Logo subtle scale on scroll (luxury feel)
   ============================================ */
.header_area .elementor-widget-image img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.header_area.jair-scrolled .elementor-widget-image img {
    transform: scale(0.92);
}

/* ============================================
   Elementor editor: don't apply fixed positioning
   ============================================ */
body.elementor-editor-active .header_area,
body.elementor-editor-preview .header_area {
    position: relative !important;
    background: #0a0a0a;
    animation: none;
}

/* ============================================
   Reduced motion accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .header_area,
    .header_area *,
    .header_area .e-con.e-parent {
        animation: none !important;
        transition-duration: 0.15s !important;
    }
}