/* ==========================================================================
   Component: FAQ accordion (.cm-faq)
   Static-first: with JS off, every answer is visible (details-style). site.js
   collapses them and wires one-open-at-a-time toggling. Markup contract:
     <div class="cm-faq" data-faq>
       <div class="cm-faq__item">
         <button class="cm-faq__q" aria-expanded="false" aria-controls="a1">…</button>
         <div class="cm-faq__a" id="a1">…</div>
       </div>
     </div>
   ========================================================================== */

.cm-faq {
  border-top: 1px solid var(--cm-hairline);
}

.cm-faq__item {
  border-bottom: 1px solid var(--cm-hairline);
}

.cm-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  padding: 22px 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cm-ink);
}

/* The +/× marker (rotates to a × when open). */
.cm-faq__q::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  font-size: 26px;
  font-weight: 300;
  color: var(--cm-red);
  transition: transform var(--cm-dur) var(--cm-ease);
}

.cm-faq__q[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.cm-faq__a {
  padding: 0 44px 24px 0;
}

.cm-faq__a p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--cm-muted);
}

/* Collapsed only once JS is present (so JS-off keeps all answers visible). */
.cm-js .cm-faq__q[aria-expanded="false"] + .cm-faq__a {
  display: none;
}

/* --- Category group headings (Views grouping, faqs_hp/block_4 "Faqs FP") -
   Set via views-view-unformatted--faqs-hp--block-4.html.twig printing
   title before each group's items. Grouping renders one .cm-faq wrapper
   per category, so the base .cm-faq border-top (meant for the single,
   ungrouped accordion elsewhere on the site) is swapped here for spacing
   between groups instead. */
.cm-faq__group-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cm-ink);
  margin: 0 0 4px;
}

.view-display-id-block_4 .cm-faq {
  border-top: none;
}

.view-display-id-block_4 .cm-faq + .cm-faq {
  margin-top: 48px;
}

/* --- Search (exposed "Combine fields" filter, Better Exposed Filters) ---- */
.view-display-id-block_4 .views-exposed-form {
  margin-bottom: 32px;
}

.view-display-id-block_4 .views-exposed-form .form-item {
  margin: 0;
}

.view-display-id-block_4 .views-exposed-form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cm-ink);
  margin-bottom: 6px;
}

.view-display-id-block_4 .views-exposed-form input[type="text"],
.view-display-id-block_4 .views-exposed-form input[type="search"] {
  width: 100%;
  max-width: 420px;
  padding: 10px 16px;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-pill);
  font: inherit;
  font-size: 14.5px;
  color: var(--cm-ink);
  background: #fff;
  box-sizing: border-box;
}

.view-display-id-block_4 .views-exposed-form input[type="text"]:focus,
.view-display-id-block_4 .views-exposed-form input[type="search"]:focus {
  outline: none;
  border-color: var(--cm-ink);
}

/* Auto-submit is enabled, so the Apply button is redundant once JS has run —
   same progressive-enhancement convention as the accordion above: keep it
   for no-JS visitors, hide it once .cm-js is added. */
.cm-js .view-display-id-block_4 .views-exposed-form input[type="submit"] {
  display: none;
}

/* Admin-only "no CAPTCHA configured" debug link — same treatment as the
   webform pages (see webform.css .captcha-admin-links). */
.view-display-id-block_4 .captcha-admin-links {
  display: none;
}

/* --- Load more pager (Views Infinite Scroll) ----------------------------- */
.view-display-id-block_4 .pager {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.view-display-id-block_4 .pager__item {
  display: inline-block;
}

.view-display-id-block_4 .pager .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 26px;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-pill);
  color: var(--cm-ink);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--cm-dur) var(--cm-ease), transform var(--cm-dur) var(--cm-ease);
}

.view-display-id-block_4 .pager .button:hover {
  border-color: var(--cm-ink);
  transform: translateY(-2px);
}

/* Reset the global bare `strong{}` rule (base.css) inside answers -- at
   20px it renders bigger than the 18px question text above it. */
.cm-faq__a strong {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  padding-bottom: 0;
  display: inline;
}