/**
 * AIFE FAQ Engine — mechanics only.
 *
 * The engine deliberately draws nothing. No card, no border, no background, no
 * type scale. Every site already has a FAQ design in its theme and client.css,
 * and a component that paints on top of it will look wrong on five sites to
 * look right on one. What the engine owns is the behaviour layer the theme
 * cannot express: collapsing without a measured height, icon state, focus
 * visibility and a comfortable touch target.
 *
 * Everything is scoped to [data-aife-faq], so a list adopts these rules only
 * once it carries the contract — no half-styled flash during the transition.
 *
 * Sites that DO want to restyle the component override the variables below in
 * client.css. Left unset, the theme's own look shows through untouched.
 */

.faq-list[data-aife-faq] {
  --faq-speed: var(--aiwp-faq-speed, .28s);
  --faq-accent: var(--aiwp-faq-accent, currentColor);
}

/* The heading carries no visual weight of its own — it exists for semantics and
   extractability. The button inside it stays the thing the theme has styled.
   Bound to the tag's POSITION as well as to .faq-q: the pen can drop the class
   while the element is contenteditable, and without the positional selector the
   question would jump to the theme's full heading size mid-edit. (/hiro 2026-07-28) */
.faq-list[data-aife-faq] .faq-q,
.faq-list[data-aife-faq] .faq-item > h2,
.faq-list[data-aife-faq] .faq-item > h3,
.faq-list[data-aife-faq] .faq-item > h4,
.faq-list[data-aife-faq] .faq-item > h5,
.faq-list[data-aife-faq] .faq-item > h6 {
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.faq-list[data-aife-faq] .faq-question {
  min-height: 44px;              /* comfortable touch target */
  cursor: pointer;

  /* Robert 2026-07-29. Temat sätter 1.25rem (20px) upp och ner; 0.9375rem är
     samma värde minus 5px vid temats basfont, men behåller rem-skalningen så
     raden fortfarande växer med en förstorad textstorlek.
     margin-bottom separerar frågans och svarets containrar — i pennläge låg
     deras streckade ramar omlott. */
  padding: var(--aiwp-faq-q-pad, 0.9375rem 0);
  margin-bottom: var(--aiwp-faq-q-gap, 14px);
}

.faq-list[data-aife-faq] .faq-question:focus-visible {
  outline: 2px solid var(--faq-accent);
  outline-offset: -2px;
}

.faq-list[data-aife-faq] .faq-icon {
  flex: 0 0 auto;
}

/* Decision #6: plus becomes minus. The vertical bar collapses to nothing —
   cheaper and steadier than rotating the whole glyph, and it reads as the
   same mark changing state rather than two different icons. */
.faq-list[data-aife-faq] .faq-icon-bar {
  stroke-linecap: round;
}

.faq-list[data-aife-faq] .faq-icon-bar--v {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--faq-speed) ease;
}

.faq-list[data-aife-faq] .faq-item.open .faq-icon-bar--v {
  transform: scaleY(0);
}

/* Height animation without a measured pixel value: the row goes 0fr → 1fr, so
   the answer re-measures itself on every reflow. Rotation, a wider window, a
   larger base font or a late-loading image can no longer clip it.
   max-height is neutralised because the theme animates that way today. */
.aife-faq-js .faq-list[data-aife-faq] .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--faq-speed) ease;
  max-height: none;
  overflow: hidden;
}

.aife-faq-js .faq-list[data-aife-faq] .faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

/* padding:0 is load-bearing. The theme puts bottom padding on the inner box,
   and padding does not collapse with a 0fr row — every answer would stay ~20px
   tall and bleed out below its card. The padding is handed back on open. */
.faq-list[data-aife-faq] .faq-answer-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0;
}

.faq-list[data-aife-faq] .faq-item.open .faq-answer-inner {
  padding: var(--aiwp-faq-answer-pad, 0 0 1.25rem);
}

/* Answers stay in the DOM at page load — hidden, never JS-injected — so answer
   engines and crawlers read them even though a visitor sees them collapsed. */

@supports not (grid-template-rows: 0fr) {
  .aife-faq-js .faq-list[data-aife-faq] .faq-answer {
    display: block;
    max-height: 0;
  }
  .faq-list[data-aife-faq] .faq-item.open .faq-answer {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-list[data-aife-faq] .faq-answer,
  .faq-list[data-aife-faq] .faq-icon-bar--v {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KORTLÄGE + HOVER — opt-in, satt av POWERFRONT-panelen (Robert 2026-08-06)

   Detta är det enda stället där motorn ritar. Regeln i filhuvudet står kvar:
   utan klasserna nedan ritar den fortfarande ingenting, och en sajt som aldrig
   rör panelen ser exakt likadan ut som före. Klasserna är sättet att BE om
   utseendet — det var därför Robert ville ha det som ett läge och inte som en
   ny standard.

   Referens: SPIDrSEO:s landningssida. Vad som togs därifrån är BETEENDET —
   posten som eget kort, luften inuti raden, och att TVÅ ytor svarar på hover
   (kanten och ytan) i stället för ett ord. Vad som INTE togs: max-height-
   animationen (vår grid-rows går till verklig höjd utan magiskt tal), de mörka
   rgba-värdena, och den fasta 12px-radien.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Radien har en EGEN variabel med 0 som default. Att ärva sajtens --radius-md
   vore att härleda: Gösab har token 12px men FAQ:n är medvetet 0, knapparna 6
   och korten 16 — det finns ingen enda radie att ärva. Fyrkantiga kort är
   därför rätt utgångsläge, och rundning är en variabel bort. */
.faq-list[data-aife-faq].fq-cards {
  display: flex;
  flex-direction: column;
  gap: var(--aiwp-faq-card-gap, 8px);
}

.faq-list[data-aife-faq].fq-cards .faq-item {
  /* Hårlinjen härleds ur textfärgen i stället för att gissas — fungerar på
     ljus och mörk bakgrund utan att motorn behöver känna paletten. */
  border: 1px solid var(--aiwp-faq-card-line, color-mix(in srgb, currentColor 12%, transparent));
  border-radius: var(--aiwp-faq-card-radius, 0);
  overflow: hidden;
  transition: border-color var(--faq-speed) ease, background-color var(--faq-speed) ease;
}

/* Luften sitter INNE i raden, inte i behållaren. Det var skillnaden mot
   referensen: flyttar man hela blocket får texten avstånd till panelen, men
   raden är fortfarande kant i kant med sitt eget innehåll.
   padding-inline lämnar den lodräta paddingen och dess rem-skalning orörd. */
.faq-list[data-aife-faq].fq-cards .faq-question,
.faq-list[data-aife-faq].fq-cards .faq-item.open .faq-answer-inner {
  padding-inline: var(--aiwp-faq-card-pad, 1.25rem);
}

/* Kortets egen ram ersätter temats avdelare — annars ritas båda. */
.faq-list[data-aife-faq].fq-cards .faq-item + .faq-item {
  border-top-width: 1px;
}

/* Uppmätt på dev4 2026-08-06: stängt kort 66px = fråga 50 (15/15) + 14px
   marginal + 2px ram. Marginalen skiljer frågans och svarets containrar och
   hör hemma när svaret syns — på en STÄNGD post inramad av ett kort blir den
   14px död yta, så texten får 15px över och 29px under. Inramat syns den
   obalansen; i radläge lästes samma utrymme som rytm ner till nästa hårlinje.
   Behålls i pennläge: där är den load-bearing, utan den låg de streckade
   ramarna omlott (kommentaren vid --aiwp-faq-q-gap ovan). */
body:not(.ai-fe-editing) .faq-list[data-aife-faq].fq-cards .faq-item:not(.open) .faq-question {
  margin-bottom: 0;
}

/* ── Hover: två ytor svarar, inte ett ord ──────────────────────────────────
   En 800px bred rad som bara byter textfärg syns inte i ögonvrån, och det är
   i ögonvrån man ser hovern. Kanten och ytan tillsammans gör att HELA kortet
   reagerar. Washen är avsiktligt nästan ingenting — referensen kör 3%.

   Färgen tas ur --faq-hover, som är sajtens LÄNKfärg (beslut 2026-08-03).
   Faller tillbaka på currentColor, ALDRIG på accenten: guldet betyder "här
   händer något", inte "det här går att klicka på". */
.faq-list[data-aife-faq].fq-hov .faq-item:hover {
  border-color: color-mix(in srgb, var(--faq-hover, currentColor) 30%, transparent);
}

.faq-list[data-aife-faq].fq-hov .faq-question:hover {
  background-color: color-mix(in srgb, var(--faq-hover, currentColor) 4%, transparent);
}

.faq-list[data-aife-faq].fq-hov .faq-question {
  transition: background-color var(--faq-speed) ease, color var(--faq-speed) ease;
}

/* Chevronen roterar; plusset gör det INTE. Beslut #6 står kvar — plus blir
   minus genom att den lodräta stapeln pressas ihop, "samma märke som byter
   tillstånd i stället för två olika ikoner". Rotation hör till en chevron,
   som pekar och därför har en riktning att vända. */
.faq-list[data-aife-faq].ic-chevron .faq-icon,
.faq-list[data-aife-faq].ic-caret .faq-icon {
  transition: transform var(--faq-speed) ease, color var(--faq-speed) ease;
}

.faq-list[data-aife-faq].ic-chevron .faq-item.open .faq-icon,
.faq-list[data-aife-faq].ic-caret .faq-item.open .faq-icon {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .faq-list[data-aife-faq].fq-cards .faq-item,
  .faq-list[data-aife-faq].fq-hov .faq-question,
  .faq-list[data-aife-faq].ic-chevron .faq-icon,
  .faq-list[data-aife-faq].ic-caret .faq-icon {
    transition: none;
  }
}

/* Pennans "lägg till fråga"-knapp under en FAQ-lista.
   Kontrollen är .aife-struct-add-row (inte .aife-inline-add) och den renderas som
   syskon till listan inuti .section-inner, inte inuti listan — därför hamnar den
   i sektionens yttre vänsterkant i stället för under frågorna. Auto-marginaler
   centrerar den under den sista frågan. Scopat till add-row som följer direkt på
   en FAQ-lista, så listor och tabeller på andra sidor behåller sin placering. */
.faq-list[data-aife-faq] + .aife-struct-add-row,
.faq-list[data-aife-faq] .aife-struct-add-row {
  margin-left: auto;
  margin-right: auto;
}

/* Pennans kontroller i redigeringsläge.
   Temat sätter overflow:hidden på .faq-item, så raderaknappen och den orangea
   pennbrickan klipptes till en fjärdedel vid kortets kant. De är designade att
   hänga utanför kortet och ligga ovanpå. Gäller bara i redigeringsläge —
   besökarvyn behåller temats klippning oförändrad. */
body.ai-fe-editing .faq-list[data-aife-faq] .faq-item {
  overflow: visible;
}

body.ai-fe-editing .faq-list[data-aife-faq] .faq-item > .aife-faq-del,
body.ai-fe-editing .faq-list[data-aife-faq] .faq-item .aife-text-del {
  z-index: 3;
}

/* REDIGERINGSLÄGE: varje svar är utfällt och oklippt — oavsett .open.
   (/hiro 2026-08-03, efter diagnos från /ainstein-wp)

   Tidigare släpptes klippningen BARA på öppna item. Följden var att en stängd
   fråga i pennläge behöll `grid-template-rows: 0fr`, `overflow: hidden` och
   `padding: 0` från reglerna ovan — alltså ett redigerbart fält utan höjd.
   Kunden ser inte texten hon skriver i, och den orangea pennbrickan i
   högerkanten kapas av exakt samma klippning. Det var ETT fel som såg ut
   som två.

   Det såg dessutom ut att laga sig självt: när raden råkade få `.open` slog
   undantaget till och hela texten visades. Det var inte en fix, det var
   accordion-tillståndet som passerade förbi klippningen.

   Paddingen måste sättas i samma andetag. Noll i stängt läge är avsiktligt —
   padding kollapsar inte med en 0fr-rad, så utan den skulle varje svar bli
   ~20 px högt och blöda ut under kortet. Sätts bara raderna till 1fr utan
   paddingen blir svaren ihoptryckta i stället för klippta.

   Besökarvyn är orörd: allt här är låst till body.ai-fe-editing. */
body.ai-fe-editing .faq-list[data-aife-faq] .faq-answer {
  grid-template-rows: 1fr;
  overflow: visible;
}

body.ai-fe-editing .faq-list[data-aife-faq] .faq-answer-inner {
  overflow: visible;
  padding: var(--aiwp-faq-answer-pad, 0 0 1.25rem);
}

@supports not (grid-template-rows: 0fr) {
  body.ai-fe-editing .faq-list[data-aife-faq] .faq-answer {
    max-height: none;
  }
}