/* ============================================================
   TTP — DARK MODE OVERRIDES
   The Travel Place | dark-mode.css
   ============================================================ */

/* Dark mode builds on CSS variable changes defined in variables.css
   This file handles structural overrides that can't be done with variables alone */

/* ── Header ──────────────────────────────────────────────── */
[data-theme="dark"] .site-header.hero-light .nav-link,
[data-theme="dark"] .site-header.hero-light .nav-logo-text {
  color: #fff;
}

[data-theme="dark"] .site-header.is-scrolled .nav-link {
  color: var(--color-text);
}

[data-theme="dark"] .site-header.is-scrolled .nav-logo-text {
  color: var(--color-text);
}

/* ── Nav Theme Toggle ────────────────────────────────────── */
.theme-icon-moon { display: none; }
.theme-icon-sun  { display: block; }

[data-theme="dark"] .theme-icon-moon { display: block; }
[data-theme="dark"] .theme-icon-sun  { display: none; }

/* ── Mobile Menu ─────────────────────────────────────────── */
[data-theme="dark"] .mobile-menu {
  background: var(--color-surface);
}

/* ── Hero ────────────────────────────────────────────────── */
/* Hero always dark — no changes needed */

/* ── Search Panel ────────────────────────────────────────── */
[data-theme="dark"] .search-panel {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .search-field-input {
  background: var(--color-bg);
  border-color: var(--color-border);
}

[data-theme="dark"] .search-field-input input,
[data-theme="dark"] .search-field-input select {
  color: var(--color-text);
  background: transparent;
}

[data-theme="dark"] .search-field-input select option {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ── Value Prop ──────────────────────────────────────────── */
[data-theme="dark"] .value-prop-item:first-child {
  background: linear-gradient(135deg, var(--ttp-red-deep), #6B0010);
}

/* ── Story Section ───────────────────────────────────────── */
[data-theme="dark"] .story-img-accent {
  border-color: var(--color-bg);
}

[data-theme="dark"] .story-stats-pill {
  background: var(--color-card);
  border-color: var(--color-border);
}

/* ── Service Cards ───────────────────────────────────────── */
[data-theme="dark"] .service-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ── CTA Section ─────────────────────────────────────────── */
[data-theme="dark"] .cta-section {
  background: linear-gradient(135deg, #130003 0%, #0B0B0C 50%);
}

/* ── Footer ──────────────────────────────────────────────── */
[data-theme="dark"] .site-footer {
  background: #060608;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── Hero Overlays (lighter on dark to maintain contrast) ── */
[data-theme="dark"] .hero-slide-overlay {
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.45) 60%,
    rgba(0,0,0,0.15) 100%
  );
}

/* ── Image Placeholders ──────────────────────────────────── */
[data-theme="dark"] .img-placeholder {
  background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-card) 100%);
  color: var(--color-subtle);
}

/* ── Blog ────────────────────────────────────────────────── */
[data-theme="dark"] .blog-card-img {
  background: var(--color-surface-2);
}

/* ── Forms ───────────────────────────────────────────────── */
[data-theme="dark"] .form-control {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .form-control:focus {
  background: var(--color-card);
}

/* ── Testimonials ────────────────────────────────────────── */
[data-theme="dark"] .testimonial-card {
  background: var(--color-card);
}

/* ── Offer Cards ─────────────────────────────────────────── */
[data-theme="dark"] .offer-card {
  background: var(--color-card);
  border-color: var(--color-border);
}

/* ── FAQ ─────────────────────────────────────────────────── */
[data-theme="dark"] .faq-item {
  background: var(--color-card);
}

[data-theme="dark"] .faq-icon {
  background: var(--color-surface-2);
}

/* ── Steps ───────────────────────────────────────────────── */
[data-theme="dark"] .step-number {
  background: rgba(208,2,27,0.12);
}

/* ── Badges ──────────────────────────────────────────────── */
[data-theme="dark"] .badge--silver {
  background: var(--color-surface-2);
  color: var(--color-text-2);
}

[data-theme="dark"] .badge--outline {
  border-color: var(--color-border-2);
  color: var(--color-text-2);
}

/* ── Skeleton ────────────────────────────────────────────── */
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-2) 25%,
    var(--color-card) 50%,
    var(--color-surface-2) 75%
  );
}

/* ── Why TTP Section ─────────────────────────────────────── */
[data-theme="dark"] .why-ttp-item {
  border-bottom-color: var(--color-divider);
}

/* ── Newsletter ──────────────────────────────────────────── */
[data-theme="dark"] .newsletter-input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

/* ── Theme Transition ────────────────────────────────────── */
body {
  transition: background-color 0.4s ease,
              color 0.4s ease;
}

/* Animate specific surfaces on theme change */
.site-header,
.mobile-menu,
.search-panel,
.offer-card,
.service-card,
.blog-card,
.testimonial-card,
.value-prop-item,
.faq-item,
.site-footer {
  transition: background-color 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}

/* ── Prefers color scheme: intentionally not auto-applied ─── */
/* Light is the explicit default. Dark is only applied when the user
   clicks the toggle (stored in localStorage). The OS dark preference
   is intentionally ignored so the site always starts light. */