/* ==========================================================================
   FILE: dark-theme.css
   PROJECT: Gulf Coast Builders HTML5 Template

   PURPOSE:
   Dark color system for dark.html.

   DEPENDENCY:
   Load css/base.css before this file.

   FUTURE THEME METHOD:
   Duplicate this file, rename it, and change only the custom properties
   in the theme token section to create green, blue, red, or niche-specific
   versions without rebuilding the page structure.
   ========================================================================== */

/* ==========================================================================
   1. DARK THEME TOKENS
   ========================================================================== */

html[data-theme="dark"],
.site--dark {
  color-scheme: dark;

  --page-background: #080808;
  --section-background: #080808;
  --hero-background: #080808;
  --header-background: #050505;

  --surface-color: #111111;
  --surface-soft-color: #171717;
  --surface-raised-color: #1d1d1d;

  --text-color: #ffffff;
  --heading-color: #ffffff;
  --muted-color: rgba(255, 255, 255, 0.63);
  --muted-soft-color: rgba(255, 255, 255, 0.42);

  --accent-color: #ff6600;
  --accent-light: #ffb347;
  --accent-bright: #ff8a00;
  --accent-deep: #e84b00;

  --accent-border: rgba(255, 112, 0, 0.42);
  --accent-ring-color: rgba(255, 102, 0, 0.1);
  --accent-glow-color: rgba(255, 102, 0, 0.42);
  --accent-soft-glow: rgba(255, 122, 0, 0.17);

  --selection-text: #ffffff;

  --grid-line-color: rgba(255, 255, 255, 0.045);
  --grid-opacity: 0.12;
  --hero-grid-opacity: 0.12;

  --hero-pointer-glow: rgba(255, 102, 0, 0.11);
  --hero-secondary-glow: rgba(255, 72, 0, 0.07);

  --card-background:
    linear-gradient(
      145deg,
      rgba(28, 28, 28, 0.98),
      rgba(11, 11, 11, 0.99)
    );

  --card-text-color: #ffffff;
  --card-border: rgba(255, 255, 255, 0.1);
  --card-shadow:
    0 18px 43px rgba(0, 0, 0, 0.31),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);

  --card-hover-shadow:
    0 34px 78px rgba(0, 0, 0, 0.52),
    0 0 38px rgba(255, 102, 0, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --card-pointer-glow: rgba(255, 102, 0, 0.09);

  --glass-card-background:
    linear-gradient(
      145deg,
      rgba(27, 27, 27, 0.96),
      rgba(11, 11, 11, 0.98)
    );

  --media-background: #050505;
  --media-inner-border: rgba(255, 255, 255, 0.08);
  --media-frame-shadow:
    0 32px 90px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 102, 0, 0.13),
    0 0 47px rgba(255, 102, 0, 0.09);

  --media-glow-color: rgba(255, 127, 0, 0.25);

  --trust-card-background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(241, 241, 241, 0.92)
    );

  --trust-card-border: rgba(255, 255, 255, 0.72);
  --trust-card-shadow:
    0 13px 27px rgba(0, 0, 0, 0.18);

  --trust-card-hover-shadow:
    0 18px 37px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(255, 102, 0, 0.09);

  --avatar-border: #191919;
  --large-number-color: rgba(255, 255, 255, 0.11);
  --process-line-background: rgba(255, 255, 255, 0.08);

  --star-color: #ff9b00;
  --star-glow: rgba(255, 140, 0, 0.24);

  --conversion-background:
    linear-gradient(
      145deg,
      #1a1a1a,
      #0c0c0c
    );

  --conversion-heading-color: #ffffff;
  --conversion-text-color: rgba(255, 255, 255, 0.66);
  --conversion-border: rgba(255, 255, 255, 0.1);
  --conversion-glow: rgba(255, 102, 0, 0.18);

  --conversion-shadow:
    0 27px 65px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --service-wide-background:
    radial-gradient(
      circle at 92% 12%,
      rgba(255, 102, 0, 0.13),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #191919,
      #0d0d0d
    );

  --faq-number-background: rgba(255, 255, 255, 0.05);
  --faq-icon-background: rgba(255, 102, 0, 0.05);

  --button-primary-text: #ffffff;
  --button-primary-shadow: rgba(255, 102, 0, 0.26);
  --button-primary-hover-shadow: rgba(255, 102, 0, 0.4);

  --button-outline-text: #ff8a00;
  --button-outline-background: rgba(255, 102, 0, 0.025);
  --button-outline-border: rgba(255, 119, 0, 0.5);

  --button-outline-hover-text: #ffffff;
  --button-outline-hover-background: rgba(255, 102, 0, 0.13);
  --button-outline-hover-border: #ff8a00;
  --button-outline-shadow: rgba(255, 102, 0, 0.14);

  --utility-background: #050505;
  --utility-text-color: rgba(255, 255, 255, 0.7);
  --utility-status-color: rgba(255, 255, 255, 0.53);
  --utility-border: rgba(255, 255, 255, 0.07);

  --social-link-color: rgba(255, 255, 255, 0.61);
  --social-link-border: rgba(255, 255, 255, 0.07);
  --social-hover-background: rgba(255, 102, 0, 0.08);

  --primary-nav-background: #171717;
  --primary-nav-border: rgba(255, 255, 255, 0.07);

  --nav-text-color: #ffffff;

  --nav-panel-background:
    linear-gradient(
      110deg,
      #181818 0%,
      #121212 56%,
      #191919 100%
    );

  --nav-pattern-color: rgba(255, 255, 255, 0.045);
  --nav-pattern-opacity: 0.17;

  --sticky-nav-panel-background: rgba(19, 19, 19, 0.79);
  --sticky-nav-border: rgba(255, 255, 255, 0.1);

  --sticky-nav-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 30px rgba(0, 0, 0, 0.17);

  --sticky-header-shadow:
    0 18px 52px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 102, 0, 0.1);

  --nav-link-color: rgba(255, 255, 255, 0.84);
  --nav-link-hover-color: #ff8a00;
  --nav-link-active-color: #ff8a00;
  --nav-link-hover-background: rgba(255, 102, 0, 0.075);

  --dropdown-background: rgba(19, 19, 19, 0.965);
  --dropdown-border: rgba(255, 255, 255, 0.11);

  --dropdown-shadow:
    0 28px 62px rgba(0, 0, 0, 0.58),
    0 0 35px rgba(255, 102, 0, 0.055);

  --dropdown-link-color: rgba(255, 255, 255, 0.75);
  --dropdown-link-hover-color: #ffffff;
  --dropdown-link-hover-background: rgba(255, 102, 0, 0.12);

  --menu-toggle-color: #ff8a00;
  --menu-toggle-background: rgba(255, 102, 0, 0.05);
  --menu-toggle-border: rgba(255, 122, 0, 0.48);

  --mobile-menu-background: rgba(10, 10, 10, 0.985);
  --mobile-menu-border: rgba(255, 255, 255, 0.1);

  --mobile-menu-shadow:
    0 28px 55px rgba(0, 0, 0, 0.55);

  --mobile-link-color: rgba(255, 255, 255, 0.84);
  --mobile-link-background: #111111;
  --mobile-link-border: rgba(255, 255, 255, 0.07);

  --mobile-dropdown-background: #0b0b0b;
  --mobile-dropdown-link-background: #111111;

  --footer-background: #050505;
  --footer-heading-color: #ffffff;
  --footer-text-color: rgba(255, 255, 255, 0.66);
  --footer-border: rgba(255, 255, 255, 0.09);
}

/* ==========================================================================
   2. DOCUMENT BACKGROUND
   ========================================================================== */

html[data-theme="dark"],
html[data-theme="dark"] body,
.site--dark {
  background: var(--page-background);
}

.site--dark {
  color: var(--text-color);
}

/* ==========================================================================
   3. DARK SECTION BACKGROUNDS
   ========================================================================== */

.site--dark .section {
  --section-background: #080808;

  color: var(--text-color);
  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(255, 102, 0, 0.085),
      transparent 27%
    ),
    radial-gradient(
      circle at 7% 85%,
      rgba(255, 74, 0, 0.055),
      transparent 25%
    ),
    var(--section-background);
}

.site--dark .section:nth-of-type(even) {
  --section-background: #090909;

  background:
    radial-gradient(
      circle at 17% 18%,
      rgba(255, 102, 0, 0.06),
      transparent 25%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(255, 74, 0, 0.05),
      transparent 23%
    ),
    var(--section-background);
}

.site--dark .section--about {
  background:
    radial-gradient(
      circle at 78% 27%,
      rgba(255, 102, 0, 0.11),
      transparent 28%
    ),
    radial-gradient(
      circle at 8% 86%,
      rgba(255, 73, 0, 0.06),
      transparent 24%
    ),
    #080808;
}

.site--dark .section--proof {
  background:
    radial-gradient(
      circle at 73% 26%,
      rgba(255, 102, 0, 0.09),
      transparent 26%
    ),
    #090909;
}

.site--dark .section--process {
  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(255, 102, 0, 0.1),
      transparent 27%
    ),
    #080808;
}

.site--dark .section--services {
  background:
    radial-gradient(
      circle at 78% 24%,
      rgba(255, 102, 0, 0.1),
      transparent 27%
    ),
    radial-gradient(
      circle at 8% 84%,
      rgba(255, 72, 0, 0.07),
      transparent 25%
    ),
    #080808;
}

.site--dark .section--reviews {
  background:
    radial-gradient(
      circle at 76% 24%,
      rgba(255, 102, 0, 0.1),
      transparent 27%
    ),
    radial-gradient(
      circle at 6% 82%,
      rgba(255, 74, 0, 0.07),
      transparent 25%
    ),
    #080808;
}

.site--dark .section--faq {
  background:
    radial-gradient(
      circle at 76% 22%,
      rgba(255, 102, 0, 0.1),
      transparent 27%
    ),
    radial-gradient(
      circle at 7% 86%,
      rgba(255, 74, 0, 0.07),
      transparent 25%
    ),
    #080808;
}

/* ==========================================================================
   4. DARK HEADER DETAILS
   ========================================================================== */

.site--dark .site-header {
  background: #050505;
}

.site--dark .primary-nav {
  background: #171717;
}

.site--dark .primary-nav__grid {
  background: #171717;
}

.site--dark .site-header.is-sticky
.primary-nav,
.site--dark .site-header.is-sticky
.primary-nav__grid {
  background: transparent;
}

.site--dark .brand img {
  filter:
    brightness(0)
    saturate(100%);
}

.site--dark .brand:hover img,
.site--dark .brand:focus-visible img {
  filter:
    brightness(0)
    saturate(100%)
    drop-shadow(
      0 9px 13px
      rgba(77, 24, 0, 0.18)
    );
}

.site--dark .site-header.is-sticky
.primary-nav__menu-panel {
  background: rgba(19, 19, 19, 0.79);
  backdrop-filter:
    blur(20px)
    saturate(118%);
  -webkit-backdrop-filter:
    blur(20px)
    saturate(118%);
}

.site--dark .main-nav__dropdown {
  color: #ffffff;
}

/* ==========================================================================
   5. DARK HERO
   ========================================================================== */

.site--dark .hero {
  color: #ffffff;
  background:
    radial-gradient(
      circle at
      var(--pointer-x, 72%)
      var(--pointer-y, 22%),
      rgba(255, 102, 0, 0.11),
      transparent 27%
    ),
    radial-gradient(
      circle at 7% 78%,
      rgba(255, 82, 0, 0.065),
      transparent 25%
    ),
    #080808;
}

.site--dark .hero h1 {
  color: #ffffff;
}

.site--dark .hero .eyebrow--location {
  color: rgba(255, 255, 255, 0.48);
}

.site--dark .trust-carousel::before {
  background:
    linear-gradient(
      90deg,
      #080808 0%,
      rgba(8, 8, 8, 0) 100%
    );
}

.site--dark .trust-carousel::after {
  background:
    linear-gradient(
      270deg,
      #080808 0%,
      rgba(8, 8, 8, 0) 100%
    );
}

/* ==========================================================================
   6. DARK CARDS + TYPOGRAPHY
   ========================================================================== */

.site--dark .glass-card,
.site--dark .proof-metric,
.site--dark .process-card,
.site--dark .service-card,
.site--dark .review-card,
.site--dark .faq-item {
  color: #ffffff;
}

.site--dark .glass-card h2,
.site--dark .glass-card h3,
.site--dark .proof-metric h3,
.site--dark .process-card h3,
.site--dark .service-card h3,
.site--dark .review-card h3,
.site--dark .faq-item button {
  color: #ffffff;
}

.site--dark .about-card {
  background:
    radial-gradient(
      circle at 87% 12%,
      rgba(255, 102, 0, 0.11),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(28, 28, 28, 0.97),
      rgba(10, 10, 10, 0.99)
    );
}

.site--dark .metric strong {
  color: #ffffff;
}

.site--dark .proof-metric,
.site--dark .process-card,
.site--dark .review-card,
.site--dark .faq-item {
  background:
    radial-gradient(
      circle at
      var(--pointer-x, 50%)
      var(--pointer-y, 30%),
      rgba(255, 102, 0, 0.085),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(27, 27, 27, 0.98),
      rgba(11, 11, 11, 0.99)
    );
}

.site--dark .proof-metric:hover,
.site--dark .proof-metric:focus-visible,
.site--dark .process-card:hover,
.site--dark .process-card:focus-visible,
.site--dark .review-card:hover,
.site--dark .review-card:focus-visible,
.site--dark .faq-item:hover,
.site--dark .faq-item:focus-within,
.site--dark .faq-item.is-active {
  border-color: rgba(255, 116, 0, 0.46);
}

.site--dark .process-card__node {
  background: #080808;
}

.site--dark .review-card header img {
  border-color: #191919;
}

.site--dark .rating-badge img {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #ececec
    );
}

.site--dark .rating-badge strong {
  color: #ffffff;
}

/* ==========================================================================
   7. DARK SERVICES
   ========================================================================== */

.site--dark .service-card {
  background: #111111;
}

.site--dark .service-card--wide {
  background:
    linear-gradient(
      145deg,
      #191919,
      #0d0d0d
    );
}

.site--dark .service-card__wide-copy {
  color: #ffffff;
  background:
    radial-gradient(
      circle at 92% 12%,
      rgba(255, 102, 0, 0.13),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #191919,
      #0d0d0d
    );
}

.site--dark .service-card__wide-copy h3 {
  color: #ffffff;
}

/* ==========================================================================
   8. DARK REVIEW MARQUEE EDGE FADES
   ========================================================================== */

.site--dark .section--reviews {
  --section-background: #080808;
}

.site--dark .review-marquee::before {
  background:
    linear-gradient(
      90deg,
      #080808 10%,
      rgba(8, 8, 8, 0) 100%
    );
}

.site--dark .review-marquee::after {
  background:
    linear-gradient(
      270deg,
      #080808 10%,
      rgba(8, 8, 8, 0) 100%
    );
}

/* ==========================================================================
   9. DARK FAQ
   ========================================================================== */

.site--dark .faq-item button > span {
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.11);
}

.site--dark .faq-item.is-active
button > span {
  color: #ffffff;
  border-color: transparent;
}

.site--dark .faq-item button i {
  color: #ff8a00;
  background: rgba(255, 102, 0, 0.05);
  border-color: rgba(255, 119, 0, 0.34);
}

.site--dark .contact-panel {
  color: #ffffff;
}

/* ==========================================================================
   10. DARK FOOTER
   ========================================================================== */

.site--dark .site-footer {
  background:
    radial-gradient(
      circle at 84% 10%,
      rgba(255, 102, 0, 0.08),
      transparent 24%
    ),
    #050505;
}

.site--dark .site-footer__brand img {
  filter: none;
}

.site--dark .site-footer__column .button--primary {
  color: #ffffff;
}

/* ==========================================================================
   11. DARK MOBILE MENU
   ========================================================================== */

@media (max-width: 1260px) {
  .site--dark .primary-nav__grid {
    background: #171717;
  }

  .site--dark .site-header.is-sticky
  .primary-nav__grid {
    background: transparent;
  }

  .site--dark .main-nav {
    color: #ffffff;
    background: rgba(10, 10, 10, 0.985);
  }

  .site--dark .main-nav__list > li > a,
  .site--dark .main-nav__more > button {
    color: rgba(255, 255, 255, 0.84);
    background: #111111;
    border-color: rgba(255, 255, 255, 0.07);
  }

  .site--dark .main-nav__dropdown {
    background: #0b0b0b;
  }

  .site--dark .main-nav__dropdown a {
    color: rgba(255, 255, 255, 0.78);
    background: #111111;
  }
}

@media (max-width: 680px) {
  .site--dark .site-header.is-sticky
  .primary-nav__menu-panel {
    background: rgba(18, 18, 18, 0.82);
    backdrop-filter:
      blur(17px)
      saturate(115%);
    -webkit-backdrop-filter:
      blur(17px)
      saturate(115%);
  }
}

/* ==========================================================================
   12. DARK SCROLLBARS
   ========================================================================== */

@supports selector(::-webkit-scrollbar) {
  html[data-theme="dark"]::-webkit-scrollbar,
  html[data-theme="dark"] *::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  html[data-theme="dark"]::-webkit-scrollbar-track,
  html[data-theme="dark"] *::-webkit-scrollbar-track {
    background: #080808;
  }

  html[data-theme="dark"]::-webkit-scrollbar-thumb,
  html[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background:
      linear-gradient(
        180deg,
        #ff8a00,
        #e84b00
      );
    border:
      3px solid
      #080808;
    border-radius: 999px;
  }

  html[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
  html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background:
      linear-gradient(
        180deg,
        #ff9d22,
        #ff6600
      );
  }
}

html[data-theme="dark"] {
  scrollbar-color:
    #ff6600
    #080808;
  scrollbar-width: thin;
}

/* ==========================================================================
   13. DARK FALLBACK FOR BACKDROP-FILTER
   ========================================================================== */

@supports not (
  (backdrop-filter: blur(1px)) or
  (-webkit-backdrop-filter: blur(1px))
) {
  .site--dark .site-header.is-sticky
  .primary-nav__menu-panel {
    background: rgba(19, 19, 19, 0.96);
  }

  .site--dark .glass-card {
    background: rgba(16, 16, 16, 0.97);
  }

  .site--dark .main-nav__dropdown {
    background: rgba(19, 19, 19, 0.99);
  }
}

/* ==========================================================================
   14. HIGH-CONTRAST SUPPORT
   ========================================================================== */

@media (prefers-contrast: more) {
  html[data-theme="dark"],
  .site--dark {
    --muted-color: rgba(255, 255, 255, 0.82);
    --muted-soft-color: rgba(255, 255, 255, 0.68);
    --card-border: rgba(255, 255, 255, 0.24);
    --conversion-border: rgba(255, 255, 255, 0.24);
    --nav-link-color: #ffffff;
    --footer-text-color: rgba(255, 255, 255, 0.84);
  }

  .site--dark .button--outline {
    border-width: 2px;
  }
}

/* ==========================================================================
   15. PRINT FALLBACK
   ========================================================================== */

@media print {
  html[data-theme="dark"],
  html[data-theme="dark"] body,
  .site--dark {
    color: #000000 !important;
    background: #ffffff !important;
  }

  .site--dark .section,
  .site--dark .hero,
  .site--dark .site-footer {
    color: #000000 !important;
    background: #ffffff !important;
  }

  .site--dark h1,
  .site--dark h2,
  .site--dark h3,
  .site--dark p,
  .site--dark li,
  .site--dark address {
    color: #000000 !important;
  }

  .site--dark .site-header,
  .site--dark .site-header-spacer,
  .site--dark .button,
  .site--dark .review-marquees,
  .site--dark .social-links {
    display: none !important;
  }

  .site--dark .glass-card,
  .site--dark .proof-metric,
  .site--dark .process-card,
  .site--dark .service-card,
  .site--dark .faq-item,
  .site--dark .contact-panel,
  .site--dark .conversion-bar {
    color: #000000 !important;
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    box-shadow: none !important;
  }
}