/* ===== Header spacing (prevents jump when navbar injects) ===== */
#include-header { min-height: 64px; }
@media (max-width: 992px) { #include-header { min-height: 56px; } }

/* ===== Stop horizontal layout shift between pages ===== */
body { overflow-y: scroll; }
html { scrollbar-gutter: stable both-edges; }

/* ===== Page titles / lead text (consistent across pages) ===== */
:root { --page-title-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
main h1, h1.page-title, h1[data-i18n] {
  font-size: var(--page-title-size);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
main .lead { font-size: 1.125rem; line-height: 1.5; }

/* ===== Navbar (base) ===== */
.navbar .nav-link { font-weight: 500; border-bottom: 2px solid transparent; }
.navbar .nav-link.active { border-bottom-color: currentColor; }

/* Brand title */
.navbar-brand.brand-title { font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .navbar-brand.brand-title { transition: color .15s ease-in-out; }
}

/* ===== Home hero image (~30% smaller on desktop) ===== */
.home-hero-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .home-hero-img { width: 70%; max-width: 70%; }
}

/* ===== Normalize top spacing under header ===== */
main { margin-top: 12px; }
@media (min-width: 992px) { main { margin-top: 16px; } }

/* ===== Reserve space for hero/banner wrapper ===== */
.hero-image { aspect-ratio: 16 / 9; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Gallery / card thumbnails ===== */
.card-img-top { aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* ===== Gallery tile image (legacy) ===== */
.gallery-img { object-fit: cover; width: 100%; height: 220px; }

/* ===== Consistent spacing when a hero follows header ===== */
#include-header + .contact-hero,
#include-header + .hero,
#include-header + section.hero { margin-top: 12px; }
@media (min-width: 992px) {
  #include-header + .contact-hero,
  #include-header + .hero,
  #include-header + section.hero { margin-top: 16px; }
}

/* ===== Constrain hero contents/images to container width ===== */
:root { --hero-max: 1140px; } /* container-ish cap */
.contact-hero .inner,
.hero .inner,
section.hero .inner,
main .hero-image {
  max-width: var(--hero-max);
  margin-left: auto;
  margin-right: auto;
}

/* Pages that start with a naked IMG in <main>: constrain it too */
main > img:first-of-type {
  display: block;
  margin: 0 auto 1rem;
  width: 100%;
  max-width: var(--hero-max);
  height: auto;
}

/* ===== Contact hero: show the image, match page width, align with text ===== */
.contact-hero {
  position: relative;
  min-height: 380px;
  /* ensure the background actually shows */
  background-position: center 20%;
  background-size: cover;
}
@media (min-width: 992px) {
  .contact-hero {
    min-height: 440px;
    background-position: center 28%;
    /* same width as content; centering aligns the left edge with the container’s left edge */
    max-width: var(--hero-max);
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
    overflow: hidden;
  }
}
.contact-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
}
.contact-hero .inner { position: relative; z-index: 1; padding: 3rem 1rem; }

/* --- FORCE navbar active style: no bold, underline only (wins over injected header styles if needed) --- */
#include-header .navbar :is(.nav-link, .nav-item > a) {
  font-weight: 500 !important;
  border-bottom: 2px solid transparent !important;
  white-space: nowrap;
}
#include-header .navbar :is(.nav-link.active, .nav-item > a.active, a[aria-current="page"]) {
  font-weight: 500 !important;
  border-bottom-color: currentColor !important;
}
#include-header .navbar .fw-bold { font-weight: 500 !important; }