/*
 * construction-bg.css
 * Owns: hero-section and dashboard construction mosaic background treatment
 * Does NOT own: typography, layout, nav, colors, hero max-width
 *
 * Three classes:
 *   .construction-hero     — full-width wrapper; mosaic fills 100vw across hero
 *   .construction-header-bg — dashboard greeting strip; short top-edge fade
 *   .construction-page-bg  — fixed full-page subtle tiling (welcome/onboarding)
 *
 * SVG is self-contained — no external file dependency, no FOUC.
 * Opacity ~15% keeps WCAG AA on #080909 background with #ecedef text.
 */

/*
 * The SVG encodes a tiled 400×300 construction mosaic:
 *   - Shingle rows (roofing): offset rectangles in top-left quadrant
 *   - Wood planks (deck): horizontal ruled lines, lower-left
 *   - Siding (vinyl): narrow horizontal bands with shadow lines, right side
 *   - Paint roller + handle: top-right
 *   - Dentist chair silhouette: bottom-right abstracted
 *   - For-Sale sign post: center-right
 *
 * All strokes/fills use rgba white at low opacity so
 * the pattern works on any dark background.
 */

/* Full-width outer wrapper — mosaic fills viewport width, text stays in inner .hero */
.construction-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Background mosaic layer — positioned within the full-width wrapper */
.construction-hero::after {
  content: '';
  position: absolute;
  inset: 0;                  /* fill the full wrapper */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360'%3E%3Cdefs%3E%3Cpattern id='shingles' x='0' y='0' width='60' height='24' patternUnits='userSpaceOnUse'%3E%3Crect x='1' y='1' width='58' height='11' rx='1' fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='1'/%3E%3Crect x='31' y='13' width='58' height='11' rx='1' fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='1'/%3E%3Crect x='-29' y='13' width='58' height='11' rx='1' fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='1'/%3E%3C/pattern%3E%3Cpattern id='planks' x='0' y='0' width='120' height='20' patternUnits='userSpaceOnUse'%3E%3Cline x1='0' y1='0' x2='120' y2='0' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cline x1='0' y1='8' x2='120' y2='8' stroke='rgba(255,255,255,0.08)' stroke-width='0.5'/%3E%3Cline x1='0' y1='10' x2='120' y2='10' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cline x1='0' y1='18' x2='120' y2='18' stroke='rgba(255,255,255,0.08)' stroke-width='0.5'/%3E%3Cline x1='0' y1='20' x2='120' y2='20' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cline x1='40' y1='0' x2='40' y2='10' stroke='rgba(255,255,255,0.07)' stroke-width='0.5'/%3E%3Cline x1='80' y1='10' x2='80' y2='20' stroke='rgba(255,255,255,0.07)' stroke-width='0.5'/%3E%3C/pattern%3E%3Cpattern id='siding' x='0' y='0' width='80' height='16' patternUnits='userSpaceOnUse'%3E%3Crect x='0' y='0' width='80' height='14' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='1'/%3E%3Cline x1='0' y1='13' x2='80' y2='13' stroke='rgba(255,255,255,0.06)' stroke-width='1.5'/%3E%3C/pattern%3E%3C/defs%3E%3C!-- shingles zone top-left --%3E%3Crect x='0' y='0' width='210' height='150' fill='url(%23shingles)' opacity='0.7'/%3E%3C!-- planks zone bottom-left --%3E%3Crect x='0' y='195' width='200' height='165' fill='url(%23planks)' opacity='0.8'/%3E%3C!-- siding zone right --%3E%3Crect x='280' y='0' width='200' height='360' fill='url(%23siding)' opacity='0.75'/%3E%3C!-- paint roller icon: top-right area --%3E%3Cg transform='translate(330 30)' opacity='0.28'%3E%3Crect x='0' y='18' width='52' height='22' rx='4' fill='none' stroke='rgba(255,255,255,1)' stroke-width='2'/%3E%3Crect x='4' y='22' width='44' height='14' rx='2' fill='rgba(255,255,255,0.18)'/%3E%3Crect x='22' y='0' width='8' height='20' rx='2' fill='none' stroke='rgba(255,255,255,1)' stroke-width='2'/%3E%3Cpath d='M0 40 Q-8 52 -4 62' fill='none' stroke='rgba(255,255,255,1)' stroke-width='2'/%3E%3Cline x1='-4' y1='62' x2='6' y2='62' stroke='rgba(255,255,255,1)' stroke-width='2'/%3E%3C/g%3E%3C!-- for-sale sign: center-right --%3E%3Cg transform='translate(388 140)' opacity='0.22'%3E%3Crect x='0' y='0' width='60' height='40' rx='4' fill='none' stroke='rgba(255,255,255,1)' stroke-width='2'/%3E%3Cline x1='4' y1='10' x2='56' y2='10' stroke='rgba(255,255,255,0.5)' stroke-width='1'/%3E%3Cline x1='4' y1='20' x2='56' y2='20' stroke='rgba(255,255,255,0.5)' stroke-width='1'/%3E%3Cline x1='4' y1='30' x2='40' y2='30' stroke='rgba(255,255,255,0.5)' stroke-width='1'/%3E%3Cline x1='30' y1='40' x2='30' y2='68' stroke='rgba(255,255,255,1)' stroke-width='2'/%3E%3Cline x1='20' y1='68' x2='40' y2='68' stroke='rgba(255,255,255,1)' stroke-width='2'/%3E%3C/g%3E%3C!-- dentist chair silhouette: bottom-right --%3E%3Cg transform='translate(300 250)' opacity='0.18'%3E%3Crect x='0' y='10' width='80' height='30' rx='8' fill='none' stroke='rgba(255,255,255,1)' stroke-width='2'/%3E%3Crect x='60' y='0' width='30' height='20' rx='6' fill='none' stroke='rgba(255,255,255,1)' stroke-width='2'/%3E%3Cline x1='10' y1='40' x2='10' y2='70' stroke='rgba(255,255,255,1)' stroke-width='2'/%3E%3Cline x1='70' y1='40' x2='70' y2='70' stroke='rgba(255,255,255,1)' stroke-width='2'/%3E%3Cline x1='5' y1='70' x2='80' y2='70' stroke='rgba(255,255,255,1)' stroke-width='2'/%3E%3Cpath d='M90 20 Q110 20 110 36' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='1.5'/%3E%3C/g%3E%3C!-- roofline triangle: left --%3E%3Cg transform='translate(20 160)' opacity='0.2'%3E%3Cpolyline points='0,60 60,0 120,60' fill='none' stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linejoin='round'/%3E%3Cline x1='45' y1='60' x2='45' y2='30' stroke='rgba(255,255,255,0.6)' stroke-width='1.5'/%3E%3Cline x1='75' y1='60' x2='75' y2='18' stroke='rgba(255,255,255,0.6)' stroke-width='1.5'/%3E%3C/g%3E%3C!-- drop cloth / tarp diagonal: lower-center --%3E%3Cg transform='translate(170 260)' opacity='0.15'%3E%3Cpolyline points='0,60 30,0 80,40 110,10 140,60' fill='none' stroke='rgba(255,255,255,1)' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cline x1='0' y1='60' x2='140' y2='60' stroke='rgba(255,255,255,0.4)' stroke-width='1'/%3E%3C/g%3E%3C!-- gradient fade overlay left/right so mosaic blends into bg --%3E%3ClinearGradient id='fadeL' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23080909' stop-opacity='1'/%3E%3Cstop offset='0.15' stop-color='%23080909' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='fadeR' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0.82' stop-color='%23080909' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23080909' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='fadeT' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23080909' stop-opacity='1'/%3E%3Cstop offset='0.18' stop-color='%23080909' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='fadeB' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.78' stop-color='%23080909' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23080909' stop-opacity='1'/%3E%3C/linearGradient%3E%3Crect x='0' y='0' width='480' height='360' fill='url(%23fadeL)'/%3E%3Crect x='0' y='0' width='480' height='360' fill='url(%23fadeR)'/%3E%3Crect x='0' y='0' width='480' height='360' fill='url(%23fadeT)'/%3E%3Crect x='0' y='0' width='480' height='360' fill='url(%23fadeB)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 480px 360px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

/* Ensure hero content floats above the bg layer */
.construction-hero > * {
  position: relative;
  z-index: 1;
}

/* Dashboard variant: applied to .main-content top area */
.construction-header-bg {
  position: relative;
  overflow: visible;
}

.construction-header-bg::before {
  content: '';
  position: absolute;
  top: -24px;
  left: -40px;
  right: -40px;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360'%3E%3Cdefs%3E%3Cpattern id='shingles' x='0' y='0' width='60' height='24' patternUnits='userSpaceOnUse'%3E%3Crect x='1' y='1' width='58' height='11' rx='1' fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='1'/%3E%3Crect x='31' y='13' width='58' height='11' rx='1' fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='1'/%3E%3Crect x='-29' y='13' width='58' height='11' rx='1' fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='1'/%3E%3C/pattern%3E%3Cpattern id='planks' x='0' y='0' width='120' height='20' patternUnits='userSpaceOnUse'%3E%3Cline x1='0' y1='0' x2='120' y2='0' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cline x1='0' y1='10' x2='120' y2='10' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cline x1='0' y1='20' x2='120' y2='20' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cline x1='40' y1='0' x2='40' y2='10' stroke='rgba(255,255,255,0.07)' stroke-width='0.5'/%3E%3C/pattern%3E%3Cpattern id='siding' x='0' y='0' width='80' height='16' patternUnits='userSpaceOnUse'%3E%3Crect x='0' y='0' width='80' height='14' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' width='210' height='360' fill='url(%23shingles)' opacity='0.7'/%3E%3Crect x='210' y='0' width='270' height='360' fill='url(%23siding)' opacity='0.75'/%3E%3ClinearGradient id='fadeB2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.5' stop-color='%230a0a0b' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%230a0a0b' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='fadeL2' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230a0a0b' stop-opacity='0.8'/%3E%3Cstop offset='0.1' stop-color='%230a0a0b' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='fadeR2' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0.9' stop-color='%230a0a0b' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%230a0a0b' stop-opacity='0.8'/%3E%3C/linearGradient%3E%3Crect x='0' y='0' width='480' height='360' fill='url(%23fadeB2)'/%3E%3Crect x='0' y='0' width='480' height='360' fill='url(%23fadeL2)'/%3E%3Crect x='0' y='0' width='480' height='360' fill='url(%23fadeR2)'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 480px 200px;
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}

/* Welcome page - full-page subtle */
.construction-page-bg {
  position: relative;
}

.construction-page-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360'%3E%3Cdefs%3E%3Cpattern id='shingles' x='0' y='0' width='60' height='24' patternUnits='userSpaceOnUse'%3E%3Crect x='1' y='1' width='58' height='11' rx='1' fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='1'/%3E%3Crect x='31' y='13' width='58' height='11' rx='1' fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='1'/%3E%3Crect x='-29' y='13' width='58' height='11' rx='1' fill='none' stroke='rgba(255,255,255,0.22)' stroke-width='1'/%3E%3C/pattern%3E%3Cpattern id='siding' x='0' y='0' width='80' height='16' patternUnits='userSpaceOnUse'%3E%3Crect x='0' y='0' width='80' height='14' fill='none' stroke='rgba(255,255,255,0.18)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' width='240' height='360' fill='url(%23shingles)' opacity='0.5'/%3E%3Crect x='240' y='0' width='240' height='360' fill='url(%23siding)' opacity='0.5'/%3E%3ClinearGradient id='fadeC' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0.2' stop-color='%23080909' stop-opacity='0'/%3E%3Cstop offset='0.5' stop-color='%23080909' stop-opacity='1'/%3E%3Cstop offset='0.8' stop-color='%23080909' stop-opacity='0'/%3E%3C/linearGradient%3E%3Crect x='0' y='0' width='480' height='360' fill='url(%23fadeC)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 480px 360px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.construction-page-bg > * {
  position: relative;
  z-index: 1;
}