/* ──────────────────────────────
   0.  Web-font
   ────────────────────────────── */
@font-face {
  font-family: 'CCDigital';
  src: url('fonts/CCDigitalDeliveryDisplay.otf') format('opentype');
  font-display: swap;
}

/* ──────────────────────────────
   1.  Base & map
   ────────────────────────────── */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'CCDigital', sans-serif;
}

#map { height: 100%; }

/* ──────────────────────────────
   2.  Mapbox GL controls
   ────────────────────────────── */
.mapboxgl-ctrl-bottom-left  { bottom: 80px !important; left: 10px !important; }
.mapboxgl-ctrl-bottom-right { bottom: 20px !important; right: 10px !important; }

/* 2× “I’m Here” button */
.mapboxgl-ctrl-group .mapboxgl-ctrl-geolocate {
  transform: scale(2.0);
  transform-origin: center center;
}

/* ──────────────────────────────
   3.  Navbar + off-canvas branding
   ────────────────────────────── */
:root {
  --brand-green: #298D49;
}

/* sticky green bar that never scrolls away */
.navbar.navbar-dark {
  background-color: var(--brand-green) !important;
  position: sticky;          /* stay fixed while page scrolls   */
  top: 0;                    /* stick to very top               */
  z-index: 1030;             /* above Mapbox & off-canvas (1045)*/
}

/* off-canvas header / body share brand colour */
.offcanvas-header,
.offcanvas-start { background-color: var(--brand-green) !important; }

/* keep toggler button above everything */
.navbar-toggler { z-index: 1050; }

/* ---------- brand text shift ----------- */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  height: 56px;
  font-size: 1.75rem;
  transform: translateY(8px);
}

/* ---------- white hamburger icon ---------- */
/* make sure the button frame & icon are white */
.navbar-dark .navbar-toggler {
  border-color: rgba(255,255,255,.55);
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E\
%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' \
stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E\
%3C/svg%3E");
  background-size: 100% 100%;
}

/* ---------- typography & font ---------- */
.navbar-brand,
.nav-link,
.btn { font-family: 'CCDigital', sans-serif !important; }

/* white type everywhere inside nav / off-canvas */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-toggler,
.offcanvas-start .nav-link,
.offcanvas-title,
.offcanvas-body .nav-link { color: #fff !important; }

.offcanvas-body a.nav-link:hover,
.offcanvas-body a.nav-link:focus {
  text-decoration: underline;
  color: #fff !important;
}


/* ──────────────────────────────
   4.  Modal footer button alignment
   ────────────────────────────── */
.modal-footer {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.modal-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* remove previous downward nudge */
.modal-footer .btn-primary[data-bs-dismiss="modal"] { transform: none; }

/* square arrow buttons */
.modal-footer .btn-secondary {
  width: 60px;
  height: 60px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
}


/* match height for “Back to Map” */
.modal-footer .btn-primary{height:60px;display:flex;align-items:center;padding:0 32px;}


/* Legend image: max 300 px, centred */
.legend-wrapper{
  display:flex;
  justify-content:center;
}
.legend-wrapper img{
  max-width:300px;
  width:100%;
  height:auto;
}
/* always render the green sidebar above Mapbox */
.offcanvas-start {
  --bs-offcanvas-width: 260px;
  z-index: 1080;           /* > Mapbox controls (2) and tooltips (999) */
}

/* ──────────────────────────────
   Modal max-width: 420 px
   ̶  and    phone width: 90 vw
   ────────────────────────────── */

/* target every modal that uses the .modal-lg size */
.modal-dialog.modal-lg {
  width: 90vw;          /* shrink nicely on small phones            */
  max-width: 420px;     /* never become wider than 420 px           */
  margin: 1.75rem auto; /* keep Bootstrap’s vertical centring space */
}

/* (optional) if you prefer the full 420 px only on wider tablets
   you can lock it in from 576 px up – uncomment if desired

@media (min-width: 576px) {
  .modal-dialog.modal-lg { width: 420px; }
}
*/






/* ─── Same 48 px spec & lower baseline for ALL footer buttons ─── */

/* shared sizing & vertical nudge */
.modal-footer .btn               {
  height:48px;          /* identical height for every button      */
  display:flex;
  align-items:flex-end; /* text / glyph sits in lower half         */
  justify-content:center;
  line-height:1.8;      /* tame CCDigital’s tall line-height       */
  padding:0 26px;       /* side-padding only needed for “MAP”      */
}

/* arrow buttons: keep them square & without extra padding */
.modal-footer .btn-secondary{
  width:48px;           /* square                                   */
  padding:0;            /* no left-right space around the arrow     */
  line-height:1;        /* baseline fix                             */
}

/* optional: tiny optical nudge if the arrow still looks high
   (tweak +/-1 px to taste, or remove entirely) */
.modal-footer .btn-secondary span,
.modal-footer .btn-secondary svg{
  transform:translateY(1px);
}

#basemapToggle {
  font-size: 0.80rem;   /* ≈ 12 px, ~3 pt smaller than default 16 px */
}