/* ========================================
   THE DETOUR ARCHITECT - CUSTOM HEADER CSS
   Add this to: Appearance > Customize > Additional CSS
   ======================================== */

/* Color Variables - Matching Your Brand */
:root {
    --primary: #0EA5E9;      /* Vibrant sky blue */
    --secondary: #0F172A;    /* Deep slate */
    --accent: #06B6D4;       /* Bright cyan */
    --dark: #1E293B;         /* Slate gray */
    --light: #F8FAFC;        /* Cool white */
    --white: #FFFFFF;
}

/* ========================================
   HEADER CONTAINER STYLING
   ======================================== */

/* Main Header Container */
header.elementor-location-header,
.elementor-location-header {
    background-color: var(--white) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    transition: all 0.3s ease !important;
}

/* Header when scrolled */
header.elementor-location-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Header inner container */
.elementor-location-header .elementor-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 1.2rem 5% !important;
}

/* ========================================
   LOGO STYLING
   ======================================== */

.elementor-widget-theme-site-logo {
    transition: all 0.3s ease !important;
}

.elementor-widget-theme-site-logo img {
    max-height: 60px !important;
    width: auto !important;
    transition: all 0.3s ease !important;
}

/* Logo when scrolled - slightly smaller */
header.scrolled .elementor-widget-theme-site-logo img {
    max-height: 50px !important;
}

/* ========================================
   NAVIGATION MENU STYLING
   ======================================== */

/* Main navigation container */
.elementor-widget-nav-menu {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Navigation menu items */
.elementor-nav-menu a {
    color: var(--dark) !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    padding: 0.8rem 1.5rem !important;
    position: relative !important;
    transition: color 0.3s ease !important;
}

/* Navigation menu item underline effect */
.elementor-nav-menu a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0.3rem !important;
    left: 1.5rem !important;
    right: 1.5rem !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--primary) !important;
    transition: width 0.3s ease !important;
}

/* Navigation menu item hover */
.elementor-nav-menu a:hover {
    color: var(--primary) !important;
}

.elementor-nav-menu a:hover::after {
    width: calc(100% - 3rem) !important;
}

/* Active/Current menu item */
.elementor-nav-menu .current-menu-item > a,
.elementor-nav-menu .current_page_item > a {
    color: var(--primary) !important;
}

.elementor-nav-menu .current-menu-item > a::after,
.elementor-nav-menu .current_page_item > a::after {
    width: calc(100% - 3rem) !important;
}

/* ========================================
   MOBILE MENU STYLING
   ======================================== */

/* Mobile menu toggle button */
.elementor-menu-toggle {
    color: var(--secondary) !important;
    font-size: 1.5rem !important;
    border: 2px solid var(--primary) !important;
    border-radius: 8px !important;
    padding: 0.5rem !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
}

.elementor-menu-toggle:hover {
    background: var(--primary) !important;
    color: var(--white) !important;
}

/* Mobile menu dropdown */
.elementor-nav-menu--dropdown {
    background: var(--white) !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15) !important;
    border-radius: 10px !important;
    margin-top: 1rem !important;
}

/* Mobile menu items */
.elementor-nav-menu--dropdown a {
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.elementor-nav-menu--dropdown a:last-child {
    border-bottom: none !important;
}

/* Mobile menu item hover */
.elementor-nav-menu--dropdown a:hover {
    background: var(--light) !important;
}

/* Remove underline effect on mobile */
.elementor-nav-menu--dropdown a::after {
    display: none !important;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Tablet and below */
@media (max-width: 1024px) {
    .elementor-location-header .elementor-container {
        padding: 1rem 5% !important;
    }
    
    .elementor-widget-theme-site-logo img {
        max-height: 50px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .elementor-location-header .elementor-container {
        padding: 0.8rem 5% !important;
    }
    
    .elementor-widget-theme-site-logo img {
        max-height: 45px !important;
    }
}

/* ========================================
   ADDITIONAL REFINEMENTS
   ======================================== */

/* Ensure header doesn't have unwanted backgrounds */
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-column,
.elementor-location-header .elementor-container {
    background-color: transparent !important;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth !important;
}

/* Fix for logo alignment */
.elementor-widget-theme-site-logo {
    display: flex !important;
    align-items: center !important;
}

/* Navigation alignment */
.elementor-widget-nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* ========================================
   OPTIONAL: Scrolled header effect
   Add this JavaScript to your theme's functions.php or a custom script:
   
   jQuery(window).scroll(function() {
       if (jQuery(this).scrollTop() > 50) {
           jQuery('header.elementor-location-header').addClass('scrolled');
       } else {
           jQuery('header.elementor-location-header').removeClass('scrolled');
       }
   });
   ======================================== */