/**
 * ElevityDev — Dark mode + Lang/Theme UI controls
 * Applied via html[data-theme="dark"].
 * Controls: .lang-switcher, .lang-btn, .dm-toggle
 */

/* ── Smooth theme transition ─────────────────────────────────────────── */
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.3s ease,
    box-shadow 0.35s ease !important;
}

/* ── Dark mode CSS variable overrides ──────────────────────────────────── */
html[data-theme="dark"] {
  --background-color: #0f1117;
  --default-color: #b2bcd4;
  --heading-color: #dce4ff;
  --surface-color: #171c2b;
  --contrast-color: #ffffff;

  --nav-color: #dce4ff;
  --nav-hover-color: #7a8bff;
  --nav-mobile-background-color: #171c2b;
  --nav-dropdown-background-color: #1c2235;
  --nav-dropdown-color: #b2bcd4;
  --nav-dropdown-hover-color: #7a8bff;

  /* enhance.css token overrides */
  --accent-soft: rgba(65, 84, 241, 0.14);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* ── Light-background section variant ──────────────────────────────────── */
html[data-theme="dark"] .light-background {
  --background-color: #131724;
  --surface-color: #1c2235;
}

/* ── Header glass pill ──────────────────────────────────────────────────── */
html[data-theme="dark"] .header .container-fluid,
html[data-theme="dark"] .header .container-xl {
  background: rgba(15, 17, 23, 0.84);
  border-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .scrolled .header {
  background-color: #0f1117;
}
html[data-theme="dark"] .scrolled .header .container-fluid,
html[data-theme="dark"] .scrolled .header .container-xl {
  background: rgba(15, 17, 23, 0.97);
}

/* ── Card / surface borders ─────────────────────────────────────────────── */
html[data-theme="dark"] .values .card,
html[data-theme="dark"] .stats .stats-item,
html[data-theme="dark"] .features .feature-box,
html[data-theme="dark"] .services .service-item,
html[data-theme="dark"] .process .process-card,
html[data-theme="dark"] .faq .faq-item,
html[data-theme="dark"] .portfolio .portfolio-content,
html[data-theme="dark"] .testimonials .testimonial-item,
html[data-theme="dark"] .team .team-member,
html[data-theme="dark"] .contact .info-item,
html[data-theme="dark"] .contact .php-email-form,
html[data-theme="dark"] .recent-posts .post-item,
html[data-theme="dark"] .navmenu .dropdown ul {
  border-color: rgba(255, 255, 255, 0.06);
}

/* ── Services hover — keep dark surface ─────────────────────────────────── */
html[data-theme="dark"] .services .service-item:hover,
html[data-theme="dark"] .services .service-item.item-cyan:hover,
html[data-theme="dark"] .services .service-item.item-orange:hover,
html[data-theme="dark"] .services .service-item.item-teal:hover,
html[data-theme="dark"] .services .service-item.item-red:hover,
html[data-theme="dark"] .services .service-item.item-indigo:hover,
html[data-theme="dark"] .services .service-item.item-pink:hover {
  background: #1c2235 !important;
}
html[data-theme="dark"] .services .service-item:hover h3 { color: #dce4ff !important; }
html[data-theme="dark"] .services .service-item:hover p  { color: #b2bcd4 !important; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .form-control {
  background-color: #1c2235;
  border-color: rgba(255, 255, 255, 0.1);
  color: #b2bcd4;
}
html[data-theme="dark"] .form-control::placeholder {
  color: rgba(178, 188, 212, 0.4);
}
html[data-theme="dark"] .form-control:focus {
  background-color: #212840;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(65, 84, 241, 0.2);
  color: #dce4ff;
}

/* ── Footer newsletter ──────────────────────────────────────────────────── */
html[data-theme="dark"] .footer .footer-newsletter {
  background: rgba(65, 84, 241, 0.06);
  border-color: rgba(65, 84, 241, 0.15);
}
html[data-theme="dark"] .footer .newsletter-form {
  background: #1c2235;
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .footer .newsletter-form input[type="email"] {
  background: transparent;
  color: #b2bcd4;
}

/* ── Team social glass overlay ──────────────────────────────────────────── */
html[data-theme="dark"] .team .team-member .social {
  background: rgba(10, 12, 20, 0.88);
}

/* ── Footer social links ────────────────────────────────────────────────── */
html[data-theme="dark"] .footer .social-links a {
  border-color: rgba(255, 255, 255, 0.1);
  color: #b2bcd4;
}

/* ── Hero drop-shadow ───────────────────────────────────────────────────── */
html[data-theme="dark"] .hero .hero-img img {
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}

/* ── About image ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .about img {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}

/* ── Portfolio filter pills ─────────────────────────────────────────────── */
html[data-theme="dark"] .portfolio .portfolio-filters li {
  color: #b2bcd4;
}
html[data-theme="dark"] .portfolio .portfolio-filters li.filter-active {
  color: #fff;
}

/* ── Blog meta separator ────────────────────────────────────────────────── */
html[data-theme="dark"] .recent-posts .meta .text-black-50 {
  color: rgba(178, 188, 212, 0.45) !important;
}

/* ── FAQ active border ──────────────────────────────────────────────────── */
html[data-theme="dark"] .faq .faq-item.faq-active {
  border-color: rgba(65, 84, 241, 0.4);
}

/* ── Mobile nav background ──────────────────────────────────────────────── */
html[data-theme="dark"] .mobile-nav-active .navmenu {
  background: #171c2b;
}

/* ── Hero section — remove the light PNG background ────────────────────── */
html[data-theme="dark"] .hero {
  background-image: none;
}

/* ── Index page header hardcoded white overrides ────────────────────────── */
html[data-theme="dark"] .index-page .header {
  --background-color: transparent;
}
html[data-theme="dark"] .index-page.scrolled .header {
  --background-color: #0f1117;
}

/* ── Projects / Our Work section ────────────────────────────────────────── */
html[data-theme="dark"] .projects .project-card {
  border-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .projects .project-screenshot {
  background: #1c2235;
}
html[data-theme="dark"] .projects .project-stats {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* ════════════════════════════════════════════════════════════════════════════
   UI CONTROLS — Language switcher & Dark mode toggle
   ════════════════════════════════════════════════════════════════════════════ */

/* Wrapper that groups both controls next to each other */
.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  flex-shrink: 0;
}

/* ── Language switcher ──────────────────────────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  background: rgba(18, 22, 55, 0.05);
  border: 1px solid rgba(18, 22, 55, 0.1);
  border-radius: 999px;
  padding: 3px;
}
html[data-theme="dark"] .lang-switcher {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.lang-btn {
  background: none;
  border: none;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--nav-font, sans-serif);
  letter-spacing: 0.6px;
  color: var(--nav-color);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  line-height: 1;
}
.lang-btn.active {
  background: var(--accent-color);
  color: #fff;
}
.lang-btn:not(.active):hover {
  color: var(--accent-color);
}
html[data-theme="dark"] .lang-btn {
  color: #b2bcd4;
}
html[data-theme="dark"] .lang-btn:not(.active):hover {
  color: #7a8bff;
}

/* ── Dark mode toggle ───────────────────────────────────────────────────── */
.dm-toggle {
  background: none;
  border: 1px solid rgba(18, 22, 55, 0.1);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  color: var(--nav-color);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  flex-shrink: 0;
}
.dm-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--accent-color);
  color: var(--accent-color);
}
html[data-theme="dark"] .dm-toggle {
  border-color: rgba(255, 255, 255, 0.1);
  color: #dce4ff;
}
html[data-theme="dark"] .dm-toggle:hover {
  background: rgba(65, 84, 241, 0.16);
  border-color: #7a8bff;
  color: #7a8bff;
}

/* ── Mobile: stack controls inside nav ─────────────────────────────────── */
@media (max-width: 1199px) {
  .header-controls {
    margin-left: 6px;
  }
  .lang-btn { padding: 4px 10px; font-size: 11px; }
  .dm-toggle { width: 32px; height: 32px; font-size: 13px; }
}