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

   PURPOSE:
   Taxi-cab yellow / construction caution-tape accent overlay.

   HOW TO LOAD:
   Keep the existing structural and light/dark theme files, then load this
   file last.

   DARK PAGE:
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/dark-theme.css">
   <link rel="stylesheet" href="css/yellow-theme.css">

   LIGHT PAGE:
   <link rel="stylesheet" href="css/base.css">
   <link rel="stylesheet" href="css/light-theme.css">
   <link rel="stylesheet" href="css/yellow-theme.css">

   IMPORTANT:
   The custom-property name --orange-gradient is retained because base.css
   already uses that variable throughout the template. Its value is replaced
   here with the new yellow construction gradient.
   ========================================================================== */


/* ==========================================================================
   1. SHARED YELLOW ACCENT SYSTEM
   ========================================================================== */

.site--dark,
.site--light {
  --orange-gradient:
    linear-gradient(
      105deg,
      #efb12f 0%,
      #f3bb1f 17%,
      #f7c500 34%,
      #ffd400 52%,
      #ffe04a 70%,
      #f8ca00 86%,
      #efb12f 100%
    );

  --accent-color: #ffd400;
  --accent-light: #ffe66d;
  --accent-bright: #ffdc24;
  --accent-deep: #efb12f;

  --accent-border: rgba(239, 177, 47, 0.48);
  --accent-ring-color: rgba(255, 212, 0, 0.12);
  --accent-glow-color: rgba(255, 212, 0, 0.42);
  --accent-soft-glow: rgba(255, 212, 0, 0.2);

  --selection-text: #111111;

  --hero-pointer-glow: rgba(255, 212, 0, 0.12);
  --hero-secondary-glow: rgba(239, 177, 47, 0.075);

  --card-pointer-glow: rgba(255, 212, 0, 0.09);
  --media-glow-color: rgba(255, 212, 0, 0.26);

  --star-color: #ffd400;
  --star-glow: rgba(255, 212, 0, 0.26);

  --conversion-glow: rgba(255, 212, 0, 0.2);

  --button-primary-text: #111111;
  --button-primary-shadow: rgba(239, 177, 47, 0.28);
  --button-primary-hover-shadow: rgba(255, 212, 0, 0.42);

  --nav-link-hover-background: rgba(255, 212, 0, 0.1);
  --dropdown-link-hover-background: rgba(255, 212, 0, 0.13);
  --social-hover-background: rgba(255, 212, 0, 0.11);

  --faq-icon-background: rgba(255, 212, 0, 0.07);
}


/* ==========================================================================
   2. DARK-PAGE YELLOW CONTRAST
   ========================================================================== */

.site--dark {
  --button-outline-text: #ffdc24;
  --button-outline-background: rgba(255, 212, 0, 0.025);
  --button-outline-border: rgba(255, 212, 0, 0.6);

  --button-outline-hover-text: #111111;
  --button-outline-hover-background: #ffd400;
  --button-outline-hover-border: #ffd400;
  --button-outline-shadow: rgba(255, 212, 0, 0.2);

  --nav-link-hover-color: #ffdc24;
  --nav-link-active-color: #ffdc24;

  --dropdown-link-hover-color: #ffdc24;

  --menu-toggle-color: #ffdc24;
  --menu-toggle-background: rgba(255, 212, 0, 0.055);
  --menu-toggle-border: rgba(255, 212, 0, 0.54);

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

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

  --media-frame-shadow:
    0 32px 90px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 212, 0, 0.18),
    0 0 47px rgba(255, 212, 0, 0.12);

  --trust-card-hover-shadow:
    0 18px 37px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(255, 212, 0, 0.13);
}


/* ==========================================================================
   3. LIGHT-PAGE YELLOW CONTRAST
   ========================================================================== */

.site--light {
  --button-outline-text: #8a6200;
  --button-outline-background: rgba(255, 255, 255, 0.78);
  --button-outline-border: rgba(239, 177, 47, 0.72);

  --button-outline-hover-text: #111111;
  --button-outline-hover-background: #ffd400;
  --button-outline-hover-border: #ffd400;
  --button-outline-shadow: rgba(239, 177, 47, 0.24);

  --nav-link-hover-color: #8a6200;
  --nav-link-active-color: #8a6200;

  --dropdown-link-hover-color: #8a6200;

  --menu-toggle-color: #8a6200;
  --menu-toggle-background: rgba(255, 255, 255, 0.78);
  --menu-toggle-border: rgba(239, 177, 47, 0.58);

  --sticky-header-shadow:
    0 18px 52px rgba(17, 17, 17, 0.16),
    0 1px 0 rgba(239, 177, 47, 0.18);

  --card-hover-shadow:
    0 32px 72px rgba(17, 17, 17, 0.15),
    0 0 34px rgba(255, 212, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);

  --media-frame-shadow:
    0 32px 80px rgba(17, 17, 17, 0.13),
    0 0 0 1px rgba(239, 177, 47, 0.2),
    0 0 40px rgba(255, 212, 0, 0.12);

  --trust-card-hover-shadow:
    0 18px 38px rgba(17, 17, 17, 0.11),
    0 0 24px rgba(255, 212, 0, 0.12);
}


/* ==========================================================================
   4. DARK-PAGE YELLOW AMBIENT BACKGROUNDS
   ========================================================================== */

.site--dark .section {
  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(255, 212, 0, 0.095),
      transparent 27%
    ),
    radial-gradient(
      circle at 7% 85%,
      rgba(239, 177, 47, 0.065),
      transparent 25%
    ),
    var(--section-background);
}

.site--dark .section:nth-of-type(even) {
  background:
    radial-gradient(
      circle at 17% 18%,
      rgba(255, 212, 0, 0.07),
      transparent 25%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(239, 177, 47, 0.055),
      transparent 23%
    ),
    var(--section-background);
}

.site--dark .section--about {
  background:
    radial-gradient(
      circle at 78% 27%,
      rgba(255, 212, 0, 0.12),
      transparent 28%
    ),
    radial-gradient(
      circle at 8% 86%,
      rgba(239, 177, 47, 0.07),
      transparent 24%
    ),
    #080808;
}

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

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

.site--dark .section--services,
.site--dark .section--reviews,
.site--dark .section--faq {
  background:
    radial-gradient(
      circle at 78% 24%,
      rgba(255, 212, 0, 0.11),
      transparent 27%
    ),
    radial-gradient(
      circle at 8% 84%,
      rgba(239, 177, 47, 0.07),
      transparent 25%
    ),
    #080808;
}

.site--dark .hero {
  background:
    radial-gradient(
      circle at
      var(--pointer-x, 72%)
      var(--pointer-y, 22%),
      rgba(255, 212, 0, 0.12),
      transparent 27%
    ),
    radial-gradient(
      circle at 7% 78%,
      rgba(239, 177, 47, 0.075),
      transparent 25%
    ),
    #080808;
}


/* ==========================================================================
   5. LIGHT-PAGE YELLOW AMBIENT BACKGROUNDS
   ========================================================================== */

.site--light .section {
  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(255, 212, 0, 0.075),
      transparent 27%
    ),
    radial-gradient(
      circle at 7% 85%,
      rgba(239, 177, 47, 0.045),
      transparent 25%
    ),
    var(--section-background);
}

.site--light .section:nth-of-type(even) {
  background:
    radial-gradient(
      circle at 17% 18%,
      rgba(255, 212, 0, 0.055),
      transparent 25%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(239, 177, 47, 0.04),
      transparent 23%
    ),
    var(--section-background);
}

.site--light .section--about {
  background:
    radial-gradient(
      circle at 78% 27%,
      rgba(255, 212, 0, 0.085),
      transparent 28%
    ),
    radial-gradient(
      circle at 8% 86%,
      rgba(239, 177, 47, 0.045),
      transparent 24%
    ),
    #f7f7f4;
}

.site--light .section--proof {
  background:
    radial-gradient(
      circle at 73% 26%,
      rgba(255, 212, 0, 0.065),
      transparent 26%
    ),
    #ffffff;
}

.site--light .section--process {
  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(255, 212, 0, 0.075),
      transparent 27%
    ),
    #f7f7f4;
}

.site--light .section--services {
  background:
    radial-gradient(
      circle at 78% 24%,
      rgba(255, 212, 0, 0.075),
      transparent 27%
    ),
    radial-gradient(
      circle at 8% 84%,
      rgba(239, 177, 47, 0.045),
      transparent 25%
    ),
    #ffffff;
}

.site--light .section--reviews {
  background:
    radial-gradient(
      circle at 76% 24%,
      rgba(255, 212, 0, 0.07),
      transparent 27%
    ),
    radial-gradient(
      circle at 6% 82%,
      rgba(239, 177, 47, 0.045),
      transparent 25%
    ),
    #f7f7f4;
}

.site--light .section--faq {
  background:
    radial-gradient(
      circle at 76% 22%,
      rgba(255, 212, 0, 0.07),
      transparent 27%
    ),
    radial-gradient(
      circle at 7% 86%,
      rgba(239, 177, 47, 0.045),
      transparent 25%
    ),
    #ffffff;
}

.site--light .hero {
  background:
    radial-gradient(
      circle at
      var(--pointer-x, 72%)
      var(--pointer-y, 22%),
      rgba(255, 212, 0, 0.095),
      transparent 27%
    ),
    radial-gradient(
      circle at 7% 80%,
      rgba(239, 177, 47, 0.055),
      transparent 25%
    ),
    #ffffff;
}


/* ==========================================================================
   6. YELLOW CARD LIGHTING
   ========================================================================== */

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

.site--light .about-card {
  background:
    radial-gradient(
      circle at 87% 12%,
      rgba(255, 212, 0, 0.085),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(247, 247, 244, 0.97)
    );
}

.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, 212, 0, 0.095),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(27, 27, 27, 0.98),
      rgba(11, 11, 11, 0.99)
    );
}

.site--light .proof-metric,
.site--light .process-card,
.site--light .review-card,
.site--light .faq-item {
  background:
    radial-gradient(
      circle at
      var(--pointer-x, 50%)
      var(--pointer-y, 30%),
      rgba(255, 212, 0, 0.075),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.99),
      rgba(247, 247, 244, 0.98)
    );
}


/* ==========================================================================
   7. SERVICE AND CONVERSION ACCENTS
   ========================================================================== */

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

.site--light .service-card__wide-copy {
  background:
    radial-gradient(
      circle at 92% 12%,
      rgba(255, 212, 0, 0.095),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f4f4f1
    );
}

.site--dark .site-footer,
.site--light .site-footer {
  background:
    radial-gradient(
      circle at 84% 10%,
      rgba(255, 212, 0, 0.1),
      transparent 24%
    ),
    var(--footer-background);
}


/* ==========================================================================
   8. FAQ, NAVIGATION, AND ICON DETAILS
   ========================================================================== */

.site--dark .faq-item button i {
  color: #ffdc24;
  background: rgba(255, 212, 0, 0.065);
  border-color: rgba(255, 212, 0, 0.42);
}

.site--light .faq-item button i {
  color: #8a6200;
  background: rgba(255, 212, 0, 0.075);
  border-color: rgba(239, 177, 47, 0.52);
}

.site--dark .faq-item button > span,
.site--light .faq-item button > span {
  transition:
    color var(--transition-normal),
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

.site--dark .brand:hover img,
.site--dark .brand:focus-visible img,
.site--light .brand:hover img,
.site--light .brand:focus-visible img {
  filter:
    drop-shadow(
      0 9px 13px
      rgba(126, 88, 0, 0.22)
    );
}


/* ==========================================================================
   9. YELLOW SCROLLBARS
   ========================================================================== */

@supports selector(::-webkit-scrollbar) {
  html[data-theme="dark"]::-webkit-scrollbar-thumb,
  html[data-theme="dark"] *::-webkit-scrollbar-thumb,
  html[data-theme="light"]::-webkit-scrollbar-thumb,
  html[data-theme="light"] *::-webkit-scrollbar-thumb {
    background:
      linear-gradient(
        180deg,
        #ffe04a,
        #efb12f
      );
  }

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

html[data-theme="dark"],
html[data-theme="light"] {
  scrollbar-color:
    #ffd400
    var(--page-background);
}


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

@media (prefers-contrast: more) {
  .site--dark {
    --button-outline-text: #ffe45c;
    --nav-link-hover-color: #ffe45c;
    --nav-link-active-color: #ffe45c;
    --dropdown-link-hover-color: #ffe45c;
  }

  .site--light {
    --button-outline-text: #694900;
    --nav-link-hover-color: #694900;
    --nav-link-active-color: #694900;
    --dropdown-link-hover-color: #694900;
  }
}