/* wp-content/plugins/notts-osteo-elements/assets/css/faq.css
 *
 * The FAQ accordion. Section chrome comes from home-blocks.css; only the list is here.
 *
 * Ruled rows and a numbered column, matching the price table — the two are the same kind of object
 * (a numbered list of things you scan for the one that applies to you) and the site should not
 * invent a second visual language for the second one.
 *
 * Author: Sean Burn
 */

.nosteo-faq__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--nosteo-hair);
  /* Answers are read, so hold them to a comfortable measure even on a very wide screen. */
  max-width: 90ch;
}
.nosteo-faq__list > li { list-style: none; }

.nosteo-faq__item { border-bottom: 1px solid var(--nosteo-hair); }

.nosteo-faq__d {
  /* Elementor and some themes set `details { margin-bottom }`; the rule is the separator here. */
  margin: 0;
}

/* ---------- the question ---------- */

.nosteo-faq__q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none;
  transition: color 200ms var(--nosteo-ease);
}
/* The default disclosure triangle, in both dialects. The sign on the right replaces it. */
.nosteo-faq__q::-webkit-details-marker { display: none; }
.nosteo-faq__q::marker { content: ""; }

.nosteo-faq__q:hover { color: var(--nosteo-resolve-ink); }
.nosteo-faq__q:focus-visible {
  outline: 2px solid var(--nosteo-accent);
  outline-offset: -3px;
}

.nosteo-faq__num {
  font-family: var(--nosteo-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--nosteo-resolve-ink);
  /* Optically aligned with the first line of the question rather than its box top. */
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
}

.nosteo-faq__text {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: var(--nosteo-weight-strong);
  text-wrap: balance;
}

/* A plus that becomes a minus. Two bars, one rotated — cheaper than swapping an icon and it can
   be transitioned. */
.nosteo-faq__sign {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  flex: none;
}
.nosteo-faq__sign::before,
.nosteo-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--nosteo-ink);
  transform: translateY(-50%);
  transition: transform 260ms var(--nosteo-ease), opacity 200ms var(--nosteo-ease);
}
.nosteo-faq__sign::after { transform: translateY(-50%) rotate(90deg); }
/* Open: the upright bar folds away and the sign reads as a minus. */
.nosteo-faq__d[open] .nosteo-faq__sign::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}
.nosteo-faq__d[open] .nosteo-faq__q { color: var(--nosteo-resolve-ink); }

/* ---------- the answer ----------
   A grid row animated from 0fr to 1fr. `height: auto` cannot be transitioned, and a fixed max-height
   would either clip a long answer or snap open a short one. */
.nosteo-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--nosteo-ease);
}
.nosteo-faq__d[open] .nosteo-faq__panel { grid-template-rows: 1fr; }

.nosteo-faq__a {
  overflow: hidden;              /* required: the collapsed row is zero-height */
  padding-left: 46px;            /* aligned under the question, clear of the numeral */
}
.nosteo-faq__a > p {
  margin: 0 0 1em;
  max-width: 68ch;
  font-size: clamp(15px, 1.6vw, 16.5px);
  line-height: 1.68;
  color: var(--nosteo-muted);
}
.nosteo-faq__a > p:last-child { margin-bottom: 0; }
.nosteo-faq__d[open] .nosteo-faq__a { padding-bottom: 26px; }

.nosteo-faq__link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--nosteo-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nosteo-resolve-ink);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--nosteo-resolve);
  transition: color 200ms var(--nosteo-ease), box-shadow 200ms var(--nosteo-ease);
}
/* Restated: reset.css carries `a:hover{color:#336}` at (0,1,1), which outranks the rule above. */
.nosteo-faq__link:hover,
.nosteo-faq__link:focus-visible {
  color: var(--nosteo-accent);
  box-shadow: inset 0 -1px 0 var(--nosteo-accent);
}

@media (max-width: 480px) {
  /* The numeral costs 46px of a 335px screen and the question needs it more. */
  .nosteo-faq__q { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .nosteo-faq__num { display: none; }
  .nosteo-faq__a { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nosteo-faq__panel,
  .nosteo-faq__q,
  .nosteo-faq__sign::before,
  .nosteo-faq__sign::after,
  .nosteo-faq__link { transition: none; }
}