/* ==========================================================================
   FAQ accordion — shared by every page with a #faq section (index.html,
   courses.html). Edit here only so all FAQ sections stay identical.
   ========================================================================== */

/* Heading → first question: a little tighter than a normal section head. */
#faq .section-head{margin-bottom:40px;}
@media (max-width:640px){#faq .section-head{margin-bottom:28px;}}

.faq-item{border-bottom:1px solid var(--line-dark);}
/* The list ends cleanly: no rule under the final question. Its row keeps the
   same 22px bottom padding as every other row, so it doesn't feel cut off. */
.faq-list > .faq-item:last-child{border-bottom:0;}

.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px 4px;cursor:pointer;font-weight:600;font-size:16px;color:var(--navy);
  width:100%;background:none;border:0;margin:0;text-align:left;
  font-family:inherit;line-height:inherit;-webkit-appearance:none;appearance:none;
}
.faq-q:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;border-radius:8px;}
.faq-q .icon{transition:transform .2s ease;color:var(--orange);flex-shrink:0;}
.faq-item.open .faq-q .icon{transform:rotate(45deg);}

/* Closed answers are collapsed; /shared/faq.js animates max-height to the
   answer's real height, so long answers on narrow phones are never clipped. */
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-a p{padding:0 4px 22px;font-size:14.5px;color:rgba(22,27,43,.78);line-height:1.7;max-width:640px;}