/* Light Theme Overrides
   Colors: white (#ffffff), gainsboro (#dcdcdc), whitesmoke (#f5f5f5)
   This file overrides the dark theme styles from style.css
   Load this file AFTER style.css to apply light theme
*/

:root {
    --dark-bg: #ffffff;
    --darker-bg: #f5f5f5;
    --lighter-bg: #1a1a1a;
    --card-bg: #f5f5f5;
    --text-grey: #555555;
    --clients-bg-base: #ffffff;
}

body {
    background-color: #ffffff;
    color: #1a1a1a;
}

/* Navbar */
.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.navbar-brand h3 {
    color: #1a1a1a !important;
}

.navbar-nav {
    background: rgba(0, 0, 0, 0.05);
}

.nav-link {
    color: #1a1a1a !important;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-color) !important;
    background-color: #dcdcdc;
}

/* Hero Section - keep white text on dark background image */
.hero-overlay h1,
.hero-overlay .display-3 {
    color: #ffffff !important;
    -webkit-text-stroke-color: #ffffff !important;
}

.hero-overlay p,
.hero-overlay .lead {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Ensure hero section headings stay white */
.hero h1,
.hero-img h1,
section.hero h1 {
    color: #ffffff !important;
}

/* Glass Effects */
.bg-glass {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.bg-darker {
    background-color: #f5f5f5;
}

/* Services Section */
.services-section {
    background:
        radial-gradient(65% 58% at 8% 10%, rgba(123, 170, 219, 0.15) 0%, rgba(123, 170, 219, 0) 70%),
        radial-gradient(44% 36% at 85% 82%, rgba(95, 127, 168, 0.12) 0%, rgba(95, 127, 168, 0) 74%),
        linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
}

.service-card div {
    background: linear-gradient(150deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02)), rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 14px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.service-icon {
    background: linear-gradient(150deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02)), rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 14px 30px rgba(0, 0, 0, 0.08);
}

.service-icon:hover {
    background-color: #dcdcdc;
}

.service-card-link {
    color: #0a58ca;
}

.service-card-link:hover {
    color: #1a1a1a;
}

/* Home Services Tabs */
.home-services-shell {
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.08);
}

.home-service-tab {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
    color: #1a1a1a;
}

.home-service-tab:hover,
.home-service-tab:focus {
    background: rgba(0, 0, 0, 0.05);
}

.home-service-tab.active {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(245, 245, 245, 0.9));
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);
}

.home-service-tab__title {
    color: #1a1a1a;
}

.home-service-panel {
    backdrop-filter: blur(10px);
}

.home-service-panel__label {
    color: #0a58ca;
}

.home-service-panel h3 {
    color: #1a1a1a;
}

.home-service-panel p {
    color: rgba(26, 26, 26, 0.78);
}

/* Page Hero - used in About, Policies, Services etc. */
.page-hero {
    background: 
        radial-gradient(50% 60% at 50% 0%, rgba(52, 138, 167, 0.12) 0%, rgba(52, 138, 167, 0) 72%),
        linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.page-hero h1 {
    color: #1a1a1a !important;
}

.page-hero p.lead,
.page-hero p.text-light-emphasis,
.page-hero p {
    color: rgba(26, 26, 26, 0.72) !important;
}

/* Contact Page */
.contact-hero {
    background:
        radial-gradient(50% 60% at 50% 0%, rgba(52, 138, 167, 0.12) 0%, rgba(52, 138, 167, 0) 72%),
        linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
}

.contact-eyebrow {
    color: rgba(26, 26, 26, 0.72);
}

.contact-lead {
    color: rgba(26, 26, 26, 0.78);
}

.contact-channels-section {
    background: linear-gradient(180deg, #f5f5f5 0%, #dcdcdc 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.contact-channel-card {
    background: rgba(255, 255, 255, 0.9);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.9), transparent 50%);
    backdrop-filter: blur(20px);
}

.contact-channel-card:hover {
    background: rgba(255, 255, 255, 1);
}

.contact-channel-icon {
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: rgba(13, 110, 253, 0.1);
    color: #0a58ca;
}

.contact-channel-label {
    color: rgba(26, 26, 26, 0.6);
}

.contact-channel-card strong {
    color: #1a1a1a;
}

.contact-form-section {
    background: linear-gradient(180deg, #dcdcdc 0%, #f5f5f5 100%);
}

.contact-form-wrap {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)),
        rgba(255, 255, 255, 0.95);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
}

.contact-form-wrap h2 {
    color: #1a1a1a;
}

.contact-form-lead {
    color: rgba(26, 26, 26, 0.7);
}

.contact-label {
    color: rgba(26, 26, 26, 0.8);
}

.contact-input {
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a1a;
}

.contact-input::placeholder {
    color: rgba(26, 26, 26, 0.45);
}

.contact-input:focus {
    background: #ffffff;
    border-color: var(--primary-color);
    color: #1a1a1a;
}

/* Service Detail Page */
.service-detail-hero {
    background:
        radial-gradient(55% 52% at 12% 8%, rgba(52, 138, 167, 0.15) 0%, rgba(52, 138, 167, 0) 72%),
        radial-gradient(42% 36% at 88% 88%, rgba(1, 167, 76, 0.1) 0%, rgba(1, 167, 76, 0) 76%),
        linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
}

.service-detail-eyebrow,
.service-detail-kicker {
    color: rgba(26, 26, 26, 0.72);
}

.service-detail-lead {
    color: rgba(26, 26, 26, 0.78);
}

.service-detail-hero-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)),
        rgba(255, 255, 255, 0.95);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.08);
}

.service-detail-hero-card h3,
.service-feature-card h2,
.service-cta-panel h2 {
    color: #1a1a1a;
}

.service-detail-list li {
    color: rgba(26, 26, 26, 0.78);
}

.service-detail-section {
    background: linear-gradient(180deg, #f5f5f5 0%, #dcdcdc 100%);
}

.service-feature-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

.service-feature-media {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.service-feature-card p,
.service-cta-panel p {
    color: rgba(26, 26, 26, 0.75);
}

.service-feature-icon {
    background: rgba(13, 110, 253, 0.1);
}

.service-feature-visual {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
}

.service-features-panel {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
}

.service-feature-row+.service-feature-row {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.service-feature-row__icon {
    background: rgba(13, 110, 253, 0.1);
    border: 1px solid rgba(13, 110, 253, 0.2);
}

.service-feature-row__body p {
    color: rgba(26, 26, 26, 0.72);
}

.service-process-section {
    background: linear-gradient(180deg, #dcdcdc 0%, #f5f5f5 100%);
}

.service-process-intro {
    color: rgba(26, 26, 26, 0.72);
}

.service-flow-card {
    border: 2px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.95);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.9), transparent 50%);
    box-shadow:
        0 12px 44px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.service-flow-card:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.2);
}

.service-flow-badge {
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.95);
    background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(245, 245, 245, 0.8));
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.service-flow-badge span {
    color: #1a1a1a;
}

.service-flow-icon {
    color: rgba(26, 26, 26, 0.82);
}

.service-flow-kicker {
    color: rgba(26, 26, 26, 0.68);
}

.service-flow-title {
    color: #1a1a1a;
}

.service-flow-copy {
    color: rgba(26, 26, 26, 0.72);
}

.service-cta-panel {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background:
        radial-gradient(42% 44% at 12% 12%, rgba(52, 138, 167, 0.12) 0%, rgba(52, 138, 167, 0) 74%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)),
        rgba(255, 255, 255, 0.95);
}

/* Footer */
.hover-white:hover {
    color: #1a1a1a !important;
}

.form-control:focus {
    background-color: #ffffff;
    border-color: var(--primary-color);
    color: #1a1a1a;
}

/* About Section Custom Styles */
.bg-dark-glass {
    background: rgba(245, 245, 245, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Workflow Section */
.workflow-section {
    background: radial-gradient(70% 55% at 50% 50%, #e8f4f8 0%, #d4e8f0 18%, #c0dce8 34%, #b0d0e0 50%, #a0c4d8 66%, #90b8d0 80%, #80acc8 92%, #70a0c0 97%, #6094b8 100%);
}

.workflow-step div.curve {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.workflow-icon {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(13, 110, 253, 0.15), transparent 70%), #ffffff;
}

.workflow-icon span {
    -webkit-text-stroke-color: #1a1a1a;
}

.text-outline-light {
    -webkit-text-stroke: 1px rgba(26, 26, 26, 0.3);
}

.bg-card {
    background-color: #f5f5f5;
}

/* Clients Slider Section */
.client-card {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.client-card:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.12);
}

.logo-box {
    background-color: rgba(0, 0, 0, 0.03);
}

.logo-box:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

/* Site Footer */
.site-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background:
        radial-gradient(circle at 15% 10%, rgba(13, 110, 253, 0.1) 0%, rgba(13, 110, 253, 0) 40%),
        linear-gradient(180deg, #f5f5f5 0%, #dcdcdc 100%);
}

.footer-title {
    color: rgba(26, 26, 26, 0.9);
}

.footer-text {
    color: rgba(26, 26, 26, 0.72);
}

.footer-links a,
.footer-bottom a {
    color: rgba(26, 26, 26, 0.72);
}

.footer-links a:hover,
.footer-bottom a:hover {
    color: #1a1a1a;
}

.footer-contact li {
    color: rgba(26, 26, 26, 0.72);
}

.footer-contact a {
  color: rgba(0, 0, 0, 0.72);
}

.footer-social a {
    color: #1a1a1a;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.footer-social a:hover {
    background-color: var(--primary-color);
    color: #ffffff;
}

.footer-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: rgba(26, 26, 26, 0.6);
}

/* Mobile Off-Canvas Nav */
.mobile-nav-btn img {
    filter: none;
}

.mobile-nav-btn span {
    color: #1a1a1a;
}

.mobile-nav-offcanvas {
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-left-color: rgba(0, 0, 0, 0.1);
}

.mobile-nav-offcanvas .offcanvas-header {
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

.mobile-nav-close {
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(26, 26, 26, 0.7);
}

.mobile-nav-close img {
    filter: none;
}

/* .mobile-nav-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
} */

.mobile-nav-item {
    color: rgba(26, 26, 26, 0.8);
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.mobile-nav-item::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.72) 0%,
        rgba(255, 255, 255, 0.32) 100%
    );
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(0, 0, 0, 0.04),
        0 6px 20px rgba(0, 0, 0, 0.08);
}

.mobile-nav-item:hover {
    color: #1a1a1a;
}

.mobile-nav-item.active {
    color: var(--primary-color);
}

.mobile-nav-sublabel {
    color: rgba(26, 26, 26, 0.3);
}

.mobile-nav-pill {
    border-color: rgba(0, 0, 0, 0.14);
    color: rgba(26, 26, 26, 0.55);
}

.mobile-nav-pill:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: rgba(26, 26, 26, 0.85);
    border-color: rgba(0, 0, 0, 0.22);
}

.footer-pill {
    border-color: rgba(0, 0, 0, 0.18);
    color: rgba(26, 26, 26, 0.75);
}

.footer-pill:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

/* About Page */
.about-hero {
    background: radial-gradient(circle at 20% 15%, rgba(13, 110, 253, 0.15) 0%, rgba(13, 110, 253, 0) 42%),
        radial-gradient(circle at 80% 10%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 38%),
        linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
}

.eyebrow {
    color: rgba(26, 26, 26, 0.8);
}

.hero-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

.hero-card-badge {
    background: rgba(13, 110, 253, 0.92);
    color: #ffffff;
}

.metric-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
}

.metric-card p {
    color: rgba(26, 26, 26, 0.75);
}

.about-story {
    background: linear-gradient(110deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0));
}

.value-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.value-card:hover {
    border-color: rgba(13, 110, 253, 0.5);
}

.value-card p {
    color: rgba(26, 26, 26, 0.75);
}

/* Buttons */
.btn-white-outline {
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
}

.btn-white-outline:hover {
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.15);
}

/* Text Colors */
.txt-cyan {
    color: #0a58ca;
}

.txt-gradient {
    color: #0a58ca;
    background-image: linear-gradient(45deg, #0a58ca, #0d6efd 50%, #348AA7 100%);
}

/* Headings - ensure they're dark */
h1, h2, h3, h4, h5, h6 {
    color: #1a1a1a;
}

/* Lead text */
.lead {
    color: rgba(26, 26, 26, 0.8);
}

/* Text utilities for light theme */
/* Keep text-white as white in hero sections with dark backgrounds */
.hero .text-white,
.hero-overlay .text-white,
.hero-overlay h1,
.hero-overlay p {
    color: #ffffff !important;
}

/* Override any remaining white text */
.text-light {
    color: rgba(26, 26, 26, 0.8) !important;
}

/* About shape background */
.about-shape-bg {
    background: radial-gradient(circle, rgba(13, 110, 253, 0.08) 0%, transparent 70%);
}

/* Loader container */
.container-loader .ball {
    mix-blend-mode: multiply;
}

/* IMPORTANT: Hero section overrides - must be at end for specificity */
/* Base style.css uses color: transparent with text-stroke, so we need to override both */
.hero-overlay h1.display-3,
.hero-overlay h1,
.hero-wrapper .hero-overlay h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: none !important;
}

.hero-overlay p.lead,
.hero-overlay p,
.hero-wrapper .hero-overlay p {
    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

/* Theme Toggle FAB - light theme */
[data-theme="light"] .theme-toggle-fab {
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .theme-toggle-fab:hover {
    background: rgba(0, 0, 0, 0.12);
}