/* =========================================================
   LIGHT THEME OVERRIDES
   (Paste at the very bottom of styles.css)
   =======================================================*/

/* Global colors */
body {
  background: #f5f5fb;
  color: #111827;
}

.page {
  min-height: 100vh;
  background:
    linear-gradient(to bottom, #ffffff 0%, #f5f5fb 40%, #eef0f7 100%);
}

/* Sections */
.section {
  background: #ffffff;
}

.section-alt {
  background: #f5f5fb;
}

/* Typography */
.section-title,
.section-title span,
.hero h1,
.hero-title {
  color: #111827;
}

.hero-subtitle,
.section-subtitle,
.card-text,
.field-helper,
.contact-value,
.hero-meta-value,
.hero-meta-label {
  color: #4b5563;
}

/* Header / nav */
header,
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
}

.nav-links a {
  color: #4b5563;
  border-color: transparent;
  background: transparent;
}

.nav-links a:hover {
  color: #111827;
  background: #f3f4f6;
  border-color: #e5e7eb;
}

.brand-title {
  color: #111827;
}

.brand-subtitle {
  color: #6b7280;
}

/* Hero overlay so text is readable over bright video */
.hero-overlay {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.90) 40%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

/* Primary buttons – brighter blue like your mock */
.btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d9bf0);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #1d9bf0);
}

/* Outline buttons on light background */
.btn-outline {
  background: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}

.btn-outline:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* Cards (services / projects) */
.card,
.service-card,
.cinematic-card,
.portfolio-item,
.contact-main,
.contact-panel {
  background: #ffffff;
  color: #111827;
  border-color: #e5e7eb;
  box-shadow: 0 18px 40px rgba(148, 163, 184, 0.25);
}

.card-media,
.card-media img,
.card-media video {
  background: #ffffff;
}

/* Placeholder tiles should match light cards */
.placeholder-frame {
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

.placeholder-tag {
  color: #6b7280;
}

/* Social dock – subtle white circles with soft glow */
.social-dock .social-link {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #4b5563;
  box-shadow: 0 10px 25px rgba(148, 163, 184, 0.45);
}

.social-dock .social-link:hover {
  background: #1d9bf0;
  border-color: #1d9bf0;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.55);
}

/* Contact section stays darker (like your screenshot) */
#contact.section-alt,
section#contact.section-alt {
  background: #111827;
  color: #e5e7eb;
}

#contact.section-alt .section-title,
#contact.section-alt .section-title span {
  color: #e5e7eb;
}

#contact.section-alt .section-subtitle {
  color: #9ca3af;
}

#contact.section-alt .contact-main,
#contact.section-alt .contact-panel {
  background: #020617;
  border-color: #1f2937;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
}

#contact.section-alt .field label,
#contact.section-alt .field-helper {
  color: #9ca3af;
}

#contact.section-alt input,
#contact.section-alt textarea,
#contact.section-alt select {
  background: #020617;
  border-color: #374151;
  color: #f9fafb;
}

#contact.section-alt input:focus,
#contact.section-alt textarea:focus,
#contact.section-alt select:focus {
  border-color: #1d9bf0;
  box-shadow: 0 0 0 1px rgba(29, 155, 240, 0.6);
}

/* Footer – dark strip at the very bottom */
.site-footer,
footer {
  background: #020617;
  color: #9ca3af;
  border-top: 1px solid #111827;
}