/* =========================================================
   hero.css — Zenith Roofing — Hero / Free Estimate (PHOTO ONLY)
   Single background photo + branded navy tint overlay (no ::after)
   ======================================================== */

/* ---------- Brand tokens (single :root) ---------- */
:root{
  --zenith-navy:#072e59;
  --zenith-navy-2:#0b3a6f;
  --zenith-orange:#f7941d;
  --zenith-text:#1e293b;
  --zenith-muted:#64748b;
  --zenith-border:#e2e8f0;

  --radius:10px;
  --shadow-lg:0 14px 40px rgba(2,14,32,.18);
  --shadow-sm:0 4px 14px rgba(2,14,32,.10);

  /* Logo sizing */
  --logo-size-desktop:86px;
  --logo-size-mobile:78px;

  /* 🔵 Hero tint controls */
  --hero-tint: rgba(7,46,89,.50);      /* ~50% */
  --hero-tint-strong: rgba(7,46,89,.62);
}

/* ---------- Base & Layout ---------- */
.zenith-hero{
  position:relative;
  min-height:100svh;
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:0 clamp(1.25rem, 2vw, 2rem) clamp(1.25rem, 2vw, 2rem);
  color:#fff; /* readable on tinted photo */
  /* keep system fonts to avoid webfont swap in hero */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow:hidden;
  z-index:0;
}

/* Background media (photo only) */
.zenith-hero-media{ position:absolute; inset:0; z-index:0; }
.zenith-hero-media picture,
.zenith-hero-media img{ display:block; width:100%; height:100%; }

/* LCP image */
.zenith-hero-mobile-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block; z-index:0;       /* under tint */
  aspect-ratio:16/9;              /* reduces CLS */
}

/* Tint overlay as a real element (prevents CLS) */
.zenith-image-overlay{
  position:absolute; inset:0; z-index:1;
  background: var(--hero-tint);
  pointer-events:none;
}
@media (max-width:768px){
  .zenith-image-overlay{ background: var(--hero-tint-strong); }
}

/* Content sits above media + tint */
.zenith-hero > *:not(.zenith-hero-media){ position:relative; z-index:2; }

/* ===== Card ===== */
.zenith-card{
  position:relative; z-index:2;
  background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  width:100%; max-width:920px;
  padding:clamp(1.5rem, 3vw, 2.5rem);
}

/* ===== Header (logo + titles) ===== */
.zenith-header{ text-align:center; margin-bottom:1.75rem; }
.zenith-logo-container{ position:relative; display:inline-block; margin-bottom:.75rem; }

.zenith-logo{
  display:block;
  width:var(--logo-size-desktop);
  height:auto;
  object-fit:contain;
  position:relative; z-index:1;
}

/* navy halo behind circular logo */
.logo-backdrop{
  position:absolute; inset:-18px; z-index:0; border-radius:50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(7,46,89,.96) 0%,
              rgba(7,46,89,.85) 58%,
              rgba(7,46,89,0) 100%);
  border:3px solid var(--zenith-orange);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  backdrop-filter:blur(2px);
}

.zenith-header-text h1{
  margin:.25rem 0 0; font-weight:800; letter-spacing:.3px;
  color:var(--zenith-navy);
  font-size:clamp(1.6rem, 3.2vw, 2rem);
  text-transform:uppercase;
}
.zenith-header-text h2{
  margin:.2rem 0 .35rem; font-weight:700; color:var(--zenith-navy);
  font-size:clamp(1rem, 2.5vw, 1.25rem);
}
.service-area{ color:var(--zenith-muted); font-size:clamp(.92rem, 2vw, 1rem); }

/* ===== Form grid ===== */
.form-row{ display:flex; flex-wrap:wrap; gap:1.25rem; margin-bottom:1.25rem; }
.form-group{ flex:1; display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.form-col-6{ flex:0 0 calc(50% - .625rem); }
.form-col-4{ flex:0 0 calc(33.333% - .84rem); }

/* A11y helper */
.sr-only{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}

/* Labels */
label{ font-weight:600; font-size:.92rem; color:#334155; }

/* Inputs / selects / textareas */
input, select, textarea{
  width:100%; font-size:1rem;
  border:1px solid var(--zenith-border); border-radius:10px;
  padding:.9rem .95rem;
  background:#fff; color:#0f172a;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
  box-shadow:var(--shadow-sm);
}
input::placeholder, textarea::placeholder{ color:#94a3b8; opacity:1; font-weight:500; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--zenith-navy);
  box-shadow:0 0 0 3px rgba(7,46,89,.15), var(--shadow-sm);
}

/* Invalid state -> ORANGE */
input:invalid, select:invalid, textarea:invalid{ border-color:var(--zenith-orange); }
input:invalid:focus, select:invalid:focus, textarea:invalid:focus{
  box-shadow:0 0 0 3px rgba(247,148,29,.18);
}

/* File input */
input[type="file"]{
  width:100%;
  padding:.55rem .75rem;
  border:1px solid var(--zenith-border);
  border-radius:10px;
  background:#fff;
  color:#334155;
  box-shadow:none;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{
  background:var(--zenith-orange); color:#fff; border:none;
  padding:.6rem .9rem; margin-right:.75rem; border-radius:10px; font-weight:700;
  cursor:pointer; transition:background .2s, box-shadow .2s, transform .08s;
  box-shadow:0 6px 18px rgba(247,148,29,.25);
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover{
  background:#e9830b; box-shadow:0 10px 24px rgba(247,148,29,.35);
  transform:translateY(-1px);
}
input[type="file"]:focus-within{
  outline:3px solid rgba(247,148,29,.35);
  outline-offset:2px;
}

/* Buttons */
.zenith-btn{
  background:var(--zenith-orange); color:#fff; border:none;
  padding:1rem 1.25rem; font-size:1rem; font-weight:700; width:100%;
  border-radius:12px; cursor:pointer;
  transition:transform .08s, box-shadow .2s, background .2s;
  box-shadow:0 10px 24px rgba(247,148,29,.25);
}
.zenith-btn:hover{
  background:#e9830b; box-shadow:0 14px 28px rgba(247,148,29,.35);
  transform:translateY(-1px);
}
.zenith-btn:active{ transform:translateY(0); }
.zenith-btn:focus-visible{ outline:3px solid rgba(247,148,29,.35); outline-offset:2px; }

/* Utility orange button */
.btn-orange{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:12px;
  background:var(--zenith-orange); color:#fff; font-weight:700;
  text-decoration:none; border:none; cursor:pointer;
  transition:background .2s, transform .08s, box-shadow .2s;
  box-shadow:0 8px 22px rgba(247,148,29,.28);
}
.btn-orange:hover{ background:#e9830b; transform:translateY(-1px); box-shadow:0 12px 26px rgba(247,148,29,.36); }
.btn-orange:focus-visible{ outline:3px solid rgba(247,148,29,.35); outline-offset:3px; }

/* reCAPTCHA */
.recaptcha-container{
  display:flex; justify-content:center; align-items:center; width:100%;
  margin:.35rem 0 .35rem;
}
#recaptcha-slot{ display:block; min-width:304px; min-height:78px; }

/* Disclaimer */
.form-disclaimer{
  font-size:.85rem; color:#6b7280;
  margin-top:1rem; text-align:center; line-height:1.5;
}
.form-disclaimer a{
  color:var(--zenith-orange);
  font-weight:800;
  text-decoration:none;
}
.form-disclaimer a:hover{ text-decoration:underline; }
.form-disclaimer a:focus-visible{ outline:2px dotted var(--zenith-orange); outline-offset:2px; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .zenith-card{ padding:1.75rem; }
}
@media (max-width:768px){
  .form-col-6, .form-col-4{ flex:0 0 100%; }
  .zenith-card{ padding:1.25rem; }
  .zenith-logo{ width:var(--logo-size-mobile) !important; height:auto !important; }
}

/* Hide hero logo only when nav is collapsed (mobile) */
@media (max-width:1024px){
  html.nav-collapsed .zenith-hero .zenith-header .zenith-logo-container,
  html.nav-collapsed .zenith-hero .zenith-header .zenith-logo,
  html.nav-collapsed .zenith-hero .zenith-header .logo-backdrop{ display:none !important; }
}

/* When nav is collapsed, add space under sticky header */
.nav-collapsed .zenith-hero{
  padding-top:var(--header-h, 80px);
  min-height:calc(100svh - var(--header-h, 80px));
}

/* Validation helpers */
.field-note{ margin-top:.35rem; font-size:.85rem; color:var(--zenith-muted); }
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea{
  border-color:#dc2626 !important;
  box-shadow:0 0 0 3px rgba(220,38,38,0.12), var(--shadow-sm);
}
.field-error{ margin-top:.35rem; font-size:.85rem; color:#b91c1c; }
.error-summary{
  display:none;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#7c2d12;
  padding:.85rem 1rem;
  border-radius:10px;
  margin:0 0 1rem 0;
}
.error-summary.show{ display:block; }

/* Disable any old video background, if present */
.zenith-video-container{ display:none !important; }