/**
 * Volt N' Vent — faint HVAC/electrical motif backgrounds (site-wide).
 * Photos read as subtle watermark texture, not full-bleed hero imagery.
 */

:root {
  --vnv-bg-ac: url('bg/bg-ac-condenser.jpg?v=20260628a');
  --vnv-bg-panel: url('bg/bg-electrical-panel.jpg?v=20260628a');
  --vnv-bg-mini: url('bg/bg-mini-split.jpg?v=20260628a');
  --vnv-bg-handler: url('bg/bg-air-handler.jpg?v=20260628a');
  --vnv-bg-ev: url('bg/bg-ev-charger.jpg?v=20260628a');
  --vnv-bg-duct: url('bg/bg-ductwork.jpg?v=20260628a');
  /* Motif strength — faint watermark, but visible on first glance (especially homepage) */
  --vnv-motif-opacity-light: 0.11;
  --vnv-motif-opacity-dark: 0.13;
  --vnv-motif-opacity-hero-light: 0.14;
  --vnv-motif-opacity-hero-dark: 0.11;
}

body.vnv-bg-site {
  background-color: #edbe87;
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -10%, rgba(247, 198, 0, 0.06), transparent 42%),
    linear-gradient(180deg, #eec48f 0%, #edbe87 22%, #e7b67c 100%);
}

/* ── Motif layer helper ── */
.vnv-bg-section:not(.vnv-bg-ev):not(.vnv-bg-electrical):not(.vnv-bg-panel),
body.vnv-bg-site main > section:not(.vnv-bg-ev):not(.vnv-bg-electrical):not(.vnv-bg-panel),
body.vnv-bg-site .hero-area.vnv-bg-hero,
body.vnv-bg-site header.page-hero[class*="vnv-bg-hero"] {
  position: relative;
  isolation: isolate;
  background-color: inherit;
}

/* Dark bands must never inherit tan body background (mobile Safari was showing faded gold-on-tan). */
.vnv-bg-section.vnv-bg-ev,
.vnv-bg-section.vnv-bg-electrical,
.vnv-bg-section.vnv-bg-panel {
  position: relative;
  isolation: isolate;
}

.vnv-bg-section::after,
body.vnv-bg-site main > section::after,
body.vnv-bg-site .hero-area.vnv-bg-hero::after,
body.vnv-bg-site header.page-hero[class*="vnv-bg-hero"]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 115% auto;
  filter: grayscale(28%) contrast(0.88) brightness(1.06);
}

.vnv-bg-section > *,
body.vnv-bg-site main > section > *,
body.vnv-bg-site .hero-area.vnv-bg-hero > *,
body.vnv-bg-site header.page-hero[class*="vnv-bg-hero"] > * {
  position: relative;
  z-index: 1;
}

/* Light parchment sections — solid base + whisper motif */
.vnv-bg-ac { background-color: #edbe87; --vnv-motif: var(--vnv-bg-ac); }
.vnv-bg-mini { background-color: #f0c995; --vnv-motif: var(--vnv-bg-mini); }
.vnv-bg-handler { background-color: #edbe87; --vnv-motif: var(--vnv-bg-handler); }
.vnv-bg-duct { background-color: #e8b878; --vnv-motif: var(--vnv-bg-duct); }

.vnv-bg-ac::after,
.vnv-bg-mini::after,
.vnv-bg-handler::after,
.vnv-bg-duct::after {
  background-image: var(--vnv-motif);
  opacity: var(--vnv-motif-opacity-light);
}

/* Dark navy sections */
.vnv-bg-panel { background-color: #0f2844; --vnv-motif: var(--vnv-bg-panel); }
.vnv-bg-ev { background-color: #153a5c; --vnv-motif: var(--vnv-bg-ev); }
.vnv-bg-electrical { background-color: #0f2844; --vnv-motif: var(--vnv-bg-panel); }

.vnv-bg-panel::after,
.vnv-bg-ev::after,
.vnv-bg-electrical::after {
  background-image: var(--vnv-motif);
  opacity: var(--vnv-motif-opacity-dark);
  filter: grayscale(50%) contrast(0.75) brightness(0.95);
}

/* Homepage hero — faint mini-split motif on parchment */
.hero-area.vnv-bg-hero {
  background-color: #edbe87;
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -10%, rgba(247, 198, 0, 0.06), transparent 42%),
    linear-gradient(180deg, #eec48f 0%, #edbe87 22%, #e7b67c 100%);
}

.hero-area.vnv-bg-hero::after {
  background-image: var(--vnv-bg-mini);
  opacity: var(--vnv-motif-opacity-hero-light);
  background-size: 130% auto;
  background-position: center 20%;
}

/* Inner page heroes — faint motif under existing navy gradient */
.page-hero.vnv-bg-hero-hvac::after {
  background-image: var(--vnv-bg-ac);
  opacity: var(--vnv-motif-opacity-hero-dark);
  background-size: 125% auto;
}

.page-hero.vnv-bg-hero-electrical::after {
  background-image: var(--vnv-bg-panel);
  opacity: var(--vnv-motif-opacity-hero-dark);
  background-size: 120% auto;
}

.page-hero.vnv-bg-hero-general::after {
  background-image: var(--vnv-bg-handler);
  opacity: var(--vnv-motif-opacity-hero-dark);
  background-size: 120% auto;
}

/* Restore readable navy hero gradient (motif sits underneath via ::after z-index 0, content z-index 1) */
.page-hero.vnv-bg-hero-hvac,
.page-hero.vnv-bg-hero-electrical,
.page-hero.vnv-bg-hero-general {
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(232, 137, 44, 0.12), transparent 50%),
    linear-gradient(160deg, rgba(15, 40, 68, 0.97) 0%, rgba(21, 58, 92, 0.95) 55%, rgba(15, 40, 68, 0.97) 100%) !important;
  background-color: #0f2844 !important;
}

.page-hero.vnv-bg-hero-electrical {
  background-image:
    radial-gradient(ellipse 80% 50% at 80% 0%, rgba(247, 198, 0, 0.1), transparent 50%),
    linear-gradient(160deg, rgba(15, 40, 68, 0.97) 0%, rgba(21, 58, 92, 0.95) 55%, rgba(15, 40, 68, 0.97) 100%) !important;
}

/* Inner pages — rotating faint motifs on content sections */
body.vnv-bg-site main > section:nth-child(4n+1):not(.vnv-bg-section):not([class*='bg-navy']) {
  background-color: #edbe87;
}
body.vnv-bg-site main > section:nth-child(4n+1):not(.vnv-bg-section):not([class*='bg-navy'])::after {
  background-image: var(--vnv-bg-ac);
  opacity: var(--vnv-motif-opacity-light);
}

body.vnv-bg-site main > section:nth-child(4n+2):not(.vnv-bg-section):not([class*='bg-navy']) {
  background-color: #f0c995;
}
body.vnv-bg-site main > section:nth-child(4n+2):not(.vnv-bg-section):not([class*='bg-navy'])::after {
  background-image: var(--vnv-bg-mini);
  opacity: var(--vnv-motif-opacity-light);
}

body.vnv-bg-site main > section:nth-child(4n+3):not(.vnv-bg-section):not([class*='bg-navy']) {
  background-color: #edbe87;
}
body.vnv-bg-site main > section:nth-child(4n+3):not(.vnv-bg-section):not([class*='bg-navy'])::after {
  background-image: var(--vnv-bg-handler);
  opacity: var(--vnv-motif-opacity-light);
}

body.vnv-bg-site main > section:nth-child(4n):not(.vnv-bg-section):not([class*='bg-navy']) {
  background-color: #e8b878;
}
body.vnv-bg-site main > section:nth-child(4n):not(.vnv-bg-section):not([class*='bg-navy'])::after {
  background-image: var(--vnv-bg-duct);
  opacity: var(--vnv-motif-opacity-light);
}

body.vnv-bg-site main > section[class*='bg-navy']:nth-child(odd)::after {
  background-image: var(--vnv-bg-panel);
  opacity: var(--vnv-motif-opacity-dark);
  filter: grayscale(50%) contrast(0.75) brightness(0.95);
}

body.vnv-bg-site main > section[class*='bg-navy']:nth-child(even)::after {
  background-image: var(--vnv-bg-ev);
  opacity: var(--vnv-motif-opacity-dark);
  filter: grayscale(50%) contrast(0.75) brightness(0.95);
}

/* Footer — barely-there electrical motif */
body.vnv-bg-site footer {
  position: relative;
  isolation: isolate;
  background-color: #0f2844;
  background-image: linear-gradient(180deg, rgba(21, 58, 92, 0.98) 0%, rgba(15, 40, 68, 1) 100%);
}

body.vnv-bg-site footer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: var(--vnv-bg-panel);
  background-size: 120% auto;
  background-position: center bottom;
  opacity: 0.08;
  filter: grayscale(50%) contrast(0.78);
}

body.vnv-bg-site footer > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .vnv-bg-section::after,
  body.vnv-bg-site main > section::after,
  .hero-area.vnv-bg-hero::after,
  header.page-hero[class*='vnv-bg-hero']::after {
    background-size: 155% auto;
    filter: grayscale(18%) contrast(0.92) brightness(1.08);
  }

  /* Motifs read stronger on small screens without going full-bleed */
  .vnv-bg-ac::after,
  .vnv-bg-mini::after,
  .vnv-bg-handler::after,
  .vnv-bg-duct::after,
  body.vnv-bg-site main > section:nth-child(4n+1):not(.vnv-bg-section):not([class*='bg-navy'])::after,
  body.vnv-bg-site main > section:nth-child(4n+2):not(.vnv-bg-section):not([class*='bg-navy'])::after,
  body.vnv-bg-site main > section:nth-child(4n+3):not(.vnv-bg-section):not([class*='bg-navy'])::after,
  body.vnv-bg-site main > section:nth-child(4n):not(.vnv-bg-section):not([class*='bg-navy'])::after {
    opacity: 0.17;
  }

  .hero-area.vnv-bg-hero::after {
    opacity: 0.19;
    background-size: 165% auto;
  }

  header.page-hero[class*='vnv-bg-hero']::after {
    opacity: 0.15;
  }

  .vnv-bg-panel::after,
  .vnv-bg-ev::after,
  .vnv-bg-electrical::after,
  body.vnv-bg-site main > section[class*='bg-navy']:nth-child(odd)::after,
  body.vnv-bg-site main > section[class*='bg-navy']:nth-child(even)::after {
    opacity: 0.17;
    filter: grayscale(42%) contrast(0.82) brightness(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vnv-bg-section::after,
  body.vnv-bg-site main > section::after {
    opacity: 0.08;
  }
}

/* Solid islands on dark bands — motif stops at card/text clusters (no bleed-through) */
body.vnv-bg-site main > section[class*='bg-navy'] > :is(.max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl),
body.vnv-bg-site .vnv-bg-panel > :is(.max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl),
body.vnv-bg-site .vnv-bg-ev > :is(.max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl) {
  position: relative;
  isolation: isolate;
}

body.vnv-bg-site main > section[class*='bg-navy'] > :is(.max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl)::before,
body.vnv-bg-site .vnv-bg-panel > :is(.max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl)::before,
body.vnv-bg-site .vnv-bg-ev > :is(.max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl)::before {
  content: '';
  position: absolute;
  inset: -0.75rem;
  border-radius: 1.75rem;
  background: inherit;
  background-color: #0f2844;
  z-index: -1;
  pointer-events: none;
}

body.vnv-bg-site .vnv-bg-ev > :is(.max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl)::before {
  background-color: #153a5c;
}