/**
 * Header Styles - Sticky Header (Topbar + Menu)
 *
 * Makes the entire header (topbar + navigation) sticky on scroll.
 * Previously only the menu was sticky; now both sections stick together.
 *
 * @version 1.0.0
 */

/* ===========================================
   STICKY HEADER - Combined Topbar + Nav

   Uses CSS sticky on the header wrapper element.
   Section-level Elementor sticky has been disabled to avoid
   conflicts - the entire header sticks together as one unit.
   =========================================== */

/* Make entire header wrapper sticky */
.elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 999;
}

/* Shadow when scrolled (add via JS class or use scroll-based detection) */
.elementor-location-header {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ===========================================
   TOPBAR STYLING
   =========================================== */

/* Topbar padding - applies to all pages except homepage */
#topbar {
    padding-top: 8px;
    padding-bottom: 8px;
}

body.home #topbar {
    padding-top: 0;
    padding-bottom: 0;
}

#topbar .topbar-icon.elementor-widget-icon-box .elementor-icon-box-icon {
    line-height: 1px;
    margin-bottom: 1px;
}

body.home #nav-menu {
    margin-top: 1px;
}

/* ===========================================
   NAVIGATION BAR STYLING
   =========================================== */

/* Navigation container */
.elementor-element[data-id="4304"],
.main-nav-section,
.sticky-menu-items {
    background-color: var(--color-white);
    transition: var(--transition-normal);
}

/* Logo sizing */
.custom-logo,
.site-logo img,
.elementor-widget-image .attachment-full {
    max-width: var(--logo-width);
    height: auto;
}

/* Navigation menu items */
.elementor-nav-menu--main .elementor-item,
.ast-header-custom-item .menu-link,
.main-navigation .menu-item > a {
    font-family: var(--font-body);
    font-size: var(--nav-font-size);
    font-weight: var(--nav-font-weight);
    line-height: var(--nav-line-height);
    color: var(--color-slate);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.elementor-nav-menu--main .elementor-item:hover,
.ast-header-custom-item .menu-link:hover,
.main-navigation .menu-item > a:hover {
    color: var(--color-light-black);
}

/* Active menu item */
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.current-menu-item > a {
    color: var(--color-light-black);
}

/* ===========================================
   CONTACT US BUTTON (Header CTA)
   =========================================== */

.elementor-button.contact-us-btn,
.header-cta-button,
.ast-header-button,
a[href="#"].elementor-button {
    background-color: var(--color-light-black);
    border-radius: var(--button-radius);
    padding: var(--button-padding);
    font-family: var(--font-body);
    font-weight: var(--button-font-weight);
    font-size: var(--button-font-size);
    color: var(--color-white);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-md);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.elementor-button.contact-us-btn:hover,
.header-cta-button:hover,
.ast-header-button:hover {
    background-color: var(--color-hover);
    color: var(--color-white);
}

/* ===========================================
   DROPDOWN MENUS
   =========================================== */

.elementor-nav-menu--dropdown,
.sub-menu {
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.elementor-nav-menu--dropdown .elementor-item,
.sub-menu .menu-item > a {
    font-size: 14px;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-slate);
}

.elementor-nav-menu--dropdown .elementor-item:hover,
.sub-menu .menu-item > a:hover {
    background-color: var(--color-white);
    color: var(--color-light-black);
}

/* JetMenu Mega Menu */
.jet-menu.jet-menu--animation-type-none .jet-mega-menu-item.jet-menu-hover .jet-sub-mega-menu {
    max-width: none !important;
    width: 100% !important;
    left: -3px !important;
    top: 152px;
    position: fixed;
    border-top: 3px solid var(--color-primary);
}
body.admin-bar .jet-menu.jet-menu--animation-type-none .jet-mega-menu-item.jet-menu-hover .jet-sub-mega-menu {
    top: 182px;
}

/* ===========================================
   STICKY HEADER - Scrolled State
   =========================================== */

/* Shadow on scroll */
.ast-header-sticked,
.elementor-sticky--active,
header.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

/* ===========================================
   MEDIAHAWK PHONE TRACKING
   =========================================== */

.mediahawk-call {
    background: transparent;
    border-radius: 0;
    font-weight: bold;
    color: white;
    font-size: 16px;
    padding: 8px 14px;
}

.mediahawk-call:hover {
    background: transparent;
    color: white;
}

.mediahawk-call i {
    margin-right: 8px !important;
}

body.home .mediahawk-call {
    padding: 1px 14px;
}

body.home .mediahawk-call i {
    margin-right: 12px !important;
}

/* ===========================================
   RESPONSIVE - Tablet (921px)
   =========================================== */

@media (max-width: 921px) {
    /* Mobile menu toggle */
    .ast-mobile-menu-trigger,
    .elementor-menu-toggle {
        color: var(--color-slate);
    }
}

/* ===========================================
   RESPONSIVE - Mobile (544px)
   =========================================== */

@media (max-width: 544px) {
    /* Reduce logo size on mobile */
    .custom-logo,
    .site-logo img {
        max-width: 160px;
    }
}