/* ===================================================================
   Dark Mode — shared styles for all pages
   =================================================================== */

/* Fallback variables for pages that don't define them inline */
[data-theme="dark"] {
  --color-text: #e8e8e8;
  --color-bg: #1a1a1a;
  --color-text-muted: rgba(232, 232, 232, 0.4);
  --color-text-subtle: rgba(232, 232, 232, 0.75);
  --color-border: #333333;
  --color-surface: #242424;
  --color-accent: #e8e8e8;
}

/* Body base */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* ---- Desktop toggle ---- */
.dark-mode-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  vertical-align: middle;
  opacity: 0.6;
  transition: opacity 0.3s ease, color 0.4s ease;
  color: var(--color-text);
}

.dark-mode-toggle:hover { opacity: 1; }

.dark-mode-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

body.nav-inverted .dark-mode-toggle { color: var(--color-text-on-dark); }
body.nav-solid .dark-mode-toggle { color: var(--color-text); }

/* ---- Mobile toggle (in overlay) ---- */
.mobile-dark-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: opacity 0.3s ease, color 0.3s ease;
}

.mobile-dark-toggle:hover { opacity: 0.6; }

.mobile-dark-toggle svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-dark-toggle .dm-sun { display: none; }
[data-theme="dark"] .mobile-dark-toggle .dm-sun { display: block; }
[data-theme="dark"] .mobile-dark-toggle .dm-moon { display: none; }
.mobile-dark-toggle .dm-label-dark,
.mobile-dark-toggle .dm-label-light { display: none; }

/* ---- Navigation ---- */
[data-theme="dark"] body.nav-solid .navigation {
  background: rgba(26, 26, 26, 0.92) !important;
}

[data-theme="dark"] body.nav-solid .navigation .logo-image {
  filter: brightness(0) invert(1);
}

[data-theme="dark"] body.nav-solid .menu-icon {
  filter: brightness(0) invert(1);
}

[data-theme="dark"] body.scrolled .navigation::after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
}

/* ---- Dropdown ---- */
[data-theme="dark"] .nav-dropdown-list {
  background: rgba(30, 30, 30, 0.97);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .nav-dropdown-list a {
  color: var(--color-text) !important;
}

/* ---- Mobile menu overlay ---- */
[data-theme="dark"] .mobile-menu-overlay {
  background: rgba(26, 26, 26, 0.97);
}

[data-theme="dark"] .mobile-menu-close img {
  filter: brightness(0) invert(1);
}

/* ---- Breadcrumb ---- */
[data-theme="dark"] .breadcrumb-vertical a,
[data-theme="dark"] .breadcrumb-vertical span {
  color: rgba(232, 232, 232, 0.5);
}

[data-theme="dark"] .breadcrumb-vertical a:hover {
  color: var(--color-text);
}

/* ---- Catalog download button ---- */
[data-theme="dark"] .catalog-download {
  background: rgba(232, 232, 232, 0.08);
}

/* ---- More projects cards ---- */
[data-theme="dark"] .more-project-card:hover img {
  filter: brightness(0.4);
}

/* ---- Footer ---- */
.footer-wrap,
.footer-wrap.desktop {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 40px clamp(24px, 4vw, 80px) !important;
}

[data-theme="dark"] .footer-item {
  color: var(--color-text-subtle) !important;
}

[data-theme="dark"] .footer-item:hover {
  color: var(--color-text) !important;
}

/* ---- Cookie consent banner ---- */
[data-theme="dark"] #cookie-consent {
  background: rgba(26, 26, 26, 0.97) !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] #cookie-consent p {
  color: var(--color-text) !important;
}

[data-theme="dark"] #cookie-consent button:first-child {
  color: var(--color-text) !important;
  border-color: rgba(232, 232, 232, 0.2) !important;
}

[data-theme="dark"] #cookie-consent button:last-child {
  color: #1a1a1a !important;
  background: #e8e8e8 !important;
  border-color: #e8e8e8 !important;
}

/* ---- Homepage specific ---- */
[data-theme="dark"] .hp-view-all,
[data-theme="dark"] .hp-catalog-download {
  background: rgba(232, 232, 232, 0.08);
}

[data-theme="dark"] .hp-splash {
  background: var(--color-bg);
}

[data-theme="dark"] .eapps-instagram-feed-header {
  display: none !important;
}

/* ---- About page: exhibitions section ---- */
[data-theme="dark"] .about-exhibitions-wrap {
  background: #2a2a2a;
}

[data-theme="dark"] .about-exhibitions {
  border-color: var(--color-border);
}

/* ---- Work page: downloads CTA ---- */
[data-theme="dark"] .work-downloads-wrap {
  background: #2a2a2a;
}

/* ---- Downloads page: complete catalog button ---- */
[data-theme="dark"] .dl-all-btn {
  background: rgba(232, 232, 232, 0.1);
}

/* ---- Pill / tag style buttons ---- */
[data-theme="dark"] .workshop-tag,
[data-theme="dark"] .download-card {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ---- Generic text overrides ---- */
[data-theme="dark"] .paragraph-light,
[data-theme="dark"] .paragraph-light.list {
  color: var(--color-text-subtle) !important;
}

[data-theme="dark"] .heading-2,
[data-theme="dark"] .heading-3 {
  color: var(--color-text) !important;
}

/* ---- Contact page ---- */
[data-theme="dark"] .contact-label,
[data-theme="dark"] .contact-heading,
[data-theme="dark"] .contact-body,
[data-theme="dark"] .contact-row-label,
[data-theme="dark"] .contact-row-value,
[data-theme="dark"] .contact-social a {
  color: var(--color-text);
}

[data-theme="dark"] .contact-divider {
  border-top-color: var(--color-border);
}

/* ---- Showroom bento grid ---- */
[data-theme="dark"] .sr-editorial-text p {
  color: var(--color-text-subtle);
}

[data-theme="dark"] .sr-divider {
  border-color: var(--color-border);
}

/* ---- 991px media ---- */
@media (max-width: 991px) {
  .dark-mode-toggle {
    display: none !important;
  }

  [data-theme="dark"] body.nav-solid .navigation {
    background: rgba(26, 26, 26, 0.92) !important;
  }
}