/* WRCD resource map.
   Full-viewport layout with a mobile breakpoint -- see the @media block below. */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Top bar linking back to the main washingtonrcd.org site -- reproduces that site's real
   desktop header: a cream band with the centered WRCD submark over a full-width olive-green
   nav strip (colors/labels/links pulled from washingtonrcd.org's live computed styles).
   The cream band is compressed to half its original height (was 124px: 14px padding +
   96px logo; now 62px: 7px padding + 48px logo) to leave more room for the map. Fixed
   total height (SITE_NAV_HEIGHT = 62px top band + 40px nav strip = 102px) so #map and
   .panel below can offset by a known constant. */
.site-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.site-nav-top {
  display: flex;
  justify-content: center;
  padding: 7px 0;
  background: #f2ebe3;
  box-sizing: border-box;
}

.site-nav-logo {
  display: flex;
}

.site-nav-logo img {
  height: 48px;
  width: auto;
  display: block;
}

/* Hamburger toggle -- hidden on desktop (the olive strip below is always visible there),
   shown only inside the mobile breakpoint at the bottom of this file. Bars turn into an
   X via .is-open, toggled by www/js/map.js; mirrors the icon-swap on washingtonrcd.org's
   own mobile header. */
.site-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.site-nav-toggle span {
  display: block;
  /* 4px bars / 4px gaps -- washingtonrcd.org's own icon (a 1000-unit-viewBox SVG path)
     splits its 35px rendered height into three equal bar/gap/bar/gap/bar bands, each
     ~12.5% of that height (~4.4px); our previous 2px bars against a 5px gap read as
     noticeably thinner than that ~1:1 ratio, hence "too thin". Pill-shaped ends (the real
     icon's path is fully rounded, radius = half its bar thickness) via border-radius. */
  height: 4px;
  width: 100%;
  border-radius: 2px;
  /* Burnt orange -- pixel-sampled from washingtonrcd.org's own mobile hamburger/X icon
     (rgb(181, 105, 36)); its computed styles point at an unrelated hidden decoy menu
     widget, same trap noted below for .site-nav-menu's real background/text colors. */
  background: #b56924;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.site-nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.site-nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.site-nav-menu {
  background: #42521c;
}

/* Direct child only -- ".site-nav-menu ul" would also match the nested .dropdown <ul>
   inside "What We Do", forcing it into this same 40px flex row and squashing its
   background box down to one item's height with the rest bleeding the map through. */
.site-nav-menu > ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  height: 40px;
}

.site-nav-menu a,
.site-nav-menu span {
  /* Cream, matching the real site's nav text -- pixel-sampled from washingtonrcd.org's
     rendered header (its own computed styles pointed at a hover-swap decoy element with
     an unrelated teal color, which is what shipped here originally). */
  font-family: "EB Garamond", Georgia, serif;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f2ebe3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.site-nav-menu a:hover,
.site-nav-menu a:focus-visible,
.site-nav-menu span:hover,
.site-nav-menu span:focus-visible {
  text-decoration: underline;
}

.site-nav-menu li.has-dropdown {
  position: relative;
}

.site-nav-menu .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  min-width: 240px;
  background: #f2ebe3;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 11;
}

.site-nav-menu li.has-dropdown:hover .dropdown,
.site-nav-menu li.has-dropdown:focus-within .dropdown {
  display: block;
}

.site-nav-menu .dropdown a {
  display: block;
  padding: 8px 20px;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: none;
  color: #42521c;
}

.site-nav-menu .dropdown a:hover,
.site-nav-menu .dropdown a:focus-visible {
  text-decoration: none;
  background: rgba(66, 82, 28, 0.08);
}

#map {
  position: absolute;
  top: 102px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

/* The zoom/compass NavigationControl lives top-left and the attribution control
   bottom-left (see map.js), not their usual top-right/bottom-right -- the panel docks
   top-right and spans the full height, so keeping both controls on the left means nothing
   needs to be cleared at either edge: top just matches #map's own top (102px, the
   .site-nav height, so the panel starts flush with the top of the visible map) and bottom
   is flush at 0 instead of reserving space for an attribution strip that's no longer
   there. No padding here (unlike earlier) -- #panel-header carries its own, so the header
   can sit flush at the panel's real top edge with nothing able to scroll into view above
   it. .panel is positioned relative to the viewport, not to #map, hence repeating #map's
   102px offset here rather than inheriting it. */
.panel {
  position: absolute;
  top: 102px;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 90vw;
  overflow-y: auto;
  background: #ffffff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  z-index: 2;
}

/* Sticky as a whole unit (county name + close button together) so the close button stays
   pinned too, instead of scrolling away as a separately absolutely-positioned element. */
.panel-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* Looks like the plain heading it replaces (same size/weight/position) but is a real
   <select> -- appearance: none strips each browser's own chrome so the custom arrow
   (a small inline SVG, matching the close button's #444) is the only affordance shown. */
.panel-county-select {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 20px 0 0;
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23444' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right center / 14px;
  font: inherit;
  font-size: 20px;
  font-weight: bold;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.panel-close {
  flex-shrink: 0;
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #444;
}

#panel-content {
  padding: 0 16px 16px 16px;
}

.project-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-list li {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ddd;
}

.project-list h3 {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 6px 0;
  font-size: 15px;
}

.project-icon {
  flex-shrink: 0;
  width: 2em;
  height: 2em;
  font-size: 2em;
  line-height: 1;
  object-fit: contain;
}

.project-title-text {
  /* Icon stays a fixed left column -- title text wraps within its own column instead of
     flowing back under/around the icon on a second line. */
  flex: 1 1 auto;
  min-width: 0;
}

.project-thumb {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 0 8px 0;
}

.statewide-heading {
  margin: 20px 0 12px 0;
  padding-top: 12px;
  border-top: 2px solid #ccc;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
}

.project-list p {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: #333;
}

.project-list a {
  display: inline-block;
  font-size: 12px;
  word-break: break-all;
  color: #1a6b3c;
}

.empty {
  color: #666;
  font-style: italic;
}

/* County-name label that follows the cursor on hover -- overrides MapLibre's default
   popup chrome (padding/tip/shadow) down to a small unobtrusive tag. */
.county-hover-label .maplibregl-popup-content {
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  color: #1f4d2c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.county-hover-label .maplibregl-popup-tip {
  display: none;
}

/* Mobile header: wrcd-logo-mobile.png (the stacked two-line lockup, narrower than the
   single-line desktop wordmark) far left -- still linking back to the main site --
   hamburger far right, dropdown menu collapsed behind it. The dropdown's own khaki
   background + navy text (below) are pixel-sampled from washingtonrcd.org's real mobile
   menu, NOT the dark-olive/cream desktop nav strip -- its mobile nav is a visually
   distinct widget from its desktop one, confirmed after their computed styles kept
   pointing at an unrelated hidden decoy menu (0-size, transparent) instead. Placed at the
   end of the file (rather than next to .site-nav) so these overrides win the cascade
   against the unconditional #map/.panel/.site-nav-* rules defined earlier -- same
   specificity, so source order decides, media query or not. */
@media (max-width: 640px) {
  .site-nav-top {
    justify-content: space-between;
    padding: 7px 16px;
    box-sizing: border-box;
  }

  .site-nav-toggle {
    display: flex;
  }

  .site-nav-menu {
    display: none;
    background: #b2ad91;
  }

  .site-nav-menu.is-open {
    display: block;
  }

  .site-nav-menu > ul {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: 0;
    padding: 8px 16px 16px;
  }

  .site-nav-menu > ul > li {
    width: 100%;
  }

  .site-nav-menu a,
  .site-nav-menu span {
    display: block;
    padding: 10px 0;
    color: #264559;
  }

  /* No hover on touch -- the dropdown is always expanded inline under "What We Do"
     instead of needing a second tap. */
  .site-nav-menu .dropdown {
    display: block;
    position: static;
    transform: none;
    box-shadow: none;
    background: none;
    min-width: 0;
    padding: 0 0 0 16px;
  }

  .site-nav-menu .dropdown a {
    color: #264559;
    padding: 8px 0;
  }

  /* The dropdown menu is collapsed (0px) when closed instead of always reserving its
     40px, so #map/.panel offset by just the 62px cream band -- otherwise a blank gap opens
     up between the header and the map. When .site-nav-menu is .is-open it overlays the map
     as a dropdown (position: absolute, z-index: 10 from .site-nav), the same as
     washingtonrcd.org's own mobile menu bleeding over its hero content. */
  #map {
    top: 62px;
  }

  .panel {
    top: 62px;
  }
}