/* =========================================================
   Home page “one frame” fit (no scroll)
   We compute real header/footer heights via a tiny script in index.php
   ========================================================= */
   
   :root{
  --ui-font: "OpenDyslexic", system-ui, -apple-system, Arial, sans-serif;
}

/* Menus, buttons, labels, and headings (but NOT the logo) */
h1:not(.site-logo), h2, h3, h4, h5, h6,p, P
.page-title, .microcopy,
nav.main-menu a, nav.main-menu button,
ul.submenu a, ul.submenu button,
button, .btn, label, input, select, textarea {
  font-family: var(--ui-font);
  letter-spacing: 0;  /* this font prefers minimal tracking */
}


/* Safety defaults (JS overwrites these on load/resize) */
:root {
  --header-h: 130px;
  --footer-h: 44px;
  --vh: 1vh; /* mobile-safe 100vh unit substitute */
}

/* Tighten the hero spacing only on the home page */
body.home .page-title { margin: 6px 0 6px; }
body.home .microcopy  { margin: 2px 0 6px; }

/* Wider lane and reduced gaps for home */
body.home .map-wrap {
  width: min(1280px, 98vw);
  margin: 6px auto 8px;
}

/* The magic: height = viewport - header - footer - small buffer */
body.home .map-stage,
body.home .aus-map {
  max-height: calc((var(--vh) * 100) - var(--header-h) - var(--footer-h) - 20px);
}

/* Small screens: allow a touch more headroom for UI chrome */
@media (max-width: 520px) {
  body.home .map-stage,
  body.home .aus-map {
    max-height: calc((var(--vh) * 100) - var(--header-h) - var(--footer-h) - 12px);
  }
}


/* =========================================================
   /assets/css/layout.css
   Site-wide page frame, spacing, and simple utilities
   (Header visuals live in header.css; footer visuals in footer.css)
   ========================================================= */

:root {
  --footer-h: 56px;   /* footer bar height */
  --header-h: 140px;  /* safety default; JS sets real value on load */

  /* Layout spacing */
  --container-w: 1200px;
  --s2: 12px;
  --s3: 16px;
  --s4: 24px;

  /* Theme colors */
  --bg:   #f9fafb;  /* page background (solid color) */
  --text: #1f1f1f;  /* default text color */
}

html, body { height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  display: flex;              /* enables sticky-bottom footer pattern */
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  font-family: 'utopia-std', Arial, sans-serif; /* change here to swap fonts */
  /* footer is fixed; add bottom padding so content never sits under it */
  padding-bottom: var(--footer-h);
}

/* The main content area grows to fill space so the footer sits at bottom
   without extra blank scroll on short pages. */
main#content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s3);
}

/* Unified content width helper */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
}

/* Headline & small helper copy used on the homepage and sections */
.page-title {
  font-size: clamp(22px, 3vw, 32px);
  margin: 0;
  letter-spacing: 0.2px;
}

/* Home hero title tweaks */
.home-hero .page-title{
  color:#000;                 /* solid black */
  text-shadow:none;           /* ensure no glow from hero styles */
  font-size:clamp(18px, 2.2vw, 28px);  /* smaller than before */
  letter-spacing:0;           /* tighter tracking looks cleaner here */
  margin:6px 0 6px;           /* keep your compact spacing */
}
.microcopy {
  font-size: clamp(13px, 2.2vw, 16px);
  color: #444;
}

/* === Make the homepage map LARGE === */
.map-wrap {
  width: min(1280px, 98vw);
  margin: 24px auto 0;
}
.map-stage,
.aus-map {
  max-height: clamp(680px, 82vh, 1200px);
}

/* Give the headline a touch more breathing room above a bigger map */
.page-title { margin-top: 6px; }
.microcopy  { margin-top: 6px; margin-bottom: 8px; }

/* ---- Small screens tighten spacing ---- */
@media (max-width: 520px) {
  main#content {
    gap: var(--s3);
    padding: var(--s3) var(--s2);
  }
}

/* =========================================================
   Optional utilities (use as needed)
   ========================================================= */

/* Make a section full-bleed but keep content centered inside */
.full-bleed { width: 100%; }
.full-bleed > .container {
  padding-left: var(--s3);
  padding-right: var(--s3);
}

/* Quick max-width variants */
.container.narrow { max-width: 880px; }
.container.wide   { max-width: 1280px; }
.container.ultra  { max-width: 1440px; }

/* Homepage hero background (explicit, no variables) */
body.home.has-hero-bg{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.34)),
    url("/images/mountains.jpg") center / cover no-repeat;
}

/* Make sure no panels cover it */
body.home.has-hero-bg .page-wrap,
body.home.has-hero-bg main,
body.home.has-hero-bg .container,
body.home.has-hero-bg .home-hero{
  background: transparent !important;
}

body.home .home-tagline{
  margin: 6px auto 16px;
  max-width: 780px;
  font-size: clamp(14px, 2.6vw, 18px);
  line-height: 1.45;
  color: #eef3f2;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}