/* som-map.css — the consent placeholder that stands in for the footer Google map
   (see assets/js/som-map.js, markup from tools/map_consent.py).
   Footer palette: text #E9E3D6, muted #A8A294, accent #C19A4E, hairline
   rgba(233,227,214,0.18) — the same values the surrounding footer uses inline. */

/* 150px is the height the iframe declares. Keeping the placeholder identical means the
   swap on click moves nothing below it. */
.som-map {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  height: 150px;
  padding: 0 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(233, 227, 214, 0.18);
  background: rgba(233, 227, 214, 0.04);
}

/* Once the embed is in, the box is only a frame around it: drop the padding and the
   placeholder's centring so the map fills it edge to edge, as before. */
.som-map[data-som-map-loaded='1'] {
  display: block;
  padding: 0;
  line-height: 0;
  background: none;
}

.som-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* Carried over from the old inline style — the map used to sit slightly desaturated
     against the dark footer. */
  filter: grayscale(0.2);
}

/* The container takes focus once the map replaces the button (assets/js/som-map.js). It is
   a scripted focus, not a tab stop, so an outline ring here would look like a stray box —
   but it must not be silent either: the frame inside it is the thing that just appeared. */
.som-map:focus {
  outline: 2px solid #C19A4E;
  outline-offset: 2px;
}

.som-map:focus:not(:focus-visible) {
  outline: none;
}

/* The eyebrow face the footer uses for its meta lines, so the placeholder reads as part of
   the footer rather than as an error state. */
.som-map-note {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A8A294;
}

/* The markup ships the button `hidden`, because it does nothing until som-map.js binds it.
   `display:flex` below would defeat the UA's [hidden] rule, so restore it explicitly —
   without this, a visitor with JavaScript off sees a button that cannot work. */
.som-map-btn[hidden] {
  display: none;
}

/* Pill, matching the social icons above it. */
.som-map-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(233, 227, 214, 0.22);
  background: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E9E3D6;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.som-map-btn:hover,
.som-map-btn:focus-visible {
  color: #C19A4E;
  border-color: #C19A4E;
  background: rgba(193, 154, 78, 0.08);
}

/* Fallback for browsers without :focus-visible support — never leave the keyboard user
   without a ring. */
.som-map-btn:focus {
  outline: 2px solid #C19A4E;
  outline-offset: 2px;
}

.som-map-btn:focus:not(:focus-visible) {
  outline: none;
}

/* --- Light variant ---------------------------------------------------------
   The placeholder was themed for the dark footer it was born in. On the contact page it
   sits inside a pale card, where off-white text on cream is barely a shape. Same component,
   same behaviour, colours that belong to where it is. */
.som-map--light {
  border-color: #D1C9BD;
  background: #FFFFFF;
}

.som-map--light .som-map-note {
  color: #696059;
}

.som-map--light .som-map-btn {
  border-color: #D1C9BD;
  color: #1A1A1A;
}

.som-map--light .som-map-btn:hover,
.som-map--light .som-map-btn:focus-visible {
  color: #C19A4E;
  border-color: #C19A4E;
  background: rgba(193, 154, 78, 0.06);
}