/* Chillin' Livingston — site styles */
:root{
  --bg:#050505; --panel:#111312; --panel-2:#1a1d1b; --ink:#f5f5f2; --muted:#b9bfb8;
  --neon:#39ff14; --neon-dim:#2bd10f; --sun:#ff8a1f; --sun-2:#ffb43a; --navy:#0f2d4a;
  --wood:#3a2616; --wood-2:#5b3b20; --card-ink:#14212b; --cream:#fff8ea; --pink:#fff0f0;
  --radius:12px; --wrap:1280px;
  --head-font:"Arial Black","Arial Bold",Arial,Helvetica,sans-serif;
  --body-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body-font);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--neon)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--neon);color:#000;padding:10px 14px;z-index:99}
.skip-link:focus{left:10px}
:focus-visible{outline:3px solid var(--neon);outline-offset:3px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 18px;border-radius:8px;
  background:var(--navy);color:#fff;font-weight:700;text-decoration:none;border:2px solid var(--navy);cursor:pointer;font-size:15px}
.btn:hover{filter:brightness(1.15)}
.btn.ghost{background:#fff;color:var(--navy);border-color:#c9d3db}
.btn.small{min-height:36px;padding:6px 12px;font-size:14px}

/* Header: rustic wood bar with neon trim */
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,var(--wood-2),var(--wood));border-bottom:4px solid var(--neon);box-shadow:0 2px 12px rgba(0,0,0,.5)}
.bar{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:18px;padding:8px 20px}
.brand img{width:62px;height:62px}
.site-nav{flex:1}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.nav-list a{display:block;padding:10px 12px;color:#fff;text-decoration:none;font-weight:700;font-size:15px;border-radius:6px}
.nav-list a:hover,.nav-list .current-menu-item a{background:rgba(57,255,20,.15);color:var(--neon)}
.head-search{display:flex;background:#fff;border-radius:22px;overflow:hidden;min-width:220px}
.head-search input{border:0;padding:8px 14px;font-size:15px;flex:1;min-width:0}
.head-search button{border:0;background:transparent;color:var(--navy);padding:0 12px;cursor:pointer}
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto}
.nav-toggle span:not(.sr){display:block;width:26px;height:3px;background:#fff;margin:5px 0;border-radius:2px}

/* Homepage */
.hero img{width:100%}
.badges{max-width:var(--wrap);margin:0 auto;padding:28px 24px 12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px}
.badge{display:block;border-radius:50%;transition:transform .2s ease,filter .2s ease}
.badge img{width:100%;max-width:280px;margin:0 auto;filter:drop-shadow(0 0 10px rgba(57,255,20,.35))}
.badge:hover{transform:scale(1.05)}
.badge:hover img{filter:drop-shadow(0 0 18px rgba(57,255,20,.65))}
.section-title{text-align:center;font:900 clamp(20px,2.2vw,28px)/1.2 var(--head-font);letter-spacing:2px;margin:26px 0 18px}
.sponsors{max-width:var(--wrap);margin:0 auto;padding:0 24px 30px}
.sponsor-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.sponsor{display:block;border-radius:8px;overflow:hidden;text-decoration:none;background:#fff;border:3px solid var(--neon-dim)}
.sponsor img{width:100%}
.sponsor-cap{display:block;background:#eaf7e4;color:var(--card-ink);font:800 12px/1.2 var(--body-font);text-transform:uppercase;letter-spacing:.5px;text-align:center;padding:6px}
.ctas{border-top:4px solid var(--neon);background:linear-gradient(180deg,#0b0b0b,#000);padding:30px 24px 40px}
.kicker{text-align:center;color:var(--sun-2);font:900 clamp(22px,2.6vw,32px)/1.2 var(--head-font);margin:0 0 20px}
.cta-grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cta{display:block;padding:18px;border-radius:var(--radius);background:var(--panel);border:2px solid #263026;color:var(--ink);text-decoration:none}
.cta strong{display:block;color:var(--neon);font-size:17px;margin-bottom:4px}
.cta span{color:var(--muted);font-size:15px}
.cta:hover{border-color:var(--neon)}

/* Category hero */
.cat-hero{background:var(--banner) center/cover no-repeat;border-bottom:4px solid var(--neon)}
.cat-hero-in{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:18px 24px;min-height:210px}
.cat-badge img{width:180px;height:180px}
.cat-words h1{font:900 clamp(34px,5vw,58px)/1 var(--head-font);margin:0;color:#fff;text-shadow:0 3px 10px rgba(0,0,0,.8)}
.cat-tag{margin:8px 0 0;max-width:30ch;font:italic 700 clamp(18px,2vw,24px)/1.3 Georgia,serif;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.9)}
.cat-wordmark{width:260px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}

.cat-tools{max-width:var(--wrap);margin:18px auto 0;padding:0 24px;display:flex;gap:12px}
.cat-tools input{flex:1;min-height:46px;padding:10px 16px;border-radius:8px;border:2px solid #cfd8de;font-size:16px}

/* Category layout: listings left, community + map right (approved mockup) */
.cat-layout{max-width:var(--wrap);margin:18px auto 40px;padding:0 24px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:22px;align-items:start}
.cat-main{grid-column:1;grid-row:1}
.cat-side{grid-column:2;grid-row:1;display:grid;gap:16px}
.card{background:#fff;color:var(--card-ink);border-radius:var(--radius);padding:18px;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.card h2{font:900 18px/1.2 var(--head-font);margin:0 0 6px;color:var(--navy);text-transform:uppercase}
.card a{color:var(--navy)}
.muted{color:#5a6670}
.chill-map{height:340px;border-radius:8px;margin-top:10px;background:#cfe6f2}
.chill-map.small{height:260px}
.map-help{margin:10px 0 6px;font-size:14px;color:#5a6670}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:2px solid #c9d3db;background:#fff;color:var(--card-ink);border-radius:20px;padding:5px 10px;font-size:13px;font-weight:700;cursor:pointer;min-height:34px}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.map-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.favorites{background:var(--cream);border:2px solid #f3d27a}
.fav-empty{background:#fff;border-radius:8px;padding:12px 14px;margin-top:10px}
.fav-empty p{margin:6px 0 0;font-size:14px}
.compliments{background:var(--pink);border:2px solid #f4c2c2}
.cmp-list{list-style:none;margin:10px 0;padding:0;display:grid;gap:10px}
.cmp-list li{background:#fff;border-radius:8px;padding:10px 12px}
.cmp-list blockquote{margin:0;font-weight:700}
.cmp-list span{font-size:13px;color:#5a6670}
.cmp-form summary{list-style:none;margin-top:8px}
.cmp-form summary::-webkit-details-marker{display:none}
.cmp-form form{display:grid;gap:6px;margin-top:12px}
.cmp-form label{font-weight:700;font-size:14px}
.cmp-form select,.cmp-form textarea,.cmp-form input{width:100%;padding:10px;border:2px solid #d5c4c4;border-radius:8px;font:inherit}
.hp{position:absolute;left:-9999px}
.fine{font-size:13px;color:#5a6670;margin:4px 0}
.notice{padding:10px 12px;border-radius:8px;font-weight:700}
.notice.ok{background:#e6f6df;color:#1f5d12}
.notice.err{background:#fde6e6;color:#8a1f1f}
.cat-sponsors{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Business cards */
.biz-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.biz{display:grid;grid-template-columns:210px 1fr;gap:16px;background:#fff;color:var(--card-ink);border-radius:var(--radius);padding:12px}
.biz-img img{width:100%;height:150px;object-fit:cover;border-radius:8px}
.biz-img img.default-logo{object-fit:contain;background:#000;padding:8px}
.biz h3{margin:0;font:900 21px/1.2 var(--head-font)}
.biz h3 a{color:var(--navy);text-decoration:none}
.biz-tag{margin:2px 0;color:#3d4a55;font-weight:700}
.biz-cats{margin:2px 0;font-size:13px;color:#2a7a12;font-weight:700}
.biz-desc,.biz-addr{margin:6px 0;font-size:15px}
.biz-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.empty-list{text-align:center}
.empty-list h3{margin-top:0;color:var(--navy)}
.owner-cta{margin-top:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* Business page */
.biz-page{max-width:var(--wrap);margin:24px auto 40px;padding:0 24px}
.biz-head{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:center;margin-bottom:20px}
.biz-photo img{border-radius:var(--radius);width:100%}
.biz-photo img.default-logo{background:#000;padding:16px}
.biz-head h1{font:900 clamp(28px,4vw,44px)/1.1 var(--head-font);margin:0}
.biz-head .biz-tag{color:var(--sun-2)}
.biz-head .biz-cats a{display:inline-block;margin-right:8px;color:var(--neon)}
.biz-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.biz-grid > div,.biz-grid > aside{display:grid;gap:16px}
.claim{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:#eaf7e4}
.social-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}
.page-wrap{max-width:900px;margin:24px auto;padding:0 24px;display:grid;gap:16px}

/* Footer */
.site-footer{border-top:4px solid var(--neon);background:linear-gradient(180deg,var(--wood),#21150c);padding:26px 24px 16px}
.foot{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center}
.foot-brand img{width:210px}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-nav a,.foot-contact a{color:#fff;text-decoration:none;font-size:15px}
.foot-nav a:hover,.foot-contact a:hover{color:var(--neon)}
.foot-contact{display:grid;gap:6px;text-align:right}
.copy{max-width:var(--wrap);margin:18px auto 0;color:var(--muted);font-size:14px;text-align:center}
.copy .tag{display:block;color:var(--sun-2);font-style:italic}

/* Tablet */
@media (max-width:1100px){
  .head-search{display:none}
  .cta-grid{grid-template-columns:repeat(2,1fr)}
  .cat-wordmark{display:none}
  .cat-hero-in{grid-template-columns:auto 1fr}
}
@media (max-width:900px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--wood);border-bottom:4px solid var(--neon)}
  .site-nav.open{display:block}
  .nav-list{flex-direction:column;padding:8px 12px 14px}
  .nav-list a{padding:14px 12px;font-size:17px}
  /* Phones get community features and sponsors before the listings. */
  .cat-layout{grid-template-columns:1fr}
  .cat-side,.cat-main{grid-column:1;grid-row:auto}
  .foot{grid-template-columns:1fr;text-align:center}
  .foot-nav{justify-content:center}
  .foot-contact{text-align:center}
  .foot-brand img{margin:0 auto}
  .biz-head,.biz-grid{grid-template-columns:1fr}
  .biz-photo{max-width:420px}
}
/* Phones: badges 2 per row, larger tap targets */
@media (max-width:700px){
  .bar{padding:6px 14px}
  .brand img{width:52px;height:52px}
  .badges{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;padding:18px 14px 6px}
  .sponsors{padding:0 14px 24px}
  .sponsor-row{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr}
  .cat-hero{background-image:var(--banner-sm)}
  .cat-hero-in{grid-template-columns:110px 1fr;min-height:150px;padding:14px;gap:12px}
  .cat-badge img{width:110px;height:110px}
  .cat-tools,.cat-layout,.biz-page{padding:0 14px}
  .biz{grid-template-columns:1fr}
  .biz-img img{height:180px}
  .biz-actions .btn{flex:1}
  .cat-sponsors{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Community Favorites */
.fav-list{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px}
.fav-list li{background:#fff;border-radius:8px;padding:10px 12px;display:flex;gap:10px;align-items:center;font-weight:700}
.place{display:inline-block;min-width:84px;text-align:center;border-radius:20px;padding:3px 10px;font-size:13px;color:#fff;background:#8a6d1f}
.place.p1{background:#d4a017;color:#1d1400}.place.p2{background:#9aa4ad;color:#111}.place.p3{background:#b0703a}
.vote-form summary{list-style:none;margin-top:10px}
.vote-form summary::-webkit-details-marker{display:none}
.vote-form form{display:grid;gap:6px;margin-top:12px}
.vote-form label{font-weight:700;font-size:14px}
.vote-form label.check{font-weight:400;display:flex;gap:8px;align-items:flex-start}
.vote-form select,.vote-form input[type=email]{width:100%;padding:10px;border:2px solid #e7cf86;border-radius:8px;font:inherit}
#favorites,#compliments,#categories{scroll-margin-top:90px}
.momma{font-style:italic;margin:4px 0 10px;color:#6b2a2a}
.sp-thanks{grid-column:1/-1;margin:0 0 -4px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--muted);text-transform:uppercase}