/*
 * Shared FAQ system for Mediums.nl and Helderzienden.be
 *
 * Canonical reference: the FAQ on the Ram daghoroscoop.
 * The deliberately broad selectors normalize legacy FAQ implementations on
 * both domains without requiring page-specific copies of the component CSS.
 */

:root {
  --mediums-faq-blue: #23466f;
  --mediums-faq-blue-strong: #173f6b;
  --mediums-faq-muted: #486186;
  --mediums-faq-accent: #7899cc;
  --mediums-faq-border: #dbe5f0;
  --mediums-faq-border-strong: #a8c5ea;
  --mediums-faq-surface: #ffffff;
  --mediums-faq-shadow: 0 5px 18px rgba(35, 70, 111, .07);
  --mediums-faq-shadow-open: 0 8px 24px rgba(35, 70, 111, .10);
  --mediums-faq-radius: 14px;
  --mediums-faq-gap: .68rem;
  --mediums-title-top: 2.5rem;
  --mediums-title-rule-gap: .8rem;
  --mediums-title-after: 1.75rem;
}

/*
 * One title rhythm for the public Mediums.nl content pages.
 * The old title blocks inherit different spacing from pt-* / pb-* helpers and
 * from page-specific inline CSS. Keep the title, rule and following block on
 * the same rhythm everywhere.
 */
section.hg_section:has(.kl-title-block.tbk--text-dark.tbk--left.text-left.tbk-symbol--line_border.tbk--colored),
main.hg_section:has(.kl-title-block.tbk--text-dark.tbk--left.text-left.tbk-symbol--line_border.tbk--colored) {
  padding-top: var(--mediums-title-top) !important;
  padding-bottom: 0 !important;
}

.kl-title-block.tbk--text-dark.tbk--left.text-left.tbk-symbol--line_border.tbk--colored {
  margin: 0 0 var(--mediums-title-after) !important;
  padding: 0 !important;
}

.kl-title-block.tbk--text-dark.tbk--left.text-left.tbk-symbol--line_border.tbk--colored > .tbk__title {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.kl-title-block.tbk--text-dark.tbk--left.text-left.tbk-symbol--line_border.tbk--colored > .tbk__symbol {
  margin: var(--mediums-title-rule-gap) 0 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
}

/* Gift pages add their own shell padding; the shared section sets the rhythm. */
.gift-redeem-page:has(.gift-title-block.kl-title-block.tbk--text-dark.tbk--left.text-left.tbk-symbol--line_border.tbk--colored) .gift-redeem-shell.latest_posts.default-style,
.gift-page:has(.gift-title-block.kl-title-block.tbk--text-dark.tbk--left.text-left.tbk-symbol--line_border.tbk--colored) .gift-shell {
  padding-top: 0 !important;
}

/* Section labels and titles follow the Ram reference. */
section.sectie:has(> .faq-lijst) > .sectie-label,
section.sectie:has(> .faq-accordion) > .sectie-label,
section.sectie:has(> details) > .sectie-label,
#dh-faq > .sectie-label,
.mediums-faq-kicker,
.faq-mediums-kicker,
.bronnen2-faq-kop,
.faq-hub-sectionlabel {
  display: inline-flex !important;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  padding: .3rem .68rem !important;
  border: 1px solid rgba(45, 95, 148, .14) !important;
  border-radius: 999px !important;
  background: #f3f7fc !important;
  color: #2d5f94 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  margin: 0 0 .78rem !important;
}

section.sectie:has(> .faq-lijst) > h2,
section.sectie:has(> .faq-accordion) > h2,
section.sectie:has(> details) > h2,
#dh-faq > h2,
section.pg-section:has(.faq-accordion) > h2,
.bronnen2-faq > h2,
.faq-mediums-nl .faq-hub-sectionhead h2 {
  margin: 0 0 1.05rem !important;
  color: var(--mediums-faq-blue-strong) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.7rem, 3.6vw, 2.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  line-height: 1.16 !important;
  text-transform: none !important;
}

section.sectie:has(> .faq-lijst) > h2:not(:has(.eigenschap-kop)):not(:has(.mediums-faq-icon))::before,
section.sectie:has(> .faq-accordion) > h2:not(:has(.eigenschap-kop)):not(:has(.mediums-faq-icon))::before,
section.sectie:has(> details) > h2:not(:has(.eigenschap-kop)):not(:has(.mediums-faq-icon))::before,
#dh-faq > h2:not(:has(.eigenschap-kop)):not(:has(.mediums-faq-icon))::before,
section.pg-section:has(.faq-accordion) > h2:not(:has(.eigenschap-kop)):not(:has(.mediums-faq-icon))::before,
.bronnen2-faq > h2::before,
.faq-mediums-nl .faq-hub-sectionhead h2::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  margin-right: .55rem;
  border: 2px solid var(--mediums-faq-blue);
  border-radius: 50%;
  color: var(--mediums-faq-blue);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  line-height: 1;
  vertical-align: .08em;
}

section.sectie:has(> .faq-lijst) > h2 .eigenschap-kop,
section.sectie:has(> .faq-accordion) > h2 .eigenschap-kop,
section.sectie:has(> details) > h2 .eigenschap-kop,
#dh-faq > h2 .eigenschap-kop {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

section.sectie:has(> .faq-lijst) > h2 .eigenschap-kop svg,
section.sectie:has(> .faq-accordion) > h2 .eigenschap-kop svg,
section.sectie:has(> details) > h2 .eigenschap-kop svg,
#dh-faq > h2 .eigenschap-kop svg {
  width: 1.55rem !important;
  height: 1.55rem !important;
  stroke: var(--mediums-faq-blue) !important;
}

/* The explicit icon used by the newer FAQ templates has the same geometry. */
h2:has(> .mediums-faq-icon) {
  display: flex !important;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.05rem !important;
  color: var(--mediums-faq-blue-strong) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.7rem, 3.6vw, 2.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  line-height: 1.16 !important;
  text-transform: none !important;
}

.mediums-faq-ordinary-title {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .55rem;
  row-gap: .3rem;
  margin: 0 !important;
  color: var(--mediums-faq-blue-strong) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  line-height: 1.25 !important;
  text-transform: none !important;
}

.mediums-faq-ordinary-title > img {
  display: block !important;
  flex: 0 0 auto;
  width: 3.2rem !important;
  height: 3.2rem !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain;
}

.mediums-faq-ordinary-title > b {
  display: block;
  min-width: 0;
  font: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
  text-transform: uppercase !important;
}

.mediums-faq-ordinary-title > .mediums-faq-ordinary-title-accent {
  color: var(--mediums-faq-accent) !important;
}

.mediums-faq-ordinary-title > .mediums-faq-ordinary-title-muted {
  color: #838383 !important;
}

/* The follow-up title repeats the established two-colour page-title system. */
.mediums-faq-followup-title {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .55rem;
  row-gap: .3rem;
  margin: 0 !important;
  color: var(--mediums-faq-blue-strong) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

.mediums-faq-followup-title > img {
  display: block !important;
  flex: 0 0 auto;
  width: 3.2rem !important;
  height: 3.2rem !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain;
}

.mediums-faq-followup-title > b {
  display: block;
  min-width: 0;
  font: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
  text-transform: uppercase !important;
}

.mediums-faq-followup-title > .mediums-faq-followup-title-muted {
  color: #838383 !important;
}

.mediums-faq-followup-title > .mediums-faq-followup-title-accent {
  color: var(--mediums-faq-accent) !important;
}

.mediums-faq-section-title {
  display: flex !important;
  min-width: 0;
  align-items: center;
  gap: .55rem;
  margin: 0 !important;
  color: var(--mediums-faq-blue-strong) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.7rem, 3.6vw, 2.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  line-height: 1.16 !important;
  text-transform: none !important;
}

.mediums-faq-section-title > span:last-child {
  min-width: 0;
}

.mediums-faq-question-title-block {
  margin-bottom: 1.7rem !important;
}

.mediums-faq-question-title-block > .mediums-faq-kicker {
  display: inline-flex !important;
}

.mediums-faq-question-title-block > .tbk__symbol {
  margin-top: var(--mediums-title-rule-gap) !important;
}

.mediums-faq-list {
  margin-top: 0 !important;
}

.mediums-faq-list > details > summary:focus-visible {
  outline: 3px solid rgba(120, 153, 204, .45) !important;
  outline-offset: -3px;
}

.mediums-faq-followup-copy {
  margin: 0 !important;
  color: var(--mediums-faq-muted) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
}

.mediums-faq-followup-copy p {
  max-width: 70ch;
  margin: 0 0 1rem !important;
  color: inherit !important;
  font: inherit !important;
}

.mediums-faq-followup-copy p:last-child {
  margin-bottom: 0 !important;
}

.mediums-faq-followup-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .65rem 1rem;
  border-radius: 999px;
  background: var(--mediums-faq-blue-strong);
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color .18s ease, transform .18s ease;
}

.mediums-faq-followup-link:hover,
.mediums-faq-followup-link:focus-visible {
  background: var(--mediums-faq-blue);
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Kept as a compatibility alias for other already-rendered FAQ headings. */
.mediums-faq-page-title-copy {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: .55rem;
}

.mediums-faq-page-title-copy > span:last-child {
  min-width: 0;
}

.mediums-faq-icon {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 2px solid var(--mediums-faq-blue);
  border-radius: 50%;
  color: var(--mediums-faq-blue) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.02rem !important;
  font-weight: 400 !important;
  line-height: 1;
}

/* Profile FAQ headings share one full-width slot above their accordion. */
.mediums-faq-heading {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

/* The FAQ hub gets a useful, localised introduction before the questions. */
.mediums-faq-intro {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  color: var(--mediums-faq-muted) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

.mediums-faq-intro p {
  margin: 0 0 1rem !important;
  color: inherit !important;
  font: inherit !important;
}

.mediums-faq-intro p:last-child {
  margin-bottom: 0 !important;
}

.mediums-faq-intro a {
  color: var(--mediums-faq-blue-strong) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .12em;
}

/* Keep the questions visually attached to the introduction. */
.mediums-faq-questions {
  padding-top: 2rem !important;
  padding-bottom: 3.5rem !important;
}

/*
 * Older content pages have only “Veelgestelde vragen ...” as an H2. Add the
 * same visible kicker and question icon without changing their FAQ content.
 * The heading text remains a normal-case grid item beside the icon.
 */
h2:has(+ .faq-accordion):not(:has(> .mediums-faq-icon)):not(:has(.eigenschap-kop)),
h2:has(+ p + .faq-accordion):not(:has(> .mediums-faq-icon)):not(:has(.eigenschap-kop)),
h2:has(+ p + details):not(:has(> .mediums-faq-icon)):not(:has(.eigenschap-kop)),
h2:has(+ details):not(:has(> .mediums-faq-icon)):not(:has(.eigenschap-kop)) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: .55rem;
  row-gap: .7rem;
  margin: 0 0 1.05rem !important;
  color: var(--mediums-faq-blue-strong) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.7rem, 3.6vw, 2.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  line-height: 1.16 !important;
  text-transform: none !important;
}

h2:has(+ .faq-accordion):not(:has(> .mediums-faq-icon)):not(:has(.eigenschap-kop))::before,
h2:has(+ p + .faq-accordion):not(:has(> .mediums-faq-icon)):not(:has(.eigenschap-kop))::before,
h2:has(+ p + details):not(:has(> .mediums-faq-icon)):not(:has(.eigenschap-kop))::before,
h2:has(+ details):not(:has(> .mediums-faq-icon)):not(:has(.eigenschap-kop))::before {
  content: "?";
  grid-column: 1;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 2px solid var(--mediums-faq-blue);
  border-radius: 50%;
  color: var(--mediums-faq-blue);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1;
}

h2:has(+ .faq-accordion):not(:has(> .mediums-faq-icon)):not(:has(.eigenschap-kop))::after,
h2:has(+ p + .faq-accordion):not(:has(> .mediums-faq-icon)):not(:has(.eigenschap-kop))::after,
h2:has(+ p + details):not(:has(> .mediums-faq-icon)):not(:has(.eigenschap-kop))::after,
h2:has(+ details):not(:has(> .mediums-faq-icon)):not(:has(.eigenschap-kop))::after {
  content: "Veelgestelde vragen";
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .3rem .68rem;
  border: 1px solid rgba(45, 95, 148, .14);
  border-radius: 999px;
  background: #f3f7fc;
  color: #2d5f94;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: none;
}

/* Every FAQ list uses the same vertical rhythm. */
.faq-lijst,
.faq-accordion,
.bronnen2-faq-lijst,
.th-accordion {
  display: flex !important;
  flex-direction: column !important;
  gap: .68rem !important;
  margin-top: 1.15rem !important;
}

.faq-lijst > details + details,
.faq-accordion > details + details,
.bronnen2-faq-lijst > details + details,
.sectie:has(> details) > details + details,
#dh-faq > details + details {
  margin-top: var(--mediums-faq-gap) !important;
}

/* Details in the component lists already use flex gap; avoid double spacing. */
.faq-lijst > details + details,
.faq-accordion > details + details,
.bronnen2-faq-lijst > details + details {
  margin-top: 0 !important;
}

.faq-lijst > details,
.faq-accordion > details,
.bronnen2-faq-lijst > details,
.sectie:has(> details) > details,
#dh-faq > details,
.th-accordion > .acc-group {
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--mediums-faq-border) !important;
  border-radius: var(--mediums-faq-radius) !important;
  background: var(--mediums-faq-surface) !important;
  box-shadow: var(--mediums-faq-shadow) !important;
  overflow: hidden !important;
}

.faq-lijst > details[open],
.faq-accordion > details[open],
.bronnen2-faq-lijst > details[open],
.sectie:has(> details) > details[open],
#dh-faq > details[open],
.th-accordion > .acc-group:has(.collapse.show) {
  box-shadow: var(--mediums-faq-shadow-open) !important;
}

/* The question row is always a real, comfortable touch target. */
.faq-lijst > details > summary,
.faq-accordion > details > summary,
.bronnen2-faq-lijst > details > summary,
.sectie:has(> details) > details > summary,
#dh-faq > details > summary,
.th-accordion > .acc-group > div[id^="heading"] > a {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100% !important;
  box-sizing: border-box;
  min-height: 3.75rem;
  margin: 0 !important;
  padding: 1rem 3.7rem 1rem 1.25rem !important;
  border: 0 !important;
  background: var(--mediums-faq-surface) !important;
  color: var(--mediums-faq-blue-strong) !important;
  cursor: pointer;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  transition: background-color .18s ease, color .18s ease;
}

.faq-lijst > details > summary:hover,
.faq-lijst > details > summary:focus-visible,
.faq-accordion > details > summary:hover,
.faq-accordion > details > summary:focus-visible,
.bronnen2-faq-lijst > details > summary:hover,
.bronnen2-faq-lijst > details > summary:focus-visible,
.sectie:has(> details) > details > summary:hover,
.sectie:has(> details) > details > summary:focus-visible,
#dh-faq > details > summary:hover,
#dh-faq > details > summary:focus-visible,
.th-accordion > .acc-group > div[id^="heading"] > a:hover,
.th-accordion > .acc-group > div[id^="heading"] > a:focus-visible {
  background: #f7faff !important;
  color: var(--mediums-faq-blue-strong) !important;
  outline: none;
}

.faq-lijst > details > summary:focus-visible,
.faq-accordion > details > summary:focus-visible,
.bronnen2-faq-lijst > details > summary:focus-visible,
.sectie:has(> details) > details > summary:focus-visible,
#dh-faq > details > summary:focus-visible,
.th-accordion > .acc-group > div[id^="heading"] > a:focus-visible {
  outline: 3px solid rgba(120, 153, 204, .72) !important;
  outline-offset: -3px;
}

/* Keep legacy history rows stable when the shared trigger becomes flex/grid-based. */
.th-accordion > .acc-group > div[id^="heading"] > a > .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 1rem;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
}

.th-accordion > .acc-group > div[id^="heading"] > a > .row > [class*="col-"] {
  width: auto !important;
  min-width: 0;
  float: none !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.th-accordion > .acc-group > div[id^="heading"] > a > .row > [class*="col-"].text-right {
  white-space: nowrap;
}

.faq-lijst > details > summary::-webkit-details-marker,
.faq-accordion > details > summary::-webkit-details-marker,
.bronnen2-faq-lijst > details > summary::-webkit-details-marker,
#dh-faq > details > summary::-webkit-details-marker {
  display: none;
}

/* A plus becomes the same quiet close mark used by the Ram FAQ. */
.faq-lijst > details > summary::after,
.faq-accordion > details > summary::after,
.bronnen2-faq-lijst > details > summary::after,
.sectie:has(> details) > details > summary::after,
#dh-faq > details > summary::after,
.th-accordion > .acc-group > div[id^="heading"] > a::after {
  content: "+" !important;
  position: absolute;
  top: 50%;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  margin: 0 !important;
  border-radius: 50%;
  background: #f1f5fa !important;
  color: var(--mediums-faq-accent) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform .18s ease, background-color .18s ease;
}

.faq-lijst > details[open] > summary::after,
.faq-accordion > details[open] > summary::after,
.bronnen2-faq-lijst > details[open] > summary::after,
.sectie:has(> details) > details[open] > summary::after,
#dh-faq > details[open] > summary::after,
.th-accordion > .acc-group > div[id^="heading"] > a[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(45deg) !important;
  background: #eaf2fb !important;
  color: var(--mediums-faq-blue) !important;
}

/* Remove the legacy icon so the same control is used for both accordions. */
.th-accordion > .acc-group > div[id^="heading"] > a .acc-icon {
  display: none !important;
}

/* Mail history has three intentional header slots: subject, date and action. */
.mailhistoriek-accordion > .acc-group > div[id^="heading"] > a.mailhistoriek-trigger {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content 2.25rem;
  align-items: center;
  gap: .75rem 1rem;
  min-height: 4rem;
  padding: .9rem 1rem .9rem 1.25rem !important;
}

.mailhistoriek-accordion > .acc-group > div[id^="heading"] > a.mailhistoriek-trigger::after {
  display: none !important;
  content: none !important;
}

.mailhistoriek-trigger > .mailhistoriek-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .15rem .35rem;
  color: inherit;
}

.mailhistoriek-trigger > .mailhistoriek-title > b {
  min-width: 0;
  line-height: 1.4;
}

.mailhistoriek-trigger > .mailhistoriek-date {
  display: block;
  min-width: max-content;
  color: var(--mediums-faq-blue-strong);
  font-size: .98rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.mailhistoriek-accordion > .acc-group > div[id^="heading"] > a.mailhistoriek-trigger > .acc-icon {
  position: relative;
  display: inline-flex !important;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  border-radius: 50%;
  background: #f1f5fa;
  color: var(--mediums-faq-accent);
  font-family: Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  transition: background-color .18s ease, color .18s ease;
}

.mailhistoriek-accordion > .acc-group > div[id^="heading"] > a.mailhistoriek-trigger > .acc-icon::before {
  content: "+";
  display: block;
  transform: translateY(-.03em);
}

.mailhistoriek-accordion > .acc-group > div[id^="heading"] > a.mailhistoriek-trigger[aria-expanded="true"] > .acc-icon {
  background: #eaf2fb;
  color: var(--mediums-faq-blue);
}

.mailhistoriek-accordion > .acc-group > div[id^="heading"] > a.mailhistoriek-trigger[aria-expanded="true"] > .acc-icon::before {
  content: "×";
  font-size: 1.2rem;
}

/* Unlike the FAQ answers, mail history stores its paragraph directly in the collapse. */
.mailhistoriek-accordion > .acc-group > div[id^="acc"] {
  margin: 0 !important;
  padding: 1.1rem 1.25rem 1.3rem !important;
  border-top: 1px solid var(--mediums-faq-border-strong) !important;
  background: #fff !important;
  color: var(--mediums-faq-muted) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.72 !important;
  overflow-wrap: anywhere;
}

.mailhistoriek-accordion > .acc-group > div[id^="acc"] > p {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}

/* Remove legacy numbered badges; the Ram reference uses unnumbered questions. */
.th-accordion > .acc-group > div[id^="heading"]::before,
.th-accordion > .acc-group > div[id^="heading"] > a::before {
  content: none !important;
  display: none !important;
}

/* Some older history pages put the paragraph directly in the collapse. */
.th-accordion > .acc-group > div[id^="acc"]:not(:has(> .content)) {
  margin: 0 !important;
  padding: 1.1rem 1.25rem 1.3rem !important;
  box-sizing: border-box;
  border-top: 1px solid var(--mediums-faq-border-strong) !important;
  background: #fff !important;
  color: var(--mediums-faq-muted) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.72 !important;
  overflow-wrap: anywhere;
}

.th-accordion > .acc-group > div[id^="acc"]:not(:has(> .content)) > p {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}

/* Answers share the same blue divider and readable text measure. */
.faq-lijst > details > .faq-antwoord,
.faq-accordion > details > .faq-antwoord,
.faq-accordion > details > p,
.bronnen2-faq-lijst > details > .bronnen2-faq-antwoord,
.sectie:has(> details) > details > .faq-antwoord,
.sectie:has(> details) > details > p,
#dh-faq > details > .faq-antwoord,
#dh-faq > details > p,
.th-accordion > .acc-group > div[id^="acc"] > .content {
  margin: 0 !important;
  padding: .95rem 1.25rem 1.15rem !important;
  box-sizing: border-box !important;
  border-top: 1px solid var(--mediums-faq-border-strong) !important;
  background: #ffffff !important;
  color: var(--mediums-faq-muted) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: .95rem !important;
  line-height: 1.78 !important;
}

.faq-lijst > details > .faq-antwoord p,
.faq-accordion > details > .faq-antwoord p,
.bronnen2-faq-lijst > details > .bronnen2-faq-antwoord p,
.sectie:has(> details) > details > .faq-antwoord p,
#dh-faq > details > .faq-antwoord p,
.th-accordion > .acc-group > div[id^="acc"] > .content p {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}

/* Direct answers stay full-width so the divider and surface reach the card edge. */
.faq-accordion > details > p,
.sectie:has(> details) > details > p,
#dh-faq > details > p {
  max-width: none !important;
  width: 100% !important;
}

.faq-lijst > details > .faq-antwoord p + p,
.faq-accordion > details > .faq-antwoord p + p,
.bronnen2-faq-lijst > details > .bronnen2-faq-antwoord p + p,
.sectie:has(> details) > details > .faq-antwoord p + p,
#dh-faq > details > .faq-antwoord p + p,
.th-accordion > .acc-group > div[id^="acc"] > .content p + p {
  margin-top: .85rem !important;
}

.faq-lijst > details > .faq-antwoord a,
.faq-accordion > details > .faq-antwoord a,
.faq-accordion > details > p a,
.bronnen2-faq-lijst > details > .bronnen2-faq-antwoord a,
.sectie:has(> details) > details > .faq-antwoord a,
.sectie:has(> details) > details > p a,
#dh-faq > details > .faq-antwoord a,
#dh-faq > details > p a,
.th-accordion > .acc-group > div[id^="acc"] > .content a {
  color: #3f70aa !important;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(63, 112, 170, .35);
  text-underline-offset: .15em;
}

/* Legacy FAQ headings and intro text get the same typographic weight. */
.row:has(> h2 + .col-md-12 .th-accordion) > h2,
.row:has(> h2 + .col-sm-12 .th-accordion) > h2,
.kl-title-block:has(+ .th-accordion) h1,
.faq-mediums-nl .faq-hub-sectionhead h2 {
  color: var(--mediums-faq-blue-strong) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: -.02em !important;
}

/* Profile FAQ headings inherit the same editorial scale and question mark. */
.row:has(> h2 + .col-md-12 .th-accordion) > h2,
.row:has(> h2 + .col-sm-12 .th-accordion) > h2 {
  display: flex !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.05rem !important;
  font-size: clamp(1.7rem, 3.6vw, 2.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
  text-transform: none !important;
}

.row:has(> h2 + .col-md-12 .th-accordion) > .mediums-faq-kicker,
.row:has(> h2 + .col-sm-12 .th-accordion) > .mediums-faq-kicker {
  flex: 0 0 100% !important;
  width: 100% !important;
}

.row:has(> h2 + .col-md-12 .th-accordion) > h2:not(:has(> .mediums-faq-icon))::before,
.row:has(> h2 + .col-sm-12 .th-accordion) > h2:not(:has(> .mediums-faq-icon))::before {
  content: "?";
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 2px solid var(--mediums-faq-blue);
  border-radius: 50%;
  color: var(--mediums-faq-blue);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  line-height: 1;
}

/* Legacy FAQ headings may draw a decorative line through the label. */
.faq-mediums-kicker::before,
.faq-hub-sectionlabel::before {
  content: none !important;
  width: 0 !important;
}

@media (max-width: 575px) {
  .faq-lijst,
  .faq-accordion,
  .bronnen2-faq-lijst,
  .th-accordion {
    gap: var(--mediums-faq-gap) !important;
  }

  :root {
    --mediums-faq-gap: .55rem;
  }

  .faq-lijst > details > summary,
  .faq-accordion > details > summary,
  .bronnen2-faq-lijst > details > summary,
  .sectie:has(> details) > details > summary,
  #dh-faq > details > summary,
  .th-accordion > .acc-group > div[id^="heading"] > a {
    min-height: 3.5rem;
    padding: .95rem 3.25rem .95rem 1rem !important;
    font-size: .95rem !important;
  }

  .th-accordion > .acc-group > div[id^="heading"] > a > .row {
    column-gap: .55rem;
  }

  .mailhistoriek-accordion > .acc-group > div[id^="heading"] > a.mailhistoriek-trigger {
    grid-template-columns: minmax(0, 1fr) max-content 2rem;
    gap: .55rem;
    min-height: 3.5rem;
    padding: .85rem .75rem .85rem 1rem !important;
    font-size: .95rem !important;
  }

  .mailhistoriek-trigger > .mailhistoriek-date {
    font-size: .95rem;
  }

  .mailhistoriek-trigger > .acc-icon {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
  }

  .mediums-faq-ordinary-title {
    column-gap: .45rem;
    row-gap: .2rem;
  }

  .mediums-faq-ordinary-title > img {
    width: 2.65rem !important;
    height: 2.65rem !important;
  }

  .mediums-faq-followup-title {
    column-gap: .45rem;
    row-gap: .2rem;
  }

  .mediums-faq-followup-title > img {
    width: 2.65rem !important;
    height: 2.65rem !important;
  }

  .mediums-faq-section-title {
    align-items: flex-start;
  }

  .mediums-faq-intro {
    font-size: .95rem !important;
    line-height: 1.65 !important;
  }

  .mediums-faq-followup-copy {
    font-size: .95rem !important;
    line-height: 1.65 !important;
  }

  .faq-lijst > details > .faq-antwoord,
  .faq-accordion > details > .faq-antwoord,
  .faq-accordion > details > p,
  .bronnen2-faq-lijst > details > .bronnen2-faq-antwoord,
  .sectie:has(> details) > details > .faq-antwoord,
  .sectie:has(> details) > details > p,
  #dh-faq > details > .faq-antwoord,
  #dh-faq > details > p,
  .th-accordion > .acc-group > div[id^="acc"] > .content {
    padding: .85rem 1rem 1rem !important;
    font-size: .9375rem !important;
  }

  .th-accordion > .acc-group > div[id^="acc"]:not(:has(> .content)) {
    padding: 1rem 1rem 1.15rem !important;
    font-size: 1rem !important;
    line-height: 1.68 !important;
  }

  .mailhistoriek-accordion > .acc-group > div[id^="acc"] {
    padding: 1rem 1rem 1.15rem !important;
    font-size: 1rem !important;
    line-height: 1.68 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-lijst > details > summary::after,
  .faq-accordion > details > summary::after,
  .bronnen2-faq-lijst > details > summary::after,
  .sectie:has(> details) > details > summary::after,
  #dh-faq > details > summary::after,
  .th-accordion > .acc-group > div[id^="heading"] > a::after,
  .faq-lijst > details > summary,
  .faq-accordion > details > summary,
  .bronnen2-faq-lijst > details > summary,
  .th-accordion > .acc-group > div[id^="heading"] > a {
    transition: none !important;
  }
}