/* /ajuda — category index, search filters, FAQ accordions (details/summary). */

.help-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.help-cats a {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  min-height: 72px; padding: 14px 16px; border: 2px solid var(--color-ink); background: var(--color-surface);
  color: var(--color-ink); text-decoration: none; box-shadow: 3px 3px 0 var(--color-ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.help-cats a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--color-brand); background: #FFFCF4; color: var(--color-ink); }
.help-cats .icon { grid-row: span 2; width: 26px; height: 26px; color: var(--color-brand-text); }
.help-cats span { font: 700 16px/1.25 var(--font-body); }
.help-cats small { font: 400 13px/1.3 var(--font-data); color: var(--color-ink-2); }

.help-filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
.help-filters input[type="search"] { font-size: 17px; }
.help-actions { display: flex; gap: 12px; }

.faq-list { display: grid; gap: 0; }
.faq-group { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 20px 48px; padding: 34px 0; border-top: var(--bw) solid var(--color-ink); scroll-margin-top: 20px; }
.faq-group[hidden] { display: none; }
.faq-side { align-self: start; }
.faq-cat { display: flex; align-items: center; gap: 10px; font: 400 var(--fs-h3)/1.1 var(--font-display); }
.faq-cat .icon { width: 26px; height: 26px; color: var(--color-brand-text); flex: none; }
.faq-photo { margin-top: 16px; }
.faq-photo .print { aspect-ratio: 4 / 3; overflow: hidden; }
.faq-photo .print img { width: 100%; height: 100%; object-fit: cover; }
.faq-side .sec-more { margin-top: 10px; }

.faq-items { display: grid; gap: 12px; align-content: start; }
.faq { border: 2px solid var(--color-ink); background: var(--color-surface); scroll-margin-top: 20px; }
.faq[hidden] { display: none; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 18px;
  cursor: pointer; list-style: none; font: 700 17px/1.35 var(--font-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: #FFFCF4; }
.faq summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.faq summary .icon { width: 22px; height: 22px; flex: none; transition: transform var(--dur-fast) var(--ease); }
.faq[open] summary { background: var(--color-ink); color: var(--color-bg); }
.faq[open] summary .icon { transform: rotate(180deg); }
.faq-a { padding: 16px 18px 18px; font-size: 16px; line-height: 1.6; border-top: 2px solid var(--color-ink); }
.faq-a a { color: var(--color-accent); }
.faq-a .ext { color: var(--color-accent); }
.linkish { display: inline; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--color-accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 44px; }

.help-empty-btns { justify-content: center; margin-top: 18px; }
.help-more { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px 56px; align-items: center; }
.help-more-btns { margin-top: 26px; }
.help-more-photo { aspect-ratio: 16 / 9; border: var(--bw) solid var(--color-ink); }

@media (max-width: 1024px) {
  .faq-group { grid-template-columns: 1fr; }
  .faq-side { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 4px 20px; align-items: center; }
  .faq-side .faq-photo { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .help-more { grid-template-columns: 1fr; }
  .help-filters { grid-template-columns: 1fr 1fr; }
  .help-filters .help-q { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .help-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .help-cats a { min-height: 64px; padding: 10px 12px; column-gap: 8px; }
  .help-cats .icon { width: 22px; height: 22px; }
  .help-cats span { font-size: 15px; }
  .help-filters { grid-template-columns: 1fr; }
  .help-actions .btn { flex: 1; justify-content: center; }
  .faq-side { grid-template-columns: minmax(0, 1fr) 110px; }
  .faq summary { font-size: 16px; padding: 10px 14px; }
  .faq-a { padding: 14px; }
}
@media (max-width: 389px) {
  .help-cats { grid-template-columns: 1fr; }
}
@media (min-width: 1181px) { .help-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.faq:not([open]) > .faq-a { display: none; }
.faq-a .ext { display: inline; min-height: 0; }
.faq-a .ext .icon { vertical-align: -3px; margin-left: 4px; }
.faq-a .ext small { margin-left: 6px; }

.faq-cat { overflow-wrap: anywhere; }   /* long category names never run under the side photo on 320 */