/* FAQ — grouped accordions, search, topic index. */
.faq { padding-top: clamp(2.5rem, 1.5rem + 4vw, 6rem); interpolate-size: allow-keywords; }
.faq__grid { display: grid; gap: var(--s-6); }

/* side: title, search, topics */
.faq__search { margin-top: var(--s-5); position: relative; max-width: 26rem; }
.faq__input {
  width: 100%; min-height: 52px; padding: 0 0 0 30px;
  background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  font-size: var(--fs-md); transition: border-color 0.25s var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23121211' stroke-width='1.3'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5'/%3E%3Cpath d='M11.6 11.6 16 16'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 50%;
}
.faq__input::placeholder { color: var(--faint); }
.faq__input:hover { border-bottom-color: var(--fg); }
.faq__input:focus-visible { outline: none; border-bottom-color: var(--fg); box-shadow: 0 1px 0 0 var(--fg); }
.faq__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' stroke='%23121211' stroke-width='1.3'%3E%3Cpath d='M3 3l10 10M13 3 3 13'/%3E%3C/svg%3E") center / 14px no-repeat; }
.faq__count { min-height: 1.4em; position: absolute; top: 100%; margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--muted); }

.faq__index { margin-top: var(--s-6); }
.faq__index ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-sm); }
.faq__index a { text-decoration: none; color: var(--muted); padding-block: var(--s-2); display: inline-block; transition: color 0.2s; }
.faq__index a:hover { color: var(--fg); }
.faq__index a.is-off { color: var(--faint); opacity: 0.55; }

.faq__figure { display: none; margin: 0; }
.faq__figure-link { display: grid; gap: var(--s-3); text-decoration: none; }
.faq__figure-link:hover .wall-label__title { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* list */
.faq__group { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.faq__group + .faq__group { margin-top: var(--s-8); }
.faq__group-title { font-size: var(--fs-xl); margin-bottom: var(--s-4); }
.faq__item > summary { min-height: 60px; padding-block: var(--s-3); gap: var(--s-4); font-size: var(--fs-md); line-height: 1.35; }
.faq__item > summary::after { flex: none; }
.faq__item > summary:hover { color: var(--ink-2); }
.faq__item .accordion__body { font-size: var(--fs-base); line-height: var(--lh-body); max-width: 38rem; padding-right: var(--s-6); }
.faq__item .accordion__body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); }
.faq__item .accordion__body a:hover { text-decoration-color: currentColor; }
/* each group is its own list: give every group a closing rule */
.faq__group .faq__item:last-of-type { border-bottom: 1px solid var(--line); }
.faq__item:target > summary { color: var(--focus); }

/* smooth open/close where supported (Chromium 131+); others snap */
.faq__item::details-content {
  block-size: 0; overflow-y: clip;
  transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }

/* search state */
.faq__item.is-hidden, .faq__group.is-hidden { display: none; }
.faq__empty { padding-block: var(--s-6); }
.faq__empty .h3 + p { margin-top: var(--s-2); }
.faq__contact { margin-top: var(--s-8); font-size: var(--fs-md); }

@media (min-width: 1000px) {
  .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
  .faq__side { position: sticky; top: calc(var(--header-h) + var(--s-6)); display: grid; gap: var(--s-5); align-content: start; }
  .faq__index { margin-top: var(--s-4); }
  .faq__index a { padding-block: 5px; }
  .faq__index a.is-current { color: var(--fg); }
  .faq__search { margin-top: 0; }
  .faq__index ul { flex-direction: column; gap: 0; font-size: var(--fs-base); }
  .faq__list { padding-top: 0.5rem; }
}
/* the painting only joins on screens tall enough to hold it beside the list */
@media (min-width: 1000px) and (min-height: 820px) {
  .faq__figure { display: block; max-width: 22rem; }
}