/* ============================================================
   Fundraising FAQ – FULL CSS (overflow-sikker full-bleed bakgrunn)
   - Seksjonen får normal layoutbredde (skaper ikke horisontal scroll)
   - Full-bleed bakgrunn males av ::before i 100svw (scrollbar-safe)
   - Innholdet ligger innenfor .container med max-width
   Justerbare punkter:
     • Bakgrunnsfarge: --faq-bg
     • Innholdsbredde: max-width i .fund-faq .container
     • Sidepadding:    feltet "Ytre luft sider" (--faq-pad-x)
     • Vertikal luft:  felta "Ytre luft topp/bunn" (--faq-pad-top/-bottom)
   ============================================================ */

/* ---------- Root blokk ---------- */
.fund-faq{
  --faq-bg: #12636e;

  position: relative;      /* for pseudo-elementet */
  background: transparent; /* bakgrunn males av ::before */
  color: #fff;
  padding-block: var(--faq-pad-top, 48px) var(--faq-pad-bottom, 48px);

  /* aldri la denne seksjonen skape horisontal scroll */
  overflow-x: clip;

  /* plass til sticky header når ein hoppar hit via anker */
  scroll-margin-top: 100px;
}

/* Full-bleed bakgrunn som ikke påvirker layoutbredden */
.fund-faq::before{
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100svw;           /* “small viewport width” – tar høyde for scrollbar */
  background: var(--faq-bg);
  z-index: -1;             /* ligg bak innholdet */
}
/* Fallback for eldre nettlesere som ikke støtter svw */
@supports not (width: 100svw){
  .fund-faq::before{ width: 100vw; }
}

/* ---------- Innholdsboks ---------- */
.fund-faq .container{
  max-width: 1200px;        /* maks innholdsbredde (juster) */
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--faq-pad-x, 16px);
  box-sizing: border-box;
}

/* (valgfritt) smalere variant dersom du bruker small_width-flagget */
.fund-faq .container.small-width{
  max-width: 900px;
}

/* ---------- Typografi ---------- */
.fund-faq h2{
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
  color: #fff;
}
.fund-faq p,
.fund-faq li,
.fund-faq a{ color: #fff; }
.fund-faq a{ text-decoration: underline; }

/* ---------- Bootstrap 5 accordion-variablar (skinn) ---------- */
.fund-faq .accordion{
  --bs-accordion-color:                 #fff;
  --bs-accordion-bg:                    transparent;
  --bs-accordion-border-color:          transparent;
  --bs-accordion-btn-color:             #fff;
  --bs-accordion-btn-bg:                transparent;
  --bs-accordion-active-color:          #fff;
  --bs-accordion-active-bg:             rgba(255,255,255,.10);
  --bs-accordion-icon-color:            #fff;
  --bs-accordion-icon-active-color:     #fff;
}

/* ---------- Accordion heading/button ---------- */
.fund-faq .accordion-button{
  font-size: 1.35rem;
  font-weight: 600;
  padding: 1.75rem 2rem 1.75rem 3.75rem;
  color: #fff;
  background: transparent;
  position: relative;
  border: none;
  box-shadow: none;
}
.fund-faq .accordion-button:not(.collapsed){
  background: rgba(255,255,255,.10);
}

/* + / – ikon til venstre */
.fund-faq .accordion-button::before{
  content: "+";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 3px;
  font-size: 1.35rem;
  line-height: 1;
  color: #fff;
  background: transparent;
}
.fund-faq .accordion-button:not(.collapsed)::before{
  content: "–";
}

/* Skjul standard chevron til høyre */
.fund-faq .accordion-button::after{ display: none; }

/* Hover-stil når kollapset */
.fund-faq .accordion-button.collapsed:hover{
  background: #81b793;
  color: #12636e;
}
.fund-faq .accordion-button.collapsed:hover::before{
  border-color: #12636e;
  color: #12636e;
}

/* ---------- Accordion body ---------- */
.fund-faq .accordion-body{
  font-size: 1.2rem;
  line-height: 1.7;
  color: #fff;
  background: rgba(255,255,255,.05);
  padding: 1.75rem 2rem 1.75rem 3.75rem;
  border-top: 1px solid rgba(255,255,255,.15);
}

/* ---------- Speaker-blokk ---------- */
.fund-faq .faq-speakers{
  display: grid;
  gap: 1rem 2rem;
  margin-bottom: 1rem;
}
.fund-faq .faq-speakers--two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.fund-faq .faq-speakers--one{
  grid-template-columns: 1fr;
  justify-items: start; /* sett center for å sentrere én speaker */
}

/* Hver speaker */
.fund-faq .faq-speaker{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.fund-faq .faq-speaker__img{
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.fund-faq .faq-speaker__name{
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  line-height: 1.2;
}
.fund-faq .faq-speaker__title{
  opacity: .9;
  color: #fff;
  font-size: 1.05rem;
}

/* Mobil: stable to kort under hverandre */
@media (max-width: 1000px){
  .fund-faq .faq-speakers--two{ grid-template-columns: 1fr; }
  .fund-faq .faq-speaker{
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .fund-faq .faq-speaker__img{ width: 72px; height: 72px; }
}

/* ---------- Sikkerhetsnett for media ---------- */
.fund-faq img,
.fund-faq video{
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- (Sanitær) Fjern gamle full-bleed reglar om de finnes ---------- */
/* Beholderen under overstyrer ev. eldre regler i temaet */
.fund-faq{
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;   /* sidepadding håndteres av .container */
  padding-right: 0 !important;
}
/* ---------- Bemerkning under spørsmåla ---------- */
.fund-faq__bemerkning{
  margin-top: 2rem;
  padding-inline: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,.9);
}
.fund-faq__bemerkning > *:first-child{ margin-top: 0; }
.fund-faq__bemerkning > *:last-child{ margin-bottom: 0; }
.fund-faq__bemerkning p{
  margin: 0 0 .35rem;
  color: rgba(255,255,255,.9);
  font-size: inherit;
}

@media (max-width: 1000px){
  .fund-faq__bemerkning{ padding-inline: 0; }
}