/* 112Nederland – reacties (scoped .nl-comments) */
.nl-comments{
  --nlc-ink:#1c2541; --nlc-muted:#5a6177; --nlc-line:#e3e6ee; --nlc-bg:#f4f5f8;
  --nlc-accent:var(--theme-accent,#ba0707); --nlc-radius:14px;
  color:var(--nlc-ink); font:inherit; margin:2.5rem 0;
}
.nl-comments *{box-sizing:border-box}
.nl-comments a{color:var(--nlc-accent)}
.nl-comments :focus-visible{outline:3px solid var(--nlc-accent);outline-offset:2px;border-radius:6px}

/* kop */
.nl-comments__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.nl-comments__title,.nl-respond__title{margin:0;font-weight:800;line-height:1.2;padding-left:.75rem;border-left:4px solid var(--nlc-accent)}
.nl-comments__title{font-size:1.5rem}
.nl-respond__title{font-size:1.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}

/* pills */
.nl-comments .nl-pill{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.55rem 1.25rem;
  border:2px solid var(--nlc-accent);border-radius:999px;background:#fff;color:var(--nlc-accent);
  font:inherit;font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.nl-comments .nl-pill:hover{background:var(--nlc-accent);color:#fff}
.nl-comments .nl-pill--sm{min-height:36px;padding:.3rem .95rem;font-size:.85rem}
.nl-comments .nl-pill--solid{background:var(--nlc-accent);color:#fff}
.nl-comments .nl-pill--solid:hover{background:color-mix(in srgb, var(--theme-accent, #ba0707) 80%, #000);border-color:color-mix(in srgb, var(--theme-accent, #ba0707) 80%, #000)}

/* kaarten */
.nl-comments .nl-card{background:#fff;border:1px solid var(--nlc-line);border-radius:var(--nlc-radius);padding:1.5rem}

/* formulier */
.nl-respond{margin-top:1.5rem;background:var(--nlc-bg)!important}
.nl-respond__note{margin:.5rem 0 1rem;color:var(--nlc-muted);font-size:.9rem}
.nl-respond #cancel-comment-reply-link{font-size:.85rem;font-weight:600;color:var(--nlc-muted);border-left:0;min-height:44px;display:inline-flex;align-items:center}
.nl-form{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.nl-form>*{grid-column:1/-1;margin:0 0 1rem}
.nl-form .nl-field--half{grid-column:span 1}
.nl-field label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.35rem}
.nl-req{color:var(--nlc-accent)}
.nl-field input,.nl-field textarea{width:100%;min-height:44px;padding:.7rem .9rem;border:1.5px solid #c9cedb;border-radius:10px;
  background:#fff;color:var(--nlc-ink);font:inherit;font-size:1rem}
.nl-field textarea{min-height:140px;resize:vertical;line-height:1.5}
.nl-field input:focus-visible,.nl-field textarea:focus-visible{outline:3px solid var(--nlc-accent);outline-offset:1px;border-color:var(--nlc-accent)}
.nl-field ::placeholder{color:#7a8094}
.nl-hint,.nl-counter{display:block;margin-top:.3rem;font-size:.82rem;color:var(--nlc-muted)}
.nl-counter{text-align:right}
.nl-counter.is-near{color:#9a5b00}.nl-counter.is-max{color:var(--nlc-accent);font-weight:700}
.nl-check{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem}
.nl-check input{width:22px;height:22px;margin:.1rem 0 0;flex:none;accent-color:var(--nlc-accent)}
.nl-form__submit{display:flex;justify-content:flex-end}

/* lijst */
.nl-comments__list,.nl-comments .children{list-style:none;margin:0;padding:0}
.nl-comments .children{margin-left:1.75rem;padding-left:1.25rem;border-left:3px solid var(--nlc-line)}
.nl-comment{margin:0 0 1rem}
.nl-comment__body{display:flex;gap:.9rem;background:#fff;border:1px solid var(--nlc-line);border-radius:var(--nlc-radius);padding:1.1rem 1.25rem}
.nl-comment.is-pending>.nl-comment__body{background:#fffaf0;border-style:dashed;border-color:#e2c48a}
.nl-comment__avatar{position:relative;flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#1c2541;color:#fff;display:grid;place-items:center;font-weight:800;font-size:1rem}
.nl-comment__avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nl-comment__main{flex:1;min-width:0}
.nl-comment__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin-bottom:.35rem}
.nl-comment__author{font-weight:800}
.nl-badge{display:inline-block;padding:.1rem .55rem;border-radius:999px;background:var(--nlc-accent);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.nl-comment__time{color:var(--nlc-muted)!important;font-size:.85rem;text-decoration:none}
.nl-comment__time:hover{text-decoration:underline}
.nl-comment__pending{margin:.2rem 0 .5rem;font-size:.85rem;font-weight:600;color:#7a4b00}
.nl-comment__text{line-height:1.6;overflow-wrap:anywhere}
.nl-comment__text p{margin:0 0 .6rem}
.nl-comment__actions{display:flex;align-items:center;gap:1rem;margin-top:.4rem}
.nl-link-muted{color:var(--nlc-muted)!important;font-size:.85rem}

/* leeg / gesloten */
.nl-comments__empty,.nl-comments__closed{display:flex;align-items:center;gap:.9rem;color:var(--nlc-muted)}
.nl-comments__empty p,.nl-comments__closed p{margin:0}
.nl-comments__empty strong{color:var(--nlc-ink)}
.nl-comments__empty svg{color:var(--nlc-accent);flex:none}
.nl-comments__closed{background:var(--nlc-bg)!important;color:var(--nlc-ink);font-weight:600}
.nl-comments__nav{display:flex;justify-content:space-between;margin:1rem 0}

/* mobiel */
@media (max-width:640px){
  .nl-comments .nl-card{padding:1.1rem}
  .nl-form{grid-template-columns:1fr}
  .nl-form .nl-field--half{grid-column:1/-1}
  .nl-form__submit .nl-pill{width:100%}
  .nl-comments .children{margin-left:.5rem;padding-left:.75rem}
  .nl-comment__body{padding:.9rem;gap:.7rem}
  .nl-comment__avatar{width:38px;height:38px;font-size:.85rem}
  .nl-comments__title{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){.nl-comments *{transition:none!important;scroll-behavior:auto!important}}
@media (forced-colors:active){.nl-comments .nl-pill,.nl-badge{border:1px solid ButtonText}}

/* Redactie-avatar (112-logo) */
.nl-comment__avatar--staff{background:#fff;border:1px solid var(--nlc-line)}
.nl-comment__avatar--staff .nl-avatar__img--logo{object-fit:contain;padding:6px}
/* Videopagina: geen extra bovenmarge, sectie zit al onder de knoppen */
.wa112-vpage .nl-comments{margin-top:1.5rem;border-top:1px solid var(--nlc-line);padding-top:1.25rem}