/* OmniHemEi: FAQ accordions and the "Where we work" block.
   Load after site.css. Lines are drawn from currentColor, so both blocks follow
   the page's own text colour in light and night mode without new tokens. */

.faq,
.places {
  --rule: rgba(127, 127, 127, .3);
  --rule: color-mix(in srgb, currentColor 16%, transparent);
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  line-height: 1.35;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

.faq-chev {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  transition: transform .2s ease;
}
.faq-chev svg { width: .75rem; height: .75rem; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }

.faq-answer { padding: 0 2.75rem 1.25rem 0; max-width: 64ch; }
.faq-answer .body { margin: 0; }
.faq-answer a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }

/* ---------- Where we work: two addresses and a small map in one card ---------- */
.places > .core {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(14rem, 19rem);
  gap: 1.5rem 2rem;
  align-items: start;
}

.place { display: grid; gap: .45rem; align-content: start; }
.place > * { margin: 0; }
.place address { font-style: normal; }
.place + .place { padding-left: 2rem; border-left: 1px solid var(--rule); }

.place-map {
  aspect-ratio: 16 / 10;
  max-height: 12rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}
.place-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Dim the (always light) Google map a little at night */
:root[data-theme="dark"] .place-map iframe { filter: brightness(.82) contrast(1.05); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .place-map iframe { filter: brightness(.82) contrast(1.05); }
}

@media (max-width: 860px) {
  .places > .core { grid-template-columns: 1fr 1fr; }
  .place-map { grid-column: 1 / -1; aspect-ratio: 16 / 7; max-height: 12rem; }
}
@media (max-width: 560px) {
  .places > .core { grid-template-columns: 1fr; }
  .place + .place {
    padding: 1.25rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
  .place-map { aspect-ratio: 16 / 9; }
}

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