/* Bluejack Ranch - map (Snippets > bjr_map) */

.bjr-map { background: #e6e4de; }
.bjr-map__canvas { width: 100%; height: clamp(420px, 40vw, 800px); }

/* Box above the pin */

.bjr-map__box {
  position: absolute;
  width: max-content;
  max-width: 280px;
  padding: clamp(1rem, 1.3vw, 1.5rem) clamp(1.25rem, 1.7vw, 2rem);
  border-radius: 10px;
  font-family: var(--bjr-font-body);
  font-size: clamp(.9rem, 1vw, 1.1rem);
  line-height: 1.45;
  text-align: center;
  color: var(--bjr-brown);
  background: var(--bjr-white);
  box-shadow: 0 6px 24px rgba(var(--bjr-brown-rgb), .22);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-100% - 10px));
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.bjr-map__box.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, calc(-100% - 18px));
  transition-delay: 0s;
}
/* pointer, also bridges the gap down to the pin */
.bjr-map__box::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -11px;
  border: 11px solid transparent;
  border-top-color: var(--bjr-white);
  border-bottom-width: 0;
}
.bjr-map__name,
.bjr-map__line { margin: 0; }
.bjr-map__name {
  margin-bottom: .3em;
  font-family: var(--bjr-font-heading);
  font-size: clamp(1.35rem, 1.6vw, 1.85rem);
  line-height: 1.15;
}
.bjr-map__link {
  display: inline-block;
  margin-top: .85em;
  font-size: .8em;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: .3em;
  color: var(--bjr-orange);
}
.bjr-map__link:hover,
.bjr-map__link:focus-visible { color: var(--bjr-brown); }

@media (prefers-reduced-motion: reduce) {
  .bjr-map__box { transition: none; }
}