/* FAQ pages "Zoekloket" (include/faq_list.php, script/faq.js). Design: mockup 2 in mockups/faq-v2 (Tom 2026-11-09).
   Parts in the look of "Andere websites" (theme icons, purple circles, notice style 1, blog meta row, button style 1),
   copied here and scoped to .clb-faq, so a change on one page never breaks the other. House-style variables from
   base.css; teal and ochre only as a surface with dark text. The theme sets font-family, line-height and outline on
   every element (base.css "*"), so the rules set them here. */

.clb-faq, .clb-faq * { box-sizing: border-box; line-height: 1.5; }
.clb-faq, .clb-faq * { font-family: 'Open Sans', Arial, sans-serif; }
.clb-faq [hidden] { display: none !important; }
.clb-faq .fq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clb-faq-message { margin: 0 0 30px; padding: 16px 20px; border-left: 6px solid var(--clb-purple, #532464);
  background: var(--clb-surface-soft, #F5F5F3); color: var(--clb-ink, #1A1A1A); }
.clb-faq .template-icon-feature { display: inline-block; flex: 0 0 auto; vertical-align: middle; }

/* Focus ring (the theme removes outlines) */
.clb-faq a:focus-visible, .clb-faq button:focus-visible, .clb-faq summary:focus-visible { outline: 3px solid var(--clb-purple, #532464); outline-offset: 2px; }
.clb-faq .fq-pill:focus-visible, .clb-faq .fq-browse-link:focus-visible { outline-color: var(--clb-primary, #C4004B); }

/* Search */
.clb-faq .fq-search { max-width: 760px; margin: 0 auto 18px; text-align: center; }
.clb-faq .fq-search label { display: block; margin: 0 0 14px; color: var(--clb-purple, #532464); font-size: 26px; font-weight: 400; }
.clb-faq .fq-search-row { display: flex; gap: 8px; }
.clb-faq .fq-search input[type="search"] { flex: 1; min-width: 0; height: 56px; margin: 0; padding: 0 14px 0 44px; border: 2px solid #8B7D72; border-radius: 5px;
  background: #fff url('/media/image/icon/feature/tiny/magnifier.png') no-repeat 14px 50%; color: var(--clb-ink, #1A1A1A); font-size: 18px; }
.clb-faq .fq-search input[type="search"]:focus { outline: 3px solid var(--clb-purple, #532464); outline-offset: 2px; border-color: var(--clb-purple, #532464); }
.clb-faq .fq-search-btn { flex: 0 0 auto; margin: 0; border: 0; cursor: pointer; } /* a <button>: no browser border (Tom 2026-11-10) */

/* Refine pills */
.clb-faq .fq-refine { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0 0 30px; }
.clb-faq .fq-refine-label { color: #666; font-size: 14px; }
.clb-faq .fq-pill { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 14px; border: 2px solid var(--clb-purple, #532464);
  border-radius: 18px; background: #fff; color: var(--clb-purple, #532464); font-size: 14px; cursor: pointer; }
.clb-faq .fq-pill span { color: #595959; font-size: 12px; }
.clb-faq .fq-pill[aria-pressed="true"] { background: var(--clb-purple, #532464); color: #fff; }
.clb-faq .fq-pill[aria-pressed="true"] span { color: #fff; }
.clb-faq .fq-pill[aria-pressed="true"] .template-icon-feature { filter: brightness(0) invert(1); }

/* Start view: featured questions and browse per theme */
.clb-faq .fq-featured { margin: 0 0 34px; padding: 18px 22px; background: var(--clb-surface-soft, #F5F5F3); border-left: 6px solid var(--clb-purple, #532464); }
.clb-faq .fq-featured-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--clb-purple, #532464); font-size: 18px; }
.clb-faq .fq-featured ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 30px; }
.clb-faq .fq-featured li { position: relative; margin: 0 0 8px; padding: 0 0 0 16px; break-inside: avoid; }
.clb-faq .fq-featured li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--clb-primary, #C4004B); }
.clb-faq .fq-featured a { color: var(--clb-ink, #1A1A1A); }
.clb-faq .fq-featured a:hover { color: var(--clb-primary, #C4004B); }
.clb-faq .fq-browse h3 { margin: 0 0 14px; color: var(--clb-purple, #532464); font-size: 18px; }
.clb-faq .fq-browse ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.clb-faq .fq-browse li { margin: 0; padding: 0; }
.clb-faq .fq-browse-link { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px; border: 1px solid var(--clb-hairline, #DEDEDE);
  border-radius: 5px; background: #fff; color: var(--clb-ink, #1A1A1A); text-decoration: none; }
.clb-faq .fq-browse-link:hover { border-color: var(--clb-purple, #532464); }
.clb-faq .fq-browse-link strong { display: block; color: var(--clb-purple, #532464); font-size: 16px; }
.clb-faq .fq-browse-link small { color: #595959; font-size: 13px; }
.clb-faq .fq-theme-circle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--clb-purple, #532464); }
.clb-faq .fq-all { margin: 16px 0 34px; text-align: center; }
.clb-faq .fq-all a { color: var(--clb-primary, #C4004B); font-weight: 700; text-decoration: underline; }

/* Count, reset, empty message */
.clb-faq .fq-listhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.clb-faq .fq-count { margin: 0 0 12px; color: #555; font-weight: 600; }
.clb-faq .fq-reset { color: var(--clb-primary, #C4004B); font-size: 14px; font-weight: 700; text-decoration: underline; }
.clb-faq .fq-empty { margin: 0 0 20px; padding: 16px 20px; border-left: 6px solid var(--clb-purple, #532464);
  background: var(--clb-surface-soft, #F5F5F3); color: var(--clb-ink, #1A1A1A); }

/* One question (native details, theme accordion look) */
.clb-faq .fq-item { margin: 0; border-bottom: 1px solid var(--clb-hairline, #DEDEDE); scroll-margin-top: 165px; }
.clb-faq .fq-summary { display: flex; align-items: center; gap: 16px; padding: 12px 0; list-style: none; cursor: pointer;
  color: var(--clb-ink, #1A1A1A); font-size: 16px; font-weight: 600; }
.clb-faq .fq-summary::-webkit-details-marker { display: none; }
.clb-faq .fq-summary:hover .fq-q { color: var(--clb-primary, #C4004B); }
.clb-faq .fq-mark { position: relative; flex: 0 0 32px; width: 32px; height: 32px; border: 2px solid var(--clb-primary, #C4004B);
  border-radius: 8px 0 8px 0; background: #fff; }
.clb-faq .fq-mark::before, .clb-faq .fq-mark::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px;
  margin: -1px 0 0 -6px; background: var(--clb-primary, #C4004B); }
.clb-faq .fq-mark::after { transform: rotate(90deg); }
.clb-faq .fq-item[open] > .fq-summary .fq-mark { background: var(--clb-primary, #C4004B); }
.clb-faq .fq-item[open] > .fq-summary .fq-mark::before { background: #fff; }
.clb-faq .fq-item[open] > .fq-summary .fq-mark::after { display: none; }
.clb-faq .fq-item[open] > .fq-summary .fq-q { color: var(--clb-purple, #532464); }
.clb-faq .fq-q { flex: 1; }
.clb-faq .fq-crumb { display: block; margin: 2px 0 0; color: #595959; font-size: 12px; font-weight: 400; }
.clb-faq .fq-local { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px 1px 6px; border-radius: 10px;
  background: #F3EDF5; color: var(--clb-purple, #532464); font-size: 12px; font-weight: 700; white-space: nowrap; vertical-align: 1px; }
.clb-faq .fq-answer { padding: 0 0 18px 48px; color: var(--clb-ink, #1A1A1A); font-size: 15px; }
.clb-faq .fq-answer p { margin: 0 0 10px; }
.clb-faq .fq-answer ul, .clb-faq .fq-answer ol { margin: 0 0 10px 20px; padding: 0; }
.clb-faq .fq-answer ul { list-style: disc; }
.clb-faq .fq-answer ol { list-style: decimal; }
.clb-faq .fq-answer li { margin: 0 0 4px; padding: 0; }
.clb-faq .fq-answer a { color: var(--clb-primary, #C4004B); text-decoration: underline; }
.clb-faq .fq-append { margin: 12px 0; padding: 12px 16px; border-left: 4px solid var(--clb-purple, #532464); background: #F3EDF5; }
.clb-faq .fq-append-title { margin: 0 0 6px; }
.clb-faq .fq-append .fq-local { margin: 0; background: #fff; }
.clb-faq .fq-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; padding: 8px 0 0; border-top: 1px dotted var(--clb-hairline, #DEDEDE);
  border-bottom: 0; color: #595959; font-size: 13px; text-align: left; }
.clb-faq .fq-meta > div { margin: 0; padding-left: 24px; background-position: 0 3px; line-height: 1.5; }
.clb-faq .fq-permalink { color: var(--clb-primary, #C4004B); font-size: 13px; }
/* "Kopieer link" button (made by faq.js from .fq-permalink): magenta outline, filled on hover/focus and after copying */
.clb-faq .fq-copy { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; padding: 4px 12px;
  border: 2px solid var(--clb-primary, #C4004B); border-radius: 3px; background: #fff; color: var(--clb-primary, #C4004B);
  font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.clb-faq .fq-copy:hover, .clb-faq .fq-copy:focus-visible, .clb-faq .fq-copy.is-done { background: var(--clb-primary, #C4004B); color: #fff; }
.clb-faq .fq-copy:focus-visible { outline: 2px solid var(--clb-purple, #532464); outline-offset: 2px; }
.clb-faq .fq-copy-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.clb-faq .fq-copy span { font: inherit; line-height: inherit; }
.clb-faq .fq-item:target > .fq-summary, .clb-faq .fq-item:has(.fq-alias:target) > .fq-summary { background: #F3EDF5; }
.clb-faq .fq-alias { display: block; height: 0; scroll-margin-top: 165px; }

/* Pager (house style "search-pagination" from base.min.css); numbers outside the 3-number window under 500 px */
.clb-faq .fq-pager ul { margin: 0; padding: 0; list-style: none; }

/* "Staat je vraag er niet bij?" (theme notice style 1: magenta block left from base.css) */
.clb-faq .fq-notice { margin: 40px 0 10px; border: 1px solid var(--clb-hairline, #DEDEDE); }
.clb-faq .fq-notice .template-component-notice-content { display: flex; width: auto; }
.clb-faq .fq-notice .template-component-notice-content-left { display: flex; flex: 0 0 90px; align-items: center; justify-content: center; }
.clb-faq .fq-notice .template-component-notice-content-right { flex: 1; padding: 16px 22px; border: 0; }
.clb-faq .fq-notice-title { margin: 0 0 6px; color: var(--clb-purple, #532464); font-size: 16px; }
.clb-faq .fq-notice p { margin: 0 0 10px; color: var(--clb-ink, #1A1A1A); }
.clb-faq .fq-notice-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 14px 0 0 !important; }
.clb-faq .fq-link { color: var(--clb-primary, #C4004B); font-weight: 700; text-decoration: underline; }

/* Theme column widths (responsive.css): 1050 / 930 (< 1070) / 750 (< 980) / 460 (< 788) / 300 (< 500) */
@media only screen and (max-width: 787px) {
  .clb-faq .fq-answer { padding-left: 0; }
  .clb-faq .fq-featured ul { columns: 1; }
  .clb-faq .fq-browse ul { grid-template-columns: 1fr; }
  .clb-faq .fq-search label { font-size: 21px; }
}
@media only screen and (max-width: 499px) {
  .clb-faq .fq-search-row { flex-wrap: wrap; }
  .clb-faq .fq-search-btn { width: 100%; }
  .clb-faq .fq-pager .fq-pager-wide { display: none; }
  .clb-faq .fq-notice .template-component-notice-content-left { flex-basis: 56px; }
  .clb-faq .fq-summary { gap: 10px; }
}