/* ============================================================
   Vindbaarheid · paginakaarten, Google- en deelvoorbeeld,
   robots/sitemap/JSON-LD, omleidingen en de controlelijst.

   Bouwt op beheer.css (.kaart, .knop, .tabel, .tabs, .veld,
   .invoer, .schakel, .merk, .aandacht, .leeg); hier staat alleen
   wat echt nieuw is. De twee voorvoorbeelden zijn de kern van het
   scherm: ze mogen er echt uitzien als zoekresultaat en berichten-
   kaart, maar zonder logo's van anderen — alleen de vorm.
   Geen child-combinators (een hook maakt daar lege bestanden van).
   ============================================================ */

/* Zonder bewerkrecht: één rustige regel, geen slot op de inhoud. */
.seo-lezen{display:flex;align-items:center;gap:8px;margin:-8px 0 20px;
  color:var(--grijs);font-size:13px}
.seo-lezen svg{flex:none;color:var(--zacht)}

/* Intro- en waarschuwingsregels boven lijsten. */
.seo-regel{margin:0 0 14px;color:var(--grijs);font-size:13px;max-width:70ch}
.seo-waarschuwing{margin:0 0 12px;padding:9px 12px;background:var(--terra-zacht);
  color:#9C4522;border-radius:var(--r);font-size:12.5px}

/* Paden en adressen: mono maar zonder de hoofdletters van .mono. */
.seo-pad{font-family:var(--mono);font-size:11.5px;color:var(--zacht);overflow-wrap:anywhere}

/* ---------- paginakaarten (tab Pagina's) ---------- */
.seo-pagina{background:var(--wit);border:1px solid var(--lijn);
  border-radius:var(--r-groot);margin-bottom:10px;overflow:hidden}
.seo-pagina__kop{display:flex;align-items:center;gap:12px;width:100%;padding:13px 18px;
  border:0;background:transparent;cursor:pointer;text-align:left;transition:background .15s}
.seo-pagina__kop:hover{background:#FBFBF9}
.seo-pagina__pijl{color:var(--zacht);flex:none;line-height:1;transition:transform .18s}
.seo-pagina.open .seo-pagina__pijl{transform:rotate(90deg)}
.seo-pagina__tekst{display:grid;gap:2px;min-width:0}
.seo-pagina__naam{font-size:14px;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.seo-pagina__merken{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.seo-pagina__body{padding:16px 18px 20px;border-top:1px solid var(--lijn-2);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 28px}

/* Veldkop met tekenteller: label links, telling rechts. */
.seo-veld__kop{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:5px}
.seo-veld__kop label{font-size:12.5px;font-weight:500}
.seo-teller{font-family:var(--mono);font-size:10.5px;color:var(--zacht);letter-spacing:.04em}
.seo-teller--over{color:var(--terra);font-weight:600}

/* Slug: vast voorstuk (domein) naast het invoerveld. */
.seo-slug{display:flex;align-items:center;gap:8px}
.seo-slug .seo-pad{flex:none}
.seo-slug .invoer{flex:1;min-width:0}

/* ---------- het Google-voorbeeld ---------- */
/* De vorm van een zoekresultaat: witte kaart, blauwe titel in een
   paletkleur, groen adres, grijze omschrijving. Arial in plaats van
   Inter, omdat het er anders nét niet echt uitziet. */
.seo-voorbeelden{display:flex;flex-direction:column;gap:18px;min-width:0}
.seo-voorbeelden__label{margin-bottom:8px}
.seo-google{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);
  padding:16px 18px;max-width:600px;font-family:arial,sans-serif;transition:opacity .18s}
.seo-google--uit{opacity:.45}
.seo-google__kop{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.seo-google__bol{width:26px;height:26px;border-radius:50%;background:var(--navy);
  display:grid;place-items:center;flex:none}
.seo-google__bol img{width:16px;height:auto}
.seo-google__wie{min-width:0}
.seo-google__site{font-size:13px;color:var(--inkt);line-height:1.3}
.seo-google__pad{font-size:12px;color:var(--sage);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seo-google__titel{font-size:18px;line-height:1.3;color:#33538A;margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seo-google__titel:hover{text-decoration:underline;cursor:pointer}
.seo-google__tekst{font-size:13px;line-height:1.55;color:var(--grijs);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seo-google__tekst--leeg{font-style:italic;color:var(--zacht)}

/* ---------- het deelvoorbeeld (WhatsApp/LinkedIn-kaart) ---------- */
.seo-deel{max-width:320px;border:1px solid var(--lijn);border-radius:12px;
  overflow:hidden;background:var(--wit)}
.seo-deel__beeld{width:100%;aspect-ratio:1.91/1;object-fit:cover;display:block;
  background:var(--lijn-2)}
.seo-deel__leeg{aspect-ratio:1.91/1;display:grid;place-items:center;padding:14px;
  text-align:center;color:var(--zacht);font-size:12px;background:var(--lijn-2)}
.seo-deel__voet{padding:10px 12px;background:var(--lijn-2)}
.seo-deel__titel{font-size:13.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seo-deel__domein{margin-top:3px;font-size:11px;color:var(--zacht);
  text-transform:uppercase;letter-spacing:.03em}
.seo-deel__hint{margin:6px 0 0;font-size:12px;color:var(--zacht)}
.seo-deel__knoppen{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}

/* ---------- site-breed: robots.txt, sitemap en JSON-LD ---------- */
/* Donker codeblok: dit is machinetaal, en zo is meteen zichtbaar
   wáár de schakelaars op ingrijpen. */
.seo-code{margin:6px 0 0;background:var(--navy);color:#DCE3EE;border-radius:var(--r);
  padding:14px 16px;font-family:var(--mono);font-size:12px;line-height:1.7;overflow-x:auto}

.seo-sitemap{border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;
  background:var(--wit)}
.seo-sitemap__rij{display:flex;align-items:baseline;gap:14px;padding:9px 14px;
  border-bottom:1px solid var(--lijn-2)}
.seo-sitemap__rij:last-child{border-bottom:0}
.seo-sitemap__naam{margin-left:auto;font-size:12.5px;color:var(--zacht);
  text-align:right;flex:none}

.seo-schema{padding:14px 0;border-bottom:1px solid var(--lijn-2)}
.seo-schema:last-child{border-bottom:0;padding-bottom:2px}
/* De uitleg lijnt uit onder de tekst van de schakelaar (38px spoor + 11px gap). */
.seo-scherm .schakel+.veld__hint{margin-left:49px}

.seo-json{margin-top:10px;margin-left:49px}
.seo-json summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:12.5px;font-weight:500;color:var(--terra);list-style:none}
.seo-json summary::-webkit-details-marker{display:none}
.seo-json summary::before{content:"▸";font-size:11px;transition:transform .15s}
.seo-json[open] summary::before{transform:rotate(90deg)}
.seo-json summary:hover{text-decoration:underline}

/* ---------- omleidingen ---------- */
.seo-toevoegen{margin-top:16px}
.seo-omleiding{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seo-omleiding .invoer{flex:1 1 200px;min-width:0}
.seo-omleiding__pijl{color:var(--zacht);flex:none}
.seo-omleiding .knop{flex:none}

/* ---------- alleen-lezen ---------- */
.seo-scherm .invoer[disabled]{background:#FAFAF8;color:var(--grijs);cursor:not-allowed}
.seo-scherm .schakel input:disabled+.schakel__spoor{opacity:.55;cursor:not-allowed}

/* ---------- klein scherm ---------- */
@media (max-width:820px){
  .seo-pagina__body{grid-template-columns:minmax(0,1fr)}
  .seo-pagina__kop{gap:10px;padding-inline:14px}
  .seo-pagina__merken .merk--live,.seo-pagina__merken .merk--concept{display:none}
  .seo-deel{max-width:100%}
  .seo-json,.seo-scherm .schakel+.veld__hint{margin-left:0}
  .seo-omleiding .knop{width:100%;justify-content:center}
}