/*
 * FAQ module, styled to match the site's accordion as it renders on the live
 * /enrolments/faqs/ page (.accordion-block: Bootstrap 3 .panel-default boxes plus
 * core/static/css/style.css and the Extra CSS setting). Structure lives in the HTML: <details>/<summary>
 * keep every answer in the page source for search engines and AI tools.
 */

/* --- FAQ list (accordion) ------------------------------------------------- */
.faq { margin: 0 0 2.5em; }
.faq__heading { margin: 0 0 .5em; }
.faq__intro { margin: 0 0 1em; }

.faq__toggle-all {
  display: block; margin: 0 0 .5em auto; padding: 4px 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: #004990;
}
.faq__toggle-all:hover, .faq__toggle-all:focus { text-decoration: underline; }

/* Each question is a white box, as on the live /enrolments/faqs/ page (Bootstrap .panel-default). */
.faq__item {
  margin: 0 0 5px; background: #fff; border: 1px solid #ddd; border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05); overflow: hidden;
}
.faq__item:last-of-type { margin-bottom: 20px; }

.faq__question {
  display: block; position: relative; cursor: pointer; list-style: none;
  padding: 15px 60px 15px 15px;
  font-family: 'chronicapro-regular', sans-serif; font-size: 18px; font-weight: 600;
  line-height: 20px; color: #333; transition: color .25s;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ""; }
.faq__question h3 {
  margin: 0; font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit;
}
.faq__question::after {
  content: "\f107"; font-family: FontAwesome; font-weight: normal;
  position: absolute; top: 0; bottom: 0; right: 25px; height: 20px; margin: auto;
  font-size: 20px; line-height: 20px; pointer-events: none;
}
.faq__question:hover, .faq__item[open] > .faq__question { color: #004990; }
.faq__item[open] > .faq__question { background: #f7f7f7; }
.faq__item[open] > .faq__question::after { content: "\f106"; }
.faq__question:focus { outline: none; }
.faq__question:focus-visible { outline: 2px solid #004990; outline-offset: -2px; }

.faq__answer { padding: 15px 15px 0; border-top: 1px solid #ddd; color: #444; }
.faq__answer p { margin: 0 0 15px; }
.faq__short { font-weight: 600; }
.faq__detail ul, .faq__detail ol { margin: 0 0 15px; padding-left: 1.25em; }

.faq__evidence { margin: 0 0 15px; font-size: 14px; line-height: 20px; color: #777; }
.faq__evidence p { margin: 0 0 6px; }
.faq__sources-label { font-weight: 600; }
/* Plain compact numbering (two classes deep to beat the theme's ".post-content ol li" step boxes). */
.faq__evidence .faq__sources { margin: 0; padding-left: 1.5em; list-style: decimal; }
.faq__evidence .faq__sources li {
  counter-increment: none; margin: 0 0 4px; padding: 0; border: 0;
  font-size: inherit; font-weight: inherit; font-family: inherit; list-style: decimal;
}
.faq__evidence .faq__sources li::before { content: none; display: none; }
.faq__sources cite { font-style: normal; }

/* "Open" style: every answer shown, no toggle. */
.faq--open .faq__question { cursor: default; padding-right: 15px; }
.faq--open .faq__question::after { content: none; }
.faq--open .faq__item[open] > .faq__question { background: #f7f7f7; color: #333; }

/* --- Topic links (FAQ hub page and the "All FAQs" block) ------------------- */
.faq-topics { margin: 0 0 2em; }
.faq-topics__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* Two classes deep to beat the theme's ".post-content ul li" bullets and dividers. */
.faq-topics .faq-topics__list li {
  margin: 0; padding: 0; border: 0; list-style: none; font-size: inherit; font-family: inherit;
}
.faq-topics .faq-topics__list li::before { content: none; display: none; }
.faq-topics__link {
  display: inline-block; padding: 7px 16px; border: 1px solid #004990; border-radius: 20px;
  font-size: 14px; font-weight: 600; line-height: 20px; color: #004990; background: #fff;
  text-decoration: none; transition: background .15s ease, color .15s ease;
}
.faq-topics__link:hover, .faq-topics__link:focus { background: #e8eef6; color: #004990; text-decoration: none; }
.faq-topics__link:focus-visible { outline: 2px solid #004990; outline-offset: 2px; }
.faq-topics__link[aria-current="page"] { background: #004990; color: #fff; }

.faq-listing__heading { margin: 0 0 .75em; }

/* --- FAQ hub page ---------------------------------------------------------- */
/* Blue band behind the site header (its menu text is white), in place of a hero image. */
.faq-hub__band { background: #004990; height: 220px; }
.faq-hub__content .white-container { padding-top: 30px; padding-bottom: 20px; }
.faq-hub__title { margin-top: 0; }
.faq-hub__intro { margin-bottom: 1.5em; }

@media (max-width: 1022px) {
  .faq-hub__band { height: 140px; }
}
@media (max-width: 767px) {
  .faq__question { padding-right: 50px; font-size: 16px; }
  .faq__question::after { right: 15px; }
  .faq-hub__content .white-container { padding-left: 15px; padding-right: 15px; }
}
@media (prefers-reduced-motion: reduce) { .faq-topics__link { transition: none; } }