/* Uitleg (i) bij de live kaarten (assets/js/map-info.js, includes/map-info.php).
   Eigen bestand: niet onderaan style.css, om merge-conflicten te voorkomen. */
.bh-map-item-row { display: flex; align-items: stretch; gap: 0.15rem; }
.bh-map-item-row > .bh-map-item { flex: 1; min-width: 0; }
.bh-mi-btn { flex: 0 0 auto; width: 1.9rem; border: 0; border-radius: 0.4rem; background: none; color: var(--bh-fog); font-size: 0.95rem; }
.bh-mi-btn:hover, .bh-mi-btn:focus-visible, .bh-mi-btn[aria-expanded="true"] { background-color: var(--bh-charcoal-2); color: var(--bh-accent); }
.bh-mi-link { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem; padding: 0; border: 0; background: none; color: var(--bh-accent); font-size: 0.8rem; }
.bh-mi-link:hover { text-decoration: underline; }
.bh-mi {
  position: fixed; z-index: 1080; right: 1rem; bottom: 1rem; width: min(26rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100vh - 2rem)); overflow-y: auto;
  padding: 0.9rem 1rem 1rem; border: 1px solid var(--bh-gray); border-radius: 0.8rem; background-color: var(--bh-charcoal); color: var(--bh-white);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.bh-mi:focus { outline: none; }
.bh-mi-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bh-mi-eyebrow { color: var(--bh-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.bh-mi-title { margin: 0.3rem 0 0.6rem; font-size: 1.05rem; }
.bh-mi-block { margin-bottom: 0.55rem; padding: 0.5rem 0.65rem; border-left: 3px solid var(--bh-gray); border-radius: 0.4rem; background-color: rgba(255, 255, 255, 0.03); }
.bh-mi-block p { margin: 0.2rem 0 0; color: var(--bh-fog); font-size: 0.88rem; }
.bh-mi-block.is-read { border-left-color: var(--bh-accent); background-color: rgba(224, 167, 46, 0.08); }
.bh-mi-block.is-read p { color: var(--bh-white); }
.bh-mi-block.is-trap { border-left-color: #e4572e; }
.bh-mi-label { display: block; color: var(--bh-white); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.bh-mi-block.is-read .bh-mi-label { color: var(--bh-accent); }
.bh-mi-block.is-trap .bh-mi-label .bi { color: #e4572e; }
.bh-mi-learn { display: grid; gap: 0.25rem; margin-top: 0.7rem; }
.bh-mi-learn a { color: var(--bh-accent); font-size: 0.88rem; text-decoration: none; }
.bh-mi-learn a:hover { text-decoration: underline; }
@media (max-width: 575.98px) { .bh-mi { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; width: auto; max-height: 70vh; } }