/* ==========================================
   LOCALS SAY — the questions locals answer
   Loaded after styles.css; uses the same tokens.
   Fixed question list, no free-text input by design.
   ========================================== */

/* ============ HEADER ============ */
.locals-head {
  /* right padding keeps the title clear of the floated .bookmark-btn */
  position: relative;
  padding: 26px 66px 14px 24px;
}
.locals-head__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 8px;
}
.locals-head__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--forest-deep);
  margin: 0 0 6px;
  /* Wide enough for "The things you'd have / wished you knew." to break in
     two; the old 15ch was cut for a shorter headline and forced three. */
  max-width: 21ch;
}

/* Base rule is .concierge__start in styles.css; this page sits the label
   tighter to the list, since the header already pads 14px below the title. */
.qa__start {
  margin: 0 0 10px;
}

/* ============ QUESTION CARDS ============ */
.qa {
  padding: 6px 0 4px;
}
.qa-list {
  list-style: none;
  margin: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qa-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(31, 27, 20, 0.05);
}
.qa-card__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--forest-deep);
  -webkit-tap-highlight-color: transparent;
}
/* Hide the native disclosure triangle in both engines */
.qa-card__q::-webkit-details-marker { display: none; }
.qa-card__q::marker { content: ''; }

.qa-card__q:hover { background: rgba(44, 74, 58, 0.03); }
.qa-card__chev {
  flex: 0 0 auto;
  color: var(--rust);
  transition: transform 0.18s ease;
}
.qa-card[open] .qa-card__chev { transform: rotate(180deg); }

/* ============ ANSWER SCAFFOLD ============ */
.qa-card__a {
  padding: 2px 18px 16px;
  border-top: 1px solid var(--border);
}
.qa-part {
  margin: 14px 0 0;
}
.qa-part__label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
  margin: 0 0 5px;
}
/* Placeholder styling — deliberately reads as unfinished so nobody mistakes
   an empty slot for a real local answer. Replace with verified copy. */
.qa-part__todo {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-mute);
  font-style: italic;
  margin: 0;
  padding: 8px 10px;
  background: rgba(212, 154, 60, 0.09);
  border: 1px dashed rgba(212, 154, 60, 0.5);
  border-radius: 8px;
}
.qa-verified {
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
  margin: 16px 0 0;
}