/* =============================================================
   HBC — accordion / utfällbara fält
   Två nivåer, alltid stängda vid laddning, + / –.

   VIKTIGT: panelen döljs med grid-template-rows: 0fr och
   visibility: hidden — ALDRIG display:none och aldrig via JS-
   inladdning. All text ligger därför i DOM:en från början,
   syns i "visa källa" och är crawlbar, samtidigt som den är
   borttagen ur tab-ordningen och tillgänglighetsträdet när
   fältet är stängt.
   ============================================================= */

.acc{
  --acc-ink:    var(--ink, #1f1e1c);
  --acc-mute:   var(--ink-mute, #6b6660);
  --acc-line:   var(--line-ink, rgba(31, 30, 28, 0.14));
  --acc-bg2:    var(--bg-2, #efe9e1);
  --acc-font:   var(--sans, "Outfit", "Helvetica Neue", Helvetica, system-ui, sans-serif);
  --acc-dur:    .34s;
  --acc-ease:   cubic-bezier(.4, 0, .2, 1);

  font-family: var(--acc-font);
  color: var(--acc-ink);
  display: grid;
  gap: 0;
}

.acc *,
.acc *::before,
.acc *::after{ box-sizing: border-box; }

/* ---------- item ---------- */
.acc__item{
  border-top: 1px solid var(--acc-line);
  scroll-margin-top: 96px;
}
.acc__item:last-child{ border-bottom: 1px solid var(--acc-line); }

/* Rubriken bär ingen egen stil — nivån sätts av .acc--l1 / .acc--l2
   så att H2/H3/H4 kan väljas fritt utan att utseendet ändras. */
.acc__heading{
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ---------- trigger ---------- */
.acc__trigger{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  background: none;
  border: 0;
  margin: 0;
  padding: 22px 4px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease;
}
.acc__trigger:hover{ color: var(--acc-mute); }
.acc__trigger:focus-visible{
  outline: 2px solid var(--acc-ink);
  outline-offset: -2px;
  border-radius: 3px;
}

.acc__label{
  display: block;
  min-width: 0;
  text-wrap: balance;
}

/* ---------- +/- ikon ---------- */
.acc__icon{
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  display: block;
}
.acc__icon::before,
.acc__icon::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--acc-dur) var(--acc-ease), opacity var(--acc-dur) var(--acc-ease);
}
/* vågrätt streck — alltid synligt (utgör "–") */
.acc__icon::before{
  width: 100%;
  height: 1.5px;
}
/* lodrätt streck — försvinner när fältet öppnas ("+" blir "–") */
.acc__icon::after{
  width: 1.5px;
  height: 100%;
}
.acc__item.is-open > .acc__heading > .acc__trigger .acc__icon::after,
.acc__item.is-open > .acc__trigger .acc__icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* ---------- panel ---------- */
.acc__panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-dur) var(--acc-ease);
}
.acc__item.is-open > .acc__panel{
  grid-template-rows: 1fr;
}

.acc__inner{
  overflow: hidden;
  min-height: 0;
  /* visibility tar bort innehållet ur tab-ordning och a11y-träd
     utan att ta bort det ur DOM:en */
  visibility: hidden;
  transition: visibility 0s linear var(--acc-dur);
}
.acc__item.is-open > .acc__panel > .acc__inner{
  visibility: visible;
  transition-delay: 0s;
}

/* Innehållets luft läggs på ett inre lager så att 0fr→1fr
   verkligen kollapsar till noll höjd. */
.acc__body{
  padding: 2px 4px 28px;
}
.acc__body > :first-child{ margin-top: 0; }
.acc__body > :last-child{ margin-bottom: 0; }

/* =============================================================
   NIVÅ 1 — huvudfält
   ============================================================= */
.acc--l1 > .acc__item > .acc__heading > .acc__trigger,
.acc--l1 > .acc__item > .acc__trigger{
  padding: 26px 4px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.005em;
}
.acc--l1 > .acc__item{
  border-top-width: 1px;
}
.acc--l1 > .acc__item.is-open{
  background: linear-gradient(to bottom, var(--acc-bg2), transparent 220px);
}
.acc--l1 > .acc__item > .acc__panel .acc__body{
  padding-bottom: 40px;
}

/* =============================================================
   NIVÅ 2 — fält inuti ett huvudfält
   Tydligt indraget, mindre typsnitt, egen vänsterlinje.
   ============================================================= */
.acc--l2{
  margin: 24px 0 8px;
  padding-left: 18px;
  border-left: 2px solid var(--acc-line);
}
.acc--l2 > .acc__item{
  border-top: 1px solid var(--acc-line);
}
.acc--l2 > .acc__item:first-child{ border-top: 0; }
.acc--l2 > .acc__item:last-child{ border-bottom: 0; }
.acc--l2 > .acc__item.is-open{ background: none; }

.acc--l2 > .acc__item > .acc__heading > .acc__trigger,
.acc--l2 > .acc__item > .acc__trigger{
  padding: 16px 2px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--acc-mute);
}
.acc--l2 > .acc__item.is-open > .acc__heading > .acc__trigger,
.acc--l2 > .acc__item.is-open > .acc__trigger{
  color: var(--acc-ink);
}
.acc--l2 .acc__icon{ width: 16px; height: 16px; }
.acc--l2 .acc__body{ padding: 0 2px 22px; }

/* Valfri etikett ovanför en nivå-2-grupp, t.ex. "Vanliga frågor" */
.acc__group-label{
  margin: 28px 0 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acc-mute);
}

/* =============================================================
   Mobil — nivåskillnaden måste hålla även här
   ============================================================= */
@media (max-width: 680px){
  .acc--l1 > .acc__item > .acc__heading > .acc__trigger,
  .acc--l1 > .acc__item > .acc__trigger{
    padding: 22px 0;
    font-size: 17px;
    gap: 14px;
  }
  .acc--l2{
    margin: 18px 0 4px;
    padding-left: 13px;
    border-left-width: 2px;
  }
  .acc--l2 > .acc__item > .acc__heading > .acc__trigger,
  .acc--l2 > .acc__item > .acc__trigger{
    padding: 14px 0;
    font-size: 14.5px;
  }
  .acc__body{ padding: 2px 0 24px; }
  .acc--l1 > .acc__item > .acc__panel .acc__body{ padding-bottom: 32px; }
  .acc--l2 .acc__body{ padding: 0 0 18px; }
}

/* =============================================================
   Utan JS fälls fälten ut permanent, så att inget innehåll blir
   oåtkomligt. Regeln ligger i en <noscript>-tagg i sidhuvudet
   (injiceras av build/build.js) i stället för här — annars skulle
   fälten blinka öppna innan skriptet hunnit stänga dem.
   ============================================================= */

@media (prefers-reduced-motion: reduce){
  .acc__panel,
  .acc__inner,
  .acc__icon::before,
  .acc__icon::after,
  .acc__trigger{
    transition: none !important;
  }
}