/* Shared top bar for every TukPin page (events map, camping, animals, gardens, news, article pages).
   Self-contained tokens so it looks the same on pages with their own palette and fonts.
   Layout like Google Maps: filter button on the left, map switch badges, search at top right.
   The filter drawer slides in from the left (js/mapnav.js toggles it). */
:root {
  --tp-bg: #ffffff; --tp-ink: #212529; --tp-muted: #6c757d; --tp-line: #e5e7eb; --tp-chip: #f1f3f5;
  --tp-accent: #e8590c; --tp-accent-soft: #fff4e6; --tp-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tp-bg: #1a1b1e; --tp-ink: #e9ecef; --tp-muted: #9aa0a6; --tp-line: #2c2e33; --tp-chip: #25262b;
    --tp-accent: #ff922b; --tp-accent-soft: #2b1d10; --tp-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  }
}

.tp-bar {
  display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-areas: "menu brand maps tools";
  align-items: center; gap: 10px 14px; padding: 10px 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--tp-bg); color: var(--tp-ink); border-bottom: 1px solid var(--tp-line);
  font-family: 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.4;
  position: relative; z-index: 1100; flex-shrink: 0;
}
.tp-bar.no-menu { grid-template-columns: auto 1fr; grid-template-areas: "brand maps"; }
.tp-bar button, .tp-bar input { font: inherit; color: inherit; }

.tp-menu {
  grid-area: menu; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px;
  border: 1px solid var(--tp-line); border-radius: 999px; background: var(--tp-bg); cursor: pointer; font-weight: 600; position: relative;
}
.tp-menu:hover, .tp-menu[aria-expanded="true"] { border-color: var(--tp-accent); color: var(--tp-accent); }
.tp-menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tp-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--tp-accent); color: #fff; font-size: 11px; font-weight: 700; }
.tp-count[hidden] { display: none; }

.tp-brand { grid-area: brand; display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--tp-ink); font-weight: 700; font-size: 20px; }
.tp-brand .brand-mark { flex-shrink: 0; } /* the mascot logo itself: css/mascot.css */

.tp-maps { grid-area: maps; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tp-bar.no-menu .tp-maps { justify-content: flex-start; }
.tp-maps a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: var(--tp-bg); border: 1px solid var(--tp-line); box-shadow: var(--tp-shadow);
  color: var(--tp-ink); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.tp-maps a:hover { border-color: var(--tp-accent); }
.tp-maps a[aria-current="page"] { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; font-weight: 600; }
.tp-maps .s { display: none; }

.tp-tools { grid-area: tools; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.tp-search { position: relative; display: block; flex: 1 1 300px; min-width: 160px; max-width: 340px; }
.tp-search svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%);
  fill: none; stroke: var(--tp-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.tp-search input {
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 14px 0 38px; border-radius: 999px;
  border: 1px solid var(--tp-line); background: var(--tp-chip); outline: none;
}
.tp-search input:focus { border-color: var(--tp-accent); background: var(--tp-bg); box-shadow: 0 0 0 3px var(--tp-accent-soft); }
.tp-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--tp-line);
  background: var(--tp-bg); cursor: pointer; font-size: 17px; flex-shrink: 0; }
.tp-icon:hover { border-color: var(--tp-accent); }
.tp-icon:disabled { opacity: .5; }

/* Date dropdown (events page) */
.tp-date { position: relative; flex-shrink: 0; }
.tp-date-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--tp-line); background: var(--tp-bg); cursor: pointer; font-weight: 600; white-space: nowrap; max-width: 220px; }
.tp-date-btn span { overflow: hidden; text-overflow: ellipsis; }
.tp-date-btn:hover, .tp-date-btn[aria-expanded="true"] { border-color: var(--tp-accent); }
.tp-date-btn .caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; flex-shrink: 0; }
.tp-pop {
  position: absolute; right: 0; top: calc(100% + 6px); width: 300px; max-height: min(70vh, 560px); overflow-y: auto; z-index: 1300;
  background: var(--tp-bg); border: 1px solid var(--tp-line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); padding: 6px;
}
.tp-pop[hidden] { display: none; }
.tp-pop h4 { margin: 8px 10px 4px; font-size: 12px; color: var(--tp-muted); font-weight: 600; }
.tp-opt { display: flex; width: 100%; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 10px; background: none;
  cursor: pointer; text-align: left; }
.tp-opt:hover { background: var(--tp-chip); }
.tp-opt[aria-checked="true"] { background: var(--tp-accent-soft); color: var(--tp-accent); font-weight: 600; }
.tp-opt[aria-checked="true"]::after { content: "✓"; margin-left: auto; }
.tp-range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 10px 10px; }
.tp-range label { display: grid; gap: 2px; font-size: 12px; color: var(--tp-muted); }
.tp-range input { width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid var(--tp-line); border-radius: 8px; background: var(--tp-chip); }
.tp-range button { grid-column: 1 / -1; }

/* Left drawer (filters) */
.tp-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1400; }
.tp-backdrop[hidden] { display: none; }
.tp-drawer {
  position: fixed !important; top: 0; bottom: 0; left: 0; width: min(380px, 90vw); z-index: 1500; margin: 0;
  display: flex; flex-direction: column; background: var(--tp-bg); color: var(--tp-ink);
  box-shadow: 4px 0 24px rgba(0, 0, 0, .2); transform: translateX(-105%); transition: transform .22s ease; visibility: hidden;
  padding-left: env(safe-area-inset-left, 0px);
}
.tp-drawer.open { transform: none; visibility: visible; }
.tp-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--tp-line); }
.tp-drawer-head h2 { margin: 0; font-size: 18px; }
.tp-drawer-body { flex: 1; overflow-y: auto; padding: 8px 16px 16px; display: grid; gap: 16px; align-content: start; overscroll-behavior: contain; }
.tp-drawer-foot { display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--tp-line); }
.tp-drawer-foot .tp-btn { flex: 1; justify-content: center; }
.tp-sec { display: grid; gap: 8px; }
.tp-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tp-sec h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--tp-muted); }
.tp-link { background: none; border: 0; padding: 0; color: var(--tp-accent); cursor: pointer; font-size: 13px; }
.tp-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tp-checks.one { grid-template-columns: 1fr; }
.tp-check { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--tp-line); border-radius: 10px;
  cursor: pointer; font-size: 14px; min-width: 0; }
.tp-check:hover { border-color: var(--tp-accent); }
.tp-check input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--tp-accent); }
.tp-check:has(input:checked) { border-color: var(--tp-accent); background: var(--tp-accent-soft); }
.tp-check span { min-width: 0; overflow-wrap: anywhere; }
.tp-sel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tp-sel select, .tp-drawer select { width: 100%; min-width: 0; padding: 9px 8px; border: 1px solid var(--tp-line); border-radius: 10px; background: var(--tp-chip); color: inherit; font: inherit; }
.tp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--tp-line);
  background: var(--tp-bg); color: var(--tp-ink); cursor: pointer; font: inherit; font-weight: 600; text-decoration: none; }
.tp-btn.primary { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; }

/* Medium screens: badges move to their own row */
@media (max-width: 1320px) {
  .tp-bar { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "menu brand tools" "maps maps maps"; }
  .tp-bar.no-menu { grid-template-columns: auto 1fr; grid-template-areas: "brand brand" "maps maps"; }
  .tp-tools { justify-content: flex-end; }
}
/* Phones: badges become an equal-width row of icon + short label, so nothing has to be scrolled sideways */
@media (max-width: 760px) {
  .tp-bar { gap: 8px; padding-top: 8px; padding-bottom: 8px;
    grid-template-columns: auto 1fr auto; grid-template-areas: "brand . menu" "maps maps maps" "tools tools tools"; }
  .tp-bar.no-menu { grid-template-areas: "brand brand" "maps maps"; }
  .tp-bar.no-tools { grid-template-areas: "brand . menu" "maps maps maps"; }
  .tp-brand { font-size: 19px; }
  .tp-maps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .tp-bar.no-menu .tp-maps { grid-column: 1 / -1; }
  .tp-maps a { flex-direction: column; gap: 0; padding: 6px 2px; border-radius: 12px; font-size: 12px; box-shadow: none; }
  .tp-maps .i { font-size: 18px; line-height: 1.2; }
  .tp-maps .l { display: none; }
  .tp-maps .s { display: inline; }
  .tp-tools { gap: 6px; }
  .tp-search { width: auto; flex: 1; max-width: none; min-width: 0; }
  .tp-date-btn { max-width: 46vw; padding: 0 10px; }
  .tp-check { padding: 7px 8px; font-size: 13px; gap: 6px; }
  .tp-pop { position: fixed; left: 12px; right: 12px; top: auto; width: auto; max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) { .tp-drawer { transition: none; } }