:root{
  --bg: #ffffff;
  --text: #111827;
  --accent: #0ea5a4;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --text: #e6eef8;
    --accent: #38bdf8;
  }
}

html,body{
  height:100%;
  margin:0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:var(--text);
}

.site-header{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:1rem;
}
.header-title{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  margin:0;
  font-size:1.25rem;
  font-weight:700;
  text-align:center;
}
.header-title .header-link{display:inline-block;color:inherit;text-decoration:none;padding:0.125rem 0.25rem;-webkit-tap-highlight-color:transparent}
.header-title .header-link:active,.header-title .header-link:visited{color:inherit;opacity:1;text-decoration:none}
.header-title .header-link:hover{color:inherit;text-decoration:none}
.controls{display:flex;gap:1rem;align-items:center}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

select#langSelect{font-size:1.1rem;background:transparent;border:1px solid rgba(0,0,0,0.08);padding:0.25rem 0.5rem;border-radius:6px}
select#langSelect option{font-size:1.3rem}

.content{max-width:900px;margin:1.5rem auto;padding:0 1rem}

/* custom language picker */
.lang-picker{position:relative;display:inline-block}
.lang-btn{display:flex;align-items:center;gap:0.5rem;background:transparent;border:1px solid rgba(0,0,0,0.08);padding:0.25rem 0.5rem;border-radius:6px;cursor:pointer}
.lang-btn .flag{width:22px;height:16px;display:inline-block}
.lang-list{position:absolute;right:0;margin:0;padding:0.25rem 0;background:var(--bg);list-style:none;border:1px solid rgba(0,0,0,0.08);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.08);display:none}
.lang-list[aria-hidden="false"]{display:block}
.lang-list li{display:flex;align-items:center;gap:0.5rem;padding:0.35rem 0.75rem;cursor:pointer}
.lang-list li:hover{background:rgba(0,0,0,0.04)}
.lang-list .flag{width:26px;height:18px;display:inline-block}

/* hide native select when JS shows the custom picker */
html.js-enabled select#langSelect{display:none}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* hamburger navigation */
.hamburger{background:transparent;border:0;padding:0.25rem;border-radius:6px;cursor:pointer}
.nav-overlay{position:fixed;inset:0;display:flex;justify-content:flex-end;pointer-events:none;z-index:1000;visibility:hidden}
.nav-overlay[aria-hidden="false"]{pointer-events:auto;visibility:visible}
.nav-inner{width:280px;height:100%;background:var(--bg);box-shadow:-12px 0 30px rgba(0,0,0,0.2);padding:1.25rem;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 240ms ease}
.nav-overlay[aria-hidden="false"] .nav-inner{transform:translateX(0)}
.nav-close{align-self:flex-end;background:transparent;border:0;font-size:1.25rem;cursor:pointer}
.nav-list{list-style:none;padding:1rem 0;margin:0;display:flex;flex-direction:column;gap:0.5rem}
.nav-list a{display:block;padding:0.6rem 0.5rem;border-radius:6px;color:var(--text);text-decoration:none}
.nav-list a:hover{background:rgba(0,0,0,0.04)}

.nav-theme{margin-top:auto}
.theme-toggle{background:transparent;border:1px solid rgba(0,0,0,0.08);padding:0.5rem;border-radius:6px;cursor:pointer;color:var(--text)}
.theme-toggle[aria-pressed="true"]{background:rgba(0,0,0,0.06)}

/* keep nav overlay available on all viewport sizes so the hamburger works everywhere */
.gallery{display:flex;gap:0.5rem;flex-wrap:wrap}
.gallery img{width:32%;height:160px;object-fit:cover;border-radius:6px}

/* Photo gallery styles */
.photo-gallery{margin-top:1rem}
.main-photo{position:relative;display:block;background:var(--bg);border-radius:8px;overflow:hidden}
.main-photo img{width:100%;max-height:60vh;object-fit:cover;display:block}
.photo-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.4);color:white;border:0;padding:0.6rem;border-radius:999px;cursor:pointer}
.photo-nav.prev{left:8px}
.photo-nav.next{right:8px}

.thumbs-wrap{margin-top:0.75rem;overflow:hidden}
.thumbs{display:flex;gap:0.5rem;overflow-x:auto;padding:0.5rem 0}
.thumbs img{width:120px;height:72px;object-fit:cover;border-radius:6px;cursor:pointer;opacity:0.8;flex:0 0 auto}
.thumbs img.active{outline:3px solid var(--accent);opacity:1}

.photo-caption{display:block;width:100%;box-sizing:border-box;padding:0.75rem 1rem;color:var(--text);background:linear-gradient(to bottom, rgba(0,0,0,0.02), transparent);font-size:0.95rem}

/* theme toggled class overrides */
html[data-theme='dark']{
  --bg: #0b1220;
  --text: #e6eef8;
  --accent: #38bdf8;
}
html[data-theme='light']{
  --bg: #ffffff;
  --text: #111827;
  --accent: #0ea5a4;
}

/* Light-theme visual fixes: remove thin borders and ensure icons use text color */
html[data-theme='light'] .theme-toggle,
html[data-theme='light'] select#langSelect,
html[data-theme='light'] .lang-btn{
  border: none !important;
  box-shadow: none !important;
}

/* Ensure hamburger icon is visible by inheriting the text color */
.hamburger{ color: var(--text); }
.hamburger svg{ stroke: currentColor; fill: none; }

button{
  background:var(--accent);
  color:white;border:0;padding:0.6rem 1rem;border-radius:6px;cursor:pointer
}

/* Full-width hero image (edge-to-edge) */
.hero{width:100%;margin:0}
.hero-image{display:block;width:100%;height:48vh;object-fit:cover}
@media (max-width:640px){
  .hero-image{height:36vh}
}

.content h1{margin-top:1rem}
.lead{margin-top:0.5rem;color:var(--text);opacity:0.95;line-height:1.45}

/* Highlight photo positioned bottom-left with overlay */
.highlight-photo{position:static;display:block;margin:1rem 0 1rem 1rem;max-width:360px;width:min(42vw,360px);border-radius:10px;overflow:hidden;box-shadow:0 8px 20px rgba(2,6,23,0.12);background:var(--bg);}
.highlight-photo img{display:block;width:100%;height:auto;object-fit:cover;opacity:1;visibility:visible;min-height:48px}
.photo-link{display:block;position:relative;overflow:hidden}
.photo-link img{transition:transform 280ms ease}
.photo-link:hover img,
.photo-link:focus img{transform:scale(1.05)}
.photo-overlay{position:absolute;left:10px;bottom:10px;background:rgba(20,20,20,0.72);color:#fff;padding:8px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:0.95rem;text-decoration:none}
.photo-overlay svg{width:18px;height:18px;flex:0 0 18px;fill:currentColor}

@media (min-width:900px){
  /* On wide screens keep the image fixed in the bottom-left but ensure page content has space */
  .highlight-photo{position:fixed;left:1rem;bottom:1.25rem;z-index:999}
  .content{padding-bottom:420px}
}

@media (max-width:640px){
  .highlight-photo{margin:0.75rem 0 0.75rem 0.75rem;max-width:220px;width:min(46vw,220px)}
  .photo-overlay{left:8px;bottom:8px;padding:6px 8px;font-size:0.9rem}
}

/* Attractions tabs and cards */
.tabs{display:flex;gap:0.5rem;margin:1rem 0}
.tab{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:0.5rem 0.75rem;border-radius:8px;cursor:pointer}
.tab.active{background:var(--accent);color:white;border-color:transparent}
.tab:focus{outline:3px solid rgba(0,0,0,0.06)}

.attraction-list{display:flex;flex-direction:column;gap:0.75rem;margin-top:0.5rem}
.attraction{display:flex;gap:0.75rem;align-items:flex-start;padding:0.6rem;border-radius:8px;border:1px solid rgba(0,0,0,0.04);background:linear-gradient(180deg, rgba(0,0,0,0.01), transparent)}
.attraction-thumb{width:96px;height:64px;object-fit:cover;border-radius:6px;flex:0 0 96px}
.attraction h3{margin:0;font-size:1.05rem}
.attraction p{margin:0.25rem 0 0;color:var(--text);opacity:0.92}

@media (max-width:640px){
  .attraction{flex-direction:row;align-items:flex-start}
  .attraction-thumb{width:72px;height:56px;flex:0 0 72px}
}