/* =========================================================================
 * CapyFinder — "Sunset Pop" theme layer (2026-10-30)
 * Loaded after style.css. Re-tokens the palette (bright orange leads,
 * capybara brown stays) and restyles the shared components. No markup,
 * headings, titles or links change — only presentation.
 * ========================================================================= */

:root {
  /* surfaces & ink */
  --bg:         #FFF5EA;
  --bg-2:       #FFE9D6;
  --surface:    #FFFFFF;
  --surface-2:  #FFEBDC;
  --ink:        #241608;
  --ink-soft:   #6A5240;
  --ink-mute:   #9B8673;
  --hairline:   #F3D6C2;
  --hairline-2: #E8B899;

  /* brand: orange leads, brown grounds */
  --capy:       #FF6A1F;   /* primary (buttons, CTAs, active states) */
  --capy-deep:  #D9500A;   /* hover / dark orange text on cream */
  --capy-warm:  #FFC53D;   /* sunny accent (focus rings, highlights) */
  --pop:        #FF4F8B;   /* coral pink — small accents only */
  --brown:      #6B3E1F;
  --brown-deep: #4A2A12;
  --orange-soft:#FFE1CF;
  --hero-bg:    linear-gradient(135deg, #FF6A1F 0%, #FF8E3C 55%, #FFC53D 100%);

  --focus-ring: #FF6A1F;
  --r: 16px; --r-lg: 24px;
  --shadow:    0 1px 0 rgba(107,62,31,.06), 0 14px 30px -20px rgba(107,62,31,.35);
  --shadow-lg: 0 2px 0 rgba(107,62,31,.08), 0 26px 50px -26px rgba(107,62,31,.45);
}

body { background: var(--bg); color: var(--ink); }
a { color: var(--capy-deep); }

/* ---- Display headings: capybara brown ---------------------------------- */
.hero h1, .page-head h1, .titleblock h1, .section-head h2, .results-head h2,
.post-head h1, .prose h2, .comments h2, .nearby h2, .post-locations h2,
.page-head.centered h1, .blog-toolbar h2 { color: var(--brown-deep); }
.hero h1 em, .page-head.centered h1 em { color: var(--capy-deep); }
.eyebrow { color: var(--capy-deep); font-style: normal; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }

/* ---- Header -------------------------------------------------------------- */
header.site {
  position: sticky; top: 0; z-index: 1050; /* above Leaflet controls (1000), below the coupon (1100) */
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--hairline);
  padding: var(--s-2) 0;
}
.nav { min-height: 56px; }
.brand { color: var(--brown-deep); }
.brand .mark { background: transparent; box-shadow: none; padding: 0; } /* the new logo has its own ring */
.nav ul a { font-weight: 800; }
.nav ul a:hover, .nav ul a.is-active { background: var(--orange-soft); color: var(--capy-deep); }
.nav .submit-btn {
  background: var(--capy); color: #fff; font-weight: 800;
  box-shadow: 0 5px 0 -1px var(--capy-deep);
  transition: transform 120ms, filter 120ms;
}
.nav .submit-btn:hover { filter: brightness(1.06); transform: translateY(-1px); text-decoration: none; }

/* ---- Buttons --------------------------------------------------------------- */
.btn, .icon-btn.primary, .search button, .info-card .ctas a.book, .promo-cta {
  font-weight: 800;
}
.btn { background: var(--capy); border-color: var(--capy); color: #fff; box-shadow: 0 5px 0 -1px var(--capy-deep); }
.btn:hover { background: var(--capy); border-color: var(--capy); filter: brightness(1.06); transform: translateY(-1px); }
.btn.secondary { background: var(--surface); color: var(--brown-deep); border-color: var(--hairline-2); box-shadow: none; }
.btn.secondary:hover { background: var(--orange-soft); border-color: var(--capy); filter: none; }
.btn.danger { box-shadow: none; }
.icon-btn.primary { background: var(--capy); border-color: var(--capy); color: #fff; }
.icon-btn.primary:hover { background: var(--capy-deep); border-color: var(--capy-deep); }
.info-card .ctas a.book { background: var(--capy); color: #fff; box-shadow: 0 5px 0 -1px var(--capy-deep); }
.info-card .ctas a.dir { background: var(--surface); color: var(--brown-deep); border-color: var(--hairline-2); }
.info-card .ctas a.dir:hover { border-color: var(--capy); }

/* ---- Home hero: orange gradient card, white text ------------------------- */
.hero {
  margin-top: var(--s-5);
  padding: var(--s-10) var(--s-8) var(--s-8);
  border-radius: 28px;
  background: var(--hero-bg);
  color: #fff;
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.hero::after { content: "🐹"; position: absolute; right: -10px; bottom: -28px; font-size: 170px; opacity: .13; transform: rotate(-12deg); pointer-events: none; }
.hero > div { position: relative; z-index: 1; }
.hero h1 { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.12); }
.hero h1 em { color: #FFF6D8; }
.hero p.lede { color: rgba(255,255,255,.95); font-weight: 600; }
.hero .search { border: 0; max-width: 620px; box-shadow: 0 12px 30px -14px rgba(0,0,0,.45); }
.hero .search button { background: var(--brown); color: #fff; }
.hero .search button:hover { background: var(--brown-deep); }
.hero .quick-chips .chip { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color: #fff; font-weight: 800; }
.hero .quick-chips .chip:hover { background: rgba(255,255,255,.3); }
.hero-card { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); position: relative; z-index: 1; }
.hero-card .caption { color: #fff; }
.hero-card .caption strong { color: #fff !important; }
.hero-card .stamp { background: #fff; color: var(--brown-deep); }
.hero-photo-card { border-color: rgba(255,255,255,.5); }

/* ---- Chips (shared) --------------------------------------------------------- */
.chip { background: var(--surface); border: 2px solid var(--hairline); color: var(--brown-deep); font-weight: 800; min-height: 40px; padding: 8px 14px; }
.chip:hover { border-color: var(--capy); }
.chip.is-active, .tag-row .chip.is-active { background: var(--capy); border-color: var(--capy); color: #fff; }
.chip .count, .tag-row .chip .count { background: var(--orange-soft); color: var(--capy-deep); padding: 1px 8px; border-radius: var(--r-pill); font-size: 12px; opacity: 1; }
.chip.is-active .count { background: rgba(255,255,255,.25); color: #fff; }

/* ---- Browse-by-state strip (home) ---------------------------------------- */
.state-strip { margin-top: var(--s-6); }
.state-strip .scroller { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.state-strip .scroller::-webkit-scrollbar { height: 6px; }
.state-strip .scroller::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }
.state-strip .chip { scroll-snap-align: start; white-space: nowrap; flex: 0 0 auto; }
.state-strip .section-head { margin-bottom: var(--s-3); }

/* ---- Cards ------------------------------------------------------------------ */
.card, .post-card { border: 2px solid var(--hairline); border-radius: var(--r-lg); transition: transform 150ms, box-shadow 150ms, border-color 150ms; }
.card:hover, .post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--capy); }
.card:focus-visible, .post-card:focus-visible { outline: 3px solid var(--capy); outline-offset: 2px; }
.card .pin-tag { color: var(--brown-deep); font-weight: 900; }
.card h3, .post-card h3 { color: var(--ink); }
.card .meta strong { color: var(--capy-deep); }
.card .where .dist { color: var(--capy-deep); }
.card .img { background: var(--surface-2); }
.post-card .img .pin-tag { color: var(--capy-deep); }
.post-card .img .pin-tag .dot { background: var(--capy); }
.post-card .tags span { background: var(--orange-soft); color: var(--capy-deep); }

/* ---- Section / page heads ---------------------------------------------------- */
.section-head .meta a, .section-head a { color: var(--capy-deep) !important; }
.page-head .summary a { color: var(--capy-deep); font-weight: 700; }

/* ---- Map card + legend ---------------------------------------------------- */
.map-card { border: 2px solid var(--hairline); border-radius: var(--r-lg); }
.legend { background: var(--surface); }

/* ---- Filters (locations) ---------------------------------------------------- */
.filter { border: 2px solid var(--hairline); }
.filter .search { border: 2px solid var(--hairline); }
.filter .select select { background: var(--surface); border-color: var(--hairline-2); }
.cat-chip { background: var(--surface); border: 2px solid var(--hairline); color: var(--brown-deep); }
.cat-chip:has(input:checked) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.filter-bottom .count-results { color: var(--capy-deep); font-weight: 800; }
.search-note { border: 2px solid var(--hairline); }
.search-note .btn { box-shadow: none; }

/* ---- Venue page ----------------------------------------------------------- */
.crumb a { color: var(--ink-soft); font-weight: 700; }
.badge { font-weight: 900; }
.badge.muted { background: var(--surface-2); color: var(--brown-deep); border-color: transparent; }
.hero-photo, .hero-fallback { border: 2px solid var(--hairline); box-shadow: var(--shadow-lg); }
.hero-fallback .btn { box-shadow: none; }
.info-card { border: 2px solid var(--hairline); top: 84px; z-index: 5; } /* clears the sticky header; stays above the minimap */
.minimap-wrap { position: relative; z-index: 1; }
.info-card .head { background: var(--capy); color: #fff; border-bottom: 0; font-family: var(--font-body); font-weight: 900; }
.info-card .head .stat { color: #fff; background: rgba(255,255,255,.22); padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--t-sm); }
.info-card dt { color: var(--ink-mute); font-weight: 900; }
.info-card dd a { color: var(--capy-deep); }
.info-card .ctas { background: var(--surface); border-top: 2px dashed var(--hairline); }
.minimap-wrap { border: 2px solid var(--hairline); border-radius: var(--r-lg); }
.prose a, .closing a, .suggest { color: var(--capy-deep); font-weight: 800; }
details summary strong { color: var(--brown-deep); }
.nearby .section-head a { color: var(--capy-deep); }

/* ---- State directory ---------------------------------------------------------- */
.state-tile > a, .state-tile > div { border: 2px solid var(--hairline); }
.state-tile > a:hover { border-color: var(--capy); }
.state-tile .code { color: var(--capy-deep); background: var(--orange-soft); }
.state-tile.is-empty .count a { color: var(--capy-deep); }

/* ---- Blog ----------------------------------------------------------------------- */
.blog-toolbar .search button { background: var(--capy); }
.byline strong { color: var(--brown-deep); }
.post-body blockquote { border-left-color: var(--capy); background: var(--surface-2); }
.post-nav a { border: 2px solid var(--hairline); }
.post-nav a:hover { border-color: var(--capy); }
.comment-form { border: 2px solid var(--hairline); }
.preview-banner { border-color: var(--capy-warm); background: #FFF6D8; }

/* ---- Forms (submit / comments / admin) ----------------------------------------- */
.input:focus, .textarea:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--capy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--capy) 25%, transparent);
}
.cat-radio:has(input:checked) { border-color: var(--capy); }
.submit-form .section-head h2 .accent { color: var(--capy-deep); }
.submit-form .section-head .num { color: var(--capy); }
.dropzone { border-color: var(--hairline-2); }

/* ---- Footer: capybara brown ------------------------------------------------------- */
footer.site {
  margin-top: var(--s-12);
  background: var(--brown-deep);
  color: #fff;
  max-width: none; padding: var(--s-7) var(--gutter);
  border-top: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between; align-items: center;
}
footer.site a { color: #fff; font-weight: 800; }
footer.site a:hover { color: var(--capy-warm); }

/* ---- Admin: colours only (tokens above do most of it) ------------------------- */
.toggle.on { background: var(--capy); border-color: var(--capy); }
.stat-grid .n { color: var(--capy-deep); }
table th { background: var(--surface-2); }

/* ---- Mobile ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .hero { padding: var(--s-7) var(--s-5) var(--s-6); border-radius: 22px; margin-top: var(--s-4); }
  .hero::after { font-size: 120px; bottom: -22px; }
  .hero h1 { font-size: 38px; }
  .hero .search { flex-direction: column; border-radius: 20px; padding: 6px; }
  .hero .search input { padding: 12px 14px; }
  .hero .search button { width: 100%; padding: 12px; font-size: var(--t-base); }
  .hero-card { display: none; } /* photo card returns below as the first featured card */
  footer.site { flex-direction: column; align-items: flex-start; }
  .state-strip .section-head { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

/* ---- Placeholder capybara for locations without a photo ------------------- */
.card .img img.ph, .hero-photo-card img.ph { object-fit: cover; object-position: center 40%; background: linear-gradient(180deg, #FEE3A8 0%, #FCB474 100%); }
.hero-photo.is-placeholder { background: linear-gradient(180deg, #FEE3A8 0%, #FCB474 100%); display: grid; place-items: center; }
.hero-photo.is-placeholder img { object-fit: contain; width: 100%; height: 100%; }
.hero-photo.is-placeholder .ph-note { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(255,255,255,.9); color: var(--brown-deep); font-size: var(--t-xs); font-weight: 800; padding: 6px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.hero-photo.is-placeholder .ph-note a { color: var(--capy-deep); }

/* ---- Product cards (shop pages) ------------------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); margin: var(--s-5) 0; }
.product { display: flex; flex-direction: column; background: var(--surface); border: 2px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform 150ms, box-shadow 150ms, border-color 150ms; margin: var(--s-5) 0; }
.product-grid .product { margin: 0; }
.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--capy); }
.product-img { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--surface-2); }
.product-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.product-noimg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 48px; opacity: .5; }
.product-flag { position: absolute; left: 10px; top: 10px; background: var(--capy); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); }
.product-body { padding: var(--s-4) var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); margin: 0; color: var(--ink); line-height: 1.25; }
.product-vendor { font-size: var(--t-xs); font-weight: 800; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }
.product-desc { margin: 6px 0 0; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; }
.product-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-3); }
.product-price { font-weight: 900; color: var(--capy-deep); font-size: var(--t-base); }
.product-buy { padding: 9px 16px; font-size: var(--t-sm); }
.product.is-featured { flex-direction: row; border-color: var(--capy-warm); background: linear-gradient(135deg, #FFF6D8, var(--surface)); }
.product.is-featured .product-img { flex: 0 0 42%; aspect-ratio: auto; min-height: 220px; }
.product.is-featured .product-body { justify-content: center; padding: var(--s-5) var(--s-6); }
.product.is-featured .product-name { font-size: var(--t-xl); }
.featured-product { margin: var(--s-6) 0 var(--s-2); }
.featured-product .eyebrow { margin-bottom: var(--s-2); }
.section-badge { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--capy-deep); background: var(--orange-soft); padding: 4px 10px; border-radius: var(--r-pill); }
@media (max-width: 760px) {
  .product.is-featured { flex-direction: column; }
  .product.is-featured .product-img { min-height: 0; aspect-ratio: 16 / 10; }
  .product-grid { grid-template-columns: 1fr; }
}
.product-img img.ph { object-fit: cover; object-position: center 40%; }
.product-noimg-note { position: absolute; right: 10px; bottom: 10px; background: rgba(255,255,255,.9); color: var(--ink-soft); font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: var(--r-pill); }
/* A single [[product:…]] in the article flow: wide row card (square tiles are for grids). */
.product-solo .product { flex-direction: row; margin: var(--s-5) 0; }
.product-solo .product-img { flex: 0 0 38%; aspect-ratio: auto; min-height: 200px; }
.product-solo .product-body { justify-content: center; padding: var(--s-5); }
@media (max-width: 760px) {
  .product-solo .product { flex-direction: column; }
  .product-solo .product-img { min-height: 0; aspect-ratio: 16 / 10; }
}