/**
 * Spør-raden i FAQ-lista.
 *
 * Genererte rader bruker Rank Maths egne klasser (.rank-math-list-item,
 * h3.rank-math-question, .rank-math-answer) og arver derfor FAQ-stilen som ligger i
 * Code Snippets #20 på nettstedet. Her står bare det som kommer i tillegg.
 *
 * Code Snippets kjører etter plugins, så alt som overstyrer en av snippetens regler
 * må vinne på spesifisitet, ikke på rekkefølge — derav .nsk-faq-generert foran
 * h3.rank-math-question::before.
 */

/* ── Spør-raden ──────────────────────────────────────────────────────────── */

.nsk-faq-rad {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 28px;
  border-top: 1px solid #d8e7e7;
  background: linear-gradient(to bottom, #eff6f6, #fafcfc);
  cursor: text;
}

.nsk-faq-rad.er-aktiv {
  background: linear-gradient(to bottom, #eaf3f3, #fff);
}

/* Ikonkolonnen holder samme 28px-innrykk som h3.rank-math-question, så spør-raden
   står på linje med spørsmålene over. */
.nsk-faq-ikon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  color: #2f5d62;
}

.nsk-faq-ikon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.nsk-faq-felt {
  flex: 1;
  min-width: 0;
}

.nsk-faq-linje {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Samme grunn som send-knappen lenger ned: `.elementor-kit-4 input` og
   `.nsk-faq-rad input` har lik spesifisitet (0,1,1), og da vinner den som lastes sist
   — det er temaet. Ett klassenivå til gjør utfallet uavhengig av rekkefølgen. */
.nsk-faq-rad .nsk-faq-linje input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #1f3133;
}

.nsk-faq-rad .nsk-faq-linje input:focus {
  outline: none;
  border: 0;
  box-shadow: none;
  background: none;
}

.nsk-faq-rad .nsk-faq-linje input::placeholder {
  color: #93a6a8;
  font-weight: 500;
  opacity: 1;
}

.nsk-faq-rad .nsk-faq-linje input:disabled {
  color: #1f3133;
  -webkit-text-fill-color: #1f3133;
  opacity: 1;
}

/* Feltet ser ut som en overskrift. Spøkelsesteksten skriver seg fram én gang og blir
   stående med blinkende markør, så raden sier fra at den tar tekst. */
.nsk-faq-spokelse {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #93a6a8;
}

.nsk-faq-markor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -3px;
  background: #2f5d62;
  animation: nsk-faq-blink 1.05s steps(2, start) infinite;
}

@keyframes nsk-faq-blink {
  to {
    visibility: hidden;
  }
}

/* Temaet (Hello Elementor + elementor-kit-4) styler `button` globalt med
   `.elementor-kit-4 button` (0,1,1) og lastes etter pluginens CSS. En naken
   `.nsk-faq-send` (0,1,0) taper og knappen blir en fylt teal pille på 50x32 i
   stedet for en grå sirkel. `.nsk-faq-rad .nsk-faq-send` (0,2,0) vinner.
   Verifisert i tests/nettsmed-sok/env/tema-lekkasje.php, som tvinger den verste
   rekkefølgen lokalt. */
.nsk-faq-rad .nsk-faq-send {
  flex: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 32px;
  min-width: 0;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  background-color: transparent;
  box-shadow: none;
  color: #a9b8b9;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nsk-faq-rad .nsk-faq-send svg {
  display: block;
  width: 16px;
  height: 16px;
}

.nsk-faq-rad .nsk-faq-send.er-klar {
  background-color: #2f5d62;
  border-color: #2f5d62;
  color: #fff;
}

.nsk-faq-rad .nsk-faq-send.er-klar:hover,
.nsk-faq-rad .nsk-faq-send.er-klar:focus {
  background-color: #1f2829;
  border-color: #1f2829;
  color: #fff;
}

.nsk-faq-rad .nsk-faq-send.er-opptatt,
.nsk-faq-rad .nsk-faq-send.er-opptatt:hover {
  background-color: #3c4b4c;
  border-color: #3c4b4c;
  color: #fff;
  cursor: default;
}

.nsk-faq-rad .nsk-faq-send.er-opptatt svg {
  width: 10px;
  height: 10px;
}

.nsk-faq-rad .nsk-faq-send:focus-visible {
  outline: 2px solid #2f5d62;
  outline-offset: 2px;
}

.nsk-faq-notis {
  margin: 9px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8fa1a3;
}

/* Feilmeldingen står der notisen står, i varselfargen fra DESIGN.md. */
.nsk-faq-feil {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #8a5a14;
}

.nsk-faq-skjult {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Mens svaret hentes ──────────────────────────────────────────────────── */

.nsk-faq-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 16px 28px 20px 56px;
  font-size: 14px;
  line-height: 1.5;
  color: #8fa1a3;
}

.nsk-faq-puls {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f5d62;
  animation: nsk-faq-puls 1.1s ease-in-out infinite;
}

@keyframes nsk-faq-puls {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

/* ── Genererte rader ─────────────────────────────────────────────────────── */

/* Samme glyf som står i spør-raden: det du skrev ved siden av, er det svaret får. */
.nsk-faq-generert h3.rank-math-question::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232F5D62'%3E%3Cpath d='M7.8 0.9l1.95 4.95 4.95 1.95-4.95 1.95-1.95 4.95-1.95-4.95L0.9 7.8l4.95-1.95L7.8 0.9z'/%3E%3Cpath d='M15.6 11.6l1 2.55 2.55 1-2.55 1-1 2.55-1-2.55-2.55-1 2.55-1 1-2.55z'/%3E%3C/svg%3E");
}

/* Lenkefargen inne i et generert svar kommer ellers fra temaet, som gir magenta på
   nettsmed.no. Brand-primary er lenkefargen i DESIGN.md — sett den eksplisitt så
   genererte svar ser ut som resten av artikkelen. */
.nsk-faq-generert .rank-math-answer a {
  color: #2f5d62;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nsk-faq-generert .rank-math-answer a:hover {
  color: #1f2829;
}

.nsk-faq-merke {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 8px;
  border: 1px solid #cfe0e0;
  border-radius: 999px;
  background: #e8f0f0;
  color: #2f5d62;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: 2px;
}

.nsk-faq-fot {
  margin: 12px 0 0;
  padding-left: 28px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #93a6a8;
}

/* Ingen padding-override på mobil: Code Snippets #20 har ingen media query, så de
   kuraterte radene beholder 20px 28px hele veien ned. Smalner spør-raden inn, havner
   den 10px til venstre for spørsmålene over. Bare skriftstørrelsen justeres. */
@media (max-width: 620px) {
  .nsk-faq-rad .nsk-faq-linje input,
  .nsk-faq-spokelse {
    font-size: 16.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nsk-faq-markor,
  .nsk-faq-puls {
    animation: none;
  }
}