/*
 * Mediums.nl FAQ system
 *
 * Canonical reference: the FAQ on the Ram daghoroscoop.
 * This file is loaded only for mediums.nl from incl_css.php, so the
 * deliberately broad selectors can normalize legacy FAQ implementations
 * without changing the other domains.
 */

: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;
}

/* 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: .13em !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

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;
}

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;
}

/* 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;
  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::-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;
}

/* 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;
}

/* 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;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.05rem !important;
  font-size: clamp(1.5rem, 3.2vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.16 !important;
}

.row:has(> h2 + .col-md-12 .th-accordion) > h2::before,
.row:has(> h2 + .col-sm-12 .th-accordion) > h2::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;
  }

  .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;
  }
}

@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;
  }
}