/* ====== Global layout tokens ====== */
:root {
  /* Total visual height of the navbar (logo + paddings + border). */
  --nav-h: 140px;
}

/* Keep in-page anchor jumps correct */
html, body { scroll-padding-top: var(--nav-h); }

/* Reusable page wrapper (pushes content below fixed navbar) */
.page { padding-top: var(--nav-h) !important; min-height: 100vh; }
.page > h1, .page-header h1 { margin-top: 0; } /* avoid margin-collapsing surprises */

/* Standard page header rhythm */
.page-header { padding-block: clamp(32px, 8vh, 96px); }
.page-header h1 { line-height: 1.05; letter-spacing: -0.01em; }

/* Optional: sticky navbar polish (add class="navbar" on <nav>) */
.navbar { position: fixed; inset: 0 auto auto 0; right: 0; z-index: 50; }

/* ====== Hero pattern ====== */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-h);                 /* avoids overlap */
  min-height: calc(100vh - 0px);             /* full-viewport feel */
}
.hero__bg { position: absolute; inset: 0; z-index: 1; }
.hero__bg > img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: .7; }
.hero__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.50)); }
.hero__content { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--nav-h)); padding: 2rem 0; }

/* Mobile focal tweak */
@media (max-width: 640px) {
  .hero__bg > img { object-position: 40% 50%; }
}

/* Safe content width helper (optional) */
.container-narrow { max-width: 60ch; margin-inline: auto; }

/* Footer full-bleed enforcement */
#site-footer, 
#site-footer > .w-full { 
  width: 100% !important; 
  margin-left: 0 !important;
  margin-right: 0 !important;
}