/*
 * Nyhetsbrev-skjema (3D Detailing)
 * Tilpass utseendet ved å sette disse variablene i temaets CSS, f.eks.:
 *   .nl { --nl-accent: #da532c; --nl-accent-text: #fff; }
 * Standardverdiene arver farge fra omgivelsene, så skjemaet fungerer i både lys og mørk footer.
 */
.nl {
  --nl-accent: #da532c;
  --nl-accent-text: #fff;
  --nl-radius: 6px;
  --nl-field-bg: rgba(255, 255, 255, 0.96);
  --nl-field-text: #1a1a1a;
  --nl-field-border: rgba(0, 0, 0, 0.25);
  --nl-error: #ff8a7a;
  --nl-ok: #7fd49a;
  color: inherit;
  max-width: 40rem;
}

.nl__heading { margin: 0 0 .35em; font-size: 1.25rem; line-height: 1.25; }
.nl__intro   { margin: 0 0 1em; opacity: .85; }

.nl__row { display: flex; flex-wrap: wrap; gap: .75rem; }
.nl__field { flex: 1 1 12rem; min-width: 0; }
.nl__field label { display: block; margin-bottom: .3em; font-size: .875rem; }
.nl__opt { opacity: .7; }

.nl input[type="text"],
.nl input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: .7em .85em;
  font: inherit;
  font-size: 1rem; /* 16px hindrer zoom på iOS */
  color: var(--nl-field-text);
  background: var(--nl-field-bg);
  border: 1px solid var(--nl-field-border);
  border-radius: var(--nl-radius);
}
.nl input[aria-invalid="true"] { border-color: var(--nl-error); box-shadow: 0 0 0 1px var(--nl-error); }
.nl input:focus-visible,
.nl button:focus-visible { outline: 3px solid var(--nl-accent); outline-offset: 2px; }

.nl__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .6rem;
  align-items: start;
  margin: .9rem 0;
  font-size: .875rem;
  line-height: 1.45;
}
.nl__consent input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--nl-accent); }
.nl__consent a { color: inherit; text-decoration: underline; }
.nl__consent .nl__error { grid-column: 2; }

.nl__error { margin: .35em 0 0; font-size: .85rem; color: var(--nl-error); }
.nl__error[hidden] { display: none; }

/* Honeypot: ute av syne for alle, men ikke display:none (noen bots hopper over dem) */
.nl__hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.nl__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 2.9rem;
  padding: .7em 1.6em;
  font: inherit;
  font-weight: 600;
  color: var(--nl-accent-text);
  background: var(--nl-accent);
  border: 0;
  border-radius: var(--nl-radius);
  cursor: pointer;
  transition: filter .15s ease;
}
.nl__btn:hover { filter: brightness(1.08); }
.nl__btn:disabled { cursor: progress; opacity: .8; }

.nl__spinner {
  display: none;
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: nl-spin .7s linear infinite;
}
.nl__form--busy .nl__spinner { display: inline-block; }
@keyframes nl-spin { to { transform: rotate(360deg); } }

.nl__status { margin: .9rem 0 0; min-height: 1.4em; font-weight: 500; }
.nl__status:focus { outline: none; }
.nl__status--ok { color: var(--nl-ok); }
.nl__status--error { color: var(--nl-error); }
.nl__form--done .nl__status { margin: 0; font-size: 1.05rem; }

/* Større variant (artikkelsider) */
.nl--large {
  padding: 1.5rem;
  margin: 2rem 0;
  border: 1px solid currentColor;
  border-color: rgba(128, 128, 128, .35);
  border-radius: calc(var(--nl-radius) * 1.5);
}
.nl--large .nl__heading { font-size: 1.5rem; }

@media (max-width: 480px) {
  .nl__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nl__spinner { animation-duration: 2s; }
  .nl__btn { transition: none; }
}