/* ============================================================
   AquaShine — brand-override.css
   Global brand override: applies the new red/gold/black/white
   design system to ALL pages site-wide.

   Load order: style.css → style-new.css → brand-override.css
   To revert: comment out or remove the <link> tag on any page.
   ============================================================ */

/* ---------- Brand tokens (if not already set by hero-override) ---------- */
:root {
  --as-red:        #c0211a;
  --as-red-dark:   #961a14;
  --as-red-light:  #e03228;
  --as-gold:       #E8A217;
  --as-gold-dark:  #c88810;
  --as-gold-light: #f6c33a;
  --as-black:      #111111;
  --as-white:      #ffffff;
  --as-blue-acc:   #1e56b0;
}

/* ============================================================
   1. NAVBAR — (same as hero-override.css, included here for
      pages that don't load hero-override.css)
   ============================================================ */
.header {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(12px);
  border-bottom: 4px solid var(--as-red) !important;
  box-shadow:
    0 2px 0 var(--as-gold),
    0 4px 20px rgba(0, 0, 0, 0.12) !important;
}

.logo-title {
  color: var(--as-black) !important;
  font-weight: 900 !important;
}

.logo-subtitle {
  color: var(--as-red) !important;
  font-weight: 700 !important;
}

.desktop-nav a,
.desktop-nav button {
  color: var(--as-black) !important;
  font-weight: 600 !important;
}

.desktop-nav a::after,
.desktop-nav button::after {
  background-color: var(--as-red) !important;
}

.desktop-nav a:hover,
.desktop-nav button:hover {
  color: var(--as-red) !important;
}

/* Dropdowns */
.nav-dropdown { position: relative; }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--as-white);
  border: 2px solid var(--as-black);
  border-radius: 14px;
  box-shadow: 5px 5px 0px var(--as-black), 0 8px 30px rgba(0,0,0,0.12);
  overflow: hidden;
  z-index: 2000;
  animation: dropIn 0.18s ease-out both;
}

@keyframes dropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.nav-dropdown-menu::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--as-red), var(--as-gold));
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.65rem 1.1rem;
  color: var(--as-black) !important;
  font-weight: 600 !important;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.nav-dropdown-menu a:last-child { border-bottom: none; }

.nav-dropdown-menu a:hover {
  background: var(--as-red) !important;
  color: var(--as-white) !important;
  padding-left: 1.4rem;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

.nav-caret { transition: transform 0.2s ease; display: inline-block; }

.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret {
  transform: rotate(180deg);
}

/* Phone & CTA */
.phone-link { color: var(--as-red) !important; font-weight: 700 !important; }
.phone-link:hover { background: rgba(192,33,26,0.08) !important; color: var(--as-red-dark) !important; }

.cta-button {
  background: var(--as-red) !important;
  color: var(--as-white) !important;
  border: 2px solid var(--as-black) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  box-shadow: 3px 3px 0px var(--as-black) !important;
  transition: all 0.2s ease !important;
  text-decoration: none;
}

.cta-button:hover {
  background: var(--as-red-dark) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px var(--as-black) !important;
}

/* Hamburger */
.hamburger,
.hamburger::before,
.hamburger::after { background: var(--as-black) !important; }

/* Mobile nav */
.mobile-nav { border-top: 3px solid var(--as-red) !important; background: var(--as-white); }

.mobile-nav a,
.mobile-nav button,
.mobile-nav summary { color: var(--as-black) !important; font-weight: 600 !important; }

.mobile-nav a:hover { color: var(--as-red) !important; }

.mobile-dropdown summary {
  list-style: none;
  cursor: pointer;
  padding: 0.5rem 0;
  font-weight: 600;
  color: var(--as-black);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mobile-dropdown summary::-webkit-details-marker { display: none; }

.mobile-dropdown summary::after {
  content: '▾';
  margin-left: auto;
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.mobile-dropdown[open] summary::after { transform: rotate(180deg); }

.mobile-dropdown-menu {
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 3px solid var(--as-red);
  margin: 0.25rem 0 0.5rem;
}

.mobile-dropdown-menu a {
  display: block;
  padding: 0.35rem 0;
  color: var(--as-black) !important;
  text-decoration: none;
  font-size: 0.9rem;
}

.mobile-dropdown-menu a:hover { color: var(--as-red) !important; }

.mobile-cta { border-top: 2px solid rgba(0,0,0,0.1) !important; padding-top: 1rem; }
.mobile-cta .cta-button { text-align: center; display: block; width: 100%; }

@media (max-width: 768px) {
  .mobile-menu-btn { display: flex !important; }
  .desktop-nav, .header-cta { display: none !important; }
}

@media (min-width: 769px) {
  .mobile-nav { display: none !important; }
  .mobile-menu-btn { display: none !important; }
}

/* ============================================================
   2. SUBPAGE HERO SECTION
   ============================================================ */
.hero.subpage-hero {
  background: var(--as-white) !important;
  position: relative;
}

/* Remove dark photo overlay on subpage heroes */
.hero.subpage-hero::before {
  display: none !important;
}

/* Halftone texture for subpage hero */
.hero.subpage-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/* Red bottom stripe */
.hero.subpage-hero .scroll-indicator { display: none; }

.hero.subpage-hero .container { position: relative; z-index: 1; }

/* Legacy badge (old style) → restyle to gold */
.hero.subpage-hero .hero-badge {
  background: var(--as-gold) !important;
  color: var(--as-black) !important;
  border: 2px solid var(--as-black) !important;
  box-shadow: 3px 3px 0px var(--as-black) !important;
  font-weight: 800 !important;
}

/* Hero title on subpages */
.hero.subpage-hero .hero-title {
  color: var(--as-black) !important;
  text-shadow: none !important;
}

.hero.subpage-hero .hero-title .highlight {
  color: var(--as-red) !important;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.1) !important;
}

/* Hero subtitle on subpages */
.hero.subpage-hero .hero-subtitle {
  color: #333 !important;
  opacity: 1 !important;
}

/* Trust badges in subpage hero */
.hero.subpage-hero .badge {
  background: var(--as-white) !important;
  color: var(--as-black) !important;
  border: 2px solid var(--as-black) !important;
  box-shadow: 2px 2px 0px var(--as-black) !important;
}

/* Primary button in subpage heroes */
.hero.subpage-hero .primary-button,
.hero.subpage-hero .hero-cta-primary {
  background: var(--as-red) !important;
  color: var(--as-white) !important;
  border: 3px solid var(--as-gold) !important;
  box-shadow: 4px 4px 0px var(--as-gold-dark), 0 0 0 1px var(--as-black) !important;
}

.hero.subpage-hero .primary-button:hover,
.hero.subpage-hero .hero-cta-primary:hover {
  background: var(--as-red-dark) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px var(--as-gold-dark), 0 0 0 1px var(--as-black) !important;
}

/* Scroll indicator (black on light bg) */
.hero .scroll-indicator { color: var(--as-black) !important; }
.hero-bg-dots { display: none; }  /* hide old dot overlay */

/* ============================================================
   3. SECTION TITLES & ACCENTS
   ============================================================ */
.section-title {
  color: var(--as-black) !important;
}

/* Title accent underline bar → red/gold gradient */
.title-accent {
  background: linear-gradient(90deg, var(--as-red), var(--as-gold)) !important;
}

/* Section subtitle stays neutral */
.section-subtitle {
  color: #555 !important;
}

/* ============================================================
   4. PRIMARY BUTTON (site-wide .primary-button class)
   ============================================================ */
.primary-button {
  background: var(--as-red) !important;
  color: var(--as-white) !important;
  border: 3px solid var(--as-gold) !important;
  box-shadow: 4px 4px 0px var(--as-gold-dark), 0 0 0 1px var(--as-black) !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  transition: all 0.22s ease !important;
  text-decoration: none;
}

.primary-button:hover {
  background: var(--as-red-dark) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px var(--as-gold-dark), 0 0 0 1px var(--as-black), 0 0 18px rgba(232,162,23,0.45) !important;
}

.primary-button:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 2px 2px 0px var(--as-gold-dark), 0 0 0 1px var(--as-black) !important;
}

/* ============================================================
   5. SECONDARY BUTTON (site-wide .secondary-button class)
   ============================================================ */
.secondary-button {
  background: var(--as-white) !important;
  color: var(--as-blue-acc) !important;
  border: 3px solid var(--as-blue-acc) !important;
  box-shadow: 4px 4px 0px var(--as-blue-acc) !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  transition: all 0.22s ease !important;
  text-decoration: none;
}

.secondary-button:hover {
  background: var(--as-gold-light) !important;
  color: var(--as-black) !important;
  border-color: var(--as-gold-dark) !important;
  box-shadow: 4px 4px 0px var(--as-gold-dark) !important;
  transform: translate(-2px, -2px) !important;
}

/* ============================================================
   6. SERVICE CARDS
   ============================================================ */
.service-card {
  border: 2px solid var(--as-black) !important;
  box-shadow: 4px 4px 0px var(--as-black) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.service-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px var(--as-black) !important;
}

.service-title {
  color: var(--as-black) !important;
}

.service-price {
  color: var(--as-red) !important;
  border: 2px solid var(--as-black) !important;
  box-shadow: 2px 2px 0px var(--as-black) !important;
}

.service-button {
  background: var(--as-red) !important;
  color: var(--as-white) !important;
  border: 2px solid var(--as-black) !important;
  box-shadow: 3px 3px 0px var(--as-black) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  transition: all 0.2s ease !important;
}

.service-button:hover {
  background: var(--as-red-dark) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px var(--as-black) !important;
}

/* Additional services strip */
.additional-title { color: var(--as-black) !important; }

.additional-service {
  border: 2px solid var(--as-black) !important;
  box-shadow: 3px 3px 0px var(--as-black) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.additional-service:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0px var(--as-black) !important;
}

/* ============================================================
   7. FEATURE CARDS (about / method sections)
   ============================================================ */
.feature-icon {
  background: linear-gradient(135deg, var(--as-red), var(--as-red-light)) !important;
  box-shadow: 0 6px 16px rgba(192,33,26,0.3) !important;
}

.step-icon {
  background: linear-gradient(135deg, var(--as-red), var(--as-red-light)) !important;
  box-shadow: 0 6px 16px rgba(192,33,26,0.3) !important;
}

.feature-content h4,
.step-content h3,
.method-steps .step h3 { color: var(--as-black) !important; }

/* Top accent on feature card hover */
.about-features .feature::before,
.method-steps .step::before {
  background: linear-gradient(90deg, var(--as-red), var(--as-gold)) !important;
}

.about-features .feature:hover {
  border-color: var(--as-red) !important;
}

.method-steps .step:hover {
  border-color: var(--as-red) !important;
}

/* About story left border */
.about-story { border-left-color: var(--as-red) !important; }
.about-intro h3 { color: var(--as-black) !important; }

/* Mission statement block */
.mission-statement {
  background: var(--as-red) !important;
  border: 3px solid var(--as-black) !important;
  box-shadow: 5px 5px 0px var(--as-black) !important;
}

/* ============================================================
   8. TESTIMONIALS / REVIEWS
   ============================================================ */
.stat-number { color: var(--as-red) !important; }

.stat-card {
  border: 2px solid var(--as-black) !important;
  box-shadow: 4px 4px 0px var(--as-black) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.stat-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px var(--as-black) !important;
}

.comparison-title { color: var(--as-black) !important; }

.nav-btn.active,
.nav-btn:hover {
  background: var(--as-red) !important;
  border-color: var(--as-red) !important;
}

.testimonial-card {
  border: 2px solid rgba(0,0,0,0.08) !important;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.testimonial-card:hover {
  border-color: var(--as-black) !important;
  box-shadow: 4px 4px 0px var(--as-black) !important;
  transform: translate(-2px, -2px) !important;
}

.trust-badge {
  background: var(--as-gold) !important;
  color: var(--as-black) !important;
  border: 2px solid var(--as-black) !important;
  box-shadow: 2px 2px 0px var(--as-black) !important;
}

/* ============================================================
   9. AREA CARDS
   ============================================================ */
.area-card {
  border: 2px solid var(--as-black) !important;
  box-shadow: 3px 3px 0px var(--as-black) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.area-card:hover {
  background: var(--as-red) !important;
  color: var(--as-white) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0px var(--as-black) !important;
}

.area-cta a {
  color: var(--as-red) !important;
  font-weight: 700;
  text-decoration: none;
}

.area-cta a:hover { text-decoration: underline; }

/* ============================================================
   10. GOOGLE REVIEWS CTA BLOCK
   ============================================================ */
.google-reviews-cta {
  border-top: 3px solid var(--as-red) !important;
}

.blue_link,
a.blue_link {
  color: var(--as-red) !important;
  font-weight: 700;
}

.blue_link:hover { color: var(--as-red-dark) !important; }

/* ============================================================
   11. FORM ELEMENTS (quote page, contact, etc.)
   ============================================================ */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--as-red) !important;
  box-shadow: 0 0 0 3px rgba(192,33,26,0.12) !important;
}

.checkmark {
  border-color: var(--as-red) !important;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark {
  background: var(--as-red) !important;
}

.radio-option:hover {
  border-color: var(--as-red) !important;
}

.radio-option.popular {
  border-color: var(--as-red) !important;
  background: rgba(192,33,26,0.05) !important;
}

.submit-button {
  background: var(--as-red) !important;
  color: var(--as-white) !important;
  border: 2px solid var(--as-black) !important;
  box-shadow: 4px 4px 0px var(--as-black) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  transition: all 0.22s ease !important;
}

.submit-button:hover {
  background: var(--as-red-dark) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px var(--as-black) !important;
}

.benefit-icon {
  background: var(--as-red) !important;
}

#referralSource {
  border-color: var(--as-red) !important;
  background-color: rgba(192,33,26,0.04) !important;
}

#otherReferralGroup input {
  border-left-color: var(--as-red) !important;
}

.email-disclaimer {
  border-left-color: var(--as-red) !important;
}

.quote-header h1 { color: var(--as-black) !important; }

.quote-page {
  background: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%) !important;
}

/* ============================================================
   12. FOOTER
   ============================================================ */
.footer {
  border-top: 4px solid var(--as-red) !important;
  box-shadow: 0 -2px 0 var(--as-gold) !important;
}

.footer-brand-text h3 {
  color: var(--as-white) !important;
}

.footer-brand-text p {
  color: var(--as-gold) !important;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--as-gold) !important;
}

/* ============================================================
   13. FAQ STYLES
   ============================================================ */
.faq-group-title { color: var(--as-black) !important; }

.faq-item {
  border-color: rgba(192,33,26,0.15) !important;
}

.faq-item summary::after {
  background: rgba(192,33,26,0.08) !important;
  color: var(--as-red) !important;
}

.faq-item[open] summary::after {
  background: rgba(192,33,26,0.16) !important;
}

.faq-item summary:focus-visible {
  outline-color: rgba(192,33,26,0.35) !important;
}

/* ============================================================
   14. GALLERY PAGE ELEMENTS
   ============================================================ */
.gallery-filter.is-active {
  background: var(--as-red) !important;
  border-color: var(--as-red) !important;
}

.gallery-filter:hover {
  border-color: rgba(192,33,26,0.35) !important;
}

.gallery-tags span {
  background: rgba(192,33,26,0.08) !important;
  color: var(--as-red) !important;
}

.gallery-pair-badge {
  background: rgba(192,33,26,0.95) !important;
}

.ba-knob { background: var(--as-red) !important; }

.ba-title { color: var(--as-red) !important; }

.ba-card { border-color: rgba(192,33,26,0.14) !important; }

.gallery-cta-inner {
  background: linear-gradient(135deg, rgba(192,33,26,0.06), rgba(232,162,23,0.08)) !important;
  border-color: rgba(192,33,26,0.16) !important;
}

.gallery-cta-text h2 { color: var(--as-black) !important; }

.cta-link { color: var(--as-red) !important; }

.lightbox-toggle-btn.is-active { background: var(--as-red) !important; }
.lightbox-toggle { background: rgba(192,33,26,0.08) !important; }
.lightbox-toggle-btn { color: var(--as-red) !important; }

/* ============================================================
   15. BLOG / POST STYLES
   ============================================================ */
.post-title { color: var(--as-black) !important; }

.prose h2 { color: var(--as-red) !important; }

.prose a { color: var(--as-red) !important; }

.toc { background: rgba(192,33,26,0.05) !important; border-color: rgba(192,33,26,0.15) !important; }
.toc-title { color: var(--as-red) !important; }
.toc-list a:hover { color: var(--as-red) !important; }

.post-meta i { color: var(--as-red) !important; }

/* ============================================================
   16. BREADCRUMBS
   ============================================================ */
.breadcrumbs a { color: var(--as-red) !important; }

/* ============================================================
   17. TOAST NOTIFICATIONS
   ============================================================ */
.toast.success { border-color: var(--as-gold) !important; }