:root {
    --color-background: #f8f9fa;
    --color-text-primary: #343a40;
    --color-text-secondary: #495057;
    --color-icon-inactive: #495057;
    --color-icon-active: #212529;
    --color-seperator: #e9ecef;
    --color-button-inactive: #e9ecef;
    --color-button-active: #ced4da;
}
* {box-sizing: border-box;}
html, body {height: 100%;margin: 0;color: var(--color-text-primary);}
body {font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;background: var(--color-background);}
.app {display: grid;grid-template-columns: 70% 30%;height: 100dvh;overflow: hidden;}
.empty-state {padding: 30px 20px;color: var(--color-text-primary);}

#map {width: 100%;height: 100%;}
.leaflet-container, .leaflet-container a, .leaflet-control-attribution.leaflet-control, .leaflet-control-zoom-out, .leaflet-control-zoom-in, .leaflet-bar a {background: var(--color-background); color: var(--color-text-primary);}
.leaflet-control-zoom-in {border-color: var(--color-seperator);}
.leaflet-bar a {border-bottom: 1px solid var(--color-seperator);}
.leaflet-control-zoom.leaflet-bar.leaflet-control{border-color: var(--color-icon-inactive);}

.sidebar {display: flex;flex-direction: column;min-width: 0;border-left: 1px solid var(--color-seperator);background: var(--color-background);overflow: hidden;}
.sidebar.showing-list #events {display: flex;}
.sidebar.showing-details #details {display: flex;}
.sidebar.showing-about #about {display: flex;}

/* Menu */
.logo-placeholder {width:48px;height:48px;background:var(--color-icon-inactive);border-radius:6px;flex-shrink:0;}
.sidebar nav {display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--color-seperator);white-space:nowrap;overflow-x:auto;justify-content:space-between;flex-shrink:0;}
.sidebar nav ul {list-style:none;display:flex;align-items:flex-start;gap:2rem;margin:0;padding:0;}
.sidebar nav a {display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--color-icon-inactive);font-size:0.85rem;flex-shrink:0;}
.sidebar nav a:hover {color:var(--color-icon-active);}
.sidebar nav .icon {width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:0.25rem;}
.sidebar nav .icon svg, .sidebar nav .icon img {width:100%;height:100%;fill:currentColor;}
.sidebar nav .label {text-align:center;max-width:6rem;line-height:1.2;}

/* Event List */
#event-list {overflow-y: auto;flex: 1;}
#event-list button {width: 100%;padding: 1rem 1.5rem;border: 0;border-bottom: 1px solid var(--color-seperator);background: transparent;text-align: left;cursor: pointer;font: inherit;color:var(--color-text-primary);display: flex;align-items: center;justify-content: space-between;gap: 1rem}
#event-list button:hover {background: var(--color-seperator);}
#event-list button:before{content: "";display: inline-block;width: 1.3rem;height: 1.3rem;background-color: currentColor;mask-repeat: no-repeat;mask-position: center;mask-size: contain;}
#event-list button.exhibition:before{-webkit-mask-image: url("/static/icon-exhibition.svg");mask-image: url("/static/icon-exhibition.svg");}
#event-list button.walk:before{-webkit-mask-image: url("/static/icon-walk.svg");mask-image: url("/static/icon-walk.svg");}
#event-list button .title {font-weight: 600;flex: 1}
#event-list button .date {font-size: 0.85rem;color: var(--color-text-secondary);white-space: nowrap;}

/* Selected item details */
.sidebar section {display: none;flex-direction: column;height: 100%;overflow: hidden;}
.sidebar section.type-retailer .meta-event-only, .sidebar section.type-retailer .meta-location-only { display: none; }
.sidebar section.type-event .meta-retailer-only, .sidebar section.type-event .meta-location-only { display: none; }
.sidebar section.type-location .meta-retailer-only, .sidebar section.type-location .meta-event-only { display: none; }
.sidebar section.type-retailer .meta-not-retailer { display: none; }
.sidebar section.type-location .meta-not-location { display: none; }
.sidebar section header {display: flex;align-items: center;justify-content: space-between;gap: 1rem;padding: 1.5rem;border-bottom: 1px solid var(--color-seperator);}
.sidebar section header h1 {margin: 0;font-size: 1.4rem;}
.sidebar section button {display: inline-block;border: 0;background: none;cursor: pointer;font: inherit;color: var(--color-text-secondary);}

.details-content {padding: 1rem;overflow-y: auto;line-height: 1.55;font-size:0.9rem}
.details-content p{margin-block-start:0}
.details-meta {display: grid;gap: 1rem;margin-bottom: 1rem;padding-bottom: 1rem;border-bottom: 1px solid var(--color-seperator);}
.meta-label {display: block;margin-bottom:0.25rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.04rem;}

/* Button styling */
.button-set{display:flex;gap:1rem;flex-wrap:wrap}
.button {display: inline-flex;align-items: center;gap: 0.4rem;padding: 0.4rem;border-radius: 0.5rem;background: var(--color-button-inactive);color: var(--color-text-primary);text-decoration: none;cursor:default;}
.button:before {content: "";display: inline-block;width: 2rem;height: 2rem;background-color: currentColor;mask-repeat: no-repeat;mask-position: center;mask-size: contain;}
.button-small:before {width:1.5rem;height:1.5rem}
.button:hover{background:var(--color-button-active);}
.button a{color:var(--color-text-primary);text-decoration:none}
.button-camera:before{mask-image: url(/static/icon-camera.svg)}
.button-film:before{mask-image: url(/static/icon-film.svg)}
.button-email:before{mask-image: url(/static/icon-email.svg)}
.button-lab:before{mask-image: url(/static/icon-lab.svg)}
.button-instagram:before{mask-image: url(/static/icon-instagram.svg)}
.button-www:before{mask-image: url(/static/icon-network.svg)}
.button-share:before{mask-image: url(/static/icon-link.svg)}
.button-location:before{mask-image: url(/static/icon-location.svg)}
.button-lab:hover, .button-camera:hover, .button-film:hover{background:var(--color-button-inactive);}

/* Retailer service filter */
.leaflet-top .leaflet-bar{ border-color:var(--color-icon-inactive);}
.service-toggle {align-items: center;justify-content: center;padding: 0;border-radius:0}
.service-toggle:before {content: "";display: inline-block;width: 1.1rem;height: 1.1rem;background-color: currentColor;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;-webkit-mask-size: contain;mask-repeat: no-repeat;mask-position: center;mask-size: contain;}
a.service-toggle.inactive {background: linear-gradient(45deg,var(--color-background) calc(50% - 1px),var(--color-icon-inactive) calc(50% - 1px),var(--color-icon-inactive) calc(50% + 1px),var(--color-background) calc(50% + 1px));color: var(--color-icon-active);}
.service-toggle:hover {background: var(--color-button-inactive);color: var(--color-icon-active);cursor:pointer;}
.service-toggle span {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
.leaflet-control-services a.service-toggle{height: 34px;display: flex;}

@media (max-width: 800px) {
    .sidebar nav {padding: 0.5rem;}
    .sidebar nav span.icon{width:24px;height:24px}
    .app {grid-template-columns: 1fr;grid-template-rows: 1fr auto;}
    .sidebar {border: 0;border-top: 1px solid var(--color-seperator);height: 100%;display: flex;flex-direction: column;}
    .sidebar.showing-details,
    .sidebar.showing-about {grid-row: 1 / span 2;}
    .sidebar.showing-list #events { display: none; }
}


/* When #event-list has no children and we're not viewing details/about, 
   hide the sidebar and let the map take the full width */
.app:has(#event-list:empty):not(:has(.showing-about)):not(:has(.showing-details)) {
    grid-template-columns: 100%;
    grid-template-rows: 1fr auto;
}
.app:has(#event-list:empty) .sidebar:not(.showing-about):not(.showing-details) {
    display: flex;
    flex-direction: column;
}
.app:has(#event-list:empty):not(:has(.showing-about)):not(:has(.showing-details)) #events {
    display: none;
}

.meta-item img{max-width:100%}
.meta-item a {text-decoration: none;color:var(--color-text-primar)}
#details-photo-credit {font-style: italic}