/* Conversational FAQ Block
   ------------------------------------------------------------------
   This file declares LAYOUT and almost no paint.

   Background, text colour, border (colour, width, radius), font, size,
   weight, letter spacing, padding and margin all come from the block's
   own controls in the editor — the same panels every core block has.
   Nothing here needs a Customizer rule, and the font is whatever the
   theme already uses, because it is simply inherited.

   Two things the editor cannot reach on its own, because they are inner
   parts rather than the block itself, stay as the two colour controls
   the block already had:
     --cfaq-dark    the question bubble and the Ask button
     --cfaq-accent  the button on hover

   Three more are plumbing you never type — --cfaq-bw, --cfaq-bc and
   --cfaq-br — carrying the block's own border width, colour and radius to
   the cards. They exist because `inherit` cannot do it: <details> slots its
   content into a shadow tree, so a card's answer box would resolve `inherit`
   against that slot rather than against the card. The render fills these in
   from the block's border panel.
   ------------------------------------------------------------------ */

.cfaq {
  --cfaq-dark: #111;
  --cfaq-accent: #8cc63f;
  /* defaults; the render replaces each one the block's border panel sets */
  --cfaq-bw: 1.5px;
  --cfaq-bc: currentColor;
  --cfaq-br: 0;

  box-sizing: border-box;
  max-width: 1100px;
  margin-inline: auto;
  /* font, colour, background, border and spacing: left to the block */
}

.cfaq *, .cfaq *::before, .cfaq *::after { box-sizing: border-box; }

.cfaq__title {
  margin: 0;
  font-size: clamp(2.65rem, 5vw, 4.5rem);
  line-height: .95;
  letter-spacing: -.055em;
}
.cfaq__subtitle { margin: 14px 0 56px; font-size: 1.15rem; opacity: .75; }
.cfaq__greeting {
  max-width: 720px; margin: 0 0 28px; padding: 20px 24px;
  border: var(--cfaq-bw) solid var(--cfaq-bc); border-radius: var(--cfaq-br);
  font-size: 1.05rem;
}
.cfaq__label { margin: 26px 0 12px; font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }

.cfaq__items { display: grid; gap: var(--cfaq-gap, 12px); }
.cfaq__item { margin: 0; border: var(--cfaq-bw) solid var(--cfaq-bc); border-radius: var(--cfaq-br); }
.cfaq__item[hidden] { display: none; }
.cfaq__item summary {
  position: relative; display: flex; align-items: center; min-height: 62px;
  padding: 15px 58px 15px 20px; font-weight: 700; cursor: pointer; list-style: none;
}
.cfaq__item summary::-webkit-details-marker { display: none; }
.cfaq__item summary::after { content: "→"; position: absolute; right: 20px; font-size: 1.55rem; font-weight: 400; }
.cfaq__item[open] { border-width: 0; } /* not border:0 — that would reset the colour the answer box inherits */
.cfaq__item[open] summary {
  width: max-content; max-width: 85%; min-height: auto;
  margin: 0 0 14px auto; padding: 14px 18px;
  border-radius: var(--cfaq-br);
  background: var(--cfaq-dark); color: #fff;
}
.cfaq__item[open] summary::after { display: none; }
.cfaq__answer {
  margin: 0; padding: 19px 22px;
  border: var(--cfaq-bw) solid var(--cfaq-bc); border-radius: var(--cfaq-br);
}
.cfaq__answer > :first-child { margin-top: 0; }
.cfaq__answer > :last-child { margin-bottom: 0; }

/* A question this visitor just asked: here for them, not yet for anyone
   else. An open item drops its own border by design, so the cue that
   carries in both states is the answer box. */
.cfaq__item--pending { border-style: dashed; }
.cfaq__item--pending .cfaq__answer { border-style: dashed; opacity: .75; font-style: italic; }

.cfaq__ask {
  display: flex; margin-top: 24px;
  border: var(--cfaq-bw) solid var(--cfaq-bc); border-radius: var(--cfaq-br);
  overflow: hidden;
}
.cfaq__ask input[type="text"] {
  flex: 1; min-width: 0;
  border: 0 !important; padding: 15px 20px !important;
  background: transparent !important; color: inherit; font: inherit;
}
.cfaq__ask input[type="text"]:focus { outline: 2px solid var(--cfaq-bc); outline-offset: -3px; }
.cfaq__ask button {
  min-width: 58px; padding: 0 18px;
  border: 0; border-left: var(--cfaq-bw) solid var(--cfaq-bc);
  background: var(--cfaq-dark); color: #fff;
  font: inherit; font-weight: 700; cursor: pointer;
}
.cfaq__ask button:hover, .cfaq__ask button:focus-visible { background: var(--cfaq-accent); color: var(--cfaq-dark); }
.cfaq__ask button[disabled] { opacity: .6; cursor: default; }

/* off-screen rather than display:none, which bots skip */
.cfaq__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cfaq__status { margin: 14px 0 0; opacity: .8; }
.cfaq__status[hidden] { display: none; }
.cfaq__status--error { color: #a0432a; }
.cfaq__empty { margin: 14px 0 0; opacity: .8; }
.cfaq__empty[hidden] { display: none; }

/* Phone. Built in, so there is no separate class to add for it. */
@media (max-width: 767px) {
  .cfaq__subtitle { margin-bottom: 36px; }
  .cfaq__greeting { padding: 17px 18px; }
  .cfaq__item summary { min-height: 58px; padding: 14px 50px 14px 16px; }
  .cfaq__item[open] summary { max-width: 92%; }
  .cfaq__answer { padding: 17px; }
  .cfaq__ask input[type="text"] { padding: 13px 15px !important; }
}