/* MU Top 100 — FAQ page styles (2025 production) */

:root{
  --faq-max: 1100px;
  --faq-pad: clamp(16px, 2.5vw, 32px);
  --faq-bg: #F7F8FB;
  --faq-card: #fff;
  --faq-border: rgba(31,47,64,.10);
  --faq-text: #1F2F40;
  --faq-subtext: #2b3a4a;
  --faq-answer: #334;
  --faq-accent: #2f556b;
  --faq-hover: #e0e7ff;
  --faq-link: #053F7A;
  --faq-link-h: #FF6B35;
  --faq-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Layout (accounts for fixed header at 72px by default) */
.faq-section{
  padding: calc(var(--hdr-h,72px) + 12px) var(--faq-pad) var(--faq-pad);
  background: var(--faq-bg);
}
.faq-content{
  max-width: var(--faq-max);
  margin: 0 auto;
  background: var(--faq-card);
  border: 1px solid var(--faq-border);
  border-radius: 16px;
  box-shadow: var(--faq-shadow);
  padding: var(--faq-pad);
}

/* Header + intro */
.faq-title{
  text-align:center;
  font-weight:800;
  color:var(--faq-text);
  margin:0 0 8px;
  line-height:1.2;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem);
}
.faq-intro{
  text-align:center;
  color:var(--faq-subtext);
  margin: 0 auto 18px;
  max-width: 70ch;
}

/* Controls */
.faq-controls{
  display:flex; justify-content:center; gap:10px; margin:8px 0 12px;
}
.faq-controls .btn{
  appearance:none;
  border:1px solid rgba(31,47,64,.15);
  background:#f7fafc;
  padding:8px 12px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}
.faq-controls .btn:hover{ background:#eef6ff; }

/* List + items */
.faq-list{ margin-top:8px; }
.faq-item{ position:relative; border-top:1px solid rgba(31,47,64,.08); }
.faq-item:first-child{ border-top:0; }

/* Question (used as <button> or <summary>) */
.faq-question{
  width:100%;
  text-align:left;
  padding:16px 12px;
  font-weight:700;
  background:transparent;
  border:0;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  color:var(--faq-text);
  border-radius:8px;
}
.faq-question:hover{ background:var(--faq-hover); }
.faq-question:focus{ outline:2px solid var(--faq-accent); outline-offset:2px; }

/* Answer body */
.faq-answer{
  padding:0 12px 14px;
  color:var(--faq-answer);
  display:none; /* default closed */
}
.faq-answer a{ color:var(--faq-link); text-decoration:none; }
.faq-answer a:hover{ color:var(--faq-link-h); text-decoration:underline; }

/* Open/close states (support JS .is-open and native <details open>) */
.faq-item.is-open .faq-answer{ display:block; }
.faq-item[open]    .faq-answer{ display:block; }

/* Optional: rotate a caret icon you render in the question */
.faq-caret{ flex:0 0 auto; transition:transform .15s ease; }
.faq-item.is-open .faq-caret,
.faq-item[open]    .faq-caret{ transform:rotate(180deg); }

/* If you use <details>/<summary> */
summary.faq-question{ list-style:none; }
summary.faq-question::-webkit-details-marker{ display:none; }
summary.faq-question::marker{ content:""; }

/* Footer note */
.faq-updated{ margin-top:16px; color:#556; text-align:center; }

/* Small screens */
@media (max-width: 768px){
  .faq-content{ padding:16px; }
  .faq-title{ font-size:1.6rem; }
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --faq-bg:#0f1520; --faq-card:#121a26; --faq-border:rgba(255,255,255,.08);
    --faq-text:#e9f1fb; --faq-subtext:#c7d5e5; --faq-answer:#d8e3f0;
    --faq-hover:#27364a; --faq-link:#9bc4ff; --faq-link-h:#ffd19a;
  }
  .faq-controls .btn{ background:#1a2432; border-color:rgba(255,255,255,.12); color:var(--faq-text); }
  .faq-controls .btn:hover{ background:#233045; }
}

/* Print: expand everything */
@media print{
  .faq-section{ padding:0; background:#fff; }
  .faq-content{ box-shadow:none; border:0; }
  .faq-controls{ display:none; }
  .faq-answer{ display:block !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .faq-caret{ transition:none; }
}

/* Anchor offset for fixed header */
:target{ scroll-margin-top: calc(var(--hdr-h,72px) + 12px); }