/* =============================================================
   1. SHARED BASE (Applies to All Sizes)
   ============================================================= */
.topbar {
    background: linear-gradient(90deg, #080808 0%, #e8000d 50%, #080808 100%) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10001 !important;
    display: flex !important;
    width: 100% !important;
}

.site-header {
    background: #ffffff !important;
    position: sticky !important;
    z-index: 10000 !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05) !important;
}

/* =============================================================
   2. DESKTOP VERSION (1081px and Up)
   ============================================================= */
@media (min-width: 1081px) {
    .mobile-top-phone, .nav-toggle { display: none !important; }

    .topbar { height: 30px !important; }
    .topbar-inner {
        max-width: 1380px !important;
        margin: 0 auto !important;
        padding: 0 40px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 100% !important;
    }

    .topbar-tagline {
        font-family: 'Barlow Condensed', sans-serif !important;
        font-size: 18px !important; 
        color: #ffffff !important;
        text-transform: uppercase !important;
    }

    /* FIX: Keep WordPress Menu items in a row */
    .topbar-nav { display: flex !important; height: 100% !important; }
    .topbar-nav ul { 
        display: flex !important; 
        list-style: none !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        height: 100% !important; 
    }
    .topbar-nav li { height: 100% !important; display: block !important; }

    .topbar-nav a {
        display: flex !important; align-items: center !important; height: 30px !important;
        padding: 0 24px !important; color: #fff !important; font-weight: 700 !important;
        font-style: italic !important; text-decoration: none !important;
        transform: skewX(-20deg) !important; transition: all 0.3s ease !important;
    }
    .topbar-nav a span { transform: skewX(20deg) !important; display: block !important; }
    .topbar-nav a:hover { filter: brightness(1.3) !important; padding: 0 30px !important; }

    /* FIX: Target the List Item order, then the link inside */
    .topbar-nav li:nth-child(1) a { background-color: #3b7b3b !important; }
    .topbar-nav li:nth-child(2) a { background-color: #333333 !important; }
    .topbar-nav li:nth-child(3) a { background-color: #e8000d !important; }
    .topbar-nav li:nth-child(4) a { background-color: #005a9c !important; }

    .site-header { top: 30px !important; }
    .header-inner {
        max-width: 1380px !important;
        margin: 0 auto !important;
        padding: 0 40px !important;
        height: 120px !important;
        display: flex !important;
        align-items: center !important;
    }

    .header-logo img { height: 100px !important; width: auto !important; object-fit: contain !important; display: block !important; }
    .header-divider { width: 1px !important; height: 50px !important; background: #dddddd !important; margin: 0 25px !important; }

    .header-tagline-txt { 
        font-family: 'Barlow Condensed', sans-serif !important; 
        font-size: 20px !important; 
        color: #e8000d !important; 
        text-transform: uppercase !important; 
        font-weight: 700 !important;
    }

    .header-nav { flex: 1 !important; display: flex !important; justify-content: center !important; }
    .primary-nav { display: flex !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
    .primary-nav > li > a {
        height: 120px !important; padding: 0 20px !important; display: flex !important; align-items: center !important;
        font-family: 'Barlow Condensed' !important; font-size: 17px !important; font-weight: 700 !important; color: #222 !important; position: relative !important; transition: color 0.3s ease !important;
    }
    .primary-nav > li > a::before {
        content: '' !important; display: inline-block !important; width: 10px !important; height: 13px !important; margin-right: 12px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpolyline points='1,1 5,5 9,1' fill='none' stroke='%23e8000d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='1,6 5,10 9,6' fill='none' stroke='%23e8000d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-size: contain !important; background-repeat: no-repeat !important; flex-shrink: 0 !important;
    }
    .primary-nav > li > a::after {
        content: '' !important; position: absolute !important; bottom: 0 !important; left: 50% !important; width: 0 !important; height: 4px !important; 
        background: #e8000d !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; transform: translateX(-50%) !important;
    }
    .primary-nav > li > a:hover { color: #e8000d !important; }
    .primary-nav > li > a:hover::after { width: 80% !important; }

    .header-phone-num { font-family: 'Barlow Condensed' !important; font-size: 26px !important; font-weight: 800 !important; color: #e8000d !important; text-decoration: none !important; }
}

/* =============================================================
   3. MOBILE VERSION (1080px and Below)
   ============================================================= */
@media (max-width: 1080px) {
    .topbar-tagline, .topbar-nav, .header-divider, .header-phone-num { display: none !important; }

.header-nav {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
}

    .topbar { height: 40px !important; }
    .topbar-inner { display: flex !important; flex: 1 !important; width: 100% !important; justify-content: center !important; align-items: center !important; padding: 0 !important; }
    .mobile-top-phone { display: flex !important; flex: 1 !important; justify-content: center !important; align-items: center !important; }
    .mobile-top-phone a { color: #fff !important; font-family: 'Barlow Condensed' !important; font-size: 22px !important; font-weight: 800 !important; text-decoration: none !important; }

    .site-header { top: 40px !important; }
    .header-inner { 
        height: 100px !important; 
        min-height: unset !important;
        padding: 0 20px !important; 
        display: flex !important; 
        flex-wrap: nowrap !important; 
        justify-content: space-between !important; 
        align-items: center !important;
        position: relative !important;
    }
    
    .header-logo { 
        order: 1 !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .header-logo img { height: 80px !important; width: auto !important; object-fit: contain !important; }
    .header-cta-group { order: 2 !important; }

    .header-tagline-txt { 
        display: none !important; 
    }

    .nav-toggle { display: flex !important; flex-direction: column !important; justify-content: space-between !important; width: 32px !important; height: 22px !important; border: none !important; background: none !important; padding: 0 !important; }
    .nav-toggle span { display: block !important; width: 100% !important; height: 3px !important; background: #222222 !important; transition: 0.3s !important; }

    .nav-toggle.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg) !important; }
    .nav-toggle.is-open span:nth-child(2) { opacity: 0 !important; }
    .nav-toggle.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg) !important; }

    .primary-nav {
        display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
        background: #ffffff !important; flex-direction: column !important; border-top: 3px solid #e8000d !important; 
        list-style: none !important; box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; padding: 0 !important; margin: 0 !important; z-index: 9999 !important;
    }
    .primary-nav.is-open { display: flex !important; }
    .primary-nav > li > a { padding: 20px !important; border-bottom: 1px solid #eeeeee !important; display: block !important; height: auto !important; color: #222222 !important; font-family: 'Barlow Condensed' !important; font-size: 20px !important; font-weight: 700 !important; text-decoration: none !important; }
}