/* Astra23 overrides for StartBootstrap Grayscale
   Compact file: layout + navbar + hero + footer */

/* ---------- Global layout (no phantom scroll) ---------- */
:root {
  --navH: 56px;     /* Bootstrap fixed-top navbar height on desktop */
  --footerH: 56px;  /* visual footer height */
  --fudge: 1px;     /* trims rounding errors to avoid 1px overflow */
}

html, body { height: 100%; }

body {
  min-height: 100vh;              /* page is at least full viewport */
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;                 /* main grows to fill the page */
  display: flex;
  flex-direction: column;
  padding-top: var(--navH);       /* space for the fixed navbar */
  overflow: hidden;               /* prevent tiny scroll from rounding */
}

/* ---------- Footer (left aligned) ---------- */
footer.site-footer {
  margin-top: auto;               /* push footer to the bottom */
  display: flex;
  align-items: center;
  justify-content: flex-start;    /* LEFT aligned text */
  height: var(--footerH);
  padding: 0 1.25rem;             /* left spacing (remove if you use .container) */

  /* inner divider instead of a real border to avoid 1px overflow */
  border-top: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  color: #9aa1b2;
}

/* ---------- Navbar tweaks ---------- */
.navbar-brand img { display:block; height:24px; width:24px; }

/* ---------- Hero (masthead) using <picture> ---------- */
.masthead {
  position: relative;
  flex: 1 0 auto;                 /* hero fills the remaining height */
  height: calc(100vh - var(--navH) - var(--footerH) - var(--fudge));
  min-height: 320px;
  overflow: hidden;               /* avoid sub-pixel overflow */
}

@supports (height: 100dvh) {
  /* mobile address-bar safe height */
  .masthead {
    height: calc(100dvh - var(--navH) - var(--footerH) - var(--fudge));
  }
}

/* background image from <picture>/<img> */
.masthead picture { position:absolute; inset:0; }
.masthead .bg-cover { width:100%; height:100%; object-fit:cover; object-position:center; }

/* place hero content above the image */
.masthead .overlay {
  position:relative; z-index:1; min-height:inherit;
  display:flex; align-items:center; justify-content:center;
}

/* readability overlay */
.masthead::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.20) 0%,
    rgba(0,0,0,.65) 70%,
    rgba(0,0,0,.85) 100%
  );
}