/* ==========================================================================
   Weolyse — base theme
   Colorscheme derived from the chase car livery:
   charcoal/black body, storm-cloud grays, white type, amber plate accent.
   ========================================================================== */

:root {
  --bh-black: #0a0a0c;
  --bh-charcoal: #17171a;
  --bh-charcoal-2: #1f2023;
  --bh-gray: #3a3b40;
  --bh-gray-light: #8a8b91;
  --bh-fog: #c7c8cd;
  --bh-white: #f5f5f6;
  --bh-accent: #e0a72e;      /* amber, from the plates */
  --bh-accent-bright: #f0b93f;  /* accent hover */
  --bh-accent-dim: #a8791f;
  --bh-danger: #c0392b;         /* randen/vlakken */
  --bh-danger-text: #e0685c;    /* lichter, want #c0392b leest niet op zwart */
  --bh-success: #4caf50;
  --bh-popup-title: #5f5f63;
  --bs-body-bg: var(--bh-black);
  --bs-body-color: var(--bh-fog);
}

/* ---------- Tekst-utilities ----------
   Deze drie stonden samen ~200 keer als losse inline-style door de
   pagina's heen (style="color: var(--bh-gray-light);" alleen al 173x).
   Als klasse is het korter in de markup én op één plek te wijzigen. */

.bh-muted { color: var(--bh-gray-light); }
.bh-text-accent { color: var(--bh-accent); }
.bh-text-fog { color: var(--bh-fog); }

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bh-black);
  color: var(--bh-fog);
  font-family: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

/* Casual-copying deterrent — see assets/js/media-protect.js for the JS half. */
img,
video {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Tornado alert banner ---------- */

.bh-topbar {
  z-index: 1030;
}

.bh-tornado-banner {
  background-color: var(--bh-danger);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0.55rem 1rem;
}

/* Pushes all normal-flow page content down by roughly the banner's
   height, without having to touch every page's own top padding — the
   fixed .bh-topbar itself isn't affected by this, it stays pinned. */
body.bh-has-alert {
  margin-top: 2.75rem;
}

/* ---------- Liveblog ---------- */

/* Site-wide LIVE bar (includes/header.php). Deliberately a fixed-height,
   single-line strip, so the body offset below can match it exactly —
   same trick as the tornado banner above. */
.bh-live-bar {
  display: block;
  height: 2.5rem;
  background-color: var(--bh-charcoal-2);
  border-bottom: 1px solid rgba(192, 57, 43, 0.55);
  color: var(--bh-white);
  font-size: 0.85rem;
  text-decoration: none;
}

.bh-live-bar:hover {
  background-color: #26272b;
  color: var(--bh-white);
}

.bh-live-bar .container {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 100%;
}

.bh-live-bar-label {
  flex-shrink: 0;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff6a5c;
}

.bh-live-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bh-fog);
}

.bh-live-bar-cta {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--bh-accent);
}

@media (max-width: 575.98px) {
  .bh-live-bar-cta {
    display: none;
  }
}

body.bh-has-live {
  margin-top: 2.5rem;
}

body.bh-has-alert.bh-has-live {
  margin-top: 5.25rem;
}

.bh-live-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: #ff5a4d;
  animation: bh-live-pulse 1.6s ease-out infinite;
}

@keyframes bh-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 90, 77, 0.65); }
  70% { box-shadow: 0 0 0 0.55rem rgba(255, 90, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 77, 0); }
}

@keyframes bh-live-pulse-light {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
  70% { box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bh-live-dot {
    animation: none;
  }
}

.bh-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  border-radius: 50rem;
  background-color: var(--bh-danger);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bh-live-badge .bh-live-dot {
  background-color: #fff;
  animation-name: bh-live-pulse-light;
}

.bh-live-badge--ended {
  background-color: var(--bh-gray);
}

.bh-lb-timeline {
  min-height: 4rem;
}

.bh-lb-pinned,
.bh-lb-posts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bh-lb-pinned {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px dashed var(--bh-gray);
}

.bh-lb-post {
  background-color: var(--bh-charcoal);
  border: 1px solid var(--bh-gray);
  border-radius: 0.75rem;
  padding: 1.1rem 1.25rem;
  /* clears the fixed navbar (plus banners) when jumping to #bericht-N */
  scroll-margin-top: 10rem;
}

.bh-lb-post:target {
  border-color: var(--bh-accent);
}

.bh-lb-post.is-pinned {
  border-color: var(--bh-accent-dim);
}

.bh-lb-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.bh-lb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.9rem;
  font-size: 0.85rem;
  color: var(--bh-gray-light);
}

.bh-lb-time {
  color: var(--bh-white);
  font-weight: 700;
  text-decoration: none;
}

.bh-lb-time:hover {
  color: var(--bh-accent);
}

/* The coloured tag in a post's top-right corner. */
.bh-lb-label {
  flex-shrink: 0;
  padding: 0.25rem 0.6rem;
  border-radius: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bh-lb-label--important {
  background-color: rgba(58, 141, 222, 0.18);
  color: #7db8ee;
}

.bh-lb-label--warning {
  background-color: rgba(240, 140, 50, 0.2);
  border: 1px solid rgba(240, 140, 50, 0.45);
  color: #f5a05a;
}

.bh-lb-label--severe {
  background-color: var(--bh-danger);
  color: #fff;
}

.bh-lb-body p {
  margin-bottom: 0.6rem;
  color: var(--bh-fog);
  overflow-wrap: anywhere;
}

.bh-lb-body p:last-child {
  margin-bottom: 0;
}

.bh-lb-body a {
  color: var(--bh-accent);
}

.bh-lb-figure {
  margin: 0.9rem 0 0;
}

.bh-lb-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.6rem;
  border: 1px solid var(--bh-gray);
}

.bh-lb-figure figcaption {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--bh-gray-light);
}

.bh-lb-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  min-height: 1.2rem;
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--bh-gray-light);
}

.bh-lb-copy {
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.8rem;
  color: var(--bh-gray-light);
  cursor: pointer;
}

.bh-lb-copy:hover {
  color: var(--bh-accent);
}

.bh-lb-empty {
  padding: 2rem 0;
  text-align: center;
  color: var(--bh-gray-light);
}

.bh-lb-timeline.only-labeled .bh-lb-post:not(.has-label) {
  display: none;
}

.bh-embed {
  margin-top: 0.9rem;
}

.bh-embed-placeholder {
  padding: 1rem 1.1rem;
  background-color: var(--bh-charcoal-2);
  border: 1px dashed var(--bh-gray);
  border-radius: 0.6rem;
}

.bh-embed-iframe {
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 0.6rem;
  background-color: var(--bh-black);
}

.bh-embed-iframe--video {
  aspect-ratio: 16 / 9;
  height: auto;
}

.bh-embed-frame--x,
.bh-embed-frame--instagram {
  display: flex;
  justify-content: center;
}

/* "N nieuwe berichten" — floats at the bottom so it's visible wherever
   the visitor has scrolled to, without the page jumping on its own. */
.bh-lb-new {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 1040;
  padding: 0.6rem 1.25rem;
  border: 0;
  border-radius: 50rem;
  background-color: var(--bh-accent);
  color: var(--bh-black);
  font-weight: 700;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* ---------- Navbar ---------- */

.bh-navbar {
  background-color: rgba(10, 10, 12, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--bh-gray);
}

.bh-navbar .navbar-brand {
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--bh-white) !important;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.bh-navbar .nav-link {
  color: var(--bh-fog) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.5rem 1rem !important;
}

.bh-navbar .nav-link:hover,
.bh-navbar .nav-link.active {
  color: var(--bh-accent) !important;
}

.bh-role-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border-radius: 50rem;
  vertical-align: middle;
}

.bh-role-badge--admin {
  background-color: rgba(192, 57, 43, 0.18);
  color: #e0685c;
}

.bh-role-badge--moderator {
  background-color: rgba(224, 167, 46, 0.18);
  color: var(--bh-accent);
}

.bh-role-badge--poster {
  background-color: rgba(138, 139, 145, 0.18);
  color: var(--bh-fog);
}

.bh-role-badge--analyst {
  background-color: rgba(58, 141, 222, 0.18);
  color: #5fa8e8;
}

.bh-level-badge--error {
  background-color: rgba(192, 57, 43, 0.18);
  color: #e0685c;
}

.bh-level-badge--warning {
  background-color: rgba(224, 167, 46, 0.18);
  color: var(--bh-accent);
}

.bh-level-badge--info {
  background-color: rgba(138, 139, 145, 0.18);
  color: var(--bh-fog);
}


/* ---------- Buttons ---------- */

.btn-bh-accent {
  background-color: var(--bh-accent);
  border-color: var(--bh-accent);
  color: var(--bh-black);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.btn-bh-accent:hover {
  background-color: #f0b93f;
  border-color: #f0b93f;
  color: var(--bh-black);
}

.btn-bh-outline {
  background-color: transparent;
  border: 1px solid var(--bh-gray-light);
  color: var(--bh-white);
  font-weight: 600;
}

.btn-bh-outline:hover {
  border-color: var(--bh-white);
  color: var(--bh-white);
  background-color: rgba(255, 255, 255, 0.06);
}

/* Toggle-button pattern (Bootstrap .btn-check + label) — used for the
   category filter on kaart.php. Unchecked = plain outline, checked =
   filled — in the category's own colour (--cat-color/--cat-text set
   inline per button in kaart.php) where set, else the site accent. */
.btn-check:checked + .btn-bh-outline {
  background-color: var(--cat-color, var(--bh-accent));
  border-color: var(--cat-color, var(--bh-accent));
  color: var(--cat-text, var(--bh-black));
}

/* Verwijderen/legen. Stond overal als
   style="border-color: var(--bh-danger); color: #e0685c;" — 18 keer
   gekopieerd, met de rode tint als los hexnummer dat nergens anders
   vandaan kwam. Die tint is nu --bh-danger-text. */
.btn-bh-danger {
  background-color: transparent;
  border: 1px solid var(--bh-danger);
  color: var(--bh-danger-text);
  font-weight: 600;
}

.btn-bh-danger:hover {
  border-color: var(--bh-danger-text);
  color: var(--bh-danger-text);
  background-color: rgba(192, 57, 43, 0.12);
}

/* ---------- Meldingen & badges ----------
   Elke pagina met een formulier bouwde zijn eigen melding op met
   dezelfde drie inline-declaraties; de randkleur was het enige verschil.
   Gebruik: <div class="alert bh-alert bh-alert--danger">. */

.bh-alert {
  background-color: var(--bh-charcoal-2);
  border: 1px solid var(--bh-gray);
  color: var(--bh-fog);
}

.bh-alert--danger { border-color: var(--bh-danger); }
.bh-alert--accent { border-color: var(--bh-accent-dim); }

.bh-badge-accent {
  background-color: var(--bh-accent);
  color: var(--bh-black);
}

.bh-badge-muted {
  background-color: var(--bh-gray);
  color: var(--bh-white);
}

/* ---------- Forms ---------- */

.form-label {
  color: var(--bh-fog);
  font-weight: 600;
}

.form-control,
.form-select {
  background-color: var(--bh-charcoal-2);
  border: 1px solid var(--bh-gray);
  color: var(--bh-white);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bh-charcoal-2);
  border-color: var(--bh-accent);
  color: var(--bh-white);
  box-shadow: 0 0 0 0.2rem rgba(224, 167, 46, 0.25);
}

.form-control::placeholder {
  color: var(--bh-gray-light);
}

.form-check-input {
  background-color: var(--bh-charcoal-2);
  border-color: var(--bh-gray-light);
}

.form-check-input:checked {
  background-color: var(--bh-accent);
  border-color: var(--bh-accent);
}

.form-check-label {
  color: var(--bh-gray-light);
}

.form-switch .form-check-input,
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* ---------- Tables (beheer) ---------- */

.table {
  color: var(--bh-fog);
  border-color: var(--bh-gray);
  --bs-table-color: var(--bh-fog);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(224, 167, 46, 0.06);
  vertical-align: middle;
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--bh-gray);
}

.table thead th {
  color: var(--bh-gray-light);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  border-bottom-width: 1px;
}

/* ---------- Foto van de dag ---------- */

.bh-potd-link {
  display: block;
  height: 100%;
}

/* 3:2 crop on the homepage; the detail page shows the whole photo. */
.bh-potd-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 16rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.bh-potd-detail-img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  border: 1px solid var(--bh-gray);
  border-radius: 0.75rem;
}

.bh-potd-modal-img {
  display: block;
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 0.75rem;
  background-color: var(--bh-black);
}

.bh-potd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.75rem;
}

.bh-potd-grid-item {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--bh-gray);
  border-radius: 0.5rem;
}

.bh-potd-grid-item:hover {
  border-color: var(--bh-accent-dim);
}

.bh-potd-grid-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.bh-potd-grid-date {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.25rem 0.5rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  font-size: 0.75rem;
  color: var(--bh-white);
}

.bh-potd-admin-thumb {
  width: 5rem;
  height: 3.5rem;
  object-fit: cover;
  border: 1px solid var(--bh-gray);
  border-radius: 0.4rem;
}

.bh-potd-edit-preview {
  display: block;
  max-width: 100%;
  max-height: 20rem;
  border: 1px solid var(--bh-gray);
  border-radius: 0.6rem;
}

/* Album photo picker in beheer: real radio inputs (keyboard + screen
   readers), the selected state is drawn on the image next to them. */
.bh-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.5rem;
  max-height: 22rem;
  padding: 0.25rem;
  overflow-y: auto;
}

.bh-pick {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.bh-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bh-pick img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid var(--bh-gray);
  border-radius: 0.5rem;
}

.bh-pick:hover img {
  border-color: var(--bh-accent-dim);
}

.bh-pick input:checked + img {
  border-color: var(--bh-accent);
  box-shadow: 0 0 0 3px rgba(224, 167, 46, 0.35);
}

.bh-pick input:focus-visible + img {
  outline: 2px solid var(--bh-accent);
  outline-offset: 2px;
}

/* ---------- Album media ---------- */

.bh-media-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--bh-charcoal-2);
  border: 1px solid var(--bh-gray);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bh-media-thumb img,
.bh-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bh-media-video-icon {
  font-size: 1.8rem;
  color: var(--bh-gray-light);
}

.bh-video-tile {
  position: relative;
  cursor: pointer;
}

.bh-video-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.25);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  transition: opacity 0.15s ease;
}

.bh-video-tile.is-playing .bh-video-play-icon {
  opacity: 0;
  pointer-events: none;
}

.bh-media-clickable {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.bh-media-clickable:hover {
  opacity: 0.85;
}

/* ---------- Weerkaart ---------- */

#wk-map {
  height: 70vh;
  min-height: 480px;
  background-color: var(--bh-charcoal);
}

.wk-panel-title {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bh-gray-light);
}

.wk-hazards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.wk-chip {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--bh-gray);
  border-radius: 50rem;
  background-color: var(--bh-charcoal-2);
  color: var(--bh-gray-light);
  font-size: 0.75rem;
  cursor: pointer;
}

.wk-chip.is-on {
  border-color: var(--bh-accent-dim);
  background-color: rgba(224, 167, 46, 0.12);
  color: var(--bh-white);
}

.wk-chip.is-empty {
  opacity: 0.5;
}

.wk-legend li {
  margin-bottom: 0.3rem;
  color: var(--bh-fog);
}

/* --c is set inline from the PHP colour table (BH_METEOALARM_COLOR_HEX). */
.wk-swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.35rem;
  border: 1.5px solid var(--c);
  border-radius: 0.2rem;
  background-color: color-mix(in srgb, var(--c) 45%, transparent);
  vertical-align: -0.15rem;
}

.wk-legend-note {
  display: block;
  margin-left: 1.25rem;
  color: var(--bh-gray-light);
}

.wk-swatch--approx {
  border-style: dashed;
  border-color: var(--bh-fog);
  background-color: transparent;
}

.wk-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-top: 0.4rem;
}

.wk-source.is-down {
  color: #e0685c;
}

/* City dots + labels of the vector basemap (assets/js/basemap.js). */
.wk-city {
  pointer-events: none;
}

.wk-city i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #d6d7db;
  box-shadow: 0 0 0 1px #0c0f12;
}

.wk-city span {
  position: absolute;
  left: 6px;
  top: -8px;
  font-size: 0.72rem;
  line-height: 16px;
  white-space: nowrap;
  color: #b9bbc2;
  text-shadow: 0 0 3px #0c0f12, 0 0 3px #0c0f12, 0 0 2px #0c0f12;
}

.wk-empty {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  z-index: 500;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  border: 1px solid var(--bh-gray);
  border-radius: 0.5rem;
  background-color: rgba(23, 23, 26, 0.92);
  font-size: 0.85rem;
  color: var(--bh-fog);
  pointer-events: none;
}

.wk-empty[hidden] {
  display: none;
}

.wk-popup {
  max-height: 18rem;
  overflow-y: auto;
}

.wk-popup-block + .wk-popup-block {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--bh-gray);
}

/* The popup is always white with dark text, whichever stylesheet
   (theme or leaflet.css) happens to load last — like the logbook map. */
.wk-popup-shell .leaflet-popup-content-wrapper,
.wk-popup-shell .leaflet-popup-tip {
  background-color: #fff;
  color: #1b1c1f;
}

.wk-popup-block + .wk-popup-block {
  border-top-color: #d8d9dd;
}

/* two classes: the theme's later `.bh-card h4 { color: white }` would otherwise win the tie */
.wk-popup-shell .wk-popup h4 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1b1c1f;
}

.wk-popup .bh-popup-meta {
  color: #5f5f63;
}

.wk-popup-headline {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2b2c30;
}

.wk-popup-advice {
  margin-top: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid #a8791f;
  background-color: #f6f1e4;
  font-size: 0.8rem;
  color: #2b2c30;
}

.wk-popup-advice p {
  margin: 0.2rem 0 0;
  white-space: pre-line;
}

.wk-popup-text {
  margin: 0;
  font-size: 0.8rem;
  color: #4a4b50;
}

/* ---------- Lightbox ---------- */

.bh-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: rgba(5, 5, 6, 0.94);
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.bh-lightbox.is-open {
  display: flex;
}

.bh-lightbox-stage {
  max-width: 95vw;
  max-height: 90vh;
  position: relative;
}

.bh-lightbox-stage img,
.bh-lightbox-stage video {
  max-width: 95vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

.bh-lightbox-stage .bh-video-tile {
  display: inline-block;
  line-height: 0;
}

.bh-lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 2001;
  background: none;
  border: none;
  color: var(--bh-white);
  font-size: 1.6rem;
  opacity: 0.8;
}

.bh-lightbox-close:hover {
  opacity: 1;
}

.bh-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2001;
  background: rgba(20, 20, 23, 0.6);
  border: 1px solid var(--bh-gray);
  color: var(--bh-white);
  font-size: 1.6rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

.bh-lightbox-nav:hover {
  opacity: 1;
  border-color: var(--bh-accent-dim);
}

.bh-lightbox-nav--prev {
  left: 1rem;
}

.bh-lightbox-nav--next {
  right: 1rem;
}

.bh-lightbox-nav[hidden] {
  display: none;
}

@media (max-width: 576px) {
  .bh-lightbox-nav {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.2rem;
  }
}

.progress {
  border-radius: 50rem;
  overflow: hidden;
}

/* ---------- Modals ---------- */

.bh-modal-content {
  background-color: var(--bh-charcoal);
  border: 1px solid var(--bh-gray);
  color: var(--bh-fog);
}

.bh-modal-content .modal-header {
  border-bottom: 1px solid var(--bh-gray);
}

.bh-modal-content .modal-title {
  color: var(--bh-white);
}

/* ---------- Auth pages ---------- */

.bh-auth-section {
  min-height: 75vh;
  display: flex;
  align-items: center;
  padding: 8rem 0 3rem;
  background-color: var(--bh-black);
}

.bh-auth-card {
  max-width: 26rem;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Hero ---------- */

.bh-hero {
  position: relative;
  padding: 9rem 0 6rem;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background-color: var(--bh-black);
  background-image:
    radial-gradient(ellipse at top, rgba(224, 167, 46, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(10, 10, 12, 0.55) 45%, rgba(10, 10, 12, 0.92) 100%),
    url("../img/voorpagina.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--bh-gray);
  overflow: hidden;
}

.bh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, transparent 2px, transparent 60px);
  pointer-events: none;
}

.bh-hero .badge-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--bh-gray-light);
  color: var(--bh-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 50rem;
}

.bh-hero h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bh-white);
  text-shadow: 0 0 30px rgba(224, 167, 46, 0.15);
}

.bh-hero p.lead {
  color: var(--bh-gray-light);
  max-width: 42rem;
}

/* ---------- Contentpagina's — gedeelde leeslayout ----------
   Elke contentpagina had deze drie dingen als losse inline-style staan
   (padding: 8.5rem 0 3rem op de header, py-5 op de section, max-width:
   46rem op de container) — op ~30 plekken gekopieerd, dus één tweak
   betekende 30 bestanden aanpassen. Nu staat het hier, één keer.

   Moet NA .bh-hero staan: beide zijn één class breed (gelijke
   specificiteit), dus de bronvolgorde bepaalt wie de padding en
   min-height wint. */

.bh-page-header {
  padding: 8.5rem 0 1.75rem;
  min-height: auto;
}

/* Paginatitel in het amber van de huisstijl. Geldt bewust alleen voor
   .bh-page-header, niet voor de grote hero op index.php — daar is de
   witte titel op de foto juist het beeldmerk.

   Moet ná .bh-hero h1 staan: even specifiek, dus de bronvolgorde
   beslist. De amber gloed eromheen kan hier weg; die was er om witte
   letters warmte te geven en maakt amber-op-amber alleen maar vaag. */
.bh-page-header h1 {
  color: var(--bh-accent);
  text-shadow: none;
}

.bh-content {
  background-color: var(--bh-black);
  padding: 1.75rem 0 3.5rem;
}

/* De leeskolom. Breder dan Bootstrap's .container op grote schermen,
   dus dit moet ná bootstrap.min.css geladen worden — dat doet
   includes/header.php al. */
.bh-measure {
  max-width: 72rem;
}

/* Hero slideshow (index.php) — only rendered at all when there's more
   than one slide (see the PHP: a single "welcome" slide falls back to
   the plain static markup this replaced, no carousel machinery). */
/* De homepage-hero is compacter dan die op weerkaart/outlook, die de
   volle .bh-hero-hoogte houden. Vandaar een eigen klasse op index.php in
   plaats van .bh-hero zelf aanpassen. */
.bh-hero--carousel {
  padding: 7rem 0 2.5rem;
  min-height: auto;
}

/* Een vaste hoogte, geen min-height. Met min-height groeide de hero mee
   met de langste slide en sprong hij dus alsnog bij elke wissel — de
   tekst komt uit de database, dus hoe lang een slide wordt is vooraf
   niet te zeggen. Nu bepaalt deze hoogte het beeld en past de tekst zich
   aan (zie de afkapregels hieronder), in plaats van andersom. */
.bh-hero-carousel .carousel-inner {
  /* 21rem en niet krapper: de inhoud is weliswaar begrensd (kop en tekst
     worden op twee regels afgekapt), maar die grens is gemeten met Segoe
     UI. Op een Mac of Linux valt de site terug op een ander lettertype
     met andere metriek, en dan zou de knop bij 20rem alsnog net buiten
     beeld kunnen vallen. */
  height: 21rem;
  overflow: hidden;
}

/* Titel en tekst afkappen op een vast aantal regels, met puntjes. Zonder
   dit zou een lange liveblog-titel over de vaste hoogte heen lopen en
   onder de rand verdwijnen. */
.bh-hero-carousel .bh-hero-title,
.bh-hero-carousel .carousel-item .lead {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Op de klasse en niet op h1: alleen de eerste slide is een h1, de rest
   zijn divs met dezelfde opmaak (zie index.php). Stond dit op de tag, dan
   werd alleen slide 1 afgekapt en liepen de andere over de vaste hoogte
   heen — dan valt de knop onderaan buiten beeld. */
.bh-hero-carousel .bh-hero-title {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: clamp(2rem, 4vw, 3rem);
}

.bh-hero-carousel .carousel-item .lead {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Prev/next used to overlay the photo at full height (Bootstrap's
   default), which put them right on top of the title/text for any slide
   whose content ran past the vertical middle of the (now taller, fixed-
   height) hero — not just on narrow screens. Un-absoluted here and laid
   out in a static row together with the indicator dots below the text
   instead, so they never sit on top of content at any width. */
.bh-hero-nav {
  position: static;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 0;
}

.bh-hero-carousel .carousel-control-prev,
.bh-hero-carousel .carousel-control-next {
  position: static;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  opacity: 0.7;
  background-color: var(--bh-charcoal-2);
  border: 1px solid var(--bh-gray);
  border-radius: 50%;
}

.bh-hero-carousel .carousel-control-prev:hover,
.bh-hero-carousel .carousel-control-next:hover,
.bh-hero-carousel .carousel-control-prev:focus,
.bh-hero-carousel .carousel-control-next:focus {
  opacity: 1;
}

.bh-hero-carousel .carousel-control-prev-icon,
.bh-hero-carousel .carousel-control-next-icon {
  width: 1rem;
  height: 1rem;
}

.bh-hero-indicators {
  position: static;
  margin: 0;
  justify-content: flex-start;
}

.bh-hero-indicators [data-bs-target] {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background-color: var(--bh-gray-light);
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s;
}

.bh-hero-indicators [data-bs-target].active {
  background-color: var(--bh-accent);
  opacity: 1;
}

/* ---------- Section headings ---------- */

.bh-section-title {
  color: var(--bh-white);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.bh-section-eyebrow {
  color: var(--bh-accent);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* ---------- Cards ---------- */

.bh-card {
  background-color: var(--bh-charcoal);
  border: 1px solid var(--bh-gray);
  border-radius: 0.75rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.bh-card:hover {
  border-color: var(--bh-accent-dim);
  transform: translateY(-2px);
}

.bh-card .bh-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.6rem;
  background-color: rgba(224, 167, 46, 0.12);
  color: var(--bh-accent);
  font-size: 1.4rem;
}

.bh-card h3, .bh-card h4 {
  color: var(--bh-white);
}

/* ---------- Countdown / status strip ---------- */

.bh-countdown {
  background-color: var(--bh-charcoal-2);
  border: 1px solid var(--bh-gray);
  border-radius: 0.75rem;
}

.bh-countdown .bh-time {
  font-size: 2rem;
  font-weight: 800;
  color: var(--bh-white);
  font-variant-numeric: tabular-nums;
}

.bh-countdown .bh-time-label {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bh-gray-light);
}

/* ---------- Outlook / risk section ---------- */

.bh-outlook {
  background: linear-gradient(180deg, #000000, #121316);
  border-top: 1px solid var(--bh-gray);
  border-bottom: 1px solid var(--bh-gray);
}

.bh-risk {
  border-radius: 0.6rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bh-gray);
  background-color: var(--bh-charcoal);
}

.bh-risk .bh-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.5rem;
}

.bh-dot--low { background-color: #4c8c4a; }
.bh-dot--mod { background-color: var(--bh-accent); }
.bh-dot--high { background-color: var(--bh-danger); }

.bh-warnings-country-toggle {
  width: 100%;
  border: none;
  background: none;
  text-align: left;
}

.bh-warnings-country-toggle .bi-chevron-down {
  transition: transform 0.2s ease;
}

.bh-warnings-country-toggle[aria-expanded="false"] .bi-chevron-down {
  transform: rotate(-90deg);
}

/* ---------- CTA band ---------- */

.bh-cta {
  background-color: var(--bh-charcoal-2);
  border: 1px solid var(--bh-gray);
  border-radius: 1rem;
}

/* ---------- Footer ---------- */

.bh-footer {
  background-color: var(--bh-black);
  border-top: 1px solid var(--bh-gray);
  color: var(--bh-gray-light);
}

.bh-footer h6 {
  color: var(--bh-white);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.bh-footer a {
  color: var(--bh-gray-light);
  text-decoration: none;
}

.bh-footer a:hover {
  color: var(--bh-accent);
}

.bh-footer .bh-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--bh-gray);
  border-radius: 50%;
  color: var(--bh-white);
  margin-right: 0.5rem;
}

.bh-footer .bh-social a:hover {
  border-color: var(--bh-accent);
  color: var(--bh-accent);
}

/* ---------- Chase log map ---------- */

#chase-map {
  height: 65vh;
  min-height: 420px;
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--bh-gray);
}

#location-map {
  height: 300px;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--bh-gray);
}

.bh-map-marker span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--marker-color, var(--bh-accent));
  border: 2px solid var(--bh-black);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--marker-color, var(--bh-accent)) 35%, transparent);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background-color: var(--bh-charcoal);
  color: var(--bh-fog);
}

.leaflet-popup-content-wrapper {
  border: 1px solid var(--bh-gray);
  border-radius: 0.6rem;
}

.leaflet-container a.leaflet-popup-close-button {
  color: var(--bh-gray-light);
}

.leaflet-container a.leaflet-popup-close-button:hover {
  color: var(--bh-white);
}

/* Leaflet's own attribution control defaults to a plain white pill with
   dark text — stands out against the site's dark map background. Same
   floating-dark-chip treatment as the rest of the site's map UI.
   !important on the background: leaflet.css sets it on the exact same
   selector (.leaflet-container .leaflet-control-attribution), and it's
   linked after ours (see $extraHead in outlook.php/kaart.php), so equal
   specificity would let it win on source order — same reason
   beheer-publicatie-edit.php's Quill overrides use !important too. */
.leaflet-container .leaflet-control-attribution {
  background-color: var(--bh-charcoal-2) !important;
  color: var(--bh-gray-light);
  border: 1px solid var(--bh-gray);
  border-radius: 0.35rem;
  padding: 0.1rem 0.5rem;
  text-shadow: none;
}

.leaflet-container .leaflet-control-attribution a {
  color: var(--bh-fog);
}

.leaflet-container .leaflet-control-attribution a:hover {
  color: var(--bh-accent);
}

/* Same treatment for the zoom +/- buttons (leaflet.css's .leaflet-bar a) —
   plain white squares by default, same reasoning as the attribution
   control above. */
.leaflet-container .leaflet-bar a {
  background-color: var(--bh-charcoal-2) !important;
  color: var(--bh-fog);
  border-bottom-color: var(--bh-gray);
}

.leaflet-container .leaflet-bar a:hover,
.leaflet-container .leaflet-bar a:focus {
  background-color: var(--bh-charcoal) !important;
  color: var(--bh-accent);
}

.leaflet-container .leaflet-bar a.leaflet-disabled {
  background-color: var(--bh-charcoal-2) !important;
  color: var(--bh-gray);
}

.leaflet-touch .leaflet-container .leaflet-bar {
  border-color: var(--bh-gray);
}

.bh-popup h4 {
  color: var(  --bh-popup-title);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.bh-popup-meta {
  font-size: 0.85rem;
  color: var(--bh-gray-light);
  margin-bottom: 0.25rem;
}

.bh-popup-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.bh-popup-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 50rem;
  background-color: var(--bh-charcoal-2);
  border: 1px solid var(--bh-gray);
  color: var(--bh-fog);
}

.bh-popup-badge--accent {
  border-color: var(--bh-accent-dim);
  color: var(--bh-accent);
}

/* ---------- Weather report ---------- */

.bh-weather-report-body {
  color: var(--bh-fog);
  font-size: 1.1rem;
  line-height: 1.3;
}

/* De witstrook tussen twee regels binnen een alinea is ~9px (de leading
   van line-height 1.55). Stond deze marge op 0.5rem, dan werd de strook
   tussen twee alinea's ~18px — precies een verdubbeling, en dat leest als
   een blanco regel tussen elke alinea. 0.3rem houdt alinea's herkenbaar
   gescheiden (~14px) zonder die lege-regel-indruk. */
.bh-weather-report-body p {
  margin-bottom: 0.45rem;
}

/* Auteurs typen een kopje vaak als een vetgedrukte alinea in plaats van
   met de H2/H3-knop, en zo'n <p><strong> krijgt dus gewoon de marge
   hierboven. Met de strakkere alineamarge zou het kopje volledig opgaan
   in de lopende tekst, dus krijgt het hier de ruimte erboven die een
   echte h3 ook heeft. Een alinea die toevallig hélemaal vet is telt
   daarbij als kopje — dat is precies hoe hij bedoeld werd. */
.bh-weather-report-body p:has(> strong:only-child) {
  margin-top: 1.35rem;
}

/* h2 en h3 allebei in amber, alleen verschillend van grootte. Bewust eigen groottes in
   plaats van Bootstrap's h2/h3 (2rem/1.75rem): die zijn bedoeld als
   paginatitel en schreeuwen binnen een lopend artikel. */
.bh-weather-report-body h2 {
  color: var(--bh-accent);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.bh-weather-report-body h3 {
  color: var(--bh-accent);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.35rem;
  margin-bottom: 0.4rem;
}

/* Begint het bericht met een kop, dan hoort die strak onder de
   auteursregel te staan, niet 1.75rem lager. */
.bh-weather-report-body > :first-child {
  margin-top: 0;
}

.bh-weather-report-body blockquote {
  border-left: 3px solid var(--bh-accent);
  padding-left: 1rem;
  margin: 0 0 0.45rem;
  color: var(--bh-gray-light);
}

.bh-weather-report-body ul,
.bh-weather-report-body ol {
  margin-bottom: 0.45rem;
  padding-left: 1.5rem;
}

.bh-weather-report-body a {
  color: var(--bh-accent);
}

/* Consecutive images (e.g. side by side via float) shouldn't leave the
   same big paragraph gap a text block gets. */
.bh-weather-report-body p:has(> img:only-child) {
  margin-bottom: 0.3rem;
}

/* ---------- Accordion (FAQ) — Bootstrap 5.3 CSS-variable theming ---------- */

.accordion {
  --bs-accordion-bg: var(--bh-charcoal);
  --bs-accordion-border-color: var(--bh-gray);
  --bs-accordion-btn-color: var(--bh-fog);
  --bs-accordion-btn-bg: var(--bh-charcoal-2);
  --bs-accordion-active-color: var(--bh-accent);
  --bs-accordion-active-bg: var(--bh-charcoal-2);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-color: var(--bh-gray-light);
}

.accordion-button::after {
  filter: invert(1) grayscale(1) brightness(2);
}

.bh-weather-report-photo {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.6rem;
  border: 1px solid var(--bh-gray);
  margin: 0.3rem 0 0.6rem;
}

.bh-weather-report-photo.bh-photo-float-left {
  float: left;
  margin-right: 1rem;
}

.bh-weather-report-photo.bh-photo-float-right {
  float: right;
  margin-left: 1rem;
}

.bh-weather-report-photo.bh-photo-size-25 { width: 25%; }
.bh-weather-report-photo.bh-photo-size-50 { width: 50%; }
.bh-weather-report-photo.bh-photo-size-75 { width: 75%; }

.bh-weather-report-body::after {
  content: '';
  display: table;
  clear: both;
}

/* ---------- Publications — same rich-text look as the weather report ---------- */

.bh-publication-body {
  color: var(--bh-fog);
  font-size: 1.1rem;
  line-height: 1.3;
}

/* De witstrook tussen twee regels binnen een alinea is ~9px (de leading
   van line-height 1.55). Stond deze marge op 0.5rem, dan werd de strook
   tussen twee alinea's ~18px — precies een verdubbeling, en dat leest als
   een blanco regel tussen elke alinea. 0.3rem houdt alinea's herkenbaar
   gescheiden zonder die lege-regel-indruk. */
.bh-publication-body p {
  margin-bottom: 0.45rem;
}

/* Auteurs typen een kopje vaak als een vetgedrukte alinea in plaats van
   met de H2/H3-knop, en zo'n <p><strong> krijgt dus gewoon de marge
   hierboven. Met de strakkere alineamarge zou het kopje volledig opgaan
   in de lopende tekst, dus krijgt het hier de ruimte erboven die een
   echte h3 ook heeft. Een alinea die toevallig hélemaal vet is telt
   daarbij als kopje — dat is precies hoe hij bedoeld werd. */
.bh-publication-body p:has(> strong:only-child) {
  margin-top: 1.35rem;
}

/* Zie de identieke regels bij .bh-weather-report-body hierboven voor de
   waaromtjes — de twee contenttypes delen bewust dezelfde leesstijl. */
.bh-publication-body h2 {
  color: var(--bh-accent);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.bh-publication-body h3 {
  color: var(--bh-accent);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.35rem;
  margin-bottom: 0.4rem;
}

.bh-publication-body > :first-child {
  margin-top: 0;
}

.bh-publication-body blockquote {
  border-left: 3px solid var(--bh-accent);
  padding-left: 1rem;
  margin: 0 0 0.45rem;
  color: var(--bh-gray-light);
}

.bh-publication-body ul,
.bh-publication-body ol {
  margin-bottom: 0.45rem;
  padding-left: 1.5rem;
}

.bh-publication-body a {
  color: var(--bh-accent);
}

.bh-publication-body p:has(> img:only-child) {
  margin-bottom: 0.3rem;
}

.bh-publication-photo {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.6rem;
  border: 1px solid var(--bh-gray);
  margin: 0.3rem 0 0.6rem;
}

.bh-publication-photo.bh-photo-float-left {
  float: left;
  margin-right: 1rem;
}

.bh-publication-photo.bh-photo-float-right {
  float: right;
  margin-left: 1rem;
}

.bh-publication-photo.bh-photo-size-25 { width: 25%; }
.bh-publication-photo.bh-photo-size-50 { width: 50%; }
.bh-publication-photo.bh-photo-size-75 { width: 75%; }

.bh-publication-body::after {
  content: '';
  display: table;
  clear: both;
}

/* Kaart in het publicatieoverzicht. Bovenop .bh-card: een amber randje
   links, zodat de lijst op afstand al als "huisstijl" leest in plaats
   van als een rij neutrale blokken. */
.bh-pub-card {
  border-left: 3px solid var(--bh-accent-dim);
}

.bh-pub-card:hover {
  border-left-color: var(--bh-accent);
}

.bh-pub-card h2 {
  color: var(--bh-accent);
  line-height: 1.25;
}

/* ---------- Quiz ---------- */

/* The shared .bh-card hover lift would make answer options jump around
   under the cursor while someone is trying to click them. */
.bh-quiz:hover {
  transform: none;
}

.bh-quiz-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.6rem;
  border: 1px solid var(--bh-gray);
}

.bh-quiz-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.8rem 1rem;
  background-color: var(--bh-charcoal-2);
  border: 1px solid var(--bh-gray);
  border-radius: 0.6rem;
  color: var(--bh-fog);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bh-quiz-option:hover {
  border-color: var(--bh-accent-dim);
}

/* The real radio/checkbox stays in the DOM (keyboard + screen readers)
   but the visible state is the icon in .bh-quiz-mark, set by quiz.js. */
.bh-quiz-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bh-quiz-option:focus-within {
  outline: 2px solid var(--bh-accent);
  outline-offset: 2px;
}

.bh-quiz-mark {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--bh-gray-light);
}

.bh-quiz-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.bh-quiz-verdict {
  font-weight: 700;
}

.bh-quiz-explanation {
  color: var(--bh-gray-light);
  white-space: pre-line;
}

.bh-quiz-option.is-selected {
  border-color: var(--bh-accent);
}

.bh-quiz-option.is-selected .bh-quiz-mark {
  color: var(--bh-accent);
}

.bh-quiz.is-locked .bh-quiz-option {
  cursor: default;
}

.bh-quiz.is-locked .bh-quiz-option:hover {
  border-color: var(--bh-gray);
}

.bh-quiz-option.is-correct {
  border-color: var(--bh-success) !important;
  background-color: rgba(76, 175, 80, 0.12);
}

.bh-quiz-option.is-wrong {
  border-color: var(--bh-danger) !important;
  background-color: rgba(192, 57, 43, 0.12);
}

/* A correct answer the visitor didn't pick (multi-answer questions, or
   the right one after a wrong single answer) — dashed so it reads as
   "this was the answer" rather than "you got this one". */
.bh-quiz-option.is-missed {
  border-color: var(--bh-success) !important;
  border-style: dashed;
}

.bh-quiz-option.is-correct .bh-quiz-mark,
.bh-quiz-option.is-correct .bh-quiz-verdict,
.bh-quiz-option.is-missed .bh-quiz-mark,
.bh-quiz-option.is-missed .bh-quiz-verdict {
  color: var(--bh-success);
}

.bh-quiz-option.is-wrong .bh-quiz-mark,
.bh-quiz-option.is-wrong .bh-quiz-verdict {
  color: #e0685c;
}

.bh-quiz-result {
  border-top: 1px solid var(--bh-gray);
  padding-top: 1rem;
}

.bh-quiz-result-explanation {
  white-space: pre-line;
}
/* ---------- Outlooks (outlook.php, weerkaart outlook layer) ---------- */

.ol-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-right: 0.35rem;
  border-radius: 3px;
  vertical-align: -0.1rem;
  background: var(--bh-gray);
  flex: 0 0 auto;
}

.ol-swatch--none {
  background: transparent;
  border: 1px dashed var(--bh-gray);
}

#ol-map {
  height: 60vh;
  min-height: 420px;
  background-color: var(--bh-charcoal);
}

.ol-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ol-levels th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bh-gray-light);
  white-space: nowrap;
}

.ol-levels td {
  font-size: 0.85rem;
}

.ol-levels tr.is-drawn td {
  color: #fff;
  background-color: rgba(230, 195, 68, 0.08);
}

.ol-drawn {
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  color: var(--bh-black);
  background-color: var(--bh-accent);
}

.ol-lookup-title {
  font-size: 1rem;
  color: #fff;
  margin: 0 0 0.6rem;
}

.ol-lookup-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ol-lookup-row input {
  flex: 1 1 10rem;
  min-width: 0;
}

.ol-lookup-result {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--bh-fog);
}

.ol-lookup-where {
  margin: 0 0 0.4rem;
  font-weight: 600;
  color: #fff;
}

.ol-lookup-line {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  margin-bottom: 0.45rem;
}

.ol-lookup-line .ol-swatch {
  margin-top: 0.2rem;
}

.ol-lookup-what,
.ol-lookup-note {
  color: var(--bh-gray-light);
  font-size: 0.8rem;
}