/* Global theme normalization across all pages */
:root {
  --bg: #faf8f4;
  --bg2: #f3efe8;
  --white: #ffffff;
  --ink: #1c1812;
  --ink-muted: #7a6e63;
  --gold: #b08d57;
  --gold-light: #d4ae78;
  --gold-pale: #f0e6d3;
  --border: rgba(176, 141, 87, 0.18);
  --border-soft: rgba(28, 24, 18, 0.08);
  --footer-bg: #fbf6ee;
  --footer-text: var(--ink);
  --footer-text-muted: var(--ink-muted);
  --footer-border: rgba(28, 24, 18, 0.08);
  --footer-copy: rgba(28, 24, 18, 0.6);
}

html.dark {
  --bg: #141210;
  --bg2: #1a1814;
  --white: #1e1c18;
  --ink: #f0ebe3;
  --ink-muted: #9a9082;
  --gold: #c9a265;
  --gold-light: #dbb87a;
  --gold-pale: #2a2318;
  --border: rgba(201, 162, 101, 0.2);
  --border-soft: rgba(240, 235, 227, 0.08);
  --footer-bg: #0e0d0b;
  --footer-text: #f0ebe3;
  --footer-text-muted: #9a9082;
  --footer-border: rgba(240, 235, 227, 0.08);
  --footer-copy: rgba(240, 235, 227, 0.62);
}

@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --bg: #141210;
    --bg2: #1a1814;
    --white: #1e1c18;
    --ink: #f0ebe3;
    --ink-muted: #9a9082;
    --gold: #c9a265;
    --gold-light: #dbb87a;
    --gold-pale: #2a2318;
    --border: rgba(201, 162, 101, 0.2);
    --border-soft: rgba(240, 235, 227, 0.08);
    --footer-bg: #0e0d0b;
    --footer-text: #f0ebe3;
    --footer-text-muted: #9a9082;
    --footer-border: rgba(240, 235, 227, 0.08);
    --footer-copy: rgba(240, 235, 227, 0.62);
  }
}

/* Baseline legibility rules */
body {
  background: var(--bg);
  color: var(--ink);
}

input,
textarea,
select,
button {
  color: var(--ink);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

html.dark input,
html.dark textarea,
html.dark select,
html:not(.light) input,
html:not(.light) textarea,
html:not(.light) select {
  border-color: rgba(240, 235, 227, 0.18);
}

/* Shared dark-mode component behavior */
html.dark nav {
  background: rgba(14, 12, 10, 0.96);
}

html.dark .logo-img {
  filter: invert(1) brightness(1.8);
}

html.dark .foot-logo-img {
  filter: invert(1) brightness(1.8);
}

html.dark .nav-hamburger span {
  background: var(--ink);
}

html.dark .mobile-menu {
  background: var(--bg);
}

html.dark .nav-links .dropdown {
  background: var(--white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Keep the original floating toggle button look across all pages */
.hero-wrap {
  position: relative;
}

.theme-toggle {
  position: fixed;
  top: 90px;
  right: 8px;
  z-index: 400;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: border-color 0.3s, background 0.3s, transform 0.4s;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  color: #fff;
  user-select: none;
}

.theme-toggle:active {
  cursor: grabbing;
}

.theme-toggle:hover {
  border-color: var(--gold-light);
  background: rgba(176, 141, 87, 0.38);
  transform: rotate(20deg);
}

.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

@media (max-width: 900px) {
  .theme-toggle {
    top: 80px;
    right: 20px;
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
}

/* Restore dark-mode contrast for bars/overlays that are intentionally non-variable */
html.dark .hero-stats-bar,
html.dark .page-hero-bar {
  background: rgba(14, 12, 10, 0.97);
}

html.dark .cta,
html.dark .cta-band {
  background: #181409;
}

html.dark .cta::before,
html.dark .cta-band::before {
  border-color: rgba(201, 162, 101, 0.18);
}

html.dark .cta::after,
html.dark .cta-band::after {
  border-color: rgba(201, 162, 101, 0.08);
}

html.dark .about-intro-left img,
html.dark .story-right img,
html.dark .svc-img img,
html.dark .team-card-img img {
  filter: saturate(80%) brightness(0.9);
}

html.dark .svc-card:hover .svc-img img,
html.dark .team-card:hover .team-card-img img {
  filter: saturate(100%) brightness(1);
}

html.dark .story-right::before {
  border-color: var(--gold);
}

html.dark .why-item {
  background: var(--bg2);
}

html.dark .why-item:hover {
  background: var(--white);
}

html.dark .decor-hero::after {
  background: linear-gradient(to bottom, rgba(5, 3, 2, 0.55) 0%, rgba(5, 3, 2, 0.3) 50%, rgba(5, 3, 2, 0.85) 100%);
}

html.dark .gallery-item::after {
  background: linear-gradient(to top, rgba(5, 3, 2, 0.9) 0%, transparent 60%);
}

html.dark .theme-toggle .icon-sun {
  display: block;
}

html.dark .theme-toggle .icon-moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) nav {
    background: rgba(14, 12, 10, 0.96);
  }

  html:not(.light) .logo-img {
    filter: invert(1) brightness(1.8);
  }

  html:not(.light) .foot-logo-img {
    filter: invert(1) brightness(1.8);
  }

  html:not(.light) .theme-toggle .icon-sun {
    display: block;
  }

  html:not(.light) .theme-toggle .icon-moon {
    display: none;
  }

  html:not(.light) .hero-stats-bar,
  html:not(.light) .page-hero-bar {
    background: rgba(14, 12, 10, 0.97);
  }

  html:not(.light) .cta,
  html:not(.light) .cta-band {
    background: #181409;
  }

  html:not(.light) .cta::before,
  html:not(.light) .cta-band::before {
    border-color: rgba(201, 162, 101, 0.18);
  }

  html:not(.light) .cta::after,
  html:not(.light) .cta-band::after {
    border-color: rgba(201, 162, 101, 0.08);
  }

  html:not(.light) .about-intro-left img,
  html:not(.light) .story-right img,
  html:not(.light) .svc-img img,
  html:not(.light) .team-card-img img {
    filter: saturate(80%) brightness(0.9);
  }

  html:not(.light) .svc-card:hover .svc-img img,
  html:not(.light) .team-card:hover .team-card-img img {
    filter: saturate(100%) brightness(1);
  }

  html:not(.light) .story-right::before {
    border-color: var(--gold);
  }

  html:not(.light) .why-item {
    background: var(--bg2);
  }

  html:not(.light) .why-item:hover {
    background: var(--white);
  }

  html:not(.light) .decor-hero::after {
    background: linear-gradient(to bottom, rgba(5, 3, 2, 0.55) 0%, rgba(5, 3, 2, 0.3) 50%, rgba(5, 3, 2, 0.85) 100%);
  }

  html:not(.light) .gallery-item::after {
    background: linear-gradient(to top, rgba(5, 3, 2, 0.9) 0%, transparent 60%);
  }
}

/* Standardized button system */
.btn-fill,
.btn-dark,
.btn-gold-solid {
  background: #1c1812;
  color: #fff !important;
  border: 1px solid #1c1812;
}

.btn-fill:hover,
.btn-dark:hover,
.btn-gold-solid:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff !important;
}

.btn-ghost-dark,
.btn-gold-outline {
  color: var(--ink);
  border-color: rgba(28, 24, 18, 0.35);
}

.btn-ghost-dark:hover,
.btn-gold-outline:hover {
  color: var(--gold);
  border-color: var(--gold);
}

html.dark .btn-fill,
html.dark .btn-dark,
html.dark .btn-gold-solid {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff !important;
}

html.dark .btn-fill:hover,
html.dark .btn-dark:hover,
html.dark .btn-gold-solid:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

html.dark .btn-ghost-dark,
html.dark .btn-gold-outline {
  color: var(--gold);
  border-color: rgba(201, 162, 101, 0.5);
}

html.dark .btn-ghost-dark:hover,
html.dark .btn-gold-outline:hover {
  color: var(--gold-light);
  border-color: var(--gold);
  background: rgba(201, 162, 101, 0.08);
}

@media (prefers-color-scheme: dark) {
  html:not(.light) .btn-fill,
  html:not(.light) .btn-dark,
  html:not(.light) .btn-gold-solid {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff !important;
  }

  html:not(.light) .btn-fill:hover,
  html:not(.light) .btn-dark:hover,
  html:not(.light) .btn-gold-solid:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
  }

  html:not(.light) .btn-ghost-dark,
  html:not(.light) .btn-gold-outline {
    color: var(--gold);
    border-color: rgba(201, 162, 101, 0.5);
  }

  html:not(.light) .btn-ghost-dark:hover,
  html:not(.light) .btn-gold-outline:hover {
    color: var(--gold-light);
    border-color: var(--gold);
    background: rgba(201, 162, 101, 0.08);
  }
}

/* Footer consistency in both modes */
.footer-bottom {
  border-top-color: var(--footer-border) !important;
}

.footer-bottom p {
  color: var(--footer-copy) !important;
}

html.dark .footer-bottom {
  padding: 20px 56px;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) .footer-bottom {
    padding: 20px 56px;
  }
}

@media (max-width: 900px) {
  html.dark .footer-bottom {
    padding: 18px 24px;
  }
}

@media (max-width: 900px) and (prefers-color-scheme: dark) {
  html:not(.light) .footer-bottom {
    padding: 18px 24px;
  }
}