/* ── Poppins font (self-hosted; place files in static/fonts/) ── */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-dark:   #2d6540;
  --green-light:  #a93226;
  --green-pale:   #f7e4c9;
  --green-track:  #e0c9a0;
  --text-dark:    #3E3E3E;
  --text-muted:   #6b6b6b;
  --bg:           #fee4bc;
  --border:       #e4d2ac;
  --sidebar-w:    340px;
  --header-h:     56px;
  --toggle-w:     22px;
  --toggle-h:     46px;
  --radius:       6px;
  --shadow:       0 1px 4px rgba(0,0,0,.12);
}

html, body {
  height: 100%;
  font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 500;
  color: var(--text-dark);
  background: var(--bg);
}

/* Map page (fixed header + full-height sidebar/map layout) never scrolls at
   the document level; the sidebar and map panes scroll internally instead.
   Without this, Firefox's overscroll "rubber-band" effect on wheel/trackpad
   scroll reveals the html/body background as a stripe past the layout edge. */
body:has(> .layout) {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ── Header ── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.header-left {
  flex: 1 1 auto;
  min-width: 0;
}

.header-right {
  flex-shrink: 0;
}

header h1 {
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: .02em;
}

.btn-lang {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
  background: var(--green-light);
  border: 1.5px solid var(--green-light);
  color: #fff;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  padding: .3rem .85rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s;
}
.btn-lang:hover { background: #8f2a20; }
.btn-lang .flag-icon {
  font-size: 1rem;
  line-height: 1;
}

/* ── Layout ── */
.layout {
  position: relative;
  display: flex;
  height: calc(100vh - var(--header-h));
  /* dvh tracks the mobile browser's actual visible viewport (address bar,
     bottom toolbar) instead of the too-tall 100vh, which otherwise pushes
     the footer below the fold on phones. Ignored where unsupported, so the
     vh fallback above still applies there. */
  height: calc(100dvh - var(--header-h));
  margin-top: var(--header-h);
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid var(--border);
  padding-bottom: 1rem;
  transition: width .25s ease, opacity .2s ease;
}
.layout.sidebar-collapsed .sidebar {
  width: 0;
  opacity: 0;
  overflow: hidden;
  border-right: none;
  pointer-events: none;
}

/* Sidebar collapse toggle, pinned to the sidebar/map boundary */
.sidebar-toggle {
  position: absolute;
  top: 50%;
  /* Centered on the sidebar/map boundary, but positioned via left+width
     (not a -50% transform) so it can never straddle the viewport edge and
     get half-clipped by .layout's overflow:hidden — see collapsed state below. */
  left: calc(var(--sidebar-w) - (var(--toggle-w) / 2));
  transform: translateY(-50%);
  width: var(--toggle-w);
  height: var(--toggle-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--green-light);
  cursor: pointer;
  z-index: 900;
  box-shadow: var(--shadow);
  transition: left .25s ease;
}
.sidebar-toggle:hover { background: var(--green-pale); }
.layout.sidebar-collapsed .sidebar-toggle { left: 6px; }
.toggle-chevron {
  font-size: .9rem;
  line-height: 1;
  transition: transform .25s ease;
}
.layout.sidebar-collapsed .toggle-chevron { transform: rotate(180deg); }

/* Filter section */
.filter-section {
  border-bottom: 1px solid var(--border);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1rem;
  cursor: pointer;
  user-select: none;
}
.section-header:hover { background: #fff; }
.section-header h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.toggle-arrow {
  font-size: .8rem;
  color: var(--text-muted);
  transition: transform .2s;
}
.toggle-arrow.collapsed { transform: rotate(-90deg); }

#filters-body {
  padding: .25rem .9rem .75rem;
}
#filters-body.hidden { display: none; }

.filter-group {
  margin-bottom: .75rem;
}

.filter-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .3rem;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .6rem;
}
.checkbox-group label {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  cursor: pointer;
}
.checkbox-group input[type="checkbox"] {
  accent-color: var(--green-light);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* Dual range slider */
.dual-slider-container { padding: .1rem 0; }

.dual-slider-track {
  position: relative;
  height: 28px;
}
.dual-slider-track::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 0; right: 0;
  height: 4px;
  background: #ecdcc0;
  border-radius: 2px;
  pointer-events: none;
}
.dual-slider-fill {
  position: absolute;
  top: 11px;
  height: 4px;
  background: var(--green-light);
  border-radius: 2px;
  pointer-events: none;
}
.dual-slider-track input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}
.dual-slider-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: all;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green-light);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: pointer;
}
.dual-slider-track input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green-light);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: pointer;
}
.dual-slider-labels {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  align-items: center;
  gap: .2rem;
  margin-top: .15rem;
}
.slider-val {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
}
.slider-end-label {
  font-size: .68rem;
  color: var(--text-muted);
}
.slider-end-label:nth-child(3) { text-align: right; }

.btn-secondary {
  width: 100%;
  margin-top: .4rem;
  padding: .35rem .8rem;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
  background: var(--green-light);
  border: 1px solid var(--green-light);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s;
}
.btn-secondary:hover { background: #8f2a20; }

/* Info tooltip icon */
.info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: .3rem;
  text-transform: none;
  letter-spacing: normal;
}
.info-icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.3px solid var(--green-light);
  background: #fff;
  color: var(--green-light);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: .62rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.info-icon:hover,
.info-icon:focus,
.info-wrap.show .info-icon {
  background: var(--green-light);
  color: #fff;
  outline: none;
}
/* Per-instance tooltip text storage; never rendered in place. Its textContent
   is copied into the single #global-tooltip element (see app.js showTooltip). */
.info-tooltip-src { display: none; }

/* The one shared, floating tooltip (a direct child of <body>, see index.html).
   top/left are set by JS (showTooltip) from the hovered icon's screen position,
   so it works the same whether the icon sits in the sidebar or inside a
   Leaflet popup, and is never clipped by a scrollable ancestor. */
#global-tooltip.info-tooltip {
  position: fixed;
  width: 210px;
  max-width: 60vw;
  background: var(--green-dark);
  color: #fff;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  padding: .5rem .65rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s;
  z-index: 3000;
}
#global-tooltip.info-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  /* --tip-arrow-left is set by JS to keep the arrow pointing at the icon */
  left: var(--tip-arrow-left, 50%);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--green-dark);
}
#global-tooltip.info-tooltip.tip-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--green-dark);
}
#global-tooltip.info-tooltip.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Variety section — grows to fill the sidebar's remaining height so the
   variety list (below) can stretch instead of leaving blank space, e.g.
   when the filter section is collapsed or the page is zoomed out. */
.variety-section {
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.variety-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1rem .3rem;
}
.variety-header h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.count-badge {
  font-size: .72rem;
  font-weight: 600;
  background: var(--green-dark);
  color: #fff;
  padding: .1rem .45rem;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
}

.variety-actions {
  display: flex;
  gap: .4rem;
  padding: 0 1rem .4rem;
}
.btn-tiny {
  font-family: inherit;
  font-size: .73rem;
  font-weight: 600;
  color: #fff;
  background: var(--green-light);
  border: 1px solid var(--green-light);
  border-radius: var(--radius);
  padding: .2rem .5rem;
  cursor: pointer;
  transition: background .12s;
}
.btn-tiny:hover { background: #8f2a20; }

.variety-list {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  padding: 0 .5rem .5rem;
}

.variety-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background .1s;
}
.variety-item:hover { background: var(--green-pale); }
.variety-item input[type="checkbox"] {
  accent-color: var(--green-light);
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  cursor: pointer;
}
.variety-item label {
  font-size: .8rem;
  cursor: pointer;
  flex: 1;
}
.variety-item .variety-cat {
  font-size: .65rem;
  color: var(--text-muted);
  background: #eee;
  padding: .05rem .3rem;
  border-radius: 3px;
  white-space: nowrap;
}

.variety-link {
  flex-shrink: 0;
  font-size: .7rem;
  color: var(--green-light);
  text-decoration: none;
  line-height: 1;
  padding: .1rem .2rem;
  border-radius: 3px;
  opacity: .7;
  transition: opacity .12s;
}
.variety-link:hover { opacity: 1; text-decoration: none; }

.variety-group-header {
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .5rem .5rem .15rem;
}

/* ── Map ── */
.map-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#map {
  flex: 1;
  position: relative;
  min-height: 0;
  width: 100%;
}

.map-footer {
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: .5rem 1rem;
  /* Keep footer text clear of the home-indicator / gesture-bar area on
     notched phones (requires viewport-fit=cover on the <meta viewport> tag). */
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
  text-align: center;
  max-height: 600px;
  overflow: hidden;
  transition: max-height .25s ease, padding .25s ease, border-color .25s ease;
}
.layout.footer-collapsed .map-footer {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
}

/* Footer collapse toggle. A zero-height flex item sitting exactly at the
   map/footer seam (see .map-wrap), so the button — pinned to its top edge
   and centered horizontally — tracks the seam regardless of the footer's
   collapsed/expanded height. Unlike .sidebar-toggle, it always sits fully
   above the seam (never straddling into the footer) so it reads as a
   handle just outside the footer, whether expanded or collapsed — and,
   as a side effect, is never at risk of being clipped by .layout's
   overflow:hidden the way a straddling position was when the seam landed
   right on the bottom edge in the collapsed state. */
.footer-toggle-wrap {
  position: relative;
  height: 0;
  overflow: visible;
}
.footer-toggle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 6px));
  width: 46px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--green-light);
  cursor: pointer;
  z-index: 901;
  box-shadow: var(--shadow);
}
.footer-toggle:hover { background: var(--green-pale); }
.toggle-chevron-v {
  font-size: .8rem;
  line-height: 1;
  /* Same glyph as .toggle-chevron (sidebar), rotated -90deg so it points
     down — into the footer — by default, matching the sidebar arrow's
     convention of pointing toward the pane it collapses. */
  transform: rotate(-90deg);
  transition: transform .25s ease;
}
.layout.footer-collapsed .toggle-chevron-v { transform: rotate(90deg); }
.footer-line {
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.footer-line + .footer-line {
  margin-top: .15rem;
}
.footer-line a {
  color: var(--green-light);
  text-decoration: none;
}
.footer-line a:hover {
  text-decoration: underline;
}

.map-status {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(255,255,255,.92);
  border: 1px solid #ccc;
  border-radius: var(--radius);
  padding: .35rem .7rem;
  font-size: .75rem;
  color: var(--text-dark);
  pointer-events: none;
  box-shadow: var(--shadow);
  z-index: 500;
}

/* Leaflet popup customization */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius);
  font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: .82rem;
}
.leaflet-popup-content { margin: .6rem .8rem; }
.popup-name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--green-dark);
  margin-bottom: .3rem;
}
.popup-address { color: var(--text-muted); font-size: .78rem; margin-bottom: .25rem; }
.popup-website { margin-bottom: .4rem; }
.popup-website a { color: var(--green-light); text-decoration: none; font-size: .78rem; }
.popup-website a:hover { text-decoration: underline; }
.popup-varieties-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .2rem;
}
.popup-varieties {
  font-size: .78rem;
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
}
a.popup-variety-link {
  color: var(--green-light);
  text-decoration: none;
}
.popup-variety-link:hover { text-decoration: underline; }

.popup-sales-note {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  margin-top: .5rem;
  padding-top: .35rem;
  border-top: 1px solid #eee;
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.popup-sales-note .info-icon { margin-top: .1rem; }

.club-tag-label {
  font-size: .68rem;
  font-style: italic;
  color: var(--text-muted);
  margin-left: .15rem;
}

/* Static badge (e.g. "Not for fresh consumption"): same look as .info-wrap /
   .info-icon, but no tooltip/popup — purely informational, not interactive. */
.tag-static {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: .3rem;
  text-transform: none;
  letter-spacing: normal;
}
.tag-static-icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.3px solid var(--green-light);
  background: #fff;
  color: var(--green-light);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: .62rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

/* ── Prose pages (Privacy Policy / Zpracování OÚ) ── */
.prose {
  max-width: 760px;
  line-height: 1.7;
}
.prose h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--green-dark);
  margin: 2rem 0 .5rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 .75rem; }
.prose ul {
  margin: 0 0 .75rem 1.4rem;
  padding: 0;
}
.prose li { margin-bottom: .3rem; }
.prose a { color: var(--green-light); }
.prose a:hover { text-decoration: underline; }
.prose em { color: var(--text-muted); font-size: .9rem; }

/* ── Mobile phones ──
   Long bilingual titles wrap to 2-3 lines at phone widths, so the header
   needs more height than desktop's single-line 56px. Sidebar width is
   capped to a share of the viewport so it (and the boundary toggle button
   pinned to its edge) never runs past the screen. */
@media (max-width: 640px) {
  :root {
    --header-h: 84px;
    --sidebar-w: min(85vw, 320px);
    --toggle-w: 44px;
    --toggle-h: 64px;
  }

  header {
    padding: 0 .75rem;
  }

  header h1 {
    font-size: .8rem;
    line-height: 1.3;
  }

  .btn-lang {
    font-size: .68rem;
    padding: .3rem .55rem;
    gap: .3rem;
  }

  .toggle-chevron {
    font-size: 1.15rem;
  }

  /* At this larger touch-target width, centering the button on the
     sidebar/map boundary (the desktop formula) would bury its left half
     under the variety list's website-link arrows. Push it fully onto the
     map side instead, with a gap so it doesn't sit flush against them. */
  .sidebar-toggle {
    left: calc(var(--sidebar-w) + 6px);
  }

  .footer-toggle {
    width: 64px;
    height: 34px;
  }

  .toggle-chevron-v {
    font-size: 1rem;
  }

  /* Sidebar and footer are mutually exclusive on phone screens — both open
     at once would leave almost no map visible. The footer starts collapsed
     (set in app.js) and its toggle only responds once the sidebar is
     folded; re-expanding the sidebar folds the footer back (see app.js). */
  .layout:not(.sidebar-collapsed) .footer-toggle {
    opacity: .35;
    pointer-events: none;
  }
}