/* SRegan Roofing — Slate & Copper Theme (root-level file: /theme-sregan.css) */
:root{
  --brand:#2A6DB0; --brand-strong:#1E4E7A; --accent:#C8513D;
  --ink:#F1F5F9; --muted:#A5B4CF; --border:rgba(255,255,255,.14);
  --bg-deep:#0B1220; --panel:#0F172A;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(900px 420px at 0% -10%, rgba(42,109,176,.22), transparent 60%),
    radial-gradient(800px 360px at 100% -10%, rgba(200,81,61,.18), transparent 60%),
    linear-gradient(180deg, #0D1424 0%, #0B1220 100%);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  line-height:1.55;
}
.topbar, header.site-header, footer.site-footer{
  background:linear-gradient(180deg, rgba(13,20,36,.86), rgba(13,20,36,.66));
  color:var(--ink);
}
header.site-header{ border-bottom:1px solid var(--border)!important; backdrop-filter:blur(6px) }
.brand, .brand strong{ color:var(--ink)!important }
nav a{ color:var(--ink)!important; opacity:.9; text-decoration:none }
nav a:hover{ opacity:1 }
.hero{
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(42,109,176,.28), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(200,81,61,.20), transparent 60%),
    linear-gradient(180deg, rgba(17,24,39,.86), rgba(17,24,39,.62));
  color:var(--ink);
}
.hero h1,.hero .lede{ color:var(--ink)!important }
figure.hero-fig img{ border-radius:14px; box-shadow:0 20px 44px rgba(2,6,23,.55) }
.section{ padding:26px 0 }
.section:nth-of-type(even){
  background:linear-gradient(180deg, rgba(42,109,176,.06), rgba(200,81,61,.05));
}
.card{
  background:var(--panel); border:1px solid var(--border)!important; color:var(--ink);
  border-radius:14px; box-shadow:0 12px 32px rgba(2,6,23,.35);
}
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; border:0; color:#fff!important;
  background:linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 100%);
  box-shadow:0 8px 26px rgba(42,109,176,.42);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 34px rgba(42,109,176,.5) }
.btn:active{ transform:translateY(0) scale(.99) }
.btn-outline{ background:transparent!important; border:1px solid var(--border)!important; color:var(--ink)!important }
.btn-outline:hover{ border-color:var(--brand); background:rgba(42,109,176,.18)!important; color:#fff!important }
a{ color:#BBD7FF } a:hover{ color:#E3EEFF }
.breadcrumbs a{ color:var(--muted)!important }
img{ max-width:100%; height:auto }
figure img{ border-radius:14px; box-shadow:0 10px 30px rgba(2,6,23,.45) }
figcaption{ color:var(--muted) }
label{ color:var(--ink) }
input,select,textarea{
  width:100%; background:#0B1526; color:#E5E7EB; border:1px solid var(--border);
  border-radius:10px; padding:12px;
}
input::placeholder,textarea::placeholder{ color:#9AA7BF }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--brand); outline-offset:2px; border-color:transparent }
#formStatus.ok{ color:#34D399 } #formStatus.error{ color:#F87171 }
footer.site-footer a{ color:#BBD7FF } footer.site-footer a:hover{ color:#E3EEFF }
.small{ color:var(--muted)!important } address a{ color:#D4E6FF!important }
.callout{
  background:linear-gradient(160deg, rgba(200,81,61,.18), rgba(42,109,176,.18));
  border:1px dashed rgba(255,255,255,.18); border-radius:14px; padding:16px;
}

/* --- Header brand adjustments (auto-injected) --- */
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:62px;height:auto}
@media (min-width:900px){ .brand img{width:72px} }
.brand-name{font-size:clamp(22px,2.8vw,34px);font-weight:800;letter-spacing:.2px}

/* === Header/nav placement + brand sizing (override v2) === */
header.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
/* Keep nav on the right on desktop */
header.site-header nav{
  display:flex; flex-wrap:nowrap; align-items:center; gap:24px; margin-left:auto;
}
/* White links with subtle weight */
header.site-header nav a{
  color:var(--ink)!important; opacity:.95; font-weight:600; text-decoration:none;
}
header.site-header nav a:hover{ opacity:1 }
/* Bigger logo to fill corner */
.brand img{ width:92px; height:auto }
@media (min-width:1200px){ .brand img{ width:110px } }
/* Larger brand name */
.brand-name{ font-size:clamp(24px,3.2vw,38px); font-weight:800; letter-spacing:.3px; color:var(--ink)!important }
/* Ensure header doesn't wrap awkwardly */
header.site-header .container > .brand{ flex:0 0 auto }
header.site-header .container > nav{ flex:1 1 auto; justify-content:flex-end }

/* === Logo XL sizing (v3) === */
.brand img{
  width: clamp(84px, 14vw, 132px); /* mobile -> desktop */
  height: auto;
}
@media (min-width: 1200px){
  .brand img{ width: 160px; } /* wide desktop */
}
/* Slightly increase brand name to balance the larger logo */
.brand-name{ font-size: clamp(26px, 3.6vw, 42px); }

/* ===== Full White Text Mode (v4) ===== */
:root{ --ink:#ffffff; --muted:rgba(255,255,255,.86); }

/* Global text to white */
body, .container, p, li, a, h1, h2, h3, h4, h5, h6,
small, figcaption, address, time, strong, em, span,
.breadcrumbs a, nav a, label, legend, th, td {
  color:#fff !important;
}

/* Links */
a{ color:#fff !important; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.22); }
a:hover{ color:#fff !important; border-bottom-color:rgba(255,255,255,.45); }

/* Cards & panels stay dark but text white */
.card{ color:#fff !important; background:var(--panel); border-color:rgba(255,255,255,.18)!important; }
.kpi{ color:#fff!important; background:rgba(255,255,255,.06)!important; border-color:rgba(255,255,255,.18)!important; }
.kpi .small, .kpi strong{ color:#fff!important; }

/* Forms */
label{ color:#fff!important }
input,select,textarea{
  background:rgba(255,255,255,.06); color:#fff!important;
  border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:12px;
}
input::placeholder, textarea::placeholder{ color:rgba(255,255,255,.7) }
input:focus, select:focus, textarea:focus{ outline:2px solid #fff; outline-offset:2px; border-color:transparent }

/* Buttons */
.btn{ color:#fff!important }
.btn-outline{ border:1px solid rgba(255,255,255,.6)!important; color:#fff!important; }
.btn-outline:hover{ background:rgba(255,255,255,.12)!important; color:#fff!important; }

/* Footer & crumbs */
footer.site-footer a{ color:#fff!important; }
.small, .breadcrumbs a, figcaption{ color:rgba(255,255,255,.86)!important; }

/* Header brand/menu kept white */
.brand-name{ color:#fff!important }
header.site-header nav a{ color:#fff!important }

/* ===== Unified Dark Background (v5) ===== */
/* Use the same gradient everywhere so white text is always legible */
:root{
  --brand:#2A6DB0; --brand-strong:#1E4E7A; --accent:#C8513D;
  --ink:#ffffff; --muted:rgba(255,255,255,.86);
  --panel:#0F172A; --border:rgba(255,255,255,.18);
}
body,
.hero,
.section,
footer.site-footer{
  background:
    radial-gradient(900px 420px at 0% -10%, rgba(42,109,176,.22), transparent 60%),
    radial-gradient(800px 360px at 100% -10%, rgba(200,81,61,.18), transparent 60%),
    linear-gradient(180deg, #0D1424 0%, #0B1220 100%) !important;
  color:#fff !important;
}
/* Remove alternating tint */
.section:nth-of-type(even){ background: inherit !important; }
/* Cards, KPI tiles, and anchor-cards (areas grid) must be dark */
.card,
.kpi,
.grid .card,
.grid a.card,
a.card{
  background: var(--panel) !important;
  color:#fff !important;
  border:1px solid var(--border) !important;
  box-shadow: 0 12px 32px rgba(2,6,23,.35);
}
/* Ensure anchor cards read as blocks with padding */
a.card{ display:block; padding:16px; border-radius:14px; text-decoration:none!important }
/* Small text and captions */
.small, figcaption{ color:var(--muted)!important }
/* Links remain white */
a{ color:#fff !important; border-bottom:1px solid rgba(255,255,255,.22) }
a:hover{ border-bottom-color:rgba(255,255,255,.45) }
/* Forms dark */
label{ color:#fff!important }
input,select,textarea{
  background:rgba(255,255,255,.06)!important; color:#fff!important;
  border:1px solid var(--border)!important; border-radius:10px; padding:12px;
}
/* KPI inner text contrast */
.kpi strong, .kpi .small{ color:#fff!important }
/* CTA bar (callout) uses soft gradient but stays dark */
.callout{
  background: linear-gradient(160deg, rgba(200,81,61,.18), rgba(42,109,176,.18))!important;
  border:1px dashed var(--border)!important;
}
/* Area list footer link (See all areas) */
.section a{ color:#fff!important }
/* Header/logo sizing retained */
.brand img{ width: clamp(100px, 15vw, 160px); height:auto }
.brand-name{ font-size:clamp(26px,3.6vw,42px); color:#fff!important }
header.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:16px }
header.site-header nav{ display:flex; align-items:center; gap:24px; margin-left:auto }
header.site-header nav a{ color:#fff!important; font-weight:600 }

/* ===== Areas grid fix (force dark tiles) v6 ===== */
:root{ --areaBorder: rgba(255,255,255,.18) }

/* Use VERY high specificity to beat in-page <style> rules */
.section .grid a.card,
.grid a.card,
.grid > a.card,
a.card,
a.card:link,
a.card:visited {
  display:block;
  padding:14px 16px;
  border-radius:14px;
  background: var(--panel) !important;
  color:#fff !important;
  border:1px solid var(--areaBorder) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.40);
  text-decoration:none !important;
}

/* Hover/focus states */
.grid a.card:hover,
a.card:hover{ border-color:#fff !important; transform: translateY(-1px); transition: all .15s ease }
.grid a.card:focus-visible{ outline:2px solid #fff; outline-offset:2px }

/* Make sure the heading/link below stays visible */
.section a{ color:#fff !important; border-bottom:1px solid rgba(255,255,255,.25) }
.section a:hover{ border-bottom-color:#fff }

/* ===== FINAL PATCH v7 ===== */
/* Ensure all anchor-like controls are clickable top-most */
a, .btn, nav a, .grid a.card {
  position: relative; z-index: 5; pointer-events: auto !important;
}

/* Areas grid must be dark (beat inline/earlier rules) */
body .container .section .grid a.card,
body .section .grid a.card,
html body .grid a.card,
html body .grid > a.card,
html body a.card {
  display:block;
  padding:14px 16px;
  border-radius:14px;
  background-color: var(--panel) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,.40);
  text-decoration:none !important;
}
html body .grid a.card:hover { border-color:#fff !important; transform: translateY(-1px); transition: all .15s ease }

/* In case any overlay blocks clicks */
.hero figure, .hero .overlay, .image-overlay, .gradient, .shade {
  pointer-events: none !important;
}

/* === Final: Areas hover stays dark & nav always clickable === */
html body .grid a.card:hover,
html body .grid a.card:focus,
html body .grid a.card:active,
html body a.card:hover,
html body a.card:focus,
html body a.card:active{
  background-color:#0F172A !important;
  color:#fff !important;
  border-color:#fff !important;
  transform: translateY(-1px);
}

header.site-header{ position:relative; z-index:5000 }
header.site-header .container, header.site-header nav, header.site-header nav a, header.site-header .brand {
  pointer-events:auto !important;
}
/* kill any hero overlay that might sit over the header or links */
.hero::before, .hero::after, .hero .overlay, .gradient, .shade, .image-overlay{ pointer-events:none !important }

/* Ensure anchors look/behave like links */
a{ cursor:pointer }

/* ===== Full-width layout & no-left-gap (v8) ===== */
html, body { margin:0 !important; padding:0 !important; overflow-x:hidden }
body, .site, .site-wrap, .wrapper, main { width:100% !important }
header.site-header, .hero, .section, footer.site-footer { width:100% !important; margin-left:0 !important; margin-right:0 !important }

/* Reset any strange page padding or transforms */
html, body, .site, .wrapper, main, .hero, .section {
  padding-left: 0 !important;
  transform: none !important;
}

/* Containers center with symmetric padding */
.container, .container-fluid, .page, .content, .inner {
  width:100% !important;
  max-width: 1200px;          /* adjust if you want narrower text measure */
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left: clamp(12px, 2vw, 28px) !important;
  padding-right: clamp(12px, 2vw, 28px) !important;
}

/* Make sure hero/image overlays never block clicks and never push layout */
.hero::before, .hero::after, .overlay, .shade, .gradient, .image-overlay {
  pointer-events: none !important;
  margin: 0 !important; padding: 0 !important;
}

/* Debug helper (can be removed) */
header.site-header{ position:relative; z-index:5000 }