/* =====================================================================
   CampTracker — Design tokens
   Palette grounded in topographic maps, canvas tents and campfire embers.
   ===================================================================== */
:root{
  --ink:#1B2B22;          /* deep forest ink - nav, headings, dark surfaces */
  --ink-soft:#2E4033;
  --paper:#F3EFE4;        /* topo paper - page background */
  --paper-alt:#FBF9F3;    /* card surface */
  --moss:#4B7A51;         /* visited / primary */
  --moss-dark:#365A3B;
  --moss-tint:#E4EDE1;
  --ember:#D98A3D;        /* planned / secondary accent */
  --ember-dark:#B56B28;
  --ember-tint:#F6E8D5;
  --line:#DDD6C4;
  --ink-muted:#6b6a5e;
  --shadow-1:0 1px 2px rgba(27,43,34,.07), 0 6px 18px rgba(27,43,34,.07);
  --shadow-2:0 6px 14px rgba(27,43,34,.10), 0 20px 40px rgba(27,43,34,.14);
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',-apple-system,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--ink);margin:0 0 .35em;line-height:1.15;}
p{margin:0 0 1em;color:var(--ink-soft);}
a{color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}

/* =====================================================================
   Top navigation — trail-signpost style, not a generic pill navbar
   ===================================================================== */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:var(--ink);
  color:#EDE9DC;
  border-bottom:3px solid var(--moss);
}
.site-nav-inner{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:28px;height:64px;
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;flex-shrink:0;}
.brand-mark{color:var(--moss);font-size:19px;}
.brand-text{font-family:'Fraunces',serif;font-weight:600;font-size:17px;}
.brand-text em{display:block;font-style:normal;font-weight:400;font-size:10.5px;letter-spacing:.03em;color:#A9A490;line-height:1;}
.nav-tabs{display:flex;gap:4px;margin-left:auto;align-items:center;}
.nav-tabs a{
  text-decoration:none;color:#C9C4B2;font-weight:600;font-size:14.5px;
  padding:10px 16px;border-radius:8px 8px 0 0;position:relative;transition:color .15s;
}
.nav-tabs a:hover{color:#fff;}
.nav-tabs a.active{color:#fff;}
.nav-tabs a.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-3px;height:3px;background:var(--ember);border-radius:2px 2px 0 0;
}
.nav-external{color:#C9C4B2 !important;}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{width:22px;height:2px;background:#fff;display:block;border-radius:2px;}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:var(--ink);color:#EDE9DC;
  padding:56px 0 40px;
}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:
    repeating-radial-gradient(circle at 18% 30%, transparent 0, transparent 26px, rgba(75,122,81,.9) 27px, transparent 28px),
    repeating-radial-gradient(circle at 85% 75%, transparent 0, transparent 34px, rgba(217,138,61,.7) 35px, transparent 36px);
  background-size: 240px 240px, 320px 320px;
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end;}
.hero h1{font-size:clamp(30px,4vw,44px);color:#fff;max-width:13ch;}
.hero p{color:#C9C4B2;max-width:46ch;font-size:16px;}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.hero-stat{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md);padding:16px 14px;text-align:left;backdrop-filter:blur(2px);
}
.hero-stat .num{font-family:'Fraunces',serif;font-size:26px;color:#fff;display:block;font-weight:600;}
.hero-stat .lbl{font-size:12.5px;color:#B7B29E;}

/* =====================================================================
   Map section
   ===================================================================== */
.map-section{padding:36px 0 8px;}
.map-section-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.map-legend{display:flex;gap:18px;font-size:13.5px;color:var(--ink-muted);font-weight:500;}
.legend-dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:-1px;box-shadow:0 0 0 3px rgba(0,0,0,.05);}
.legend-dot.green{background:var(--moss);}
.legend-dot.amber{background:var(--ember);}
#map{
  height:480px;width:100%;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);border:1px solid var(--line);
}
.leaflet-popup-content-wrapper{border-radius:12px;font-family:'Inter',sans-serif;}
.map-popup{min-width:170px;}
.map-popup img{width:100%;height:90px;object-fit:cover;border-radius:8px;margin-bottom:8px;}
.map-popup h4{font-size:14px;margin:0 0 4px;}
.map-popup .mp-status{font-size:11.5px;font-weight:700;text-transform:none;}
.map-popup .mp-status.visited{color:var(--moss-dark);}
.map-popup .mp-status.planned{color:var(--ember-dark);}
.map-popup button{
  margin-top:8px;background:var(--ink);color:#fff;border:none;border-radius:7px;
  padding:6px 10px;font-size:12.5px;font-weight:600;cursor:pointer;width:100%;
}

/* =====================================================================
   Log Perjalanan — "stamped ticket" cards (avoids generic identical SaaS cards)
   ===================================================================== */
.log-section{padding:44px 0 60px;}
.section-head{margin-bottom:22px;}
.section-head h2{font-size:26px;}
.section-head p{max-width:60ch;}

.log-list{display:flex;flex-direction:column;gap:14px;}
.log-card{
  display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;
  background:var(--paper-alt);border-radius:var(--radius-md);padding:14px;
  box-shadow:var(--shadow-1);cursor:pointer;position:relative;
  border:1px solid transparent;transition:border-color .15s, transform .15s;
}
.log-card:hover{border-color:var(--moss);transform:translateY(-2px);}
.log-thumb{width:120px;height:84px;border-radius:9px;object-fit:cover;background:var(--moss-tint);}
.log-thumb-placeholder{width:120px;height:84px;border-radius:9px;background:var(--moss-tint);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--moss);}
.log-body h3{font-size:17px;margin-bottom:2px;}
.log-meta{font-size:13px;color:var(--ink-muted);}
.log-desc{font-size:13.5px;color:var(--ink-soft);margin:6px 0 0;max-width:60ch;}
.log-stamp{
  justify-self:end;align-self:center;
  border:2px solid var(--moss);color:var(--moss-dark);
  font-family:'Fraunces',serif;font-weight:600;font-size:12.5px;
  padding:6px 12px;border-radius:8px;transform:rotate(-4deg);
  white-space:nowrap;background:var(--moss-tint);
}
.log-empty{padding:36px;text-align:center;color:var(--ink-muted);background:var(--paper-alt);border-radius:var(--radius-md);}

/* =====================================================================
   Camp Ground listing page
   ===================================================================== */
.page-head{padding:40px 0 8px;}
.page-head h1{font-size:30px;}
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 30px;}
.filter-chip{
  border:1px solid var(--line);background:var(--paper-alt);color:var(--ink-soft);
  padding:8px 15px;border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.filter-chip:hover{border-color:var(--moss);}
.filter-chip.active{background:var(--ink);border-color:var(--ink);color:#fff;}

.cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;padding-bottom:60px;}
.cg-card{
  background:var(--paper-alt);border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-1);cursor:pointer;transition:transform .15s, box-shadow .15s;
  display:flex;flex-direction:column;
}
.cg-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);}
.cg-thumb{width:100%;height:150px;object-fit:cover;background:var(--ember-tint);}
.cg-thumb-placeholder{width:100%;height:150px;background:var(--ember-tint);display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--ember-dark);}
.cg-card-body{padding:16px 16px 18px;flex:1;display:flex;flex-direction:column;gap:6px;}
.cg-region{font-size:12px;font-weight:700;color:var(--moss-dark);}
.cg-card-body h3{font-size:16.5px;}
.cg-card-body p{font-size:13.5px;color:var(--ink-soft);margin:0;flex:1;}
.cg-visited-tag{
  align-self:flex-start;font-size:11.5px;font-weight:700;color:var(--moss-dark);
  background:var(--moss-tint);padding:3px 9px;border-radius:6px;
}
.cg-empty{grid-column:1/-1;text-align:center;padding:50px;color:var(--ink-muted);}

/* =====================================================================
   Modal (camp detail + campground detail)
   ===================================================================== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,26,20,.55);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;
  z-index:9999;opacity:0;pointer-events:none;transition:opacity .18s;overflow-y:auto;
}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal-box{
  background:var(--paper-alt);border-radius:var(--radius-lg);max-width:720px;width:100%;
  box-shadow:var(--shadow-2);transform:translateY(14px) scale(.985);transition:transform .18s;
  overflow:hidden;margin-bottom:32px;
}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1);}
.modal-hero{position:relative;height:220px;background:var(--moss-tint);}
.modal-hero img{width:100%;height:100%;object-fit:cover;}
.modal-hero-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--moss);}
.modal-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(27,43,34,.75);color:#fff;border:none;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.modal-status{position:absolute;top:14px;left:14px;padding:5px 12px;border-radius:7px;font-size:12.5px;font-weight:700;color:#fff;}
.modal-status.visited{background:var(--moss-dark);}
.modal-status.planned{background:var(--ember-dark);}
.modal-body{padding:26px 28px 32px;}
.modal-body h2{font-size:23px;margin-bottom:4px;}
.modal-sub{color:var(--ink-muted);font-size:13.5px;margin-bottom:18px;}

.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:18px 0;}
.fact{background:var(--paper);border-radius:10px;padding:12px 14px;}
.fact-label{font-size:11.5px;font-weight:700;color:var(--ink-muted);display:block;margin-bottom:3px;}
.fact-value{font-size:14px;font-weight:600;}
.fact-value a{color:var(--moss-dark);text-decoration:none;}

.social-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 4px;}
.social-pill{
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;
  text-decoration:none;color:var(--ink-soft);
}
.social-pill:hover{border-color:var(--moss);color:var(--moss-dark);}

.divider{border:none;border-top:1px solid var(--line);margin:24px 0;}

.timeline{position:relative;padding-left:26px;}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line);}
.tl-entry{position:relative;padding-bottom:26px;}
.tl-entry:last-child{padding-bottom:0;}
.tl-entry::before{
  content:"";position:absolute;left:-26px;top:3px;width:12px;height:12px;border-radius:50%;
  background:var(--moss);border:3px solid var(--paper-alt);box-shadow:0 0 0 2px var(--moss);
}
.tl-when{font-size:12.5px;font-weight:700;color:var(--moss-dark);}
.tl-title{font-size:15.5px;font-weight:700;margin:2px 0 6px;}
.tl-story{font-size:14px;color:var(--ink-soft);white-space:pre-line;}
.tl-photos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.tl-photos img{width:88px;height:66px;object-fit:cover;border-radius:8px;cursor:zoom-in;}

.review-block{background:var(--paper);border-radius:12px;padding:16px 18px;margin:14px 0;}
.rating-stars{color:var(--ember-dark);font-weight:700;font-size:15px;margin-bottom:4px;}
.essentials-list, .rules-text{font-size:14px;color:var(--ink-soft);white-space:pre-line;}
.detail-gallery{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px;}
.detail-gallery img{width:96px;height:72px;object-fit:cover;border-radius:8px;cursor:zoom-in;}

/* =====================================================================
   Lightbox — tap a photo to zoom in, tap anywhere to zoom back out
   ===================================================================== */
.lightbox-overlay{
  position:fixed;inset:0;background:rgba(10,14,10,.9);
  display:flex;align-items:center;justify-content:center;padding:24px;
  z-index:20000;opacity:0;pointer-events:none;transition:opacity .22s ease;cursor:zoom-out;
}
.lightbox-overlay.open{opacity:1;pointer-events:auto;}
.lightbox-overlay img{
  max-width:92vw;max-height:88vh;border-radius:14px;object-fit:contain;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  transform:scale(.82);transition:transform .28s cubic-bezier(.22,.9,.32,1.1);
  cursor:zoom-out;
}
.lightbox-overlay.open img{transform:scale(1);}
.lightbox-caption{
  position:absolute;bottom:26px;left:0;right:0;text-align:center;
  color:#EDE9DC;font-size:13.5px;opacity:0;transition:opacity .22s .1s;pointer-events:none;
}
.lightbox-overlay.open .lightbox-caption{opacity:.85;}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer{background:var(--ink);color:#C9C4B2;padding:40px 0 10px;margin-top:20px;}
.site-footer-inner{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.site-footer .brand-mark{color:var(--moss);margin-right:6px;}
.site-footer p{color:#9B967F;font-size:13.5px;max-width:38ch;margin-top:8px;}
.footer-links{display:flex;flex-direction:column;gap:8px;font-size:14px;}
.footer-links a{text-decoration:none;color:#C9C4B2;}
.footer-links a:hover{color:#fff;}
.site-footer-bottom{text-align:center;font-size:12px;color:#77735F;padding:24px 24px 0;}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 860px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-stats{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 680px){
  .nav-toggle{display:flex;}
  .nav-tabs{
    position:absolute;top:64px;left:0;right:0;background:var(--ink);
    flex-direction:column;align-items:stretch;padding:6px 20px 14px;gap:0;
    display:none;border-bottom:3px solid var(--moss);
  }
  .nav-tabs.open{display:flex;}
  .nav-tabs a{padding:12px 4px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.08);}
  .nav-tabs a.active::after{display:none;}
  .log-card{grid-template-columns:84px 1fr;}
  .log-stamp{grid-column:1/-1;justify-self:start;margin-top:6px;}
  .log-thumb, .log-thumb-placeholder{width:84px;height:64px;}
  #map{height:360px;}
  .modal-body{padding:20px 18px 26px;}
  .hero{padding:40px 0 30px;}
}