/**
 * 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.
 */

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

.ain-pp-faq[data-aife-faq] .ain-pp-faq-q,
.ain-pp-faq[data-aife-faq] .ain-pp-faq-item > h2,
.ain-pp-faq[data-aife-faq] .ain-pp-faq-item > h3,
.ain-pp-faq[data-aife-faq] .ain-pp-faq-item > h4,
.ain-pp-faq[data-aife-faq] .ain-pp-faq-item > h5,
.ain-pp-faq[data-aife-faq] .ain-pp-faq-item > h6 {
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.ain-pp-faq[data-aife-faq] .ain-pp-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);
}

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

.ain-pp-faq[data-aife-faq] .ain-pp-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. */
.ain-pp-faq[data-aife-faq] .ain-pp-faq-icon-bar {
  stroke-linecap: round;
}

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

/* :not() i stället för att kräva klassen ic-plus. Befintliga sajter bär INGEN
   ic-*-klass alls — Gösab kör motorn i produktion med bara `ain-pp-faq fq-hov` —
   och hade plusbeteendet flyttats bakom .ic-plus skulle deras ikon slutat
   kollapsa vid uppgradering. Regressionen hade varit tyst och kundvänd. */
.ain-pp-faq[data-aife-faq]:not(.ic-chevron):not(.ic-caret):not(.ic-minimal)
  .ain-pp-faq-item.open .ain-pp-faq-icon-bar--v {
  transform: scaleY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÅLARLAGRET — porterat från ai-fe-faq-admin.css 2026-09-05

   Reglerna nedan fanns BARA i adminfilen, scopade till `.pf-wrap .pf-faq` som
   bara existerar i wp-admin. Följden, uppmätt: 19 av 26 panelinställningar nådde
   aldrig sajten. Robert ändrade en inställning, såg förhandsvisningen uppdateras,
   sparade — och sajten stod still. Panelens statusrad sa till och med
   "Osparade ändringar — förhandsvisningen visar dem redan".

   Ingen hade slarvat. Designen byggdes två gånger, i två formspråk, och bara det
   ena nådde kunden.

   ⚠️ Porterat deklaration för deklaration, inte med sök-och-ersätt. Adminfilens
   regler bar antaganden om adminmarkupen (`.pf-faq__head`, `.pf-faq__search`,
   `.pf-faq__xall`) som inte finns på sajten — de är medvetet INTE med.

   ⚠️ VARJE regel här är låst till en klass eller en variabel som bara sätts av
   panelen. En sajt som aldrig rört panelen matchar ingen av dem och ser exakt
   likadan ut som före. Det var villkoret för att detta skulle kunna gå till en
   kund samma dygn. Verifieras genom mätning på dev4 (trogen Gösab-klon) och
   dev5, aldrig genom resonemang.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   STANDARDUTSEENDET = FORHANDSVISNINGENS REGLER, ORDAGRANT
   ═══════════════════════════════════════════════════════════════════════════
   Robert 2026-09-05: "vi hade val en snyggare grundpenna och den visas i admin
   ar ju anda funktionell och skall spegla EXAKT vad vi skall se" samt
   "Den maste ju ha sin egna default styling. Snygg fran start, bara farganpassa."

   Reglerna nedan ar KOPIERADE ur ai-fe-faq-admin.css, med enda andringen att
   `.pf-wrap .pf-faq` bytts mot `.ain-pp-faq[data-aife-faq]`. Varden, farger och
   matt ar oforandrade. Det ar hela poangen: forhandsvisningen ar designen, och
   en omskrivning hade gjort dem olika igen.

   Adminfilens egna ytor (masthead, flikar, sokruta, sparlist) ar INTE med — de
   finns bara i wp-admin.
   ═══════════════════════════════════════════════════════════════════════════ */

.ain-pp-faq[data-aife-faq] { --faq-speed: .28s; }
.ain-pp-faq[data-aife-faq] .ain-pp-faq { counter-reset: pffaq; max-width: none; margin: 0; }
.ain-pp-faq[data-aife-faq] .ain-pp-faq-item {
  border-bottom: 1px solid var(--faq-border, #e2e8ea);
  background: var(--faq-item-bg, transparent);
  border-radius: var(--faq-radius, 0);
  margin-bottom: var(--faq-gap, 0);
  overflow: hidden; position: relative;
}
.ain-pp-faq[data-aife-faq] .ain-pp-faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; min-height: 44px; padding: var(--faq-pad, 15px) 0; margin-bottom: 14px;
  font-size: 16px; font-weight: 600; color: var(--faq-item-text, inherit);
  text-align: left; background: none; border: none; cursor: pointer;
  transition: color .16s ease;
}
.ain-pp-faq[data-aife-faq] .ain-pp-faq-icon { flex: 0 0 auto; color: inherit; transition: color .28s ease, transform var(--faq-speed) ease; }
.ain-pp-faq[data-aife-faq] .ain-pp-faq-item.open .ain-pp-faq-icon { color: var(--faq-accent, #f58e48); }
/* ⚠️ ARVD FARG, inte adminpanelens egen.
   Porteringen tog med #022a3a pa fragan och #4a5f68 pa svaret — bada ur
   POWERFRONT-panelens palett, som inte har hemma pa en kundsajt. Foljden, sedd
   av Robert 2026-09-05 pa /salja-silver/: pa en MORK sektion blev fragan
   morkbla och nastan osynlig medan svaret arvde temats vita. Samma block,
   tva olika kallor, och det sag ut som en bugg i pennan.
   Bada arver nu tills panelen sager annat. */
.ain-pp-faq[data-aife-faq] .ain-pp-faq-answer-inner p { font-size: 15px; line-height: 1.7; margin: 0; }
.ain-pp-faq[data-aife-faq].fq-hov .ain-pp-faq-question:hover,
.ain-pp-faq[data-aife-faq].fq-hov .ain-pp-faq-question:hover .ain-pp-faq-icon { color: var(--faq-hover, var(--faq-accent, #f58e48)); }
.ain-pp-faq[data-aife-faq].ic-plus .ain-pp-faq-item.open .ain-pp-faq-icon-bar--v { transform: scaleY(0); }
.ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-icon-bar,
.ain-pp-faq[data-aife-faq].ic-caret .ain-pp-faq-icon-bar { transform-box: fill-box; transform-origin: center; }
.ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-icon-bar--v,
.ain-pp-faq[data-aife-faq].ic-caret .ain-pp-faq-icon-bar--v,
.ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-item.open .ain-pp-faq-icon-bar--v,
.ain-pp-faq[data-aife-faq].ic-caret .ain-pp-faq-item.open .ain-pp-faq-icon-bar--v { transform: translate(-3px, .5px) rotate(-45deg) scaleY(.657); }
.ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-icon-bar:not(.ain-pp-faq-icon-bar--v),
.ain-pp-faq[data-aife-faq].ic-caret .ain-pp-faq-icon-bar:not(.ain-pp-faq-icon-bar--v) { transform: translate(3px, .5px) rotate(-45deg) scaleX(.657); }
.ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-icon { transform: rotate(-90deg); }
.ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-item.open .ain-pp-faq-icon { transform: rotate(0deg); }
.ain-pp-faq[data-aife-faq].ic-caret .ain-pp-faq-item.open .ain-pp-faq-icon { transform: rotate(180deg); }
.ain-pp-faq[data-aife-faq].ic-minimal .ain-pp-faq-icon { display: none; }
.ain-pp-faq[data-aife-faq].ic-minimal .ain-pp-faq-question { padding-left: 15px; }
.ain-pp-faq[data-aife-faq].ic-minimal .ain-pp-faq-item::before {
  content: ""; position: absolute; left: 0; top: 19px; width: 3px; height: 0;
  background: var(--faq-accent, #f58e48); transition: height .26s cubic-bezier(.4,0,.2,1);
}
.ain-pp-faq[data-aife-faq].ic-minimal .ain-pp-faq-item.open::before { height: 20px; }
.ain-pp-faq[data-aife-faq].ic-minimal .ain-pp-faq-item.open .ain-pp-faq-question { color: var(--faq-accent, #f58e48); }
.ain-pp-faq[data-aife-faq].op-a .ain-pp-faq-item.open .ain-pp-faq-answer-inner { border-left: 2px solid var(--faq-accent, #f58e48); padding-left: 17px; }
.ain-pp-faq[data-aife-faq].op-b .ain-pp-faq-item.open .ain-pp-faq-question,
.ain-pp-faq[data-aife-faq].op-bc .ain-pp-faq-item.open .ain-pp-faq-question { color: var(--faq-accent, #f58e48); }
.ain-pp-faq[data-aife-faq].op-c .ain-pp-faq-item.open,
.ain-pp-faq[data-aife-faq].op-bc .ain-pp-faq-item.open { border-bottom-color: transparent; padding-bottom: 14px; }
.ain-pp-faq[data-aife-faq].op-c .ain-pp-faq-item.open + .ain-pp-faq-item,
.ain-pp-faq[data-aife-faq].op-bc .ain-pp-faq-item.open + .ain-pp-faq-item { border-top: 1px solid var(--faq-border, #e2e8ea); }
.ain-pp-faq[data-aife-faq].num .ain-pp-faq-question-text::before {
  counter-increment: pffaq; content: counter(pffaq) ". ";
  color: #7a8f97; font-variant-numeric: tabular-nums;
}
.ain-pp-faq[data-aife-faq] .ain-pp-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--faq-speed) ease;
  max-height: none;
  overflow: hidden;
}
.ain-pp-faq[data-aife-faq] .ain-pp-faq-item.open .ain-pp-faq-answer { grid-template-rows: 1fr; }
.ain-pp-faq[data-aife-faq] .ain-pp-faq-answer-inner { overflow: hidden; min-height: 0; padding: 0; }
.ain-pp-faq[data-aife-faq] .ain-pp-faq-item.open .ain-pp-faq-answer-inner { padding: 0 0 15px; }
.ain-pp-faq[data-aife-faq].an-none .ain-pp-faq-answer,
.ain-pp-faq[data-aife-faq].an-none .ain-pp-faq-icon,
.ain-pp-faq[data-aife-faq].an-none .ain-pp-faq-icon-bar--v { transition: none !important; }
.ain-pp-faq[data-aife-faq].an-fade .ain-pp-faq-answer-inner { opacity: 0; transition: opacity var(--faq-speed) ease; }
.ain-pp-faq[data-aife-faq].an-fade .ain-pp-faq-item.open .ain-pp-faq-answer-inner { opacity: 1; }

/* ── Ikonstilar: EN markup, en klass ───────────────────────────────────────
   Geometrin i viewBox-enheter: ett V med spetsen i (12,16) och armarna i
   (6,9)/(18,9) ger ben på 9,2 enheter → skala .657; benens mittpunkter (9,12.5)
   och (15,12.5). Samma tal som förhandsvisningen, med flit — avviker de driftar
   rutan och sajten isär igen. */
.ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-icon-bar,
.ain-pp-faq[data-aife-faq].ic-caret .ain-pp-faq-icon-bar {
  transform-box: fill-box;
  transform-origin: center;
}

.ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-icon-bar--v,
.ain-pp-faq[data-aife-faq].ic-caret .ain-pp-faq-icon-bar--v,
.ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-item.open .ain-pp-faq-icon-bar--v,
.ain-pp-faq[data-aife-faq].ic-caret .ain-pp-faq-item.open .ain-pp-faq-icon-bar--v {
  transform: translate(-3px, .5px) rotate(-45deg) scaleY(.657);
}

.ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-icon-bar:not(.ain-pp-faq-icon-bar--v),
.ain-pp-faq[data-aife-faq].ic-caret .ain-pp-faq-icon-bar:not(.ain-pp-faq-icon-bar--v) {
  transform: translate(3px, .5px) rotate(-45deg) scaleX(.657);
}

.ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-icon { transform: rotate(-90deg); }
.ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-item.open .ain-pp-faq-icon { transform: rotate(0deg); }
.ain-pp-faq[data-aife-faq].ic-caret .ain-pp-faq-item.open .ain-pp-faq-icon { transform: rotate(180deg); }

/* Minimal ritar ingen glyf — raden bär tillståndet med en accentstapel i kanten. */
.ain-pp-faq[data-aife-faq].ic-minimal .ain-pp-faq-icon { display: none; }
.ain-pp-faq[data-aife-faq].ic-minimal .ain-pp-faq-question { padding-left: 15px; }
.ain-pp-faq[data-aife-faq].ic-minimal .ain-pp-faq-item {
  position: relative;   /* ankaret för stapeln nedan; adminfilen får det från .ain-pp-faq-item */
}
.ain-pp-faq[data-aife-faq].ic-minimal .ain-pp-faq-item::before {
  content: ""; position: absolute; left: 0; top: 19px; width: 3px; height: 0;
  background: var(--faq-accent, currentColor);
  transition: height .26s cubic-bezier(.4, 0, .2, 1);
}
.ain-pp-faq[data-aife-faq].ic-minimal .ain-pp-faq-item.open::before { height: 20px; }
.ain-pp-faq[data-aife-faq].ic-minimal .ain-pp-faq-item.open .ain-pp-faq-question {
  color: var(--faq-accent, inherit);
}

/* ── Öppet läge ────────────────────────────────────────────────────────────
   Reservvärdet är `currentColor`/`inherit`, ALDRIG adminfilens #f58e48. Den
   hexen är POWERFRONT-panelens egen orange och hör inte hemma på en kundsajt
   som inte valt den. Sätter kunden en accent i panelen vinner den; gör hon inte
   det ärver komponenten radens egen färg och ser fortfarande avsiktlig ut. */
.ain-pp-faq[data-aife-faq].op-a .ain-pp-faq-item.open .ain-pp-faq-answer-inner {
  border-left: 2px solid var(--faq-accent, currentColor);
  padding-left: 17px;
}
.ain-pp-faq[data-aife-faq].op-b .ain-pp-faq-item.open .ain-pp-faq-question,
.ain-pp-faq[data-aife-faq].op-bc .ain-pp-faq-item.open .ain-pp-faq-question {
  color: var(--faq-accent, inherit);
}
.ain-pp-faq[data-aife-faq].op-c .ain-pp-faq-item.open,
.ain-pp-faq[data-aife-faq].op-bc .ain-pp-faq-item.open {
  border-bottom-color: transparent;
  padding-bottom: 14px;
}
.ain-pp-faq[data-aife-faq].op-c .ain-pp-faq-item.open + .ain-pp-faq-item,
.ain-pp-faq[data-aife-faq].op-bc .ain-pp-faq-item.open + .ain-pp-faq-item {
  border-top: 1px solid var(--faq-border, currentColor);
}

/* ── Animation ─────────────────────────────────────────────────────────────
   `an-none` bär !important därför att den ska slå ut transitions som deklareras
   på flera ställen i den här filen. Det är inte ett specificitetskrig mot temat
   — regeln träffar bara vår egen komponent, och bara när kunden aktivt valt
   "Ingen animation". Ett användarval ska vinna över våra defaults. */
.ain-pp-faq[data-aife-faq].an-none .ain-pp-faq-answer,
.ain-pp-faq[data-aife-faq].an-none .ain-pp-faq-icon,
.ain-pp-faq[data-aife-faq].an-none .ain-pp-faq-icon-bar--v { transition: none !important; }

.ain-pp-faq[data-aife-faq].an-fade .ain-pp-faq-answer-inner {
  opacity: 0;
  transition: opacity var(--faq-speed) ease;
}
.ain-pp-faq[data-aife-faq].an-fade .ain-pp-faq-item.open .ain-pp-faq-answer-inner { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ain-pp-faq[data-aife-faq].an-fade .ain-pp-faq-answer-inner { transition: none; }
}

/* ── Panelens färger, radie och spacing ligger INTE här ────────────────────
   De emitteras av AIFE_FAQ_Engine::panel_vars() som en inline-regel, och bara
   för de reglage kunden faktiskt satt till "egen färg".

   ⚠️ Varför inte som `var(--faq-item-bg, transparent)` i den här filen, vilket
   var mitt första försök: en osatt variabel beräknas då till reservvärdet, och
   `transparent` SKRIVER ÖVER temats bakgrund. Regeln hade sett villkorad ut och
   varit ovillkorad — samma klass av fel som `.ain-pp-faq .ain-pp-faq-answer { padding }`
   på JMG, fast med oss som avsändare. En CSS-variabel utan värde är inte
   "ingen regel"; den är "regeln med reservvärdet".

   Sätts inget i panelen skrivs ingenting alls ut, och sajten behåller sitt
   utseende. Sätts något gäller kedjan panelvärde → --aiwp-faq-* → temat.

   Hover-färgen är undantaget: den är klassgrindad på fq-hov, som bara finns när
   panelen slagit på hovern, och därför säker att ha statiskt. */
.ain-pp-faq[data-aife-faq].fq-hov .ain-pp-faq-question:hover,
.ain-pp-faq[data-aife-faq].fq-hov .ain-pp-faq-question:hover .ain-pp-faq-icon {
  color: var(--faq-hover, var(--faq-accent, inherit));
}

/* 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 .ain-pp-faq[data-aife-faq] .ain-pp-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--faq-speed) ease;
  max-height: none;
  overflow: hidden;
}

.aife-faq-js .ain-pp-faq[data-aife-faq] .ain-pp-faq-item.open .ain-pp-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. */
.ain-pp-faq[data-aife-faq] .ain-pp-faq-answer-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0;
}

/* …and the same neutralisation on the OUTER box, because the comment above only
   held for the theme it was written against.

   Measured on JMG (dev5) 2026-09-05: client-components.css:2309 says
   `.ain-pp-faq .ain-pp-faq-answer { padding: 0 0 20px }`. That is a legacy rule from the
   site's own hand-built accordion, and it survives here because `.ain-pp-faq` is a
   class the engine also uses. Padding does not collapse with a 0fr row, so every
   CLOSED question rendered 20px taller than it should: 15px of air above the
   question text, 35px below. Robert read that as "för stort mellanrum under
   titeln" and "lika mkt under som över titeln" — one defect, reported as two.

   Zero here is permanent, not handed back on open: the inner box already carries
   --aiwp-faq-answer-pad, and two boxes both padding the same gap is how the
   duplicate arose in the first place. A site that wants outer padding sets it on
   .ain-pp-faq-answer-inner, which is inside the collapsing row and therefore honest. */
.ain-pp-faq[data-aife-faq] .ain-pp-faq-answer {
  padding: 0;
}

.ain-pp-faq[data-aife-faq] .ain-pp-faq-item.open .ain-pp-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 .ain-pp-faq[data-aife-faq] .ain-pp-faq-answer {
    display: block;
    max-height: 0;
  }
  .ain-pp-faq[data-aife-faq] .ain-pp-faq-item.open .ain-pp-faq-answer {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ain-pp-faq[data-aife-faq] .ain-pp-faq-answer,
  .ain-pp-faq[data-aife-faq] .ain-pp-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. */
.ain-pp-faq[data-aife-faq].fq-cards {
  display: flex;
  flex-direction: column;
  gap: var(--aiwp-faq-card-gap, 8px);
}

.ain-pp-faq[data-aife-faq].fq-cards .ain-pp-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. */
.ain-pp-faq[data-aife-faq].fq-cards .ain-pp-faq-question,
.ain-pp-faq[data-aife-faq].fq-cards .ain-pp-faq-item.open .ain-pp-faq-answer-inner {
  padding-inline: var(--aiwp-faq-card-pad, 1.25rem);
}

/* Kortets egen ram ersätter temats avdelare — annars ritas båda. */
.ain-pp-faq[data-aife-faq].fq-cards .ain-pp-faq-item + .ain-pp-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) .ain-pp-faq[data-aife-faq].fq-cards .ain-pp-faq-item:not(.open) .ain-pp-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å". */
.ain-pp-faq[data-aife-faq].fq-hov .ain-pp-faq-item:hover {
  border-color: color-mix(in srgb, var(--faq-hover, currentColor) 30%, transparent);
}

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

.ain-pp-faq[data-aife-faq].fq-hov .ain-pp-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. */
.ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-icon,
.ain-pp-faq[data-aife-faq].ic-caret .ain-pp-faq-icon {
  transition: transform var(--faq-speed) ease, color var(--faq-speed) ease;

  /* ⚠️ .ain-pp-faq-icon ÄR ett <svg>, alltså ett SVG-element — och för SVG-element är
     transform-origin som standard `0 0`, inte `50% 50%` som för HTML-element.
     Utan de här två raderna roterar `rotate(180deg)` nedan kring ikonens övre
     VÄNSTRA hörn: glyfen svingar ut ur sin egen ruta i stället för att vända.

     Regeln har legat oanvänd sedan 2026-08-06 därför att ic-chevron aldrig
     emitterades (se panel_classes() i class-aife-faq-engine.php), så felet hade
     visat sig först i samma sekund någon valde Chevron i panelen — och sett ut som
     att den nya ikonstilen var trasig. Samma två rader finns redan på
     .ain-pp-faq-icon-bar--v; de saknades bara här. (/hiro-extcus 2026-09-05) */
  transform-box: fill-box;
  transform-origin: center;
}

/* Minimal ritar ingen glyf — motorn returnerar tom sträng. Raden nedan finns för
   sidor som renderades FÖRE bytet och därför fortfarande bär en svg i markupen:
   utan den skulle "Minimal" se ut att sakna effekt tills sidan sparats om. */
.ain-pp-faq[data-aife-faq].ic-minimal .ain-pp-faq-icon {
  display: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .ain-pp-faq[data-aife-faq].fq-cards .ain-pp-faq-item,
  .ain-pp-faq[data-aife-faq].fq-hov .ain-pp-faq-question,
  .ain-pp-faq[data-aife-faq].ic-chevron .ain-pp-faq-icon,
  .ain-pp-faq[data-aife-faq].ic-caret .ain-pp-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. */
.ain-pp-faq[data-aife-faq] + .aife-struct-add-row,
.ain-pp-faq[data-aife-faq] .aife-struct-add-row {
  margin-left: auto;
  margin-right: auto;
}

/* Pennans kontroller i redigeringsläge.
   Temat sätter overflow:hidden på .ain-pp-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 .ain-pp-faq[data-aife-faq] .ain-pp-faq-item {
  overflow: visible;
}

body.ai-fe-editing .ain-pp-faq[data-aife-faq] .ain-pp-faq-item > .aife-faq-del,
body.ai-fe-editing .ain-pp-faq[data-aife-faq] .ain-pp-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 .ain-pp-faq[data-aife-faq] .ain-pp-faq-answer {
  grid-template-rows: 1fr;
  overflow: visible;
}

body.ai-fe-editing .ain-pp-faq[data-aife-faq] .ain-pp-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 .ain-pp-faq[data-aife-faq] .ain-pp-faq-answer {
    max-height: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   IKONEN ÄR MOTORNS, OCH TAR TILLBAKA SIN EGEN YTA

   Ett tema kan ha skrivit sina ikonregler för den äldre formen
   <span class="ain-pp-faq-icon"><svg>…</svg></span>. Motorn lägger klassen PÅ svg:n.
   En bakgrund avsedd för spannet hamnar då BAKOM glyfen i stället för runt den,
   och en regel som `.ain-pp-faq-icon svg { stroke:#fff }` matchar ingenting alls —
   det finns ingen svg inuti en svg.

   Uppmätt på JMG 2026-09-04: `.ain-pp-faq-item.open .ain-pp-faq-icon{background:var(--gold)}`
   plus en glyf som ärvde `color:var(--gold)` gav guld på guld — kontrast 1,0:1.
   Ikonen var alltså helt osynlig i öppet läge, för besökaren, inte bara i pennan.

   Kontrollerat att Gösab inte sätter någon egen bakgrund på .ain-pp-faq-icon innan
   raden lades till — den kör samma motor i produktion sedan augusti.
   ───────────────────────────────────────────────────────────────────────── */
.ain-pp-faq[data-aife-faq] svg.ain-pp-faq-icon {
    background: none;
}

/* ── Redigeringslage: dragspelsikonen viker for raderaknappen ─────────────
   Robert 2026-09-05 pa /salja-silver/: "Den + gommer sig ocksa under TA BORT X,
   tror den skall bort helt."

   Raderakrysset ar absolut placerat i radens hogra horn — samma plats som
   dragspelets plus. De la ovanpa varandra och plusset blev oanvandbart bakom
   krysset.

   `visibility` och inte `display`: ytan behalls, sa fragetexten inte hoppar
   i sidled nar man gar in i och ur redigeringslaget. Besokarvyn ar oberord —
   allt har ar last till body.ai-fe-editing. */
body.ai-fe-editing .ain-pp-faq[data-aife-faq] .ain-pp-faq-icon {
  visibility: hidden;
}

/* ── Redigeringslage: bara FAQ:ns EGNA kontroller ────────────────────────
   Robert 2026-09-05: "Det blaa + den gor inget bra tror jag" och "Ta bort den
   som ligger ovanfor, eller stor annat skrap."

   Blockinfogningen lagger generella "+"-zoner mellan element overallt pa sidan.
   Inuti en FAQ ar de brus: listan har redan sin egen radknapp, och en zon mellan
   tva fragor skapar ett block som inte ar en fraga — alltsa innehall som FAQ:ns
   egen motor varken kanner igen eller kan spara.

   Scopat till FAQ-wrappern, sa zonerna finns kvar overallt annars. */
body.ai-fe-editing .ain-pp-faq[data-aife-faq] .aife-inline-add,
body.ai-fe-editing .ain-pp-faq[data-aife-faq] .aife-zone,
body.ai-fe-editing .ain-pp-faq[data-aife-faq] .aife-section-add-btn,
body.ai-fe-editing .ain-pp-faq[data-aife-faq] .ai-fe-bi-picker {
  display: none !important;
}

/* ── Redigeringsramen i FAQ: rak och kant till kant ──────────────────────
   Robert 2026-09-05 pa /salja-silver/: "Gillar inte rundade kanterna har och
   att det inte gar ut i kanterna som den gamla. Gor den rak bade for rubriken
   och contenttexten."

   Tva orsaker, bada scopade bort har:
   · den streckade ramen ar en `outline` och foljer darfor elementets EGEN
     border-radius — satter kunden en radie i panelen blir aven ramen rundad
   · `outline-offset: 4px` skjuter ut ramen fyra pixlar, vilket lasar som ett
     indrag nar raden i ovrigt gar kant till kant

   Fragetexten gors dessutom blockbred. Den ar ett <span> i en flexrad, alltsa
   bara sa bred som texten — ramen slutade mitt i raden. Ikonen ar redan dold i
   redigeringslage, sa bredden ar ledig. */
body.ai-fe-editing .ain-pp-faq[data-aife-faq] [data-ai-fe-editable] {
  border-radius: 0;
  outline-offset: 0;
}

body.ai-fe-editing .ain-pp-faq[data-aife-faq] .ain-pp-faq-question-text {
  display: block;
  width: 100%;
}

body.ai-fe-editing .ain-pp-faq[data-aife-faq] [data-ai-fe-editable]::after {
  border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🔴 TRIANGEL ÄR EN KOPIA AV CHEVRON — mätt, EJ ÅTGÄRDAT. (2026-09-05, /hiro)
   ═══════════════════════════════════════════════════════════════════════════
   Robert, på Design 2 med Triangel sparad: *"Funkar inte alls fastän jag sparat
   denna IKONSTIL."* Han har rätt. Uppmätt med `getComputedStyle` på ikonen och
   båda staplarna, alla fyra stilar i stängt OCH öppet läge:

       chevron  stängd/öppen  matrix(0,-1,1,0,0,0) · armar 5.4 × 5.4
       caret    stängd/öppen  IDENTISKA matriser

   `.ic-caret` har ingen egen stängd-regel — bara `.ic-caret .open .icon { rotate(180deg) }`,
   alltså en vändning från ett utgångsläge ingen satt. Allt annat delar den med
   chevron. Fyra knappar ger tre utseenden, och Triangel är attrappen.

   ⚠️ JAG PROVADE ATT LAGA DET I CSS OCH BACKADE. Två försök, båda renderade och
   granskade som skärmbild:
     1. bredare/plattare armar (±3.2px, .78) → armarna slutade mötas, ikonen blev
        en knäckt hake. Translationen ±3 och skalan .657 är uträknade MOT varandra.
     2. bara byta rotationen (chevron -90°, caret 0°) → samma hake. De två
        `<line>`-elementen bildar inget symmetriskt V som tål att vridas fritt;
        chevronen ser rätt ut just vid -90°.

   **Slutsats: Triangel behöver en egen glyf, inte en transform på chevronens.**
   Det är ett ritjobb i markupen (`icon()` i class-aife-faq-engine.php), inte en
   CSS-rad — och det ska göras när det går att granska i sann storlek, inte i
   samma timme som en kund väntar. Ingen halvfärdig ikon skeppas här.

   ⚠️ Ikonreglerna finns dessutom på TVÅ ställen i den här filen (~149 och ~201)
   med delvis olika innehåll — `.ic-plus` bara i den första, `.ic-minimal
   .ain-pp-faq-item` bara i den andra. Slå ihop dem innan nästa ikonändring.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Läsbarhetsgarantins två utfall ─────────────────────────────────────────
   Sätts av `ai-fe-faq.js` först när den uppmätta kontrasten mot den faktiska
   ytan bakom blocket understiger 4,5:1. Alltså aldrig på ett block som redan
   syns — det här är ett golv, inte en palett.

   `!important` är motiverat och det är ovanligt att det är det: reglerna ska
   vinna över kundens egen behållare, och det är exakt den behållaren som är
   felkällan. På `/vad-ar-guld-vart/` sätter kundens `.faq-col` vit text på en
   ljus sektion — utan `!important` förlorar räddningen mot just det den finns
   för att rädda oss från. (2026-09-05) */
.ain-pp-faq[data-aife-faq].ain-pp-faq--las-mork,
.ain-pp-faq[data-aife-faq].ain-pp-faq--las-mork .ain-pp-faq-question,
.ain-pp-faq[data-aife-faq].ain-pp-faq--las-mork .ain-pp-faq-answer-inner,
.ain-pp-faq[data-aife-faq].ain-pp-faq--las-mork .ain-pp-faq-answer-inner * {
  color: #1c2529 !important;
}
.ain-pp-faq[data-aife-faq].ain-pp-faq--las-ljus,
.ain-pp-faq[data-aife-faq].ain-pp-faq--las-ljus .ain-pp-faq-question,
.ain-pp-faq[data-aife-faq].ain-pp-faq--las-ljus .ain-pp-faq-answer-inner,
.ain-pp-faq[data-aife-faq].ain-pp-faq--las-ljus .ain-pp-faq-answer-inner * {
  color: #f3f5f6 !important;
}