/* ============================================================
   dipshticks — shared stylesheet
   Brand palette pulled from the logo.
============================================================ */
:root{
  --cream:#ffffff;        /* logo background = white */
  --cream-deep:#eaf3e6;   /* soft green tint */
  --herb:#54ad42;         /* bright logo green */
  --herb-dark:#2c6e35;    /* dark logo green */
  --pepper:#234d27;       /* deep green text */
  --tomato:#ee7b2f;       /* carrot orange accent */
  --butter:#f1c34d;       /* warm yellow */
  --celery:#9bd24a;       /* celery light green */
  --ink:#2a3a2c;
  --muted:#6f8270;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(43,43,40,.10);
  --radius:18px;
  --font-display:'Fredoka',sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--cream);
  background-image:radial-gradient(var(--cream-deep) 1.2px, transparent 1.2px);
  background-size:22px 22px;
}
h1,h2,h3,.brand{font-family:var(--font-display); line-height:1.05; margin:0}
a{color:var(--herb-dark)}
.wrap{max-width:1120px; margin:0 auto; padding:0 22px}

.btn{
  display:inline-block; border:none; cursor:pointer; font-family:var(--font-display);
  font-size:1rem; padding:13px 22px; border-radius:999px; text-decoration:none;
  background:var(--herb); color:#fff; box-shadow:0 6px 0 var(--herb-dark);
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 var(--herb-dark)}
.btn.alt{background:var(--tomato); box-shadow:0 6px 0 #b23f2c}
.btn.alt:active{box-shadow:0 2px 0 #b23f2c}
.btn.ghost{background:#fff; color:var(--herb-dark); box-shadow:0 6px 0 var(--cream-deep)}
.btn.small{font-size:.85rem; padding:9px 16px; box-shadow:0 4px 0 var(--herb-dark)}

/* NAV */
header.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(6px);
  background:rgba(255,255,255,.88); border-bottom:2px solid var(--cream-deep)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding:10px 22px}
.brand{display:flex; align-items:center; gap:8px; font-size:1.6rem; color:var(--pepper); text-decoration:none}
.brand .logo-img{height:46px; width:auto; display:block}
nav.links{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
nav.links a{font-family:var(--font-display);font-size:.98rem;color:var(--ink);text-decoration:none;
  padding:8px 12px;border-radius:999px}
nav.links a:hover{background:var(--cream-deep)}
nav.links a.active{background:var(--herb); color:#fff}
nav.links a.cta{background:var(--tomato); color:#fff; box-shadow:0 4px 0 #b23f2c}

/* PAGE HEADER (interior pages) */
.page-head{text-align:center; padding:54px 0 10px}
.page-head .eyebrow{color:var(--tomato)}
.page-head h1{font-size:clamp(2.2rem,5vw,3.4rem); color:var(--pepper); margin-top:6px}
.page-head p{color:var(--muted); max-width:620px; margin:12px auto 0; font-size:1.1rem}

/* HERO */
.hero{padding:64px 0 40px; text-align:center; position:relative; overflow:hidden}
.hero h1{font-size:clamp(2.6rem,7vw,5rem); color:var(--pepper); letter-spacing:-.5px}
.hero h1 .dip{color:var(--herb-dark)}
.hero h1 .stick{color:var(--herb)}
.tag{display:inline-block; background:var(--butter); color:#5a4710; font-family:var(--font-display);
  padding:6px 16px; border-radius:999px; transform:rotate(-2deg); margin-bottom:18px; font-size:.95rem}
.hero .hero-subhead{font-family:var(--font-display); font-size:clamp(1.4rem,3.2vw,2rem);
  color:var(--herb-dark); margin:14px auto 0; max-width:640px}
.hero p.sub{display:inline-block; font-size:1.1rem; color:var(--herb-dark); max-width:640px;
  margin:18px auto 28px; background:var(--cream-deep); padding:18px 24px; border-radius:18px;
  border:2px solid #dcebd3; line-height:1.55}
.hero .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.floaties{position:absolute; inset:0; pointer-events:none}
.floaties span{position:absolute; font-size:2rem; opacity:.5; animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-14px) rotate(8deg)}}

/* STATS strip */
.strip{background:var(--herb); color:#fff; margin-top:30px}
.strip .wrap{display:flex; justify-content:space-around; gap:14px; padding:18px 22px; flex-wrap:wrap; text-align:center}
.strip b{font-family:var(--font-display); font-size:1.7rem; display:block}
.strip small{opacity:.9; font-weight:600; letter-spacing:.04em}

section{padding:54px 0}
.eyebrow{font-family:var(--font-display); color:var(--tomato); text-transform:uppercase; letter-spacing:.16em; font-size:.85rem}
.sec-head{margin-bottom:26px}
.sec-head h2{font-size:clamp(1.8rem,4vw,2.7rem); color:var(--pepper); margin-top:6px}
.sec-head p{color:var(--muted); max-width:640px; margin:10px 0 0; font-size:1.05rem}
.sec-head .row{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}

/* MAP */
#map{height:460px; border-radius:var(--radius); box-shadow:var(--shadow); border:3px solid #fff; z-index:1; background:var(--cream-deep)}
.map-legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; color:var(--muted); font-weight:600; font-size:.92rem}
.map-legend i{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:6px;vertical-align:-2px}
.map-fallback{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--muted);font-family:var(--font-display);padding:20px;flex-direction:column;gap:6px}

/* GRID + CARDS */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px}
.card{background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .12s ease}
.card:hover{transform:translateY(-5px)}
.card .thumb{height:140px; display:flex; align-items:center; justify-content:center; font-size:3.4rem;
  background:linear-gradient(135deg,var(--cream-deep),#fff)}
.card .body{padding:16px 18px 20px}
.card h3{font-size:1.2rem; color:var(--pepper)}
.card .meta{color:var(--muted); font-size:.85rem; font-weight:700; margin:6px 0 10px; text-transform:uppercase; letter-spacing:.05em}
.card p{margin:0; font-size:.95rem; color:#54524a}
.pill{display:inline-block;background:var(--cream-deep);color:var(--herb-dark);font-weight:700;
  font-size:.72rem;padding:3px 10px;border-radius:999px;margin-top:12px}

/* BLOG */
.blog-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px}
.blog-card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .12s ease; display:flex; flex-direction:column}
.blog-card:hover{transform:translateY(-5px)}
.blog-card a.cover-link{display:block}
.blog-card .cover{width:100%; height:190px; object-fit:cover; display:block; background:var(--cream-deep)}
.blog-card .cover.placeholder{display:flex; align-items:center; justify-content:center; font-size:3rem}
.blog-card .body{padding:18px 20px 22px; flex:1; display:flex; flex-direction:column}
.blog-card h3{font-size:1.3rem; color:var(--pepper); margin:6px 0}
.blog-card h3 a{color:inherit; text-decoration:none}
.blog-card h3 a:hover{color:var(--herb-dark)}
.blog-card .excerpt{color:#54524a; font-size:.96rem; margin:0 0 14px}
.blog-card .byline{color:var(--muted); font-size:.82rem; font-weight:700; margin-top:auto}
.blog-tag{display:inline-block; background:var(--cream-deep); color:var(--herb-dark); font-weight:700;
  font-size:.72rem; padding:3px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em}

/* SINGLE POST */
.post{max-width:760px; margin:0 auto}
.post .cover{width:100%; max-height:420px; object-fit:cover; border-radius:var(--radius); margin-bottom:22px; box-shadow:var(--shadow)}
.post h1{font-size:clamp(2rem,4.5vw,3rem); color:var(--pepper); margin:8px 0 10px}
.post .byline{color:var(--muted); font-weight:700; font-size:.9rem; margin-bottom:22px}
.post .body{font-size:1.1rem; line-height:1.7; color:#3a3a34}
.post .body p{margin:0 0 18px}
.post .back{display:inline-block; margin-top:26px}

/* FILTER BAR */
.filter-bar{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:28px}
.filter-bar button{cursor:pointer; font-family:var(--font-display); font-size:.95rem; padding:9px 18px;
  border-radius:999px; border:2px solid var(--cream-deep); background:#fff; color:var(--ink);
  transition:all .12s ease}
.filter-bar button:hover{border-color:var(--herb)}
.filter-bar button.active{background:var(--herb); color:#fff; border-color:var(--herb)}

/* EMPTY STATES */
.empty-state{grid-column:1 / -1; text-align:center; padding:44px 24px; color:var(--muted);
  background:#fff; border:2px dashed var(--cream-deep); border-radius:var(--radius)}
.empty-state .big{font-size:2.4rem; display:block; margin-bottom:8px}
.empty-state h3{color:var(--pepper); font-size:1.3rem; margin-bottom:6px}
.empty-state a{font-weight:700}

/* REVIEWS */
.reviews{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:20px}
.review{background:#fff; border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); position:relative}
.review .stars{color:var(--butter); font-size:1.1rem; letter-spacing:2px}
.review h3{font-size:1.15rem; margin:8px 0 4px; color:var(--pepper)}
.review .where{color:var(--herb); font-weight:700; font-size:.85rem; margin-bottom:8px}
.review p{margin:0; color:#54524a; font-size:.96rem}
.review .who{margin-top:14px; font-weight:700; color:var(--muted); font-size:.85rem}
.review-photo{width:100%; height:170px; object-fit:cover; border-radius:12px; margin-bottom:12px}

/* FORMS */
.panel{background:#fff; border-radius:24px; padding:34px; box-shadow:var(--shadow)}
.panel.green{background:var(--herb-dark); color:#fff}
.panel.green h2,.panel.green label{color:#fff}
.panel.green .eyebrow{color:var(--butter)}
.panel.green .sec-head p{color:rgba(255,255,255,.82)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px}
.form-grid .full{grid-column:1 / -1}
label{display:block; font-family:var(--font-display); font-size:.92rem; margin-bottom:6px}
input,select,textarea{width:100%; padding:12px 14px; border-radius:12px; border:2px solid #e6e6e0;
  font-family:var(--font-body); font-size:1rem; background:#fff; color:var(--ink)}
.panel.green input,.panel.green select,.panel.green textarea{border-color:transparent}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--butter)}
textarea{min-height:110px; resize:vertical}
.note{font-size:.85rem; color:var(--muted); margin-top:14px}
.panel.green .note{color:rgba(255,255,255,.72)}
.toast{display:none; background:var(--butter); color:#5a4710; padding:14px 18px; border-radius:12px;
  font-weight:700; margin-top:16px}
.toast.show{display:block; animation:pop .3s ease}
@keyframes pop{from{transform:scale(.95);opacity:0}}
.config-warn{background:#fff7e6;border:1px solid var(--butter);color:#7a5b13;padding:10px 14px;
  border-radius:10px;font-size:.85rem;margin-top:12px}

/* SUBMIT TOGGLE */
.toggle-tabs{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap}
.toggle-tabs button{flex:1; min-width:160px; cursor:pointer; font-family:var(--font-display);
  font-size:1rem; padding:14px 16px; border-radius:14px; border:2px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08); color:#fff; transition:all .12s ease}
.toggle-tabs button.active{background:#fff; color:var(--herb-dark); border-color:#fff}
.subform{display:none}
.subform.active{display:block}

/* ADMIN DASHBOARD */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; margin-bottom:22px}
.stat-card{background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:18px; text-align:center}
.stat-card b{font-family:var(--font-display); font-size:2rem; color:var(--herb-dark); display:block; line-height:1}
.stat-card small{color:var(--muted); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em}
.stat-card.alert b{color:var(--tomato)}
.dash-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-bottom:10px}
.dash-box{background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:20px 22px}
.dash-box h3{font-size:1.05rem; color:var(--pepper); margin-bottom:14px}
.bar-row{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:.9rem}
.bar-label{width:120px; flex:none; font-weight:600}
.bar{flex:1; height:10px; background:var(--cream-deep); border-radius:999px; overflow:hidden}
.bar-fill{display:block; height:100%; background:var(--herb); border-radius:999px}
.bar-n{width:26px; text-align:right; font-weight:700; color:var(--muted)}
.lead-row{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--cream-deep); font-size:.92rem}
.lead-row:last-child{border-bottom:none}
.lead-row span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lead-row b{flex:none; color:var(--herb-dark)}

/* ADMIN */
.admin-tabs{display:flex; gap:8px; justify-content:center; margin:10px 0 26px; flex-wrap:wrap}
.admin-tabs button{cursor:pointer; font-family:var(--font-display); font-size:.95rem; padding:10px 18px;
  border-radius:999px; border:2px solid var(--cream-deep); background:#fff; color:var(--ink)}
.admin-tabs button.active{background:var(--herb); color:#fff; border-color:var(--herb)}
.admin-tabs .count{display:inline-block; background:var(--tomato); color:#fff; border-radius:999px;
  font-size:.72rem; padding:1px 8px; margin-left:6px; vertical-align:1px}
.queue-panel{display:none}
.queue-panel.active{display:block}
.admin-row{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:14px;
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start}
.admin-row .stars{color:var(--butter)}
.admin-row h3{color:var(--pepper);font-size:1.1rem;margin:4px 0}
.admin-row .meta{color:var(--muted);font-size:.85rem;font-weight:700}
.admin-row .actions{display:flex;flex-direction:column;gap:8px}
.btn.approve{background:var(--herb);box-shadow:0 4px 0 var(--herb-dark)}
.btn.reject{background:#e0573e;box-shadow:0 4px 0 #b23f2c}
.admin-empty{text-align:center;color:var(--muted);padding:40px;font-family:var(--font-display)}
.login-box{max-width:380px;margin:60px auto}

/* FOOTER */
footer{background:var(--pepper); color:#cfe3d0; padding:40px 0; text-align:center; margin-top:30px}
footer .brand{justify-content:center; color:#fff; margin-bottom:10px}
footer a{color:var(--butter)}
footer small{display:block; margin-top:14px; opacity:.6}

@media(max-width:760px){
  .wrap{padding:0 16px}
  section{padding:40px 0}
  .hero{padding:44px 0 28px}
  .page-head{padding:36px 0 6px}

  /* NAV: brand centered on top, links wrap below */
  .nav .wrap{flex-wrap:wrap; justify-content:center; gap:8px; padding:10px 12px}
  .brand{font-size:1.3rem}
  .brand .logo-img{height:38px}
  nav.links{width:100%; justify-content:center; gap:5px; flex-wrap:wrap}
  nav.links a{padding:7px 11px; font-size:.92rem}

  /* Hero */
  .hero p.sub{font-size:1rem; padding:14px 18px; margin-left:2px; margin-right:2px}

  /* Stats: 2 per row */
  .strip .wrap{gap:12px}
  .strip .wrap > div{flex:1 1 40%; min-width:120px}
  .strip b{font-size:1.4rem}

  /* Section header rows stack */
  .sec-head .row{flex-direction:column; align-items:flex-start; gap:12px}

  /* Forms full-width, choice tabs stacked & easy to tap */
  .form-grid{grid-template-columns:1fr}
  .panel{padding:22px}
  .toggle-tabs{flex-direction:column}
  .toggle-tabs button{min-width:0; width:100%}

  /* Map a touch shorter on phones */
  #map{height:380px !important}

  /* Admin */
  .admin-row{grid-template-columns:1fr}
  .admin-row .actions{flex-direction:row}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:400px){
  .brand .logo-img{height:34px}
  nav.links a{padding:6px 9px; font-size:.86rem}
  .hero h1{font-size:2.4rem}
}