/* ============================================================
   GriffinDoor24 — COMPLETE styles.css (BANNER NOT FULL HEIGHT)
   Goal: banner looks like a header (not dominating the page)
   Updated Jan 13, 2026
   ============================================================ */

/* ---------- Reset / Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.55;
  color:#101114;
  background:#f6f7fb;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
p{ margin:0 0 10px; }
h1,h2,h3{ margin:0 0 10px; letter-spacing:-0.02em; }
ul{ margin:0; padding-left:20px; }
li{ margin:0 0 6px; }

/* ---------- Layout ---------- */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}

#site-header, #site-footer{ width:100%; }

/* ---------- Header / Banner / Menu ---------- */
#site-header{
  background:#ffffff;
  border-bottom:1px solid rgba(0,0,0,0.08);
}

/* Some pages may wrap injected content; keep padding consistent */
#site-header .header-inner,
#site-header .inner,
#site-header .wrap,
#site-header .row,
#site-header .container{
  max-width:1100px;
  margin:0 auto;
  padding:12px 16px;
}

/* ===== Banner (injected by script.js) =====
   IMPORTANT: No vh-heavy sizing. Hard caps prevent "full height".
*/
#site-header .banner-header{
  width: 100%;
  height: clamp(220px, 32vh, 420px); /* header-sized, not dominant */
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fill the banner box (override global img height:auto) */
#site-header .banner-img{
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain; /* shows full graphic; switch to cover if you prefer fill+crop */
  display: block;
}

/* Overlay + nav */
#site-header .banner-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  pointer-events: none;
}

#site-header .banner-nav{
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#site-header a{ text-decoration:none; }

/* Nav buttons */
#site-header .banner-nav a,
#site-header nav a,
#site-header .nav a,
#site-header .menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.14);
  background:rgba(255,255,255,0.92);
  color:#111;
  font-weight:750;
  transition:transform .06s ease, box-shadow .12s ease, background .12s ease;
  backdrop-filter: blur(6px);
}

#site-heade
::contentReference[oaicite:0]{index=0}