/* ==========================================================================
   Theme Variables (Light & Dark)
   ========================================================================== */
:root {
    /* Branding */
    --brand-teal: #00c2b2;
    --brand-teal-dark: #009688;

    /* Default (Light Mode) */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f1f5f9;
    --card-bg: #ffffff;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    --border-color: #e2e8f0;
}

/* ==========================================================================
   DARK MODE AGGRESSIVE OVERRIDES
   ========================================================================== */
body.dark-mode {
    /* Re-define vars for context where variables are used */
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #2d2d2d;
    --card-bg: #1e1e1e;

    --text-primary: #e0e0e0;
    --text-secondary: #cccccc;
    --text-muted: #a0a0a0;

    --border-color: #333333;

    /* Global Base Styles */
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;

    /* Override variables that might be defined locally in pages */
    --nav-text: var(--text-primary);
    --text-dark: var(--text-primary);
    --text-gray: var(--text-muted);
    --section-bg: var(--bg-secondary);
    --card-bg: var(--bg-tertiary);
    --border-color: #333333;
}

/* 
   UNIVERSAL TEXT VISIBILITY ENFORCER
*/
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span:not(.toggle-knob),
/* Exclude toggle knob helper */
body.dark-mode li,
body.dark-mode td,
body.dark-mode th,
body.dark-mode label,
body.dark-mode small,
body.dark-mode strong,
body.dark-mode b,
body.dark-mode i,
body.dark-mode em {
    color: var(--text-primary) !important;
}

/* Ensure secondary text isn't washed out, but still visible */
body.dark-mode .text-muted,
body.dark-mode .text-secondary {
    color: var(--text-secondary) !important;
}

/* 
   BACKGROUND OVERRIDES - CARDS & CONTAINERS
   Targeting elements that act as containers/cards to ensure they aren't white.
   EXCLUDING: .hero-section (video bg)
*/
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .box,
body.dark-mode .container-box,
body.dark-mode .leader-card,
body.dark-mode .contact-info-card,
body.dark-mode .form-container,
body.dark-mode .service-card,
body.dark-mode .industry-card,
body.dark-mode .feature-card,
body.dark-mode .differentiator-card,
body.dark-mode .solution-item,
body.dark-mode .office-card,
body.dark-mode .highlight-box,
body.dark-mode .challenge-card,
body.dark-mode .expertise-card,
body.dark-mode .tech-card,
body.dark-mode section:not(.hero-section):not(.header-bg):not(.no-dark-override),
body.dark-mode header:not(.header-bg):not(.hero-section),
body.dark-mode footer,
body.dark-mode div[class*="bg-white"],
body.dark-mode div[class*="background-white"],
body.dark-mode .bg-light-section,
body.dark-mode .process-section,
body.dark-mode .services-section,
body.dark-mode .industry-section {
    background-color: var(--bg-primary) !important;
    background-image: none !important;
    /* Remove light gradients */
    background: var(--bg-primary) !important;
    /* Force solid color over shorthand */
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* 
   Specific Fix for Glassmorphism Cards (like Global Presence) 
   Use a dark translucent background instead of solid.
*/
body.dark-mode .global-card {
    background: rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Fix for Hero Section - Keep text white on video */
body.dark-mode .hero-section h1,
body.dark-mode .hero-section h2,
body.dark-mode .hero-section p,
body.dark-mode .hero-section span {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* Inputs / Forms */
body.dark-mode input:not([type="submit"]):not([type="button"]),
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--bg-tertiary) !important;
    color: #ffffff !important;
    border: 1px solid var(--border-color) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Link Colors - Ensure contrast */
body.dark-mode a:not(.btn):not(.btn-hero):not(.nav-link):not(.dropdown-item):not(.mega-menu-link):not(.cta-button):not(.cta-btn):not(.contact-btn) {
    color: var(--brand-teal) !important;
}

body.dark-mode a:not(.btn):not(.btn-hero):not(.nav-link):not(.dropdown-item):not(.cta-button):not(.cta-btn):not(.contact-btn):hover {
    color: #fff !important;
}

/* Ensure btn-hero keeps its style */
body.dark-mode .btn-hero {
    color: #ffffff !important;
    background-color: var(--brand-teal) !important;
}

body.dark-mode .btn-hero:hover {
    background-color: var(--brand-teal-dark) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   NAVBAR DARK MODE STYLING 
   ========================================================================== */

/* Navbar Container */
body.dark-mode .navbar-custom {
    background: #1a1a1a !important;
    border-bottom: 1px solid #333;
}

/* CRITICAL FIX: Navbar Center Menu Background */
/* Targets the ul.nav-center.mobile which has a gradient background by default */
@media (min-width: 1200px) {

    body.dark-mode .nav-center,
    body.dark-mode .nav-center.mobile {
        background: transparent !important;
        box-shadow: none !important;
    }
}

@media (max-width: 1199px) {
    body.dark-mode .nav-center.mobile {
        background: #1a1a1a !important;
        border-top: 1px solid #333;
    }
}

/* Nav Links */
body.dark-mode .nav-link-custom,
body.dark-mode .nav-link {
    color: #ffffff !important;
}

/* Nav Dropdown Arrows */
body.dark-mode .dropdown-toggle::after,
body.dark-mode .dropdown-arrow,
body.dark-mode .chevron-icon {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Hamburger Bars Visibility */
body.dark-mode .hamburger span {
    background-color: #ffffff !important;
}

/* Toggle Button */
body.dark-mode .theme-toggle {
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

body.dark-mode .theme-toggle .toggle-knob {
    background-color: #000000 !important;
}

/* CTA Button */
body.dark-mode .btn-outline-custom {
    color: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
    background-color: transparent !important;
}

body.dark-mode .btn-outline-custom:hover {
    background-color: var(--brand-teal) !important;
    color: #000000 !important;
}

/* Force dark text on any light-colored buttons in dark mode */
body.dark-mode .btn-light,
body.dark-mode .btn-white,
body.dark-mode .btn[style*="background-color: var(--text-white)"],
body.dark-mode .btn[style*="background-color:#fff"],
body.dark-mode .btn[style*="background-color: white"] {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
}

body.dark-mode .btn-primary-custom {
    background-color: var(--brand-teal) !important;
    color: #ffffff !important;
}

/* Dropdown & Mega Menu Fixes */
body.dark-mode .dropdown-menu,
body.dark-mode .mega-menu,
body.dark-mode .mega-menu-inner,
body.dark-mode .mega-menu-content,
body.dark-mode .mega-menu-header {
    background-color: #1a1a1a !important;
    /* Force All Containers Dark */
    background: #1a1a1a !important;
    /* Force no gradient */
    border-color: #333 !important;
    box-shadow: none !important;
    /* Reset conflicting shadows */
}

/* Re-apply shadow only to the outermost container */
body.dark-mode .mega-menu {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .mega-menu-header h3 {
    color: #ffffff !important;
}

body.dark-mode .mega-menu-header {
    border-bottom: 1px solid #333 !important;
}

/* Category Titles */
body.dark-mode .mega-menu-column h5,
body.dark-mode .mega-menu-title,
body.dark-mode .dropdown-header {
    color: var(--brand-teal) !important;
    border-bottom-color: #333 !important;
}

/* Links */
body.dark-mode .dropdown-item,
body.dark-mode .mega-menu-link {
    color: #cccccc !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .mega-menu-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    text-decoration: none;
    padding-left: 5px;
}

/* 
   EXTREME MEASURES FOR INLINE BACKGROUNDS of divs 
*/
body.dark-mode div[style*="background-color: white"],
body.dark-mode div[style*="background-color: #fff"],
body.dark-mode div[style*="background-color:#fff"],
body.dark-mode section[style*="background-color: white"] {
    background-color: var(--bg-secondary) !important;
}

/* Fix for specific list items */
body.dark-mode ul,
body.dark-mode ol {
    background-color: transparent !important;
}

/* Universal Box Styling Site-Wide */
.universal-box,
.service-card,
.feature-card,
.stat-item,
.badge-placeholder,
.leader-card,
.challenge-card,
.solution-box,
.tech-card,
.overview-card,
.expertise-card,
.industry-link-wrapper,
.industry-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border: 1px solid rgba(0, 194, 178, 0.1) !important;
}

.universal-box:hover,
.service-card:hover,
.feature-card:hover,
.stat-item:hover,
.badge-placeholder:hover,
.leader-card:hover,
.challenge-card:hover,
.solution-box:hover,
.tech-card:hover,
.overview-card:hover,
.expertise-card:hover,
.industry-link-wrapper:hover,
.industry-card:hover {
    transform: translateY(-12px) scale(1.03) !important;
    box-shadow: 0 25px 50px rgba(0, 194, 178, 0.25) !important;
    border-color: var(--brand-teal) !important;
    z-index: 10;
}

/* Ensure icons in cards pop on hover */
.universal-box:hover i,
.service-card:hover i,
.feature-card:hover i,
.challenge-card:hover i {
    transform: scale(1.2);
    color: var(--brand-teal-dark) !important;
    transition: all 0.3s ease;
}

/* Awards Centering Helper */
.badge-placeholder img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}