/* v4.9.282 — the three-office map (Leaflet + OpenStreetMap).
   Scoped to .bd-offices-map so nothing else in the theme is touched.
   The map itself is a tile image (light), so only the frame, the labels
   and the list around it follow the theme tokens and need to read in both
   light and dark mode.
   v4.9.282: the Leaflet controls (the zoom "+"/"-" anchors, the
   attribution link, the popup close button and the popup's Directions
   link) now carry their own explicit colours and font metrics, because
   the theme's own anchor rules — which force anchors to white inside
   `.site-footer` — were rendering the zoom glyphs white on Leaflet's
   white control ground. See the block at the foot of this file. */

.bd-offices-map {
	position: relative;
	width: 100%;
	border-radius: inherit;
}

/* The map canvas. Hidden by the markup until Leaflet has drawn the map,
   so the list below shows instead when JavaScript is off. */
.bd-offices-map__canvas {
	width: 100%;
	height: 420px;
	background: var(--warm-ivory, #F3EFE3);
	border-radius: inherit;
	z-index: 0;
}

@media (max-width: 680px) {
	.bd-offices-map__canvas { height: 300px; }
}

/* In the footer the map fills the cell the iframe used to fill. */
.footer-map > .bd-offices-map {
	flex: 1;
	display: flex;
	min-height: 220px;
}
.footer-map .bd-offices-map__canvas {
	flex: 1;
	height: 100%;
	min-height: 220px;
}
@media (min-width: 1021px) {
	.footer-map > .bd-offices-map { min-height: 300px; }
	.footer-map .bd-offices-map__canvas { min-height: 300px; }
}
@media (max-width: 1020px) {
	.footer-map > .bd-offices-map,
	.footer-map .bd-offices-map__canvas { min-height: 200px; }
}

/* On the contact page the map sits inside the existing .map-embed frame. */
.map-embed .bd-offices-map__canvas { height: 420px; }
@media (max-width: 680px) {
	.map-embed .bd-offices-map__canvas { height: 300px; }
}

/* The no-JavaScript fallback list. */
.bd-offices-map__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}
.bd-offices-map__list[hidden] { display: none; }

.bd-offices-map__item {
	display: grid;
	grid-template-columns: minmax(8rem, auto) 1fr;
	gap: 0.15rem 1rem;
	align-items: baseline;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--line, #E5E1D5);
	border-radius: var(--radius-card, 8px);
	background: var(--paper, #FFFFFF);
}
.bd-offices-map__label {
	font-weight: 600;
	color: var(--ink, #12161A);
}
.bd-offices-map__addr {
	color: var(--body, #12161A);
}
.bd-offices-map__links {
	grid-column: 2;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}
@media (max-width: 560px) {
	.bd-offices-map__item { grid-template-columns: 1fr; }
	.bd-offices-map__links { grid-column: 1; }
}

/* ------------------------------------------------------------------
   Leaflet's own control furniture (v4.9.282).

   WHY EVERYTHING HERE IS PINNED AND NOT INHERITED
   Leaflet's zoom control is two plain <a> elements whose "+" and "-" are
   CSS-drawn text, and its attribution strip is a plain <a> too. The theme
   styles anchors globally and, inside the footer, forces them to white:
   style.css's `a { color: var(--gold-deep) }` and, more importantly,
   `.site-footer a { color: var(--ink) }` (with `--ink` redefined to
   `#FFFFFF` inside `.site-footer` by premium.css) plus premium.css's
   `.site-footer a, .site-footer a:visited { color: #FFFFFF }`.
   Those rules sit at the SAME specificity as Leaflet's own
   `.leaflet-bar a { color: black }` and `.leaflet-container a`, so which
   one wins is decided by stylesheet order alone. When the theme's rule
   wins (as it does in the live cascade, where the map is inside
   `.site-footer`), the glyph renders #FFFFFF on Leaflet's own #FFFFFF
   control ground — contrast 1:1, i.e. an empty white box with only the
   divider visible, exactly the defect the owner photographed.
   The controls therefore carry their own explicit colours and font
   metrics below, at a specificity no theme anchor rule can tie.
   ------------------------------------------------------------------ */

.bd-offices-map .leaflet-container {
	background: var(--warm-ivory, #F3EFE3);
	font-family: inherit;
	border-radius: inherit;
}

/* The zoom control's two anchors. Colour, ground and the font metrics the
   glyph needs, given explicitly so nothing is inherited from the theme. */
.bd-offices-map .leaflet-bar a,
.bd-offices-map .leaflet-bar a:link,
.bd-offices-map .leaflet-bar a:visited,
.bd-offices-map .leaflet-bar a:active,
.bd-offices-map .leaflet-bar a:hover,
.bd-offices-map .leaflet-bar a:focus {
	color: #12161A;
	background: #FFFFFF;
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	text-align: center;
	text-indent: 0;
	text-decoration: none;
}
.bd-offices-map .leaflet-touch .leaflet-bar a,
.bd-offices-map .leaflet-touch .leaflet-bar a:link,
.bd-offices-map .leaflet-touch .leaflet-bar a:visited,
.bd-offices-map .leaflet-touch .leaflet-bar a:active {
	font-size: 22px;
	line-height: 30px;
}
.bd-offices-map .leaflet-bar a:hover,
.bd-offices-map .leaflet-bar a:focus {
	background: #F1F4F2;
}
/* Keep Leaflet's "this end is reached" affordance: the glyph stays legible
   but is visibly muted, rather than falling back to Leaflet's #bbb. */
.bd-offices-map .leaflet-bar a.leaflet-disabled,
.bd-offices-map .leaflet-bar a.leaflet-disabled:hover,
.bd-offices-map .leaflet-bar a.leaflet-disabled:focus {
	color: #767C79;
	background: #F1F4F2;
}

/* The attribution strip and its link. The link is a plain anchor, so it
   collides with the theme's anchor rules in exactly the same way. */
.bd-offices-map .leaflet-control-attribution {
	background: rgba(255, 255, 255, 0.85);
	color: #333333;
}
.bd-offices-map .leaflet-control-attribution a,
.bd-offices-map .leaflet-control-attribution a:link,
.bd-offices-map .leaflet-control-attribution a:visited,
.bd-offices-map .leaflet-control-attribution a:hover,
.bd-offices-map .leaflet-control-attribution a:focus {
	color: #0B5C3F;
	text-decoration: none;
}
.bd-offices-map .leaflet-control-attribution a:hover,
.bd-offices-map .leaflet-control-attribution a:focus {
	text-decoration: underline;
}

/* The popup. Leaflet's popup is a white bubble in both themes, so its text
   is pinned dark rather than following --ink (which is light in dark mode
   and would vanish on the white bubble) — and the Directions link is pinned
   too, because as a bare anchor it otherwise loses to `.site-footer a`. */
.bd-offices-map .leaflet-popup-content { margin: 0.7rem 0.9rem; line-height: 1.45; }
.bd-offices-map .leaflet-popup-content-wrapper,
.bd-offices-map .leaflet-popup-tip { background: #FFFFFF; color: #1A1E1C; }
.bd-offices-map .leaflet-container a.leaflet-popup-close-button,
.bd-offices-map .leaflet-container a.leaflet-popup-close-button:hover,
.bd-offices-map .leaflet-container a.leaflet-popup-close-button:focus {
	color: #5A605D;
	text-decoration: none;
}
.bd-offices-map .bd-office-pop { display: flex; flex-direction: column; gap: 0.25rem; min-width: 11rem; color: #1A1E1C; }
.bd-offices-map .bd-office-pop strong { font-size: var(--fs-sm, 0.95rem); color: #12161A; }
.bd-offices-map .bd-office-pop__addr { color: #454D48; font-size: var(--fs-sm, 0.95rem); }
.bd-offices-map .bd-office-pop__note { color: #6B7570; font-size: 0.8rem; font-style: italic; }
.bd-offices-map .bd-office-pop__dir,
.bd-offices-map .bd-office-pop__dir:link,
.bd-offices-map .bd-office-pop__dir:visited,
.bd-offices-map .bd-office-pop__dir:hover,
.bd-offices-map .bd-office-pop__dir:focus { font-weight: 600; color: #0E7A56; }

/* Dark mode: the frame, the list and the popup text follow the tokens;
   the tile image stays a light image, which is expected of a map.
   The zoom control is themed to the dark palette with light glyphs
   (#EDF1EF on #1B2320) rather than left as a white box on the dark
   footer; the attribution strip goes dark with a mint link. */
html[data-bd-theme="dark"] .bd-offices-map__item {
	background: var(--paper, #14171A);
	border-color: var(--line, #2C3438);
}
html[data-bd-theme="dark"] .bd-offices-map__label { color: var(--ink, #EDF1EF); }
html[data-bd-theme="dark"] .bd-offices-map__addr { color: var(--body, #DCE3DF); }
html[data-bd-theme="dark"] .bd-offices-map .leaflet-container { background: var(--warm-ivory, #191D20); }
html[data-bd-theme="dark"] .bd-offices-map .leaflet-bar a {
	background: #1B2320;
	color: #EDF1EF;
	border-bottom-color: #2C3438;
}
html[data-bd-theme="dark"] .bd-offices-map .leaflet-bar a:hover,
html[data-bd-theme="dark"] .bd-offices-map .leaflet-bar a:focus { background: #232A2E; }
html[data-bd-theme="dark"] .bd-offices-map .leaflet-bar a.leaflet-disabled,
html[data-bd-theme="dark"] .bd-offices-map .leaflet-bar a.leaflet-disabled:hover {
	background: #1B2320;
	color: #6E7A74;
}
html[data-bd-theme="dark"] .bd-offices-map .leaflet-control-attribution {
	background: rgba(20, 23, 26, 0.82);
	color: #C9D2CD;
}
html[data-bd-theme="dark"] .bd-offices-map .leaflet-control-attribution a {
	color: #6FD3AC;
}