/* ═══════════════════════════════════════════════════════════
   THEME — DARK MODE COMPONENT OVERRIDES
   Loaded AFTER all component CSS. Only fixes issues that token
   remapping alone can't solve (hardcoded colors, inverted usage,
   components that need explicit dark-mode behaviour).
   ═══════════════════════════════════════════════════════════ */

/* ─── Body baseline ─── */
[data-theme="dark"] body {
    background-color: var(--bg-base);
    color: var(--text-primary);
}

/* ─── Header / navbar ─── */
[data-theme="dark"] .header {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-light);
}
[data-theme="dark"] .header.scrolled {
    background: rgba(10, 10, 10, 0.95);
}
/* ─── Logo swap (theme-aware) ───
   Light theme: original SVG (dark ink). The footer keeps using the
   pre-existing brightness(0) invert(1) filter so dark ink reads on
   the always-dark footer.
   Dark theme: pre-rendered PNG with white text — no filter needed. */
.navbar-logo-img--dark,
.footer-logo--dark { display: none; }
[data-theme="dark"] .navbar-logo-img--light,
[data-theme="dark"] .footer-logo--light { display: none; }
[data-theme="dark"] .navbar-logo-img--dark { display: block; filter: none; }
[data-theme="dark"] .footer-logo--dark { display: block; filter: none; }

/* Keep swapped logos at the same intrinsic dimensions */
.navbar-logo-img { height: 40px; width: auto; }
.footer-logo { height: 48px; width: auto; }
[data-theme="dark"] .nav-link {
    color: var(--gray-700);
}
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: var(--color-primary);
}
[data-theme="dark"] .dropdown-panel {
    background: var(--surface-pearl);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-xl);
}
[data-theme="dark"] .dropdown-item {
    color: var(--gray-700);
}
[data-theme="dark"] .dropdown-item:hover {
    background: var(--gold-50);
    color: var(--color-primary);
}
[data-theme="dark"] .mobile-toggle,
[data-theme="dark"] .lang-toggle {
    color: var(--gray-700);
    border-color: var(--border-default);
}
[data-theme="dark"] .lang-toggle:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
[data-theme="dark"] .lang-dropdown {
    background: var(--surface-pearl);
    border: 1px solid var(--border-light);
}
[data-theme="dark"] .lang-option {
    color: var(--gray-700);
}

/* ─── Footer — STAYS DARKER than the page (contrast region) ─── */
[data-theme="dark"] .footer {
    background: var(--bg-contrast);
    color: var(--text-on-contrast);
    border-top: 1px solid var(--border-light);
}
[data-theme="dark"] .footer-heading {
    color: #ffffff;
}
[data-theme="dark"] .footer-desc,
[data-theme="dark"] .footer-links a,
[data-theme="dark"] .footer-contact p,
[data-theme="dark"] .footer-contact a {
    color: #b8b8b8;
}
[data-theme="dark"] .footer-links a:hover,
[data-theme="dark"] .footer-contact a:hover {
    color: var(--color-primary);
}
[data-theme="dark"] .social-link {
    color: #b8b8b8;
    border-color: #3a3a3a;
}
[data-theme="dark"] .social-link:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(212, 175, 55, 0.15);
}
[data-theme="dark"] .footer-bottom {
    border-top-color: #2a2a2a;
}
[data-theme="dark"] .footer-bottom p,
[data-theme="dark"] .footer-legal {
    color: #8a8a8a;
}

/* ─── Hero ─── */
[data-theme="dark"] .hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.55) 50%,
        rgba(0, 0, 0, 0.72) 100%
    );
}
[data-theme="dark"] .hero-scroll .scroll-line {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), transparent);
}

/* ─── Sections — alternating ─── */
[data-theme="dark"] .section--cream {
    background-color: var(--surface-cream);
}
[data-theme="dark"] .section--pearl {
    background-color: var(--surface-pearl);
}
[data-theme="dark"] .section--dark {
    background: #000000;
    color: #f5f5f5;
}

/* ─── Trust bar (always dark background in light theme; keep dark in dark too) ─── */
[data-theme="dark"] .trust-bar {
    background: var(--bg-contrast);
    color: var(--text-on-contrast);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
[data-theme="dark"] .trust-number {
    color: var(--color-primary);
}
[data-theme="dark"] .trust-label {
    color: #c4c4c4;
}
[data-theme="dark"] .trust-divider {
    background: var(--border-default);
}

/* ─── Cards (service, blog, testimonial, gallery, campaign) ─── */
[data-theme="dark"] .service-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .campaign-card,
[data-theme="dark"] .gallery-card,
[data-theme="dark"] .contact-info-card {
    background: var(--surface-pearl);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}
[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .blog-card:hover,
[data-theme="dark"] .testimonial-card:hover,
[data-theme="dark"] .campaign-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .service-name,
[data-theme="dark"] .feature-title,
[data-theme="dark"] .contact-info-card h3,
[data-theme="dark"] .gallery-caption h4,
[data-theme="dark"] .blog-card-body h3,
[data-theme="dark"] .blog-card-body h3 a,
[data-theme="dark"] .campaign-body h3 {
    color: var(--gray-900);
}
[data-theme="dark"] .service-desc,
[data-theme="dark"] .blog-card-body p,
[data-theme="dark"] .gallery-caption p,
[data-theme="dark"] .campaign-body p,
[data-theme="dark"] .contact-info-card p,
[data-theme="dark"] .testimonial-text,
[data-theme="dark"] .about-text,
[data-theme="dark"] .feature-item p,
[data-theme="dark"] .page-subtitle,
[data-theme="dark"] .section-subtitle {
    color: var(--gray-700);
}
[data-theme="dark"] blockquote.testimonial-text {
    color: var(--gray-800);
}
[data-theme="dark"] .testimonial-author strong {
    color: var(--gray-900);
}
[data-theme="dark"] .testimonial-author span,
[data-theme="dark"] .blog-card-body time {
    color: var(--gray-500);
}

/* ─── Eyebrows / taglines / badges ─── */
[data-theme="dark"] .section-eyebrow,
[data-theme="dark"] .hero-eyebrow {
    color: var(--color-primary);
}
[data-theme="dark"] .ba-label {
    background: rgba(0, 0, 0, 0.8);
    color: #f5f5f5;
}
[data-theme="dark"] .ba-label--after {
    background: var(--color-primary);
    color: #0d0d0d;
}
[data-theme="dark"] .campaign-badge {
    background: var(--color-primary);
    color: #0d0d0d;
}

/* ─── Buttons ─── */
[data-theme="dark"] .btn-outline {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: transparent;
}
[data-theme="dark"] .btn-outline:hover {
    background: var(--color-primary);
    color: #0d0d0d;
}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .nav-cta {
    color: #0d0d0d;
}
[data-theme="dark"] .btn-outline-light {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.7);
}

/* ─── Forms ─── */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--surface-cream);
    color: var(--gray-900);
    border: 1px solid var(--border-default);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--color-primary);
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--gray-500);
}

/* ─── Breadcrumb ─── */
[data-theme="dark"] .breadcrumb {
    background: var(--surface-cream);
    border-bottom: 1px solid var(--border-light);
}
[data-theme="dark"] .breadcrumb-link {
    color: var(--gray-600);
}
[data-theme="dark"] .breadcrumb-link:hover {
    color: var(--color-primary);
}
[data-theme="dark"] .breadcrumb-current {
    color: var(--gray-900);
}
[data-theme="dark"] .breadcrumb-separator {
    color: var(--gray-500);
}

/* ─── Page header ─── */
[data-theme="dark"] .page-header {
    background: var(--surface-cream);
    border-bottom: 1px solid var(--border-light);
}
[data-theme="dark"] .page-title {
    color: var(--gray-900);
}

/* ─── Scroll progress ─── */
[data-theme="dark"] .scroll-progress {
    background: var(--color-primary);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

/* ─── Video wrapper ─── */
[data-theme="dark"] .video-wrapper {
    background: #000000;
}
[data-theme="dark"] .video-info h3 {
    color: var(--gray-900);
}
[data-theme="dark"] .video-info p,
[data-theme="dark"] .check-list li {
    color: var(--gray-700);
}

/* ─── Feature icons ─── */
[data-theme="dark"] .feature-icon,
[data-theme="dark"] .service-icon-wrap {
    background: var(--gold-50);
    color: var(--color-primary);
}

/* ─── About / general text ─── */
[data-theme="dark"] .section-title,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--gray-900);
}
[data-theme="dark"] p {
    color: var(--gray-600);
}
[data-theme="dark"] .about-image-wrap,
[data-theme="dark"] .about-media img {
    filter: brightness(0.92);
}

/* ─── Skip link ─── */
[data-theme="dark"] .skip-link {
    background: var(--color-primary);
    color: #0d0d0d;
}

/* ─── Selection ─── */
[data-theme="dark"] ::selection {
    background: var(--color-primary);
    color: #0d0d0d;
}

/* ─── Scrollbar (WebKit) ─── */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0d0d0d;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 6px;
    border: 2px solid #0d0d0d;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* ─── Theme toggle button itself ─── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--gray-700);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-primary);
    outline: none;
}
.theme-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}
/* Show the right icon based on current theme */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-flex; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: inline-flex; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }