/* ============================================================
   FAQ Konferanse – 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 .faq-konferanse .container
     • Sidepadding:    padding-inline i .faq-konferanse .container
     • Vertikal luft:  padding-block i .faq-konferanse
   ============================================================ */

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

  position: relative;      /* for pseudo-elementet */
  background: transparent; /* bakgrunn males av ::before */
  color: #fff;
  padding-block: 3rem;     /* vertikal luft (juster) */

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

/* Full-bleed bakgrunn som ikke påvirker layoutbredden */
.faq-konferanse::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){
  .faq-konferanse::before{ width: 100vw; }
}

/* ---------- Innholdsboks ---------- */
.faq-konferanse .container{
  max-width: 1200px;        /* maks innholdsbredde (juster) */
  width: 100%;
  margin-inline: 0.5rem;
  padding-inline: 1rem;     /* sidepadding for innhold (juster) */
  box-sizing: border-box;
}

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

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

/* ---------- Bootstrap 5 accordion-variablar (skinn) ---------- */
.faq-konferanse .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 ---------- */
.faq-konferanse .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;
}
.faq-konferanse .accordion-button:not(.collapsed){
  background: rgba(255,255,255,.10);
}

/* + / – ikon til venstre */
.faq-konferanse .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;
}
.faq-konferanse .accordion-button:not(.collapsed)::before{
  content: "–";
}

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

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

/* ---------- Accordion body ---------- */
.faq-konferanse .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 ---------- */
.faq-konferanse .faq-speakers{
  display: grid;
  gap: 1rem 2rem;
  margin-bottom: 1rem;
}
.faq-konferanse .faq-speakers--two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.faq-konferanse .faq-speakers--one{
  grid-template-columns: 1fr;
  justify-items: start; /* sett center for å sentrere én speaker */
}

/* Hver speaker */
.faq-konferanse .faq-speaker{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.faq-konferanse .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);
}
.faq-konferanse .faq-speaker__name{
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  line-height: 1.2;
}
.faq-konferanse .faq-speaker__title{
  opacity: .9;
  color: #fff;
  font-size: 1.05rem;
}

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

/* ---------- Sikkerhetsnett for media ---------- */
.faq-konferanse img,
.faq-konferanse 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 */
.faq-konferanse{
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;   /* sidepadding håndteres av .container */
  padding-right: 0 !important;
}