@charset "utf-8";

/* ======================================================================
   MARYLAND SEAFOOD TRAIL
   Styles for the page layout, interactive map, and business details.
   ====================================================================== */

/* 01. COLORS AND PAGE DEFAULTS
   Defines reusable colors, includes padding in element widths, and sets
   the page's background, text color, and default font. */
:root {
  color-scheme: light;
  --ink: #231f20;
  --red: #981f33;
  --cream: #f4f0bd;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #8de4ff;
  background-image: url("../Background.png");
  background-repeat: repeat;
  color: var(--ink);
  font: 16px/1.5 system-ui, sans-serif;
}

/* 02. CONTENT WIDTH AND HEADINGS
   Centers the page at a maximum width of 1200px, leaves side margins on
   smaller screens, and controls heading and paragraph spacing. */
main {
  width: min(100% - 24px, 1200px);
  margin: 24px auto;
  background-color: white;
  padding: 10px;
  border: solid 2px darkblue;
}

h1 {
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.2;
  margin: 0 0 8px;
}

h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

p {
  margin: 8px 0;
}

.intro {
  color: #565151;
}

/* 03. SEARCH AND TOOLBAR
   Arranges the search field and map controls in a row that can wrap.
   Lets the search field expand into the available space. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 20px 0 12px;
}

.search {
  flex: 1 1 240px;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

input[type=search] {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid #8c8585;
  border-radius: 6px;
}

/* 04. BUTTONS AND KEYBOARD FOCUS
   Gives buttons and button-shaped links a consistent appearance.
   The blue focus outline shows which control a keyboard user selected. */
button,
.button {
  border: 1px solid #655d5d;
  border-radius: 6px;
  background: white;
  color: var(--ink);
  padding: 9px 14px;
  font: inherit;
  cursor: pointer;
}

button:hover,
.button:hover {
  background: var(--cream);
}

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

.zoom {
  display: flex;
  gap: 6px;
}

/* 05. MAP FRAME AND DRAGGING
   Frames the map, clips content at its rounded edges, and preserves the
   SVG's proportions. JavaScript handles dragging and updates the cursor.
   touch-action:none lets the map handle touch gestures within its area. */
.map-frame {

  overflow: visible;
  position: relative;
  background: #fff;
}

#seafood-map {
  display: block;
  width: 100%;
  height: auto;
  min-height: 240px;
  aspect-ratio: 1000/541;
  touch-action: none;
  cursor: grab;
}

#seafood-map.dragging {
  cursor: grabbing;
}

/* 06. SEAFOOD LOCATION PINS
   Draws white pins with dark outlines and red centers. Hovered, focused,
   and selected pins use cream and red to highlight their location.
   The center dot passes pointer events through to the pin beneath it. */
.pin {
  cursor: pointer;
}

.pin circle {
  fill: #fff;
  stroke: #231f20;
  stroke-width: 1.2;
}

.pin .dot {
  fill: #981f33;
  stroke: none;
  pointer-events: none;
}

.pin:hover circle,
.pin:focus circle,
.pin.selected circle {
  fill: #f4f0bd;
  stroke: #981f33;
}

/* 07. MAP STATUS AND INSTRUCTIONS
   Places the location count and navigation hints below the map.
   The text wraps onto additional lines when space is limited. */
.map-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: #565151;
  margin: 8px 0 16px;
}

/* 08. BUSINESS DETAILS POPUP
   Floats details beside the selected location inside the map. JavaScript
   keeps the card horizontally within the map; its height fits all details. */
#details {
  position: absolute;
  z-index: 2;
  width: min(420px, calc(100% - 20px));
  overflow: visible;
  max-height: none;
  box-shadow: 0 5px 20px #0004;
  font-size: 14px;
  border: 1px solid #c7b8b8;
  border-top: 4px solid var(--red);
  border-radius: 8px;
  padding: 14px;
  background: #fffdf3;
}

.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
}

.detail-head button {
  padding: 4px 12px;
}

#details dl {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 16px;
  margin: 12px 0;
}

dt {
  font-weight: 650;
}

dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* 09. LINKS AND BUSINESS ACTIONS
   Styles website, phone, and directions links. The nearby button row
   lets visitors choose between businesses sharing the same map pin. */
a {
  color: #7f162a;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.actions a {
  display: inline-block;
  text-decoration: none;
}

.nearby {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

/* 10. FILE-LOADING HELP AND HIDDEN CONTENT
   Highlights the KML file chooser or loading error message when needed.
   Keeps elements marked hidden out of the layout until JavaScript shows them. */
#load-help {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid #c5ae74;
  border-radius: 6px;
  background: #fff9dc;
}

[hidden] {
  display: none !important;
}

/* 11. SMALL SCREENS — 540px AND BELOW
   Reduces the page's vertical margins and stacks business detail labels
   above their values, with extra space between each pair. */
@media (max-width: 540px) {
  main {
    margin: 16px auto;
  }

  #details dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  dd {
    margin-bottom: 8px;
  }
}

/* 12. COUNTY DROPDOWN AND MAP HIGHLIGHT
   Uses real buttons so mouse hover, keyboard focus, and touch selection
   work consistently. The list floats above the map and scrolls on small screens. */
.county-picker { position: relative; flex: 0 1 245px; }
.county-label { display: block; font-weight: 600; margin-bottom: 4px; }
#county-toggle { width: 100%; text-align: left; }
#county-options {
  position: absolute; top: 100%; left: 0; width: 100%; min-width: 220px;
  max-height: min(360px, 55vh); overflow-y: auto; overscroll-behavior: contain;
  z-index: 5; background: white; border: 1px solid #8c8585;
  border-radius: 6px; padding: 5px; box-shadow: 0 5px 18px #0003;
}
#county-options button { display: block; width: 100%; text-align: left; border: 0; border-radius: 3px; }
#county-options button[aria-pressed="true"] { background: var(--cream); font-weight: 700; }
#county-highlight use { fill: #f4f0bd; fill-opacity: .75; stroke: #005fcc; stroke-width: 2; }
#county-selected use { stroke: #fff; stroke-width: 1; }

/* 13. PLACE-TYPE FILTER BUTTONS
   Wraps the category buttons below the search toolbar on smaller screens.
   The pressed button shows the active category; other filters still apply. */
.place-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.filter-label { font-weight: 600; }
.filter-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-buttons button { padding: 7px 12px; border-radius: 20px; font-size: 14px; }
.filter-buttons button[aria-pressed="true"] { color: white; background: var(--red); border-color: var(--red); }

.view-hint { font-size: 13px; color: #565151; }

/* 14. TRUE BLUE FILTER AND POPUP LOGO
   Highlights official program members and displays the supplied logo
   prominently inside their popups, with any listing-specific limitation. */
#true-blue-filter { border-radius: 20px; padding: 7px 16px; font-size: 14px; border-color: #176a9a; color: #176a9a; }
#true-blue-filter[aria-pressed="true"] { background: #176a9a; color: white; }
#true-blue-badge { text-align: center; margin: 10px 0 14px; }
#true-blue-badge img { display: block; width: min(220px, 100%); height: auto; margin: 0 auto; border-radius: 4px; }
#true-blue-scope { font-weight: 650; color: #175578; margin: 6px 0 0; }

/* 15. PIN SPACING
   Fine connector lines link displaced pins to their true location.
   Lines never intercept clicks intended for the map or a pin. */
.pin-leaders line { stroke: #655d5d; stroke-width: 1; opacity: .6; }

/* 16. RANDOM SEAFOOD PICK
   Picks from the active search and filters and opens the chosen location. */
#random-place { border-radius: 20px; padding: 7px 15px; font-size: 14px; background: var(--cream); border-color: var(--red); font-weight: 650; }
#random-place:disabled { opacity: .5; cursor: default; }

/* 17. SHELL RECYCLING ALLIANCE
   Fits the supplied logo inside member and drop-off popups. Drop-off map
   markers use compact green recycling symbols on a white backing. */
#sra-badge { text-align: center; margin: 10px 0 14px; }
#sra-badge img { display: block; width: min(90px, 100%); height: auto; margin: 0 auto; }
#sra-caption { margin: 6px 0 0; font-weight: 650; color: #174678; }
.pin .recycle-background { fill: white; stroke: #387a36; stroke-width: 1; }
.pin.selected .recycle-background, .pin:focus .recycle-background { stroke: #a22039; stroke-width: 3; }
.pin image { pointer-events: none; }

.pin .recycle-symbol { fill: #347931; stroke: none; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif; pointer-events: none; }

/* 18. SCROLLING PLACE LIST
   A 150px-wide, 400px-high alphabetical list sits left of the map.
   Names wrap; small screens stack the list above the map for room to zoom. */
.map-layout { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; }
.map-layout .map-frame { min-width: 0; }
#place-list { width: 150px; height: 400px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; border: 1px solid #c7b8b8; border-radius: 6px; background: #fffdf3; padding: 4px; }
#place-list button { display: block; width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; border: 0; border-bottom: 1px solid #e7dfcf; border-radius: 0; padding: 9px 6px; font-size: 13px; line-height: 1.4; }
#place-list button:focus-visible { outline-offset: -3px; }
#place-list p { padding: 6px; font-size: 13px; }
.pin.list-highlight circle { fill: #f4f0bd; stroke: #981f33; }
@media (max-width: 600px) {
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  #place-list { width: 100%; height: 200px; }
}

/* FILTER GROUP OUTLINES: keeps place types, view choices, and featured picks visually grouped. */
.water-view-group, .outlined-filter-group { border: 1px solid #8b8170; border-radius: 26px; padding: 7px; }

.featured-filter-group { width: fit-content; max-width: 100%; box-sizing: border-box; }

/* VIEW AND FEATURED FILTER ROW: keeps both outlined groups side by side, wrapping on small screens. */
.secondary-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }

/* FILTER LABELS: soft gray headings above each outlined button group. */
.labeled-filter-group { display: flex; flex-direction: column; gap: 4px; max-width: 100%; min-width: 0; }
.filter-group-title { color: #999; font-size: 12px; font-weight: 500; padding-left: 12px; }
.place-filters, .secondary-filter-row { align-items: flex-end; }

/* POPUP ACTION ICONS: small matching symbols beside each action label. */
#place-actions .button { display: inline-flex; align-items: center; gap: 6px; }
.popup-action-icon { width: 16px; height: 16px; flex: 0 0 16px; }

/* 19. PHONE AND TABLET LAYOUT
   Keeps controls finger-friendly and places the map before the scrolling list.
   Phone detail cards flow below the map so long content uses page scrolling. */
@media (max-width: 760px) {
  main { width: calc(100% - 20px); margin: 14px auto; }
  .toolbar { gap: 10px; margin-top: 14px; }
  .search { flex: 1 1 100%; min-width: 0; }
  .county-picker { flex: 1 1 100%; min-width: 0; }
  .zoom { width: 100%; }
  .zoom button { min-width: 44px; min-height: 44px; }
  #reset { flex: 1; }
  .place-filters, .secondary-filter-row { gap: 10px; margin-bottom: 12px; }
  .filter-buttons button, #true-blue-filter, #random-place { min-height: 44px; }
  .outlined-filter-group, .water-view-group { border-radius: 18px; }
  .filter-group-title { color: #777; }
  .map-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .map-layout .map-frame { grid-row: 1; }
  #seafood-map { min-height: 300px; }
  #place-list { width: 100%; height: 210px; grid-row: 2; }
  #place-list button { min-height: 44px; font-size: 14px; padding: 10px; }
  #details { position: relative; left: auto !important; top: auto !important; width: 100%; margin-top: 10px; }
  #details h2 { font-size: 20px; overflow-wrap: anywhere; }
  #details dl { grid-template-columns: 80px minmax(0, 1fr); gap: 6px 10px; }
  #details dd { margin-bottom: 0; }
  .detail-head button { min-width: 44px; min-height: 44px; }
  #place-actions .button { min-height: 44px; justify-content: center; flex: 1 1 120px; }
  .map-footer { font-size: 13px; }
}

/* Keep the site banner inside the viewport on phones. */
main img { max-width: 100%; height: auto; }

/* 20. SITE BANNER
   Centers the logo at its natural width and scales it without distortion. */
.site-banner { margin: 0 auto 12px; width: 100%; text-align: center; line-height: 1; }
.site-banner img { display: block; width: min(100%, 1000px); max-width: 100%; height: auto; margin-inline: auto; }

/* 21. COMPACT MOBILE EXPLORER
   Collapses filters, switches between map/list, and keeps search visible.
   Existing controls return to their desktop positions on wider screens. */
.mobile-controls, .mobile-intro { display: none; }
@media (max-width: 760px) {
  .intro { display: none; }
  .mobile-intro { display: block; text-align: center; margin: 8px 0 14px; }
  .mobile-controls { display: block; margin-bottom: 10px; }
  .mobile-actions, .mobile-view-switch { display: flex; gap: 8px; margin-bottom: 8px; }
  .mobile-actions button { flex: 1; min-height: 44px; }
  .mobile-view-switch button { flex: 1; min-height: 44px; border-radius: 8px; }
  .mobile-view-switch button[aria-pressed="true"] { background: var(--red); color: white; }
  #mobile-filter-panel { padding: 12px; border: 1px solid #8b8170; border-radius: 12px; background: #fffdf3; }
  #mobile-filter-panel .county-picker { width: 100%; }
  #mobile-filter-panel #county-options { position: relative; max-height: 220px; }
  .map-layout:not(.mobile-list-mode) #place-list { display: none; }
  .map-layout.mobile-list-mode .map-frame { display: none; }
  .map-layout.mobile-list-mode #place-list { grid-row: 1; height: min(55vh, 440px); }
  .map-footer > span:last-child { display: none; }
  #details { border-radius: 14px; }
  .detail-head { position: sticky; top: 0; background: #fffdf3; z-index: 1; }
}

/* 22. MOBILE MAP MARKERS: smaller white markers with a dark contrasting edge. */
@media (max-width: 760px) {
  .pin circle { fill: #fff; stroke: #162b3a; stroke-width: 1.2; }
  .pin .dot { fill: #fff; stroke: none; }
  .pin.selected circle, .pin:focus circle { fill: #f4f0bd; stroke: #981f33; }
}

/* 23. MOBILE CENTERED POPUP
   Keeps details centered in the viewport and the red close button reachable.
   Only unusually tall cards scroll, so nothing is cut off on short phones. */
@media (max-width: 760px) {
  #details {
    position: fixed; z-index: 1000;
    left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100% - 24px)); margin: 0;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto; overscroll-behavior: contain;
  }
  #close-details {
    color: var(--red); border: 2px solid var(--red);
    background: #fff; font-size: 28px; font-weight: 700;
    line-height: 1; flex-shrink: 0;
  }
  #close-details:hover, #close-details:focus-visible { background: #fbe9ed; }
}

/* 24. DESKTOP LAYOUT REFINEMENTS
   Gives business names more room and keeps controls readable over the pattern.
   These rules leave the compact mobile explorer unchanged. */
@media (min-width: 761px) {
  .map-layout { grid-template-columns: 220px minmax(0, 1fr); }
  #place-list { width: 220px; }
  #place-list button { font-size: 14px; padding: 10px 8px; }
  .place-filters, .secondary-filter-row, .toolbar {
    background: #fffdf3;
    border: 1px solid #c7b8b8;
    border-radius: 12px;
    padding: 12px 14px;
  }
  .filter-group-title { color: #565151; font-weight: 600; }
  .intro { margin-bottom: 16px; }
}

/* 25. MOBILE PANELS AND SCREEN HEIGHT
   The map fills remaining screen space; expanded filters float above it.
   Each panel has a red close control with a finger-friendly hit area. */
.mobile-list-header, .mobile-panel-close { display: none; }
@media (max-width: 760px) {
  main { height: calc(100dvh - 16px); margin: 8px auto; display: flex; flex-direction: column; }
  main > * { flex-shrink: 0; }
  .site-banner { margin-bottom: 4px; }
  .mobile-intro { margin: 2px 0 8px; font-size: 14px; }
  .mobile-controls { position: relative; margin-bottom: 6px; z-index: 6; }
  .mobile-actions, .mobile-view-switch { margin-bottom: 4px; }
  #mobile-filter-panel { position: absolute; top: 100%; left: 0; right: 0; padding-top: 48px; max-height: 65dvh; overflow-y: auto; box-shadow: 0 6px 20px #0003; }
  .mobile-panel-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: var(--red); background: transparent; border: 0; font-size: 26px; font-weight: 700; }
  #mobile-filter-panel > .mobile-panel-close { position: absolute; top: 2px; right: 4px; }
  .map-layout { flex: 1 1 0; min-height: 120px; display: block; }
  .map-layout .map-frame { height: 100%; }
  #seafood-map { width: 100%; height: 100%; min-height: 0; }
  .map-layout.mobile-list-mode #place-list { height: 100%; }
  .mobile-list-header { display: flex; align-items: center; justify-content: space-between; position: sticky; top: -4px; background: #fffdf3; z-index: 1; padding-left: 8px; }
  #place-list .mobile-panel-close { width: 44px; flex: 0 0 44px; padding: 0; text-align: center; border: 0; font-size: 26px; }
  .toolbar { margin: 6px 0 4px; gap: 5px; }
  .search label { font-size: 13px; margin-bottom: 2px; }
  .map-footer { margin: 2px 0; }
  #suggest-place { font-size: 13px; margin: 4px 0 0; }
}