@import url("variables.css");
/* ─── Fix the header at the top ────────────────────────────────── */
.logo-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white);
  z-index: 1050;
  margin: 0;
  padding: 0 1rem;
}

/* ─── Push the map and sidebar down by header and breadcrumb ── */
#map {
  position: fixed;
  top: 120px;
  bottom: 0;
  left: 0;
  right: 0;
}
#filterPanel {
  top: 120px !important;
}

/* ─── On desktop, your existing rule for the sidebar remains: ──── */
@media (min-width:768px){
  /* sidebar is always visible */
  #filterPanel { transform: none; right: 0; bottom: 0; }
}
/* 1. Design tokens ─────────────────────────────────────────────────── */

/* 2. Mobile-first layout ───────────────────────────────────────────── */
body{margin:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;font-family:var(--font-sans)}

.target-icon{width:24px;height:24px;stroke:var(--black);stroke-width:2;fill:none}
#targetBtn{
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  -webkit-tap-highlight-color:transparent;
}
body.map-page .breadcrumb{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
body.map-page .breadcrumb #targetBtn{
  position:static;
  transform:none;
  margin-left:auto;
}
#targetBtn.open{
  background:none;
}

/* custom locate control */
.leaflet-control-locate a{
  background:var(--white);
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.leaflet-control-locate img{width:20px;height:20px;}

/* ——— filter / sidebar panel (RIGHT SIDE) ——————————————— */
#filterPanel{
  position:fixed;top:0;right:0;bottom:0;width:260px;
  background:var(--white);border-left:1px solid var(--gray-300);
  transform:translateX(100%);             /* hidden off-canvas */
  transition:transform .3s;
  z-index:var(--z-filter);
  overflow-y:auto;
}
#filterPanel.open{transform:none}

#filterHeader{
  background:var(--primary);color:var(--white);padding:1rem;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;
}

/* ——— category list ——— */
#filterPanel ul{list-style:none;margin:0;padding:0}

.category-btn{
  width:100%;text-align:left;border:0;background:var(--white);color:var(--primary);
  padding:.9rem 1rem;font-size:1.1rem;cursor:pointer;position:relative;
}
.category-btn:hover{background:var(--gray-100)}

/* round bullet */
.category-btn::before{
  content:'';display:inline-block;width:10px;height:10px;background:var(--primary);
  border-radius:50%;margin-right:.75rem;vertical-align:middle;
}
/* bullet turns white when open */
li.has-sub.open>.category-btn::before{background:var(--white)}

/* ——— accordion slide / fade ——— */
li.has-sub>.subcategory{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .8s ease,opacity .5s ease .5s;
}
li.has-sub.open>.subcategory{max-height:400px;opacity:1}

/* active category colours */
li.has-sub.open>.category-btn{background:var(--primary);color:var(--white)}

/* ——— sub-category buttons ——— */
.subcategory button{
  background:none;border:0;padding:.7rem 2rem;width:100%;text-align:left;
  font-size:1rem;cursor:pointer;color:var(--gray-700);
}
.subcategory button:hover{background:var(--gray-100);color:var(--black)}

/* small icon container for filter buttons */
.filter-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;height:20px;
  margin-right:.5rem;
  background:var(--primary);
  border-radius:4px;
}
.filter-icon img{width:14px;height:14px;}

/* count badges */
.category-btn .count,
.subcategory-btn .count,
.type-btn .count{
  float:right;
  margin-left:.5rem;
}

.category-btn .count{color:var(--primary)}
.subcategory-btn .count,
.type-btn .count{color:var(--gray-700)}

/* counts turn white when category open */
li.has-sub.open>.category-btn .count{color:var(--white)}

/* ——— second nested level ——— */
li.has-sub>.subsubcategory{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .8s ease,opacity .5s ease .5s;
}
li.has-sub.open>.subsubcategory{max-height:400px;opacity:1}

.subsubcategory button{
  background:none;border:0;padding:.7rem 3rem;width:100%;text-align:left;
  font-size:.95rem;cursor:pointer;color:var(--gray-700);
  display:flex;
  align-items:center;
}
.subsubcategory button:hover{background:var(--gray-100);color:var(--black)}

/* 3. Desktop breakpoint ─────────────────────────────────────────────── */
@media(min-width:768px){
  body{flex-direction:row}



  /* sidebar fixed under header (already right-aligned) */
  #filterPanel{
    top:120px;transform:none;        /* always visible */
  }

  /* wider screens show info panel as a sidebar */
  #infoPanel{
    width:30%;
    max-width:400px;
  }

  /* hide mobile-only controls */
  #targetBtn{display:none}
}

/* Expand map to full width on this page */
body.home main#map {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* --- information panel ------------------------------------------------ */
#infoPanel{
  position:fixed;
  top:120px;
  bottom:0;
  left:0;
  width:100%;
  background:var(--white);
  border-right:1px solid var(--gray-300);
  transform:translateX(-100%);
  transition:transform .3s;
  z-index:1100;
  overflow-y:auto;
}
#infoPanel.open{transform:none;}
#infoPanel .close-btn{
  position:absolute;
  top:.5rem;
  right:.5rem;
  width:31px;
  height:31px;
  border:0;
  background:var(--primary);
  color:var(--white);
  font-size:1.2rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  cursor:pointer;
}
#infoPanel header{
  padding:1rem;
}
#infoPanel h2{font-size:1.2rem;margin:0;}
#infoPanel .info-meta{
  display:flex;
  align-items:center;
  margin:.25rem 0 0;
  color:var(--gray-700);
}
#infoPanel .info-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:31px;
  height:31px;
  background:var(--primary);
  border-radius:4px;
  margin-right:.5rem;
}
#infoPanel .info-icon img{width:21px;height:21px;}
#infoPanel .info-classification{
  display:inline-block;
  margin-top:.5rem;
  padding:.25rem .5rem;
  border-radius:4px;
  font-weight:bold;
  color:var(--black);
}
#infoPanel .info-explanation{margin-top:.25rem;color:var(--gray-700);}
#infoPanel section{
  padding:1rem;
  border-top:1px solid var(--gray-300);
  background:var(--primary);
  color:var(--white);
}
#infoPanel section h3{margin-top:0;color:var(--white);}
#infoPanel .photo-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0;}
#infoPanel .photo-grid figure{margin:0;}
#infoPanel .photo-grid img{max-width:100%;height:auto;flex:0 0 auto;cursor:pointer;display:block;}
#infoPanel .photo-grid figcaption{text-align:center;font-size:.8rem;margin-top:.25rem;}

#infoPanel .info-direct-link{margin-top:.5rem;overflow-wrap:anywhere;word-break:break-word;}
#infoPanel .info-direct-link a{color:var(--primary);text-decoration:underline;font-weight:600;}
/* links to external map apps */
#infoPanel .map-links{margin-top:.5rem;display:flex;gap:.5rem;}
#infoPanel .map-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:31px;
  height:31px;
  border-radius:4px;
  background:var(--primary);
  color:var(--white);
  text-decoration:none;
  font-size:.8rem;
  font-weight:600;
}
#infoPanel .map-link img{width:26px;height:26px;}

/* full screen photo overlay */
#photoOverlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:1200;}
#photoOverlay.open{display:flex;}
#photoOverlay figure{margin:0;position:relative;color:var(--white);text-align:center;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1;}
#photoOverlay img{width:100%;height:100%;object-fit:contain;}
#photoOverlay figcaption{position:absolute;bottom:0;left:0;width:100%;background:var(--primary);color:var(--white);padding:.5rem 1rem;text-align:center;box-sizing:border-box;}
#photoOverlay .close-photo{position:absolute;top:0;right:0;background:var(--primary);color:var(--white);border:0;font-size:1.75rem;padding:.25rem .75rem;cursor:pointer;z-index:2;}
#photoOverlay .prev-photo,#photoOverlay .next-photo{position:absolute;top:50%;transform:translateY(-50%);background:var(--primary);color:var(--white);border:0;font-size:2.1rem;padding:.25rem .75rem;cursor:pointer;opacity:0.85;z-index:2;}
#photoOverlay .prev-photo:hover,#photoOverlay .next-photo:hover{opacity:1;}
#photoOverlay .prev-photo{left:0.5rem;}
#photoOverlay .next-photo{right:0.5rem;}