/* =============================================================
   skjema.css — modal, skjemafelt og knapper.
   Hentet ut fra no.css på solidlab.no, så skjemaet ser og
   oppfører seg likt på begge sider. Endres det der, bør det
   endres her også.
   ============================================================= */

/* ---------- Knapper ---------- */
.sl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  line-height: 1; padding: 15px 22px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background 150ms var(--ease-in-out), color 150ms var(--ease-in-out),
              border-color 150ms var(--ease-in-out), transform 150ms var(--ease-out);
}
.sl-btn--primary { background: var(--oslo); color: var(--antikkhvit); }
.sl-btn--primary:hover { background: var(--sort); }
.sl-btn--ghost { background: transparent; color: var(--sort); border-color: var(--linbla); }
.sl-btn--ghost:hover { border-color: var(--oslo); color: var(--oslo); }
.sl-btn:focus-visible { outline: 2px solid var(--oslo); outline-offset: 3px; }
.sl-btn { border-radius: var(--radius-sm); }
.sl-btn--primary:hover { transform: translateY(-1px); }


/* ---------- Modal ---------- */
/* Lys knapp for mørk bakgrunn */
.sl-btn--lys { background: var(--antikkhvit); color: var(--sort); }
.sl-btn--lys:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.28); }

/* =============================================================
   Kontaktskjema — popup
   ============================================================= */
.sl-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }

.sl-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.58);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: sl-fade 220ms var(--ease-out);
}
@keyframes sl-fade { from { opacity: 0; } to { opacity: 1; } }

.sl-modal__panel {
  position: relative;
  width: min(92vw, 620px);
  max-height: min(88vh, 720px);
  overflow-y: auto;
  background: var(--antikkhvit);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(10,10,10,0.32);
  padding: 56px clamp(24px, 5vw, 56px) clamp(28px, 4vw, 44px);
  animation: sl-modal-inn 300ms var(--ease-out);
}
@keyframes sl-modal-inn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sl-modal__lukk {
  position: absolute; top: 14px; right: 16px;
  width: 40px; height: 40px; border: none; background: transparent;
  font-size: 26px; line-height: 1; color: var(--fog); cursor: pointer;
  border-radius: 8px; transition: background 150ms var(--ease-in-out);
}
.sl-modal__lukk:hover { background: rgba(10,10,10,0.06); color: var(--sort); }

.sl-modal__fremdrift {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(74,90,98,0.14);
  border-radius: 14px 14px 0 0; overflow: hidden;
}
.sl-modal__fremdrift span {
  display: block; height: 100%; background: var(--oslo);
  transition: width 320ms var(--ease-out);
}

.sl-modal__teller { display: block; margin-bottom: 14px; }
.sl-modal__sporsmaal {
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.14; letter-spacing: -0.025em;
  font-weight: 600; color: var(--sort); margin-bottom: 10px; text-wrap: balance;
}
.sl-modal__hjelp { font-size: 15px; line-height: 1.6; color: var(--fog); }
.sl-modal__felt { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }

.sl-felt {
  width: 100%; font-family: var(--font-sans); font-size: 17px; color: var(--sort);
  background: var(--flate); border: 1px solid var(--linbla); border-radius: var(--radius-sm);
  padding: 15px 16px; transition: border-color 160ms var(--ease-in-out), box-shadow 160ms var(--ease-in-out);
}
.sl-felt::placeholder { color: var(--mist); }
.sl-felt:focus {
  outline: none; border-color: var(--oslo);
  box-shadow: 0 0 0 3px rgba(74,90,98,0.14);
}
.sl-felt--stor { resize: vertical; min-height: 116px; line-height: 1.6; }

.sl-valg { display: flex; flex-direction: column; gap: 8px; }
.sl-valg__knapp {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font-family: var(--font-sans); font-size: 16px; color: var(--sort);
  background: var(--flate); border: 1px solid var(--linbla); border-radius: var(--radius-sm);
  padding: 13px 16px; cursor: pointer;
  transition: border-color 150ms var(--ease-in-out), background 150ms var(--ease-in-out);
}
.sl-valg__knapp:hover { border-color: var(--oslo); background: #fff; }
.sl-valg__knapp--valgt { border-color: var(--oslo); background: #fff; box-shadow: 0 0 0 2px rgba(74,90,98,0.16); }
.sl-valg__bokstav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 5px;
  background: rgba(74,90,98,0.10); color: var(--oslo);
  font-family: var(--font-mono); font-size: 11px;
}
.sl-valg__knapp:focus-visible { outline: 2px solid var(--oslo); outline-offset: 2px; }

.sl-modal__feil {
  margin-top: 14px; font-size: 14px; color: #8C3B2E;
  background: #F6E7E3; border-radius: 6px; padding: 10px 12px;
}
.sl-modal__knapper { display: flex; align-items: center; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.sl-modal__hint {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mist); margin-left: 4px;
}
.sl-modal__hint kbd {
  font-family: var(--font-mono); background: rgba(10,10,10,0.06);
  border-radius: 4px; padding: 2px 5px; font-size: 11px;
}

.sl-modal__ferdig { text-align: left; }
.sl-modal__hake {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(74,90,98,0.10); color: var(--oslo);
}
.sl-modal__hake svg { width: 26px; height: 26px; }

@media (max-width: 720px) {
  .sl-modal { align-items: flex-end; }
  .sl-modal__panel {
    width: 100%; max-width: none; max-height: 92vh;
    border-radius: 16px 16px 0 0; padding: 48px 22px 28px;
    animation: sl-modal-opp 300ms var(--ease-out);
  }
  @keyframes sl-modal-opp {
    from { transform: translateY(28px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  .sl-modal__knapper .sl-btn { flex: 1 1 auto; justify-content: center; }
  .sl-modal__hint { display: none; }
  .sl-contact__venstre { gap: 24px; }
  .sl-contact__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-modal__panel, .sl-modal__backdrop { animation: none !important; }
}


/* ---------- Avkrysning (nyhetsbrev) — lavmælt ---------- */
.sl-avkrys {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 4px; padding: 2px 2px 2px 0;
  cursor: pointer;
}
.sl-avkrys input { position: absolute; opacity: 0; width: 0; height: 0; }
.sl-avkrys__boks {
  flex: 0 0 17px; width: 17px; height: 17px; margin-top: 2px;
  border: 1.5px solid var(--mist); border-radius: 4px;
  background: transparent; color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms var(--ease-in-out), border-color 150ms var(--ease-in-out), color 150ms var(--ease-in-out);
}
.sl-avkrys__boks svg { width: 11px; height: 11px; }
.sl-avkrys:hover .sl-avkrys__boks { border-color: var(--oslo); }
.sl-avkrys input:checked + .sl-avkrys__boks {
  background: var(--oslo); border-color: var(--oslo); color: var(--antikkhvit);
}
.sl-avkrys input:focus-visible + .sl-avkrys__boks { outline: 2px solid var(--oslo); outline-offset: 2px; }
.sl-avkrys__tekst { font-size: 14px; line-height: 1.4; color: var(--fog); font-weight: 400; }
.sl-avkrys input:checked ~ .sl-avkrys__tekst { color: var(--sort); }
.sl-avkrys__note {
  display: block; margin-top: 2px;
  font-size: 12.5px; line-height: 1.45; color: var(--mist);
}

/* =============================================================
   Jens — assistent nede til høyre
   ============================================================= */
.sl-jens-knapp {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 18px 13px 15px;
  background: var(--sort); color: var(--antikkhvit);
  border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  box-shadow: 0 4px 14px rgba(10,10,10,0.18), 0 12px 32px rgba(10,10,10,0.14);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
              background 320ms var(--ease-in-out), color 320ms var(--ease-in-out);
}

/* Over kontaktfeltet og footeren, som begge er svarte */
.sl-jens-knapp--lys {
  background: var(--antikkhvit); color: var(--sort);
  box-shadow: 0 4px 14px rgba(0,0,0,0.34), 0 12px 32px rgba(0,0,0,0.26);
}
.sl-jens-knapp--lys:hover {
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.40), 0 18px 44px rgba(0,0,0,0.30);
}
.sl-jens-knapp--lys .sl-jens-knapp__prikk {
  box-shadow: 0 0 0 2px var(--antikkhvit);
  transition: box-shadow 320ms var(--ease-in-out);
}
.sl-jens-knapp:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10,10,10,0.24), 0 18px 44px rgba(10,10,10,0.18); }
.sl-jens-knapp:focus-visible { outline: 2px solid var(--oslo); outline-offset: 3px; }
.sl-jens-knapp svg { width: 19px; height: 19px; }
.sl-jens-knapp--apen {
  width: 52px; height: 52px; padding: 0; justify-content: center;
  background: var(--oslo);
}
.sl-jens-knapp__x { font-size: 26px; line-height: 1; }
.sl-jens-knapp__prikk {
  position: absolute; top: 9px; right: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--kobber);
  box-shadow: 0 0 0 2px var(--sort);
  animation: sl-puls 2.4s ease-in-out infinite;
}
@keyframes sl-puls { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.sl-jens {
  position: fixed; right: 24px; bottom: 90px; z-index: 50;
  width: min(92vw, 392px); height: min(72vh, 560px);
  display: flex; flex-direction: column;
  background: var(--antikkhvit);
  border: 1px solid var(--border-light); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(10,10,10,0.16), 0 28px 80px rgba(10,10,10,0.14);
  overflow: hidden;
  animation: sl-jens-inn 260ms var(--ease-out);
}
@keyframes sl-jens-inn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sl-jens__topp {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--border-light);
  background: var(--flate);
}
.sl-jens__ident { display: flex; align-items: center; gap: 11px; font-size: 14px; }
.sl-jens__ident strong { display: block; color: var(--sort); font-weight: 600; }
.sl-jens__merke {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  background: var(--oslo); color: var(--antikkhvit);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px;
}
.sl-jens__rolle {
  display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--mist); margin-top: 2px;
}
.sl-jens__lukk {
  width: 34px; height: 34px; border: none; background: transparent;
  font-size: 22px; line-height: 1; color: var(--fog); cursor: pointer; border-radius: 8px;
}
.sl-jens__lukk:hover { background: rgba(10,10,10,0.06); color: var(--sort); }

.sl-jens__log {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
}
.sl-jens__melding {
  max-width: 86%; padding: 11px 14px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: break-word;
}
.sl-jens__melding--jens {
  align-self: flex-start; background: var(--flate);
  border: 1px solid var(--border-light); border-bottom-left-radius: 5px; color: var(--sort);
}
.sl-jens__melding--du {
  align-self: flex-end; background: var(--oslo); color: var(--antikkhvit);
  border-bottom-right-radius: 5px;
}
.sl-jens__skriver { display: flex; gap: 5px; align-items: center; padding: 15px 16px; }
.sl-jens__skriver span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mist);
  animation: sl-hopp 1.3s ease-in-out infinite;
}
.sl-jens__skriver span:nth-child(2) { animation-delay: 0.18s; }
.sl-jens__skriver span:nth-child(3) { animation-delay: 0.36s; }
@keyframes sl-hopp { 0%,60%,100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }

.sl-jens__forslag { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.sl-jens__forslag button {
  font-family: var(--font-sans); font-size: 13px; color: var(--oslo);
  background: transparent; border: 1px solid var(--linbla); border-radius: 999px;
  padding: 8px 13px; cursor: pointer; transition: all 150ms var(--ease-in-out);
}
.sl-jens__forslag button:hover { background: var(--flate); border-color: var(--oslo); }

/* Handlingsknapp Jens tilbyr når han vil åpne skjemaet ([[SKJEMA]]-markør) */
.sl-jens__handling {
  align-self: flex-start; margin: 2px 0 4px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  color: var(--antikkhvit); background: var(--oslo);
  border: none; border-radius: 8px; padding: 10px 15px;
  cursor: pointer; transition: all 160ms var(--ease-in-out);
}
.sl-jens__handling:hover { background: var(--sort); transform: translateY(-1px); }

.sl-jens__bunn {
  display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-light);
  background: var(--flate);
}
.sl-jens__felt {
  flex: 1; font-family: var(--font-sans); font-size: 14.5px; color: var(--sort);
  background: var(--antikkhvit); border: 1px solid var(--linbla);
  border-radius: 10px; padding: 11px 13px;
}
.sl-jens__felt::placeholder { color: var(--mist); }
.sl-jens__felt:focus { outline: none; border-color: var(--oslo); box-shadow: 0 0 0 3px rgba(74,90,98,0.12); }
.sl-jens__send {
  flex: 0 0 44px; width: 44px; border: none; border-radius: 10px;
  background: var(--oslo); color: var(--antikkhvit); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms var(--ease-in-out), opacity 150ms var(--ease-in-out);
}
.sl-jens__send svg { width: 18px; height: 18px; }
.sl-jens__send:hover:not(:disabled) { background: var(--sort); }
.sl-jens__send:disabled { opacity: 0.38; cursor: default; }

.sl-jens__fot {
  padding: 0 14px 12px; font-size: 11.5px; line-height: 1.45; color: var(--mist);
  background: var(--flate);
}
.sl-jens__fot a { color: var(--fog); }

@media (max-width: 640px) {
  .sl-jens-knapp { right: 16px; bottom: 16px; padding: 12px 16px 12px 14px; }
  .sl-jens {
    right: 0; left: 0; bottom: 0; width: 100%;
    height: 86vh; height: 86dvh;
    border-radius: 16px 16px 0 0; border-left: none; border-right: none; border-bottom: none;
  }
  .sl-jens__melding { max-width: 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-jens, .sl-jens-knapp__prikk, .sl-jens__skriver span { animation: none !important; }
}