/* =============================================
   HEADER OVERRIDE STYLES FOR DESKTOP VIEW
   ============================================= */

/* Ensure the responsive header is the only header visible */
@media screen and (min-width: 1024px) {
    /* Force hide old header structure */
    header:not(.responsive-header) {
        display: none !important;
    }
    
    /* Ensure responsive header is visible and properly positioned */
    .responsive-header {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        background: transparent !important;
        padding: 30px 0 !important;
    }
    
    /* Override any conflicting styles */
    .responsive-header * {
        box-sizing: border-box;
    }
    
    .responsive-header .container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        position: relative !important;
    }
    
    .responsive-header .header-content {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Logo styling */
    .responsive-header .logo-container {
        flex-shrink: 0 !important;
        margin: 0 40px 0 0 !important;
        padding: 0 !important;
    }
    
    .responsive-header .logo-img {
        max-width: 300px !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Navigation styling */
    .responsive-header .main-navigation {
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        overflow: visible !important;
        flex: 1 !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .responsive-header .nav-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    
    .responsive-header .nav-menu li {
        margin: 0 20px 0 0 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
    }
    
    .responsive-header .nav-menu li:last-child {
        margin: 0 0 0 10px !important;
    }
    
    /* Navigation link styling with high specificity */
    .responsive-header .nav-menu a {
        color: #fff !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        font-family: 'Poppins', sans-serif !important;
        padding: 13px 0 !important;
        display: block !important;
        transition: color 0.3s ease !important;
        white-space: nowrap !important;
        background: none !important;
        border: none !important;
    }
    
    .responsive-header .nav-menu a:hover {
        color: #fd6a11 !important;
        text-decoration: none !important;
    }

    /* Active nav link: orange color; others white - Maximum specificity */
    .responsive-header .nav-menu li a.is-active,
    .responsive-header .nav-menu li.active > a,
    .responsive-header .nav-menu a.is-active {
        color: #fd6a11 !important;
        text-decoration: none !important;
    }

    .responsive-header .nav-menu li a:not(.is-active),
    .responsive-header .nav-menu a:not(.is-active) {
        color: #fff !important;
    }
    
    /* CTA Button styling - High specificity override */
    .responsive-header .cta-button a.grad-btn,
    .responsive-header .cta-button a {
        background: linear-gradient(45deg, #fd6a11, #d22a43) !important;
        color: #fff !important;
        padding: 11px 25px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 5px !important;
        text-transform: none !important;
        transition: all 0.3s ease !important;
        border: none !important;
        margin: 0 !important;
    }
    
    /* CTA hover with maximum specificity */
    .responsive-header .cta-button a.grad-btn:hover,
    .responsive-header .cta-button a:hover,
    .responsive-header .cta-button a.various:hover {
        background: linear-gradient(45deg, #d22a43, #fd6a11) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 5px 15px rgba(253, 106, 17, 0.3) !important;
        color: #fff !important;
        text-decoration: none !important;
    }
}

/* Large screens (1200px+) */
@media screen and (min-width: 1200px) {
    .responsive-header .container {
        max-width: 1200px !important;
        padding: 0 30px !important;
    }
    
    .responsive-header .logo-container {
        margin: 0 50px 0 0 !important;
    }
    
    .responsive-header .logo-img {
        max-width: 320px !important;
    }
    
    .responsive-header .nav-menu li {
        margin: 0 25px 0 0 !important;
    }
    
    .responsive-header .nav-menu a {
        font-size: 16px !important;
    }
    
    .responsive-header .cta-button a {
        padding: 12px 30px !important;
        font-size: 16px !important;
    }
}

/* Extra large screens (1400px+) */
@media screen and (min-width: 1400px) {
    .responsive-header .container {
        max-width: 1400px !important;
        padding: 0 40px !important;
    }
    
    .responsive-header .logo-container {
        margin: 0 60px 0 0 !important;
    }
    
    .responsive-header .logo-img {
        max-width: 350px !important;
    }
    
    .responsive-header .nav-menu li {
        margin: 0 30px 0 0 !important;
    }
    
    .responsive-header .nav-menu a {
        font-size: 17px !important;
    }
    
    .responsive-header .cta-button a {
        padding: 14px 35px !important;
        font-size: 17px !important;
    }
}

/* =============================================
   FINAL OVERRIDE TO ENSURE STYLES WORK ON LIVE SITE
   ============================================= */

/* CTA Button - Ultimate override with all possible selectors */
.responsive-header .cta-button a.grad-btn,
.responsive-header .cta-button a.various.grad-btn,
.responsive-header .cta-button .various.grad-btn,
.responsive-header .cta-button a {
    color: #fff !important;
    background: linear-gradient(45deg, #fd6a11, #d22a43) !important;
}

.responsive-header .cta-button a.grad-btn:hover,
.responsive-header .cta-button a.various.grad-btn:hover,
.responsive-header .cta-button .various.grad-btn:hover,
.responsive-header .cta-button a:hover {
    color: #fff !important;
    background: linear-gradient(45deg, #d22a43, #fd6a11) !important;
    text-decoration: none !important;
}

/* Active navigation links - Ultimate override */
.responsive-header .nav-menu li a.is-active,
.responsive-header .nav-menu li.active a,
.responsive-header .nav-menu a.is-active {
    color: #fd6a11 !important;
}

/* Remove borders, outlines, and focus rings from nav links */
.responsive-header .nav-menu a,
.responsive-header .nav-menu a:focus,
.responsive-header .nav-menu a:active,
.responsive-header .nav-menu a:visited,
.responsive-header .nav-menu a:hover {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.responsive-header .nav-menu a:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure no webkit focus rings */
.responsive-header .nav-menu a:focus {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}