/* Site-only additions on top of hb.css. Tokens only: no new colours, fonts or radii.
   Candidates to move into hb.css (and document in /design) once agreed. */

/* Topics ▾ dropdown in the top bar */
.nav-drop { position: relative; }
.nav-drop > summary { list-style: none; cursor: pointer; font: 500 15px/1 var(--font-body); color: var(--ink-2); padding: 10px 0; }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary:hover, .nav-drop[open] > summary { color: var(--ink); }
.nav-drop-panel { position: absolute; top: calc(100% + 8px); left: -16px; z-index: 20; min-width: 240px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-5); padding: var(--s-3) var(--s-5); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.nav-links .nav-drop-panel a { padding: 10px 0; white-space: nowrap; }

/* Feature cards that are links */
a.card-feature { color: inherit; }
a.card-feature:hover { border-color: var(--line-2); }

/* Footer areas list runs to 31: two columns */
.footer-areas { columns: 2; column-gap: var(--s-5); }

/* Consent line hidden until the script decides it is needed */
.consent[hidden] { display: none; }


/* Real maps (Leaflet, drawn by /assets/map.js when the box scrolls into view). Until then the box is the pastel placeholder. */
.map.tall { aspect-ratio: 16 / 9; }
@media (max-width: 767px) { .map.tall { aspect-ratio: 4 / 3; } }
.hero-home.has-map { grid-template-columns: 1fr 1fr; align-items: stretch; }
@media (max-width: 1023px) { .hero-home.has-map { grid-template-columns: 1fr; } }
.hero-home.has-map > div:first-child { align-self: center; }
.hero-side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.map.hero { aspect-ratio: auto; flex: 1; min-height: 340px; }
@media (max-width: 767px) { .map.hero { min-height: 0; aspect-ratio: 4 / 3; flex: none; } }
.map.leaflet-container { background: var(--sky-soft); font: var(--fs-small)/1.4 var(--font-body); color: var(--ink-2); }
.map.leaflet-container:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.map.leaflet-container .leaflet-control-attribution { font-size: var(--fs-tiny); background: rgba(255,255,255,.8); color: var(--grey); border-top-left-radius: var(--r-sm); }
.map .leaflet-control-attribution a { color: var(--grey); }
.map.leaflet-container .leaflet-bar { border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: var(--shadow); }
.map .leaflet-bar a { color: var(--ink); }
.map .hb-pin { border-radius: 50%; border: 2px solid var(--ink); box-shadow: 0 1px 3px rgba(18,18,20,.25); background: var(--sky); cursor: pointer; }
.map .hb-pin.lilac { background: var(--lilac); } .map .hb-pin.peach { background: var(--peach); } .map .hb-pin.mint { background: var(--mint); }
.map .hb-pin.ink { background: var(--ink); border-color: var(--white); } .map .hb-pin.grey { background: var(--line-2); border-color: var(--grey); }
.map .hb-pin.small { border-width: 1.5px; }
.map .hb-pin.me { background: var(--ink); border: 3px solid var(--white); box-shadow: 0 0 0 1.5px var(--ink), 0 2px 6px rgba(18,18,20,.3); cursor: default; }
.map .hb-pin:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.map .leaflet-popup-content-wrapper { border-radius: var(--r); box-shadow: var(--shadow-lift); }
.map .leaflet-popup-content { margin: var(--s-3) var(--s-4); font: var(--fs-small)/1.4 var(--font-body); }
.map .hb-pop-title { display: block; margin: 0; color: var(--ink); font-weight: 600; }
.map a.hb-pop-title { color: var(--blue); }
.map .hb-pop-sub { margin: 4px 0 0; color: var(--grey); }
@media (prefers-reduced-motion: reduce) { .map .leaflet-fade-anim .leaflet-popup, .map .leaflet-zoom-anim .leaflet-zoom-animated { transition: none; } }
/* What's on: venue filter beside the category chips */
.wo-venue { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.wo-venue .label { margin: 0; }
.wo-venue .select { width: auto; max-width: 360px; flex: 1 1 220px; }
.chips .tag[aria-current] .muted { color: inherit; opacity: .7; }

/* Photos (src/render/photo.js). The ratio box holds the space; the credit sits under it. */
:where(figure.photo) { margin: 0; }
img[data-srcset] { visibility: hidden; }
figure.photo .img img { display: block; }
/* Edition: the lead entry's wide photo sits above its text, so its row needs no thumbnail column */
.row-lead { grid-template-columns: 1fr; }
/* Item and place pages: the photo sits beside the title and facts, under them on phones */
.item-head.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); gap: var(--s-6); align-items: start; }
.item-head.has-photo > div { min-width: 0; }
@media (max-width: 767px) { .item-head.has-photo { grid-template-columns: 1fr; gap: var(--s-5); } }
/* /areas: photo tiles with the area's name on the gradient; two across on phones */
.area-tile { display: block; color: var(--white); }
.area-tile:hover img { opacity: .92; }
.area-tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 767px) { .cards-3.area-tiles { grid-template-columns: 1fr 1fr; gap: var(--s-3); } .area-tiles .card-photo { min-height: 0; } .area-tiles .cap { padding: var(--s-3); font-size: var(--fs-small); } }