/* ===================================================================
   Florida Fun Finder — colorful, friendly design system
   Multi-county events platform · by Keith Rainville, KW Elite Partners
   Plain CSS, no build step.
   =================================================================== */
:root{
  /* brand */
  --kw-red:#E23636;
  /* tropical palette */
  --sun:#FFC233; --coral:#FF6B5A; --flamingo:#FF5DA2;
  --aqua:#12BFC4; --ocean:#1E9FE0; --palm:#22C17B; --grape:#8A5CF6; --orange:#FF8A3D;
  --ink:#2A2E37; --muted:#6E6A78;
  --bg:#FFF8EE; --card:#FFFFFF; --line:#F0E6D6;
  --shadow:0 8px 22px rgba(45,40,60,.08);
  --shadow-lg:0 16px 40px rgba(45,40,60,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px}
h1,h2,h3,h4{font-family:"Fredoka","Nunito",system-ui,sans-serif;color:var(--ink);line-height:1.15;margin:0;font-weight:600}
a{color:var(--ocean);text-decoration:none;font-weight:700}
a:hover{text-decoration:underline}
img{max-width:100%}

/* playful confetti-ish background dots on body */
body{background-image:radial-gradient(var(--sun) 1.5px, transparent 1.6px);background-size:0 0} /* off by default; hero carries the color */

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:4px solid var(--sun);box-shadow:0 2px 14px rgba(45,40,60,.06)}
.hdr-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap}
.hdr-brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.hdr-logo{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--ocean),var(--aqua));display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;overflow:hidden;box-shadow:var(--shadow)}
.hdr-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.hdr-title{font-family:"Fredoka",sans-serif;font-weight:700;font-size:20px;line-height:1}
.hdr-title span{color:var(--coral)}
.hdr-sub{font-size:11px;color:var(--muted);font-weight:700}
.hdr-nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.hdr-nav a{color:var(--ink);font-size:14px;font-weight:800;padding:8px 13px;border-radius:22px}
.hdr-nav a:hover,.hdr-nav a.active{background:var(--coral);color:#fff;text-decoration:none}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;text-align:center;color:#fff;padding:64px 24px 60px;
  background:linear-gradient(120deg,#1E9FE0 0%,#12BFC4 42%,#22C17B 100%)}
.hero::before{content:"";position:absolute;top:-60px;right:-40px;width:220px;height:220px;border-radius:50%;background:var(--sun);opacity:.85;box-shadow:0 0 90px 30px rgba(255,194,51,.6)}
.hero::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:34px;background:var(--bg);border-radius:50% 50% 0 0/100% 100% 0 0}
.hero > *{position:relative;z-index:2}
.hero .eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:13px;font-weight:800;color:#FFF3D6;margin-bottom:10px}
.hero h1{color:#fff;font-size:52px;margin-bottom:8px;text-shadow:0 3px 0 rgba(0,0,0,.08)}
.hero .tag{font-family:"Fredoka",sans-serif;font-size:24px;color:#FFF3D6;font-weight:500}
.hero .sub{max-width:660px;margin:16px auto 0;color:#F3FFFB;font-size:17px;font-weight:600}
.hero .daterange{display:inline-block;margin-top:18px;padding:9px 22px;background:var(--sun);color:#5A3B00;border-radius:40px;font-size:15px;letter-spacing:1px;font-weight:800;box-shadow:var(--shadow)}

/* ---------- Layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.section{padding:32px 0}
.section h2.title{font-size:34px;margin-bottom:4px}
.kicker{color:var(--flamingo);font-weight:800;text-transform:uppercase;letter-spacing:2px;font-size:13px}
.lead{color:var(--muted);font-size:16px;max-width:840px;margin:6px 0 18px;font-weight:600}

/* ---------- County cards (landing) ---------- */
.county-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px;margin-top:12px}
.county-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .14s,box-shadow .14s;border:3px solid #fff}
.county-card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--shadow-lg)}
.county-card .banner{height:104px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:"Fredoka",sans-serif;font-size:24px;font-weight:600;text-shadow:0 2px 6px rgba(0,0,0,.15)}
.cc-0 .banner{background:linear-gradient(135deg,var(--ocean),var(--aqua))}
.cc-1 .banner{background:linear-gradient(135deg,var(--flamingo),var(--coral))}
.cc-2 .banner{background:linear-gradient(135deg,var(--grape),var(--ocean))}
.cc-3 .banner{background:linear-gradient(135deg,var(--orange),var(--sun))}
.cc-4 .banner{background:linear-gradient(135deg,var(--palm),var(--aqua))}
.county-card.soon .banner{filter:grayscale(.55) opacity(.9)}
.county-card .body{padding:16px 18px;flex:1;display:flex;flex-direction:column}
.county-card .body p{font-size:14.5px;color:var(--muted);margin:6px 0 14px;flex:1;font-weight:600}
.county-card .cc-btn{display:inline-block;background:var(--coral);color:#fff;font-weight:800;text-align:center;padding:11px 14px;border-radius:30px;font-size:15px;box-shadow:var(--shadow)}
.county-card .cc-btn:hover{background:var(--kw-red);text-decoration:none;transform:translateY(-1px)}
.county-card.soon .cc-btn{background:#D9CFC0;cursor:default;pointer-events:none;box-shadow:none}
.badge{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:4px 11px;border-radius:20px;background:#E4F9EF;color:#12965A;align-self:flex-start;margin-bottom:8px}
.badge.soon{background:#F1EADF;color:var(--muted)}

/* ---------- Controls (search/filter) ---------- */
.controls{position:sticky;top:78px;z-index:40;background:var(--bg);padding:14px 0 12px;border-bottom:2px dashed var(--line)}
.controls .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.controls input[type=search]{flex:1;min-width:200px;padding:13px 16px;border:3px solid var(--aqua);border-radius:30px;font-size:15px;background:#fff;font-weight:600;font-family:inherit}
.controls input[type=search]:focus{outline:none;border-color:var(--ocean);box-shadow:0 0 0 4px rgba(30,159,224,.15)}
.controls select{padding:11px 14px;border:3px solid var(--line);border-radius:30px;font-size:14px;background:#fff;color:var(--ink);font-weight:700;font-family:inherit;cursor:pointer}
.controls select:focus{outline:none;border-color:var(--ocean)}
.controls .count{font-size:14px;color:var(--muted);margin-left:auto;font-weight:800}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{--cc:#12BFC4;border:2px solid color-mix(in srgb,var(--cc) 45%,white);background:color-mix(in srgb,var(--cc) 12%,white);color:color-mix(in srgb,var(--cc) 72%,black);border-radius:24px;padding:6px 14px;font-size:13.5px;font-weight:800;cursor:pointer;user-select:none;transition:transform .1s}
.chip:hover{transform:translateY(-1px)}
.chip.active{background:var(--cc);border-color:var(--cc);color:#fff}
.chip.clear{--cc:#9AA;border-style:dashed;color:var(--muted);background:#fff}

/* ---------- Category colors (apply to chips + tag pills) ---------- */
[data-cat="Festival & Fair"]{--cc:#FF5DA2}
[data-cat="Live Music"]{--cc:#8A5CF6}
[data-cat="Theater & Arts"]{--cc:#FF6B5A}
[data-cat="Museums & History"]{--cc:#B4741E}
[data-cat="Parks & Trails"]{--cc:#22C17B}
[data-cat="Water & Beaches"]{--cc:#12BFC4}
[data-cat="Family Fun"]{--cc:#FF8A3D}
[data-cat="Food & Drink"]{--cc:#E0952A}
[data-cat="Restaurants"]{--cc:#E23636}
[data-cat="Hidden Gems"]{--cc:#0FA9A0}
[data-cat="New Business"]{--cc:#1E9FE0}
[data-cat="Local Deal"]{--cc:#12965A}
[data-cat="Bingo"]{--cc:#9B5DE5}
[data-cat="Farms & U-Pick"]{--cc:#4FAE3B}
[data-cat="Nature & Eco"]{--cc:#2FA36B}
[data-cat="Markets"]{--cc:#F08A24}
[data-cat="Sports & Races"]{--cc:#1E7FD0}
[data-cat="Kids & Seasonal"]{--cc:#FF6FB0}
[data-cat="Holiday"]{--cc:#E23636}
[data-cat="Community"]{--cc:#12A7B4}

/* ---------- Listing cards ---------- */
.results{padding:20px 0 44px}
.group-head{display:flex;align-items:center;gap:12px;margin:30px 0 12px}
.group-head h3{font-size:26px;color:var(--ink);background:var(--sun);display:inline-block;padding:4px 16px;border-radius:14px;box-shadow:var(--shadow);transform:rotate(-1deg)}
.group-head .g-count{font-size:13px;color:var(--muted);font-weight:800}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{background:var(--card);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:7px;border:2px solid #fff;transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card .c-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card .c-title{font-family:"Fredoka",sans-serif;font-weight:600;color:var(--ink);font-size:18px;line-height:1.15}
.card .c-meta{font-size:13px;color:var(--muted);font-weight:700}
.card .c-desc{font-size:14.5px;color:#413E4A}
.card .c-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.tag-pill{--cc:#12BFC4;font-size:11.5px;font-weight:800;color:#fff;background:var(--cc);border-radius:16px;padding:3px 10px}
.tag-pill.soft{background:color-mix(in srgb,var(--cc) 15%,white);color:color-mix(in srgb,var(--cc) 72%,black)}
.tag-pill.town{--cc:#8A5CF6;background:#F1ECFF;color:#6A3FD0}
.tag-pill.when{--cc:#1E9FE0;background:#E4F4FE;color:#1470A8}
.price-pill{white-space:nowrap;font-weight:900;font-size:13px;color:#0E7A55;background:#E4F9EF;border:2px solid #BDEBD3;padding:5px 12px;border-radius:20px;text-align:center}
.price-pill.paid{color:#B23A00;background:#FFF0E2;border-color:#FFD3AE}
.card a.c-src{font-size:12.5px;color:var(--ocean);font-weight:800}
.card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.act{font-size:12.5px;font-weight:800;color:var(--ocean);background:#EAF4FE;border:1px solid #CDE7FA;border-radius:16px;padding:5px 11px;white-space:nowrap}
.act:hover{background:var(--ocean);color:#fff;text-decoration:none}
.empty{text-align:center;color:var(--muted);padding:54px 20px;font-size:17px;font-weight:700}

/* ---------- Info panels ---------- */
.panel{background:#fff;border-radius:18px;padding:22px 24px;box-shadow:var(--shadow);margin-bottom:16px;border-top:5px solid var(--aqua)}
.panel h3{color:var(--ocean);font-size:20px;margin-bottom:8px}
.panel p{font-size:15px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.panel:nth-child(3n+1){border-top-color:var(--coral)}
.panel:nth-child(3n+2){border-top-color:var(--palm)}
.panel:nth-child(3n){border-top-color:var(--grape)}
.callout{background:#FFF6DC;border-left:6px solid var(--sun);padding:14px 18px;border-radius:12px;margin:16px 0;font-size:14.5px;font-weight:600}
.callout strong{color:var(--kw-red)}

/* ---------- Agent CTA ---------- */
.agent-cta{background:linear-gradient(135deg,var(--grape),var(--ocean));color:#fff;border-radius:22px;padding:30px;text-align:center;margin:26px 0;box-shadow:var(--shadow-lg)}
.agent-cta h2{color:#fff;font-size:28px}
.agent-cta p{font-weight:600}
.agent-cta .web{color:var(--sun);font-weight:900;font-size:22px;margin-top:8px}
.agent-lockup{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:18px;flex-wrap:wrap}
.agent-lockup .photo{width:80px;height:98px;border-radius:14px;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;text-align:center;overflow:hidden;font-weight:700}
.agent-lockup .photo img{width:100%;height:100%;object-fit:cover}
.agent-lockup .logo{width:156px;height:80px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted);text-align:center;overflow:hidden;font-weight:700}
.agent-lockup .logo img{width:100%;height:100%;object-fit:contain}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#D9D5E2;font-size:13px;text-align:center;padding:26px 18px;margin-top:20px}
.site-footer a{color:var(--sun)}
.disclaimer{font-size:12px;color:#B7B2C4;max-width:780px;margin:8px auto 0;font-weight:600}

/* ---------- Advertise page ---------- */
.ad-reach{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:18px 0 8px}
.reach-item{background:#fff;border-radius:18px;padding:20px;text-align:center;box-shadow:var(--shadow);border-bottom:5px solid var(--sun)}
.reach-big{font-family:"Fredoka",sans-serif;font-size:30px;color:var(--ocean);font-weight:700}
.reach-small{font-size:14px;color:var(--muted);font-weight:700;margin-top:4px}
.ad-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:14px 0 6px}
.ad-step{background:#fff;border-radius:16px;padding:18px;box-shadow:var(--shadow);border-top:5px solid var(--coral)}
.ad-step .n{display:inline-flex;width:32px;height:32px;border-radius:50%;background:var(--coral);color:#fff;align-items:center;justify-content:center;font-weight:900;font-family:"Fredoka",sans-serif;margin-bottom:8px}
.ad-step h4{font-size:17px;margin-bottom:4px}
.ad-step p{font-size:14px;color:var(--muted);font-weight:600;margin:0}
.ad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin-top:14px}
.ad-card{background:#fff;border-radius:20px;padding:20px 22px;box-shadow:var(--shadow);border:3px solid #fff;display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s}
.ad-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--sun)}
.ad-card-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ad-ico{font-size:28px}
.ad-card-head h3{font-size:21px;color:var(--ink)}
.ad-desc{font-size:14.5px;color:var(--muted);font-weight:600;margin:0 0 14px;flex:1}
.tiers{display:flex;flex-direction:column;gap:9px}
.tier{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border-radius:14px;padding:10px 14px}
.tier-info{display:flex;flex-direction:column}
.tier-size{font-weight:800;font-size:14px;color:var(--ink)}
.tier-price{font-family:"Fredoka",sans-serif;font-size:18px;color:var(--palm);font-weight:600}
.tier-btn{background:var(--palm);color:#fff;font-weight:800;padding:9px 15px;border-radius:22px;font-size:14px;white-space:nowrap;box-shadow:var(--shadow)}
.tier-btn:hover{background:#17a566;text-decoration:none;transform:translateY(-1px)}
.tier-btn.contact{background:var(--ocean)}
.tier-btn.contact:hover{background:#1580b8}
.ad-note{background:#FFF6DC;border-left:6px solid var(--sun);padding:14px 18px;border-radius:12px;margin:20px 0;font-size:14px;font-weight:600}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .hero h1{font-size:38px}
  .controls{top:0}
  .hdr-nav{width:100%;overflow:auto}
  .group-head h3{font-size:22px}
  .tier{flex-direction:column;align-items:stretch;text-align:center}
}
