/* FILE: assets/css/faq.css */
/* ============================================================
   Energiephase · FAQ Accordion
   Native <details> styled as glass items with animated + icon.
   ============================================================ */

.faq{position:relative;overflow:hidden}
.faq__glow{width:440px;height:440px;bottom:-160px;right:-140px}

.faq__list{
  max-width:820px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:var(--ep-space-3);
}

.faq-item{
  border-radius:var(--ep-radius);
  background:var(--ep-glass);
  background-image:var(--ep-glass-gradient);
  border:1px solid var(--ep-glass-border);
  box-shadow:var(--ep-shadow-sm);
  overflow:hidden;
  transition:border-color var(--ep-dur) var(--ep-ease);
}
.faq-item[open]{border-color:var(--ep-glass-border-hi)}

.faq-item__summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--ep-space-4);
  padding:clamp(1.1rem,2vw,1.4rem) clamp(1.2rem,2.5vw,1.7rem);
  font-family:var(--ep-font-display);
  font-weight:600;
  font-size:clamp(1rem,1.4vw,1.15rem);
  color:var(--ep-text);
  min-height:44px;
}
.faq-item__summary::-webkit-details-marker{display:none}

.faq-item__icon{
  flex:0 0 auto;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(81,163,86,.14);
  border:1px solid rgba(81,163,86,.3);
  color:var(--ep-yellow);
  transition:transform var(--ep-dur) var(--ep-ease),background var(--ep-dur) var(--ep-ease);
}
.faq-item__icon svg{width:18px;height:18px}
.faq-item[open] .faq-item__icon{transform:rotate(45deg)}

.faq-item__body{
  padding:0 clamp(1.2rem,2.5vw,1.7rem) clamp(1.1rem,2vw,1.4rem);
  color:var(--ep-text-muted);
  line-height:var(--ep-lh-body);
}

/* open animation */
.faq-item[open] .faq-item__body{animation:ep-fade-up var(--ep-dur) var(--ep-ease)}