:root{
  --bg-0:#0B1210; --bg-1:#0F1A17; --card:#101C19; --line:#1C2A25;
  --fg-0:#EAF5F0; --fg-1:#B9CCC4; --green:#2FAE6E; --blue:#3BA1C9; --gold:#EBCB64; --ring:#6ED8A0;
  --photo-ar: 16/9;
  --photo-min-h: 280px;
  --card-pad: 20px;
}

/* Base */
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  color:var(--fg-0);
  background:
    radial-gradient(circle at 30% 20%, rgba(47,174,110,.25) 0%, rgba(47,174,110,.15) 25%, rgba(15,25,22,1) 100%),
    linear-gradient(180deg,#0B1210 0%, #0F1A17 100%);
  background-blend-mode:screen;
  background-attachment:fixed;
}

a, a:visited, a:hover, a:active { text-decoration:none; color:inherit; }

.wrap{max-width:1100px;margin:auto;padding:24px}

/* Layout */
.park-main{ width:100%; padding:60px 0; display:flex; justify-content:center; }
.content-column{
  width:90%; max-width:1100px; padding:0 24px; margin:0 auto;
  display:flex; flex-direction:column; gap:32px;
  background:none; border:none; box-shadow:none; backdrop-filter:none; border-radius:0;
}
.content-column .card{ width:100%; margin:0; }
.content-column .card:hover{ transform:none; box-shadow:0 8px 30px rgba(0,0,0,.25) }

/* Header */
.site-header{
  position: relative; z-index: 3000;
  border-bottom:1px solid var(--line);
  background:rgba(11,18,16,.6);
  backdrop-filter:saturate(1.2) blur(6px);
}
.logo{font-weight:800;letter-spacing:.3px;color:var(--fg-0);margin:0}
.logo img{height:42px;filter:brightness(1.05) saturate(1.1);transition:opacity .2s ease}
.logo img:hover{opacity:.8}
.header-flex{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.25rem;
  padding:1rem 1.5rem; position:relative;
}
.logo-wrap{display:flex;align-items:center;gap:.5rem}
.header-flex .tag{font-size:1rem;color:#b6d8bf;opacity:.9;margin:0;padding:0}

/* Menu */
.hamburger{
  position:absolute; right:1.5rem; top:1rem;
  width:40px; height:40px; border-radius:10px;
  background:#0d1916; border:1px solid var(--line); color:var(--fg-0);
  display:grid; place-items:center; cursor:pointer;
}
.hamburger:hover{ background:rgba(47,174,110,0.25); border-color:rgba(47,174,110,0.45); box-shadow:0 6px 25px rgba(47,174,110,0.35); }
.hamburger:focus{ outline:none; box-shadow:0 0 0 2px rgba(47,174,110,0.25); }
.hamburger .hamburger-bar{ width:18px; height:2px; background:var(--fg-0); position:relative; display:block; }
.hamburger .hamburger-bar::before,
.hamburger .hamburger-bar::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--fg-0); }
.hamburger .hamburger-bar::before{ top:-6px; } .hamburger .hamburger-bar::after{ top:6px; }

.menu-panel{
  position:absolute; right:1.5rem; top:calc(100% + 10px);
  width:320px; max-width:calc(100vw - 2rem);
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  padding:12px; z-index:4000;
}
.menu-card{ display:flex; flex-direction:column; gap:10px; }
.menu-title{ margin:.25rem 0 .5rem 0; font-size:1.1rem; }
.menu-label{ font-size:.9rem; color:var(--fg-1); }
.menu-card input{
  padding:.6rem .7rem; border-radius:10px; border:1px solid var(--line);
  background:#0d1916; color:var(--fg-0);
}
.menu-submit{
  margin-top:.25rem; width:100%; border-radius:10px;
  background:#0d1916; border:1px solid var(--line); color:var(--fg-0);
  padding:.6rem .8rem; cursor:pointer;
}
.menu-submit:hover{ background:rgba(47,174,110,0.25); border-color:rgba(47,174,110,0.45); box-shadow:0 6px 25px rgba(47,174,110,0.35); }
.menu-link{ display:inline-block; margin-top:.25rem; color:var(--green); text-decoration:none; }
.menu-link:hover{ text-decoration:underline; }

@media (max-width:520px){
  .hamburger{ right:1rem; top:.75rem; }
  .menu-panel{ right:1rem; width:min(92vw, 360px); }
}

/* Cards / grids */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin:20px 0;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tile{padding:12px;border:1px solid var(--line);border-radius:12px;background:#0f1815}
.tile a {color: var(--green);transition: color 0.25s ease;}
.tile a:hover,.tile a:active,.tile a:focus,.tile a:visited {color: var(--green);text-decoration: none;}
.onecol{display:block}

/* Z-index sanity */
.content-column { isolation: isolate; }
.card { position: relative; z-index: 0; }
.player { position: relative; z-index: 2; }
.slideshow { position: relative; z-index: 0; }
#photos.card { margin-top: 24px; }

/* ===== HERO ===== */
.hero-band{
  position:relative; width:100%;
  background:linear-gradient(135deg,#0e1f1b 0%, #163b2d 35%, #0d3c48 65%, #1b2e2a 100%);
  box-shadow:inset 0 -2px 15px rgba(0,0,0,.4);
}
:root { --wrap-pad: 24px; }
.hero-band.home-hero .wrap{ padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); }

.hero.hero-two-col{
  display:grid; grid-template-columns:1fr 420px; gap:24px;
  padding:3rem 1.5rem; max-width:1100px; margin:0 auto; color:var(--fg-0);
}
.hero-left .hero-park-name{
  font-size:2.6rem;line-height:1.2;font-weight:700;margin:0 0 .25rem 0;
  text-shadow:0 3px 12px rgba(0,0,0,.45);
}
.hero-left .hero-park-meta{color:rgba(230,245,240,.85);margin:.2rem 0 .8rem 0}
.hero-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.btn-chip{
  padding:.45rem .7rem;border-radius:999px;
  background:rgba(15,25,22,.55);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(6px);
}
.btn-chip:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}

.hero-right{align-self:center}
.hero-rotator{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  box-shadow:0 8px 35px rgba(0,0,0,.4);background:rgba(0,0,0,.25);
}
.hero-rotator .hero-frame{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 2s ease-in-out;
}
.hero-rotator .hero-frame.active{opacity:1}
.hero-rotator .placeholder{background:linear-gradient(180deg,#0f1815,#0a1210);box-shadow:inset 0 0 0 1px var(--line)}

@media (max-width:920px){
  .hero-band.home-hero .wrap{ padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); }
  .hero.hero-two-col{grid-template-columns:1fr;text-align:center;padding:2rem 1rem}
  .hero-right{margin-top:.5rem}
}

/* Home hero extras */
.home-hero .home-hero-inner{ padding: 2.5rem 0 2rem; }
.home-hero-title{ margin: 0 0 .25rem 0; font-size: 2.2rem; font-weight: 750; text-shadow: 0 3px 12px rgba(0,0,0,.45); }
.home-hero-sub{ margin: 0 0 1rem 0; color: rgba(230,245,240,.85); }

/* Search */
#searchForm{ max-width: 720px; margin: 10px 0 0 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
#searchInput{ flex: 1 1 420px; min-width: 240px; padding: .65rem .8rem; border-radius: 12px; border: 1px solid var(--line); background: #0d1916; color: var(--fg-0); }
#searchForm .btn.secondary{ background: transparent; border: 1px solid var(--line); }
.home-hero-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.25rem; }
#searchForm .btn, #searchForm .btn.secondary{ padding: .65rem .9rem; border-radius: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

@media (max-width: 700px){
  .hero-band.home-hero .hero-right { display: none !important; }
  .home-hero .home-hero-inner{ display: grid; grid-template-columns: 1fr; gap: 12px; padding: 1.75rem 0 1.25rem; text-align: left; }
  .home-hero-title{ font-size: 1.6rem; margin: 0; }
  .home-hero-sub{ margin: 0; line-height: 1.5; }
  #searchForm{ width: 100%; max-width: none; margin: .5rem 0 0 0; }
  #searchForm .search-row{ display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: stretch; }
  #searchInput{ min-width: 0; height: 44px; padding: 0 .85rem; border-radius: 12px; }
  #searchForm .btn, #searchForm .btn.secondary{ height: 44px; padding: 0 .95rem; border-radius: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
  .home-hero-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: .25rem; }
  .home-hero-actions .btn, .home-hero-actions .btn-chip{ width: 100%; justify-content: center; padding: .7rem .95rem; border-radius: 12px; }
}

/* Map */
.map-wrap{position:relative;display:block;max-width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
#parkMap{display:block;width:100%;height:auto}
.marker-layer{position:absolute;inset:0;width:100%;height:100%}
.marker{fill:var(--gold);stroke:#000;stroke-width:.4;opacity:.9;cursor:pointer;transition:transform .1s ease}
.marker:hover{opacity:1;transform:scale(1.1)}
.marker.active{fill:var(--green)}
.hint{color:var(--fg-1);font-size:.9rem;margin-top:.5rem}


/* --- Video: no fade effects --- */
.player .v{
  width:100%; aspect-ratio:16/9; background:#000; border-radius:12px;
}
/* --- Video placeholder hidden ---*/
.player{ position: relative; }
.player .video-placeholder{
  display:none;
}
.btn{background:#0d1916;border:1px solid var(--line);color:var(--fg-0);padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:focus{outline:2px solid var(--ring);outline-offset:2px}
.video-list{margin-top:.6rem;display:flex;gap:.5rem;flex-wrap:wrap}

/* Photos */
.slideshow{
  position: relative; width: 100%; aspect-ratio: var(--photo-ar); min-height: var(--photo-min-h);
  border-radius: 12px; overflow: hidden; background: #0a1311; box-shadow: inset 0 0 0 1px var(--line);
}
.slide{ position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity 0.8s ease; display: block; }
.slide.active{ opacity: 1; pointer-events: auto; }
.slide img{ width: 100%; height: 100%; object-fit: contain; object-position: center; background: #0a1311; }
.slides-ctrl{ position: relative; display: flex; gap: 10px; margin-top: 10px; }
@media (max-width: 520px){ .slideshow{ --photo-min-h: 220px; aspect-ratio: auto; } }

/* A11y & misc */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.vis-desc{font-size:.9rem;color:var(--fg-1);margin-top:6px}

/* FAB */
.fab-top{
  position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:#0d1916;color:var(--fg-0);
  font-size:20px;line-height:1;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;z-index:999;
}
.fab-top:hover{ background: rgba(47,174,110,0.25); border-color: rgba(47,174,110,0.45); box-shadow: 0 6px 25px rgba(47,174,110,0.35); transform: translateY(-2px); }
.fab-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}

/* Footer */
.site-footer{
  width:100%; margin:0; padding:1.5rem 2rem; border-top:1px solid var(--line);
  background:rgba(11,18,16,.6); backdrop-filter:saturate(1.2) blur(6px);
  color:var(--fg-1); text-align:center; box-shadow: inset 0 1px 12px rgba(0,0,0,0.25);
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  background:
    radial-gradient(circle at 30% 20%, rgba(47,174,110,.25) 0%, rgba(47,174,110,.15) 25%, rgba(15,25,22,1) 100%),
    linear-gradient(180deg,#0B1210 0%, #0F1A17 100%);
  background-blend-mode: screen;
  backdrop-filter: saturate(1.1) blur(4px);
}
.lightbox[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.lb-inner {
  position: relative; width: min(96vw, 1200px); height: min(90vh, 90vh);
  display: grid; grid-template-rows: 1fr auto; gap: 12px; padding: 16px;
  border-radius: 16px; background: rgba(10,19,17,0.55);
  border: 1px solid rgba(47,174,110,0.25);
  box-shadow: 0 10px 50px rgba(0,0,0,.45), inset 0 0 0 1px var(--line);
}
.lb-stage { position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: #0a1311; box-shadow: inset 0 0 0 1px var(--line); }
.lb-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.lb-slide.active{ opacity:1; }
.lb-slide img{ width:100%; height:100%; object-fit:contain; object-position:center; background:#0a1311; }
.lb-ctrl{ display:flex; justify-content:center; gap:10px; }
.lb-prev, .lb-next, .lb-pause{ background:#0d1916; border:1px solid var(--line); color:var(--fg-0); padding:8px 12px; border-radius:10px; cursor:pointer; }
.lb-prev:hover, .lb-next:hover, .lb-pause:hover{ background: rgba(47,174,110,0.25); border-color: rgba(47,174,110,0.45); box-shadow: 0 6px 25px rgba(47,174,110,0.35); }
.lb-close{ position: absolute; top: 10px; right: 12px; width: 42px; height: 42px; border-radius: 10px; display:grid; place-items:center; background:#0d1916; border:1px solid var(--line); color:var(--fg-0); font-size:24px; line-height:1; cursor:pointer; z-index:5; }
.lb-close:hover{ background: rgba(47,174,110,0.25); border-color: rgba(47,174,110,0.45); box-shadow: 0 6px 25px rgba(47,174,110,0.35); }

/* A11y / focus */
html { scroll-behavior: smooth; }
button:focus, a:focus, .btn:focus, .btn-chip:focus { outline: none !important; box-shadow: 0 0 0 2px rgba(47, 174, 110, 0.25); }
button:focus-visible, a:focus-visible, .btn:focus-visible, .btn-chip:focus-visible { outline: none !important; box-shadow: none !important; }
#btnLocation:focus, #btnLocation:focus-visible { outline: none !important; box-shadow: none !important; }

/* Explore loading hint */
#exploreInner[aria-busy="true"]{ opacity: .6; transition: opacity .2s ease; }