/* ==========================================================================
   Venue map (Leaflet)
   Loaded only on templates that call bt_venue_map(). Square corners throughout —
   brand language is squared edges and hairline rules, not rounded cards.
   ========================================================================== */

.bt-map-wrap {
  position: relative;
}

.bt-map {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--cream-deep);
  z-index: 0; /* keep tiles under the site header/mega-menu */
}

/* The pin is an inline SVG in a divIcon — strip Leaflet's default box. */
.bt-map-pin {
  background: none;
  border: 0;
}

.bt-map-pin svg {
  display: block;
  /* Tight, low-opacity shadow — just enough to lift the flat pin off the
     near-white basemap without reintroducing a fake bevel. */
  filter: drop-shadow(0 2px 3px rgba(10, 10, 10, 0.28));
}

/* --- Black-and-white basemap (default) ------------------------------------
   CARTO's light tiles are close to neutral but still carry pale blue water and
   pale green parks. Desaturating in CSS forces true black-and-white regardless
   of what the tile server serves, so the brass pin is the only colour anywhere
   on the map. Brightness is lifted slightly so the canvas reads as white paper
   rather than light grey.
   -------------------------------------------------------------------------- */

.bt-tiles-bw {
  filter: grayscale(1) brightness(1.06) contrast(1.04);
}

/* --- Dark basemap variant -------------------------------------------------
   Leaflet's default chrome is built for light tiles — white control buttons and
   a white attribution strip both punch holes in a near-black canvas. Restyle
   them so the brass pin stays the only bright thing on the map.
   -------------------------------------------------------------------------- */

.bt-map.is-dark {
  background: #1B1B1B;          /* canvas behind tiles while they load */
  border-color: #2A2A2A;        /* the cream hairline reads as a glow on black */
}

.bt-map.is-dark .leaflet-bar a {
  background: #1B1B1B;
  color: var(--cream-dim);
  border-bottom-color: #2F2F2F;
}

.bt-map.is-dark .leaflet-bar a:hover {
  background: #262626;
  color: var(--brass);
}

.bt-map.is-dark .leaflet-control-attribution {
  background: rgba(12, 12, 12, 0.72);
  color: #7C776D;
}

.bt-map.is-dark .leaflet-control-attribution a {
  color: var(--brass-text);
}

/* --- Popup ---------------------------------------------------------------- */

.bt-map .leaflet-popup-content-wrapper {
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(10, 10, 10, 0.18);
  border-top: 3px solid var(--brass);
}

.bt-map .leaflet-popup-content {
  margin: 16px 18px;
  font-family: inherit;
  line-height: 1.5;
}

.bt-map-popup-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}

.bt-map-popup-address {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
}

.bt-map .leaflet-popup-tip {
  background: var(--paper);
}

/* --- Controls ------------------------------------------------------------- */

.bt-map .leaflet-bar a {
  border-radius: 0;
  color: var(--ink);
  background: var(--paper);
  border-bottom-color: var(--line);
}

.bt-map .leaflet-bar a:hover {
  background: var(--cream);
  color: var(--brass-text);
}

.bt-map .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  color: var(--ink-mute);
}

.bt-map .leaflet-control-attribution a {
  color: var(--brass-text);
}

/* --- Directions link ------------------------------------------------------ */

.bt-map-directions {
  display: inline-block;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brass-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}

.bt-map-directions:hover {
  color: var(--ink);
}

/* Visible only to screen readers — used for the "opens in a new tab" hint. */
.bt-map-wrap .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- "Find us" section (About page) --------------------------------------- */

.bt-find-us {
  background: var(--cream);
  padding: 96px 80px;
  border-top: 1px solid var(--line);
}

.bt-find-us-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

/* --- Parking page layout -------------------------------------------------- */

/* Was inline on the template; lifted here so it can carry breakpoints —
   page-parking.php has no @media queries of its own. */
.bt-parking-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.bt-parking-aside {
  position: sticky;
  /* clears the pinned header rather than tucking underneath it */
  top: calc(var(--header-h) + 24px);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 960px) {
  .bt-parking-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Sticky is meaningless once stacked — it would pin the map over the content. */
  .bt-parking-aside {
    position: static;
  }

  .bt-find-us {
    padding: 72px 32px;
  }

  /* Stacked, or the map column collapses to a sliver of unreadable tiles. */
  .bt-find-us-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 640px) {
  .bt-find-us {
    padding: 56px 20px;
  }

  .bt-map {
    height: 300px !important;
  }
}