/* ==========================================================================
   ETU FAQ Module — Styles
   
   ETU design system: Open Sans, #1E2945 brand navy, #f7f7f7 surface,
   FontAwesome \f105 chevrons, pill buttons, sharp corners.
   
   Dark mode: Uses CSS variables from dark-mode.css.
   Accessibility: Focus-visible ring, 4.5:1+ contrast ratios.
   ========================================================================== */

/* ── Container ── */
.etu-faq {
  max-width: 900px;
  margin: 44px auto 0 !important;
  padding: 0 0 40px;
}

/* ── Section heading ── */
.etu-faq__heading {
  color: #1E2945;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.5px;
  line-height: 1.3;
  margin-bottom: 30px;
}

/* ── List reset ── */
.etu-faq__list {
  margin: 0;
  padding: 0;
}

.etu-faq__item {
  border-bottom: 1px solid #e5e7eb;
}

.etu-faq__item:first-child {
  border-top: 1px solid #e5e7eb;
}

/* ── Question / Trigger button ── */
.etu-faq__question {
  margin: 0;
  padding: 0;
}

.etu-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: #1E2945;
  transition: background-color 0.2s ease, color 0.2s ease;
  gap: 16px;
}

.etu-faq__trigger:hover {
  background-color: #f7f7f7;
}

/* Focus-visible ring — keyboard only */
.etu-faq__trigger:focus {
  outline: none;
}

.etu-faq__trigger:focus-visible {
  outline: 2px solid #396196;
  outline-offset: -2px;
  border-radius: 2px;
}

/* ── Chevron icon ── */
.etu-faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  transition: transform 0.3s ease;
}

/* Plus/minus icon via pseudo-elements */
.etu-faq__icon::before,
.etu-faq__icon::after {
  content: '';
  position: absolute;
  background-color: #1E2945;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Horizontal bar */
.etu-faq__icon::before {
  top: 50%;
  left: 2px;
  right: 2px;
  height: 2px;
  transform: translateY(-50%);
}

/* Vertical bar (rotates to form +) */
.etu-faq__icon::after {
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 2px;
  transform: translateX(-50%);
}

/* Active state — rotate vertical bar to form minus */
.etu-faq__trigger[aria-expanded="true"] .etu-faq__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

/* ── Answer panel ── */
.etu-faq__answer {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.etu-faq__answer[hidden] {
  display: none;
}

.etu-faq__answer-inner {
  padding: 18px 24px 28px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.3px;
  color: #1E2945;
}

.etu-faq__answer-inner p {
  margin: 0 0 16px;
}

.etu-faq__answer-inner p:last-child {
  margin-bottom: 0;
}

.etu-faq__answer-inner a {
  color: #1E2945;
  text-decoration: underline;
}

.etu-faq__answer-inner a:hover {
  color: #B31B1B;
}

.etu-faq__answer-inner ul,
.etu-faq__answer-inner ol {
  padding-left: 24px;
  margin: 0 0 16px;
}

.etu-faq__answer-inner li {
  margin-bottom: 8px;
}

/* ── Active item highlight ── */
.etu-faq__item--active .etu-faq__trigger {
  background-color: #f7f7f7;
}


/* ====================================================================
   DARK MODE
   ==================================================================== */

html[data-theme="dark"] .etu-faq__heading {
  color: var(--dm-text-heading, #f1f5f9);
}

html[data-theme="dark"] .etu-faq__item {
  border-color: var(--dm-border-general, rgba(148, 163, 184, 0.2));
}

html[data-theme="dark"] .etu-faq__trigger {
  color: var(--dm-text-heading, #f1f5f9);
}

html[data-theme="dark"] .etu-faq__trigger:hover {
  background-color: var(--dm-bg-surface, #1e293b);
}

html[data-theme="dark"] .etu-faq__trigger:focus-visible {
  outline-color: var(--dm-focus-ring, #64748b);
}

html[data-theme="dark"] .etu-faq__icon::before,
html[data-theme="dark"] .etu-faq__icon::after {
  background-color: var(--dm-text-heading, #f1f5f9);
}

html[data-theme="dark"] .etu-faq__answer-inner {
  color: var(--dm-text-body, #e2e8f0);
}

html[data-theme="dark"] .etu-faq__answer-inner a {
  color: var(--dm-text-link, #93c5fd);
}

html[data-theme="dark"] .etu-faq__answer-inner a:hover {
  color: var(--dm-text-link-hover, #bfdbfe);
}

html[data-theme="dark"] .etu-faq__item--active .etu-faq__trigger {
  background-color: var(--dm-bg-surface, #1e293b);
}


/* ====================================================================
   RESPONSIVE
   ==================================================================== */

@media (max-width: 768px) {
  .etu-faq__heading {
    font-size: 26px;
    margin-bottom: 24px;
  }

  .etu-faq__trigger {
    padding: 16px 16px;
    font-size: 16px;
  }

  .etu-faq__answer-inner {
    padding: 0 16px 20px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .etu-faq__heading {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .etu-faq__trigger {
    padding: 14px 12px;
    font-size: 15px;
    gap: 12px;
  }

  .etu-faq__answer-inner {
    padding: 0 12px 16px;
    font-size: 14px;
    line-height: 1.6;
  }

  .etu-faq__icon {
    width: 16px;
    height: 16px;
  }
}


/* ====================================================================
   SMOOTH TRANSITIONS (applied via dm-transitions class to avoid FOUC)
   ==================================================================== */

html.dm-transitions .etu-faq__trigger,
html.dm-transitions .etu-faq__answer-inner,
html.dm-transitions .etu-faq__item,
html.dm-transitions .etu-faq__heading,
html.dm-transitions .etu-faq__icon::before,
html.dm-transitions .etu-faq__icon::after {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease !important;
}