/* =========================
   Full-bleed map page styles
   (mirrors sfhgis/styles.css)
   ========================= */

/* Merriweather Sans — used for popup body text (the title keeps
   Gilbert Color; see .popup-title rule below). */
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300..800&display=swap');

/* Gilbert (Bold Preview5) — the non-rainbow Gilbert. Copy the .otf from
   ~/Library/Fonts/Gilbert-Bold Preview5.otf into ./fonts/ before previewing
   or pushing. Path is relative to styles.css so it works both in
   `quarto preview` and on GH Pages. Family name stays "Gilbert Color" so
   nothing else in this file (or index.qmd) needs to change. */
@font-face {
  font-family: "Gilbert Color";
  src: url("fonts/Gilbert-Bold%20Preview5.otf") format("opentype");
  /* File is the "Bold Preview5" cut but declared across the full 100–1000
     range so the browser matches it regardless of the element's requested
     weight. Without this, Chromium refuses to match a weight-700-only face
     against the default weight-400 request and silently falls back to the
     next font in the stack (which is what was happening before). */
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}

body.fullmap-page {
  background: #000;
  position: relative;
  overflow: hidden !important;
}

/* Hide title block and navbar on the full-map page */
body.fullmap-page .quarto-title-block {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.fullmap-page .navbar {
  display: none !important;
}

/* Remove outer spacing */
body.fullmap-page #quarto-content,
body.fullmap-page .page-layout-full,
body.fullmap-page .page-columns,
body.fullmap-page main.content,
body.fullmap-page article,
body.fullmap-page .content,
body.fullmap-page .column-page {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Remove side gutters */
body.fullmap-page .page-layout-full,
body.fullmap-page .page-columns {
  grid-template-columns: 0 minmax(0, 1fr) 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

/* Remove cell spacing */
body.fullmap-page .cell,
body.fullmap-page .cell-output,
body.fullmap-page .cell-output-display {
  margin: 0 !important;
  padding: 0 !important;
}

/* Make map fill visible viewport; hidden until JS init restores saved view */
body.fullmap-page .html-widget {
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  transition: opacity 0.15s ease;
}
body.fullmap-page .html-widget.map-ready {
  opacity: 1;
}

/* Map popup + tooltip font */
.maplibregl-popup-content,
.maplibregl-popup-content *,
.maplibregl-popup,
.mapboxgl-popup-content,
.mapboxgl-popup-content * {
  font-family: "Merriweather Sans", sans-serif !important;
  font-size: 11px !important;
}

/* First line of every popup (the title) stays on Gilbert Color. Wrapped in
   <span class="popup-title"> by natPopup() in index.qmd. Higher specificity
   than the rule above so it wins. */
.maplibregl-popup-content .popup-title,
.maplibregl-popup-content .popup-title *,
.mapboxgl-popup-content  .popup-title,
.mapboxgl-popup-content  .popup-title * {
  font-family: "Gilbert Color", "TeX Gyre Pagella", serif !important;
  font-size: 13px !important;
}

/* External-link glyph appended to the village-popup title when a
   village_url is present. Styled like a normal hyperlink (blue +
   underline) so the affordance is obvious. */
.maplibregl-popup-content .popup-title .popup-extlink,
.mapboxgl-popup-content  .popup-title .popup-extlink {
  font-family: sans-serif !important;
  font-size: 11px !important;
  font-weight: normal !important;
  margin-left: 0.25em;
  color: #0066cc !important;
  text-decoration: underline !important;
  vertical-align: baseline;
}
.maplibregl-popup-content .popup-title .popup-extlink:hover,
.mapboxgl-popup-content  .popup-title .popup-extlink:hover {
  color: #004080 !important;
  text-decoration: underline !important;
}

/* Popup body rows (emitted by flavRow / plainRow in index.qmd). Hanging
   indent so that if the muted (M.../W...) parens span can't fit on the
   same line as the label+main value, it wraps as a single unit to the
   next line and lands indented (via padding-left minus text-indent). */
.maplibregl-popup-content .popup-row,
.mapboxgl-popup-content  .popup-row {
  padding-left: 1.25em;
  text-indent:  -1.25em;
  line-height: 1.35;
}

/* Statistic name ("Gay share of adults:", "Population:", …). Always
   underlined + bold per legend-styling spec. */
.maplibregl-popup-content .popup-label,
.mapboxgl-popup-content  .popup-label {
  font-weight: 700 !important;
  text-decoration: underline;
}

/* Muted "(M … / W …)" parens segment. `white-space: nowrap` keeps the
   whole parens together so the browser either fits the entire segment
   on the current line or pushes it as a unit onto the next line (where
   the hanging indent on `.popup-row` takes over). */
.maplibregl-popup-content .popup-mw,
.mapboxgl-popup-content  .popup-mw {
  color: #777;
  white-space: nowrap;
}

/* Optional bootstrap wrapper neutralization */
body.fullmap-page .container,
body.fullmap-page .container-fluid {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}