/* RV Park Hunter — retro 90s, modern plumbing.
   Palette lifted from the original 1999 site:
   cream #FFFFCC · deep green #006600 · sage #669966 · saddle #996600 · gold #FFCC00 */

:root {
  --cream: #ffffcc;
  --green-deep: #006600;
  --green-sage: #669966;
  --saddle: #996600;
  --gold: #ffcc00;
  --gold-dark: #cc9900;
  --ink: #333300;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: #fff url("/assets/white2.gif");
}

.tile-bg { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 0 8px; }

/* ---------- header ---------- */
.site-head { text-align: center; padding-top: 18px; }
.logo { max-width: 100%; height: auto; image-rendering: pixelated; }
.tagline { color: var(--gold-dark); font-size: 11px; font-weight: bold; margin: 4px 0 10px; text-shadow: 1px 1px 0 #fff; }

.marquee-wrap {
  width: min(680px, 92vw);
  overflow: hidden;
  border-top: 2px solid var(--gold-dark);
  border-bottom: 2px solid var(--gold-dark);
  background: var(--cream);
  margin: 0 auto 6px;
}
.marquee {
  white-space: nowrap;
  display: inline-block;
  padding: 3px 0;
  font-size: 11px;
  font-weight: bold;
  color: var(--green-deep);
  animation: scroll 28s linear infinite;
}
@keyframes scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; padding-left: 8px; }
}

/* ---------- wood frame panels (the signature) ---------- */
main { width: min(720px, 96vw); }
.wood-frame {
  border: 14px solid transparent;
  border-image: url("/assets/texture_wood_003.jpg") 30 round;
  margin: 18px auto;
  box-shadow: 3px 3px 0 rgba(0,0,0,.25);
}
.parchment {
  background: var(--cream);
  border: 1px solid var(--gold-dark);
  padding: 18px 16px;
}

/* ---------- type ---------- */
h1, .section-head {
  font-family: "Times New Roman", Times, serif;
  color: var(--green-deep);
  margin: 0 0 10px;
}
h1 { font-size: 40px; line-height: 1.05; }
.section-head { font-size: 24px; border-bottom: 3px double var(--gold-dark); padding-bottom: 4px; margin-top: 22px; }
.section-head:first-child { margin-top: 0; }
a { color: var(--saddle); }
a:hover { color: var(--green-deep); }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- homepage map & grid ---------- */
.map-panel { text-align: center; }
.map-instructions { background: var(--green-sage); color: var(--cream); padding: 8px; font-weight: bold; border: 1px solid var(--green-deep); }
.map-instructions a { color: var(--gold); }
.map-scroll { overflow-x: auto; }
.map-scroll img { display: block; margin: 10px auto; }

.state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  margin: 10px 0 6px;
}
.state-cell {
  display: block;
  background: #fff;
  border: 2px outset var(--gold-dark);
  padding: 7px 9px;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  color: var(--saddle);
}
.state-cell small { color: var(--green-sage); font-weight: normal; }
.state-cell:hover { background: var(--gold); color: var(--ink); border-style: inset; }
.state-cell.soon { color: #999; border-style: dashed; border-width: 1px; background: transparent; }

/* ---------- search ---------- */
.search-box, .filter-box { margin: 14px auto 4px; text-align: center; position: relative; }
input[type="search"], .listing-form input, .listing-form select, .listing-form textarea {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  padding: 7px 9px;
  border: 2px inset var(--gold-dark);
  background: #fff;
  width: min(420px, 100%);
}
.search-results {
  text-align: left;
  max-height: 260px;
  overflow-y: auto;
  border: 2px solid var(--green-deep);
  background: #fff;
  width: min(420px, 100%);
  margin: 4px auto 0;
}
.search-results a { display: block; padding: 6px 9px; border-bottom: 1px dotted var(--gold-dark); text-decoration: none; font-size: 12px; }
.search-results a:hover { background: var(--cream); }
.search-results .hit-state { color: var(--green-sage); }

/* ---------- state pages ---------- */
.state-header { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.state-photo { border: 3px ridge var(--gold-dark); max-width: 270px; height: auto; }
.state-sub { color: var(--green-sage); margin: 2px 0 10px; }

.city-columns { column-count: 2; column-gap: 26px; margin-top: 14px; }
@media (max-width: 620px) { .city-columns { column-count: 1; } }
.city-block { break-inside: avoid; margin-bottom: 14px; }
.city-name { font-size: 15px; color: var(--green-sage); margin: 0 0 4px; font-family: Verdana, Geneva, sans-serif; }
.park-list { list-style: none; margin: 0; padding: 0; }
.park-list li { display: flex; align-items: flex-start; gap: 5px; padding: 2px 0; font-size: 13px; }
.bullet { margin-top: 1px; flex: none; }
.biz-list li { padding: 4px 0; }
.coming-soon { text-align: center; font-size: 20px; color: var(--green-sage); }
li.filtered-out, .city-block.filtered-out { display: none; }

/* ---------- buttons & kitsch ---------- */
.btn-3d {
  display: inline-block;
  font-weight: bold;
  font-size: 14px;
  color: var(--ink);
  background: var(--gold);
  border: 3px outset var(--gold-dark);
  padding: 8px 16px;
  text-decoration: none;
  cursor: pointer;
}
.btn-3d:active { border-style: inset; }
.btn-3d:hover { background: #ffe066; color: var(--ink); }
.btn-sm { font-size: 12px; padding: 5px 10px; }

.starburst {
  display: inline-block;
  background: #cc0000;
  color: #ffff00;
  font-weight: bold;
  font-size: 12px;
  padding: 8px 10px;
  clip-path: polygon(50% 0%, 61% 15%, 78% 8%, 80% 26%, 98% 32%, 88% 47%, 100% 60%, 83% 66%, 84% 84%, 66% 80%, 57% 96%, 46% 82%, 28% 90%, 27% 72%, 8% 68%, 18% 53%, 4% 41%, 22% 33%, 19% 15%, 38% 20%);
  transform: rotate(-12deg);
}
.starburst-inline { font-size: 9px; padding: 6px 7px; }

.cta-strip { text-align: center; padding: 8px 0 4px; }
.cta-strip .starburst { float: left; }

/* ---------- listing form ---------- */
.listing-form label { display: block; margin: 10px 0; font-weight: bold; font-size: 13px; }
.listing-form input, .listing-form select, .listing-form textarea { display: block; margin-top: 4px; width: 100%; }
.rate-table { border-collapse: collapse; margin: 8px 0; }
.rate-table td { border: 1px solid var(--gold-dark); padding: 7px 20px; background: #fff; }

/* ---------- footer ---------- */
.site-foot { text-align: center; padding: 10px 0 30px; }
.counter { display: inline-block; background: #000; padding: 6px 12px; border: 3px ridge var(--gold-dark); }
.counter-label { color: var(--gold); font-size: 10px; font-weight: bold; letter-spacing: 2px; display: block; }
.odometer { font-family: "Courier New", monospace; font-size: 22px; font-weight: bold; color: #33ff33; letter-spacing: 4px; }
.badges { margin: 12px 0 4px; }
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  color: var(--cream);
  background: var(--green-sage);
  border: 1px solid var(--green-deep);
  padding: 3px 8px;
  margin: 2px;
}
.badge-new { background: #cc0000; border-color: #880000; color: #ffff00; }
.foot-nav { font-size: 12px; margin: 8px 0; }
.copyright { font-size: 10px; color: #999; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}