/* Free security check widget.

   Written against the site's own colour variables where they exist and with literal
   fallbacks where they do not, because this block is rendered by a template rather than
   placed by an editor and therefore cannot rely on a palette class being present. */

.secscan {
  --secscan-fail: #c0392b;
  --secscan-warn: #b7791f;
  --secscan-pass: #1e7e50;
  --secscan-info: #4a5568;
  --secscan-ink: #0a0a0a;
  --secscan-line: #e2e2e2;
  --secscan-accent: #fed625;
}

.secscan__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.secscan__form {
  background: #0a0a0a;
  color: #fff;
  border-radius: 16px;
  padding: 28px;
}

.secscan__label {
  display: block;
  font-weight: 700;
  margin-bottom: 10px;
}

.secscan__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.secscan__input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 14px 16px;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 16px;
  color: var(--secscan-ink);
  background: #fff;
}

.secscan__input:focus {
  outline: none;
  border-color: var(--secscan-accent);
}

.secscan__button {
  flex: 0 0 auto;
  padding: 14px 24px;
  border: 0;
  border-radius: 10px;
  background: var(--secscan-accent);
  color: var(--secscan-ink);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

.secscan__button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.secscan__hint {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #c9c9c9;
}

.secscan__status {
  margin: 16px 0 0;
  font-weight: 600;
  color: #fff;
}

.secscan__status--error {
  color: var(--secscan-fail);
}

/* De tool wordt tussen de secties gerenderd en staat dus niet in een palet-wrapper: de
   tekst valt terug op zwart, terwijl de pagina-achtergrond zelf donker is. Daarom draagt
   het resultaat zijn eigen lichte vlak, net als de rapportpagina die per mail verstuurd
   wordt. Zo ziet de bezoeker op de pagina hetzelfde als in zijn mailbox. */
.secscan__results {
  margin-top: 28px;
  background: #fff;
  color: var(--secscan-ink);
  border-radius: 16px;
  padding: 24px;
}

.secscan__results h3,
.secscan__results p {
  color: var(--secscan-ink);
}

.secscan__score {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--secscan-line);
  border-radius: 16px;
  margin-bottom: 24px;
}

.secscan__grade {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  background: var(--secscan-info);
}

.secscan__grade--a { background: var(--secscan-pass); }
.secscan__grade--b { background: #3f8f5f; }
.secscan__grade--c { background: var(--secscan-warn); }
.secscan__grade--d,
.secscan__grade--f { background: var(--secscan-fail); }

.secscan__scorebody p {
  margin: 0 0 4px;
}

.secscan__number {
  font-size: 22px;
  font-weight: 700;
}

.secscan__host,
.secscan__counts,
.secscan__platform {
  font-size: 15px;
  color: #4a4a4a;
}

/* Kleuren die de regel hierboven moeten overrulen, staan hieronder opnieuw: de generieke
   p-regel binnen .secscan__results zou ze anders zwart maken. */
.secscan__results .secscan__host,
.secscan__results .secscan__counts,
.secscan__results .secscan__platform {
  color: #4a4a4a;
}

.secscan__results .secscan__evidence {
  color: #444;
}

.secscan__check {
  border: 1px solid var(--secscan-line);
  border-left-width: 5px;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
}

.secscan__check--fail { border-left-color: var(--secscan-fail); }
.secscan__check--warn { border-left-color: var(--secscan-warn); }
.secscan__check--pass { border-left-color: var(--secscan-pass); }
.secscan__check--info,
.secscan__check--unknown { border-left-color: var(--secscan-info); }

.secscan__checkhead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.secscan__badge {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f0f0f0;
  color: #333;
}

.secscan__check--fail .secscan__badge { background: #fbe6e3; color: var(--secscan-fail); }
.secscan__check--warn .secscan__badge { background: #fdf3e0; color: var(--secscan-warn); }
.secscan__check--pass .secscan__badge { background: #e4f3ec; color: var(--secscan-pass); }

.secscan__checktitle {
  margin: 0;
  font-size: 18px;
}

.secscan__evidence {
  margin: 10px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: #444;
  word-break: break-word;
}

.secscan__explanation {
  margin: 10px 0 0;
  line-height: 1.6;
}

.secscan__recommendation {
  margin: 10px 0 0;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: 10px;
  background: #faf7e6;
}

.secscan__results .secscan__mailnote,
.secscan__mailnote {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #0a0a0a;
  color: #fff;
  font-weight: 600;
}

@media (max-width: 600px) {
  .secscan__button { width: 100%; }
  .secscan__score { flex-direction: column; align-items: flex-start; }
}