/**
 * Project 54 — Light Mode CSS Overrides
 * File: p54-light-mode.css
 *
 * ALL rules scoped under body.light-mode so they only apply when toggled.
 * Dark mode (the site's native state) is completely unaffected.
 *
 * Palette: Cool blue-tinted
 * Body BG: #F8FAFC
 * Card/Section: #EEF2F7
 * Primary text: #1E293B
 * Secondary text:#475569
 * Accent: #0692F0 (unchanged)
 * Borders: rgba(30, 41, 59, 0.1)
 *
 * Element IDs from HAL's CP-1 audit (24 elements, all covered):
 * Kit: .elementor-kit-1014
 * Header: 2d20e9a, 34d07bc (nav), 8311346 (widget)
 * Hero: 57903c1, 5d20d1f (headings), 9875b82, 0b38810, 1f49eea (text), 79016e5 (CTA)
 * Services: 173351b (wrapper), 6622c8c (Ignite), 603a4b5 (case study)
 * Differentiator: b4490a1, c0f18b8, c6e47ad
 * Client List: 075536e, 8a81ef7
 * Footer: 2674dc0
 * Buttons: 868853e, b3f676d, 7402d73, f94a4ec
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTY OVERRIDES (Elementor Global Colors)
   ========================================================================== */
body.light-mode {
    /* Elementor globals */
    --e-global-color-primary: #1E293B;
    --e-global-color-secondary: #F8FAFC;
    --e-global-color-text: #1E293B;
    --e-global-color-accent: #0692F0;
    /* Project 54 custom variables */
    --p54-bg-primary: #F8FAFC;
    --p54-bg-section: #EEF2F7;
    --p54-bg-card: #FFFFFF;
    --p54-bg-footer: #1E293B;
    --p54-text-primary: #1E293B;
    --p54-text-secondary: #475569;
    --p54-text-muted: #64748B;
    --p54-accent: #0692F0;
    --p54-border: rgba(30, 41, 59, 0.1);
    --p54-shadow: rgba(30, 41, 59, 0.08);
}

/* ==========================================================================
   2. BODY & GLOBAL BACKGROUNDS
   ========================================================================== */
body.light-mode {
    background-color: #F8FAFC !important;
    color: #1E293B !important;
}
body.light-mode .elementor-kit-1014 {
    background-color: #F8FAFC !important;
    color: #1E293B !important;
}
body.light-mode .elementor {
    color: #1E293B;
}

/* ==========================================================================
   3. HEADER / NAVIGATION BAR
   ========================================================================== */
body.light-mode .elementor-element-2d20e9a {
    background: rgba(248, 250, 252, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(30, 41, 59, 0.08);
}
body.light-mode .elementor-location-header .elementor-nav-menu a,
body.light-mode .elementor-location-header .elementor-item {
    color: #1E293B !important;
}
body.light-mode .elementor-location-header .elementor-nav-menu a:hover,
body.light-mode .elementor-location-header .elementor-item:hover,
body.light-mode .elementor-location-header .elementor-item.elementor-item-active {
    color: #0692F0 !important;
}
body.light-mode .elementor-location-header select {
    color: #1E293B !important;
    border-color: rgba(30, 41, 59, 0.2) !important;
    background-color: transparent !important;
}

/* ==========================================================================
   4. HERO SECTION
   ========================================================================== */
body.light-mode .elementor-location-single > .elementor-section:first-child .elementor-background-overlay,
body.light-mode .e-con:first-child > .e-con-inner > .elementor-background-overlay {
    background: linear-gradient(
        135deg,
        rgba(248, 250, 252, 0.92) 0%,
        rgba(219, 234, 254, 0.85) 50%,
        rgba(238, 242, 247, 0.90) 100%
    ) !important;
}
body.light-mode .elementor-location-single > .elementor-section:first-child h1,
body.light-mode .elementor-location-single > .elementor-section:first-child h2,
body.light-mode .elementor-location-single > .elementor-section:first-child .elementor-heading-title {
    color: #1E293B !important;
}

/* ==========================================================================
   5. SERVICE CARDS (Ignite, Expand, Orbit)
   ========================================================================== */
body.light-mode .elementor-element-6622c8c,
body.light-mode .elementor-element-6622c8c .elementor-widget-wrap {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(30, 41, 59, 0.08);
    box-shadow: 0 1px 3px rgba(30, 41, 59, 0.06);
}
body.light-mode .elementor-accordion .elementor-accordion-item {
    background-color: #FFFFFF !important;
    border-color: rgba(30, 41, 59, 0.08) !important;
}
body.light-mode .elementor-accordion .elementor-tab-title {
    color: #1E293B !important;
}
body.light-mode .elementor-accordion .elementor-tab-content {
    color: #475569 !important;
}

/* ==========================================================================
   6. CASE STUDY CARDS
   ========================================================================== */
body.light-mode .elementor-element-603a4b5,
body.light-mode .elementor-element-603a4b5 .elementor-widget-wrap {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(30, 41, 59, 0.08);
    box-shadow: 0 1px 3px rgba(30, 41, 59, 0.06);
}

/* ==========================================================================
   7. GENERAL SECTION BACKGROUNDS
   ========================================================================== */
body.light-mode .elementor-section[style*="background-color: rgb(49"],
body.light-mode .elementor-section[style*="background-color:rgb(49"],
body.light-mode .e-con[style*="background-color: rgb(49"],
body.light-mode .e-con[style*="background-color:rgb(49"] {
    background-color: #EEF2F7 !important;
}
body.light-mode .elementor-section[style*="background-color: rgb(22"],
body.light-mode .elementor-section[style*="background-color:rgb(22"],
body.light-mode .e-con[style*="background-color: rgb(22"],
body.light-mode .e-con[style*="background-color:rgb(22"] {
    background-color: #F8FAFC !important;
}
body.light-mode .elementor-element > .elementor-container,
body.light-mode .e-con-inner {
    color: #1E293B;
}

/* ==========================================================================
   8. TEXT & HEADINGS
   ========================================================================== */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode .elementor-heading-title {
    color: #1E293B !important;
}
body.light-mode p,
body.light-mode .elementor-text-editor,
body.light-mode .elementor-widget-text-editor {
    color: #475569 !important;
}
body.light-mode .elementor-icon-list-text,
body.light-mode .elementor-post__excerpt,
body.light-mode figcaption {
    color: #64748B !important;
}
body.light-mode a:not(.elementor-button):not(.p54-toggle-icon) {
    color: #1E293B;
}
body.light-mode a:not(.elementor-button):not(.p54-toggle-icon):hover {
    color: #0692F0;
}

/* ==========================================================================
   9. BUTTONS & CTAs
   ========================================================================== */
body.light-mode .elementor-button {
    background-color: #0692F0 !important;
    color: #FFFFFF !important;
}
body.light-mode .elementor-button:hover {
    background-color: #0577C8 !important;
    color: #FFFFFF !important;
}
body.light-mode .elementor-button.elementor-button--outline,
body.light-mode .elementor-button[style*="background-color: transparent"] {
    background-color: transparent !important;
    color: #0692F0 !important;
    border-color: #0692F0 !important;
}

/* ==========================================================================
   10. BLOG / INSIGHTS CARDS
   ========================================================================== */
body.light-mode .elementor-post,
body.light-mode .elementor-posts .elementor-post__card {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(30, 41, 59, 0.08);
    box-shadow: 0 1px 3px rgba(30, 41, 59, 0.06);
}
body.light-mode .elementor-post__title a {
    color: #1E293B !important;
}
body.light-mode .elementor-post__title a:hover {
    color: #0692F0 !important;
}
body.light-mode .elementor-post__badge,
body.light-mode [class*="tag"],
body.light-mode [class*="badge"] {
    background-color: #EEF2F7 !important;
    color: #475569 !important;
    border-color: rgba(30, 41, 59, 0.1) !important;
}

/* ==========================================================================
   11. FOOTER
   ======================================================================= */
body.light-mode .elementor-element-2674dc0 {
    background-color: #1E293B !important;
}
body.light-mode .elementor-element-2674dc0 h1,
body.light-mode .elementor-element-2674dc0 h2,
body.light-mode .elementor-element-2674dc0 h3,
body.light-mode .elementor-element-2674dc0 h4,
body.light-mode .elementor-element-2674dc0 h5,
body.light-mode .elementor-element-2674dc0 h6,
body.light-mode .elementor-element-2674dc0 .elementor-heading-title {
    color: #F7F7F7 !important;
}
body.light-mode .elementor-element-2674dc0 p,
body.light-mode .elementor-element-2674dc0 a,
body.light-mode .elementor-element-2674dc0 .elementor-text-editor,
body.light-mode .elementor-element-2674dc0 .elementor-icon-list-text {
    color: #CBD5E1 !important;
}
body.light-mode .elementor-element-2674dc0 a:hover {
    color: #0692F0 !important;
}

/* ==========================================================================
   12. FORMS & INPUTS
   ========================================================================== */
body.light-mode .elementor-field-textual,
body.light-mode input[type="text"],
body.light-mode input[type="email"],
body.light-mode input[type="tel"],
body.light-mode textarea,
body.light-mode select {
    background-color: #FFFFFF !important;
    color: #1E293B !important;
    border-color: rgba(30, 41, 59, 0.2) !important;
}
body.light-mode .elementor-field-textual::placeholder,
body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
    color: #94A3B8 !important;
}
body.light-mode .elementor-field-textual:focus,
body.light-mode input:focus,
body.light-mode textarea:focus {
    border-color: #0692F0 !important;
    box-shadow: 0 0 0 2px rgba(6, 146, 240, 0.15) !important;
}

/* ==========================================================================
   13. DIVIDERS, BORDERS & SEPARATORS
   ========================================================================== */
body.light-mode .elementor-divider-separator,
body.light-mode hr {
    border-color: rgba(30, 41, 59, 0.1) !important;
}
body.light-mode .elementor-widget-divider .elementor-divider-separator {
    border-color: rgba(30, 41, 59, 0.1) !important;
}

/* ==========================================================================
   14. ICONS
   ========================================================================== */
body.light-mode .elementor-icon i,
body.light-mode .elementor-icon svg {
    color: #475569 !important;
    fill: #475569 !important;
}
body.light-mode .elementor-icon:hover i,
body.light-mode .elementor-icon:hover svg {
    color: #0692F0 !important;
    fill: #0692F0 !important;
}

/* ==========================================================================
   15. IMAGES & MEDIA
   ========================================================================== */
body.light-mode .elementor-widget-image img {
    box-shadow: 0 1px 4px rgba(30, 41, 59, 0.08);
}

/* ==========================================================================
   16. LOGO SWAP
   ========================================================================== */
body.light-mode [data-p54-logo="light"] {
    display: none !important;
}
body.light-mode [data-p54-logo="dark"] {
    display: block !important;
}
[data-p54-logo="dark"] {
    display: none !important;
}
[data-p54-logo="light"] {
    display: block !important;
}
body.light-mode .elementor-element-2674dc0 [data-p54-logo="light"] {
    display: block !important;
}
body.light-mode .elementor-element-2674dc0 [data-p54-logo="dark"] {
    display: none !important;
}

/* ==========================================================================
   17. SCROLLBAR
   ========================================================================== */
body.light-mode::-webkit-scrollbar {
    width: 8px;
}
body.light-mode::-webkit-scrollbar-track {
    background: #F1F5F9;
}
body.light-mode::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}
body.light-mode::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* ==========================================================================
   18. SELECTION HIGHLIGHT
   ========================================================================== */
body.light-mode ::selection {
    background: rgba(6, 146, 240, 0.2);
    color: #1E293B;
}

/* ==========================================================================
   19. TARGETED ELEMENT OVERRIDES (from HAL CP-1 audit — 24 elements)
   ========================================================================== */

/* --- HEADER: Nav Menu (34d07bc) --- */
body.light-mode .elementor-element-34d07bc a {
    color: var(--e-global-color-text, #1E293B) !important;
}
body.light-mode .elementor-element-34d07bc a:hover {
    color: #0692F0 !important;
}

/* --- HEADER: Nav Widget (8311346) --- */
body.light-mode .elementor-181 .elementor-element-8311346 .elementor-item {
    color: #1E293B !important;
}
body.light-mode .elementor-181 .elementor-element-8311346 .elementor-item:hover {
    color: #0692F0 !important;
}

/* --- HERO: Headings (57903c1, 5d20d1f) --- */
body.light-mode .elementor-element-57903c1,
body.light-mode .elementor-element-57903c1 .elementor-heading-title {
    color: #1E293B !important;
}
body.light-mode .elementor-element-5d20d1f,
body.light-mode .elementor-element-5d20d1f .elementor-heading-title {
    color: #1E293B !important;
}

/* --- HERO: Text elements (9875b82, 0b38810, 1f49eea) --- */
body.light-mode .elementor-element-9875b82,
body.light-mode .elementor-element-9875b82 .elementor-text-editor {
    color: rgba(45, 55, 72, 0.6) !important;
}
body.light-mode .elementor-element-0b38810,
body.light-mode .elementor-element-0b38810 .elementor-text-editor {
    color: rgba(45, 55, 72, 0.6) !important;
}
body.light-mode .elementor-element-1f49eea,
body.light-mode .elementor-element-1f49eea .elementor-text-editor {
    color: #475569 !important;
}

/* --- HERO: CTA Button (79016e5) --- */
body.light-mode .elementor-element-79016e5 .elementor-button {
    background-color: #0692F0 !important;
    color: #FFFFFF !important;
}
body.light-mode .elementor-element-79016e5 .elementor-button:hover {
    background-color: #0577C8 !important;
}

/* --- SERVICES: Tiers wrapper (173351b) --- */
body.light-mode .elementor-element-173351b {
    background-color: #EEF2F7 !important;
}
body.light-mode .elementor-element-173351b .elementor-heading-title {
    color: #1E293B !important;
}
body.light-mode .elementor-element-173351b .elementor-text-editor {
    color: #475569 !important;
}

/* --- DIFFERENTIATOR: Text blocks (b4490a1, c0f18b8, c6e47ad) --- */
body.light-mode .elementor-element-b4490a1,
body.light-mode .elementor-element-b4490a1 .elementor-text-editor {
    color: rgba(45, 55, 72, 0.8) !important;
}
body.light-mode .elementor-element-c0f18b8,
body.light-mode .elementor-element-c0f18b8 .elementor-text-editor {
    color: rgba(45, 55, 72, 0.8) !important;
}
body.light-mode .elementor-element-c6e47ad,
body.light-mode .elementor-element-c6e47ad .elementor-text-editor {
    color: rgba(45, 55, 72, 0.8) !important;
}

/* --- CLIENT LIST: Large number headings (075536e, 8a81ef7) --- */
body.light-mode .elementor-element-075536e,
body.light-mode .elementor-element-075536e .elementor-heading-title {
    color: rgba(45, 55, 72, 0.4) !important;
}
body.light-mode .elementor-element-8a81ef7,
body.light-mode .elementor-element-8a81ef7 .elementor-heading-title {
    color: rgba(45, 55, 72, 0.4) !important;
}

/* --- BUTTONS: Specific CTA buttons (868853e, b3f676d, 7402d73, f94a4ec) --- */
body.light-mode .elementor-element-868853e .elementor-button,
body.light-mode .elementor-element-b3f676d .elementor-button,
body.light-mode .elementor-element-7402d73 .elementor-button,
body.light-mode .elementor-element-f94a4ec .elementor-button {
    background-color: #0692F0 !important;
    color: #FFFFFF !important;
}
body.light-mode .elementor-element-868853e .elementor-button:hover,
body.light-mode .elementor-element-b3f676d .elementor-button:hover,
body.light-mode .elementor-element-7402d73 .elementor-button:hover,
body.light-mode .elementor-element-f94a4ec .elementor-button:hover {
    background-color: #0577C8 !important;
}