/* ============================================================
   Demo-omgeving — subpaginalaag
   Bovenop page.css. Bevat wat alleen op de binnenpagina's leeft:
   paginakop, kruimelpad, filterbalk, detailweergave, nieuws,
   artikelopmaak, formulieren en het beheerscherm.
   ============================================================ */

/* --- Paginakop --- */
.page-hero { background: var(--surface-card); border-bottom: 1px solid var(--border-hairline); }
.page-hero .container { padding: 56px 32px 48px; }
.page-hero h1 {
  margin: 14px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.03em;
  color: var(--text-strong);
}
.page-hero p.lead { margin: 16px 0 0; max-width: 60ch; font-size: var(--text-md); line-height: 1.6; color: var(--text-body); }

/* --- Kruimelpad --- */
.breadcrumb { background: var(--surface-page); border-bottom: 1px solid var(--border-hairline); }
.breadcrumb .container { display: flex; align-items: center; gap: 8px; padding: 12px 32px; flex-wrap: wrap; }
.breadcrumb a, .breadcrumb span {
  font-family: var(--font-sans); font-size: 12.5px; color: var(--text-muted); text-decoration: none;
}
.breadcrumb a { display: inline-block; padding: 3px 0; }
.breadcrumb a:hover { color: var(--text-strong); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text-strong); font-weight: 700; }
.breadcrumb__sep { color: var(--text-faint); }

/* --- Filterbalk --- */
.filterbar {
  position: sticky; top: 72px; z-index: var(--z-raised);
  background: rgba(247, 247, 245, 0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-hairline);
}
.filterbar .container { display: flex; align-items: center; gap: 12px; padding: 14px 32px; flex-wrap: wrap; }
.select, .input, .textarea {
  font-family: var(--font-sans); font-size: 14px; color: var(--text-strong);
  background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 9px 12px; min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.select:hover, .input:hover, .textarea:hover { border-color: var(--text-muted); }
.select { padding-right: 30px; cursor: pointer; }
.result-count { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); margin-left: auto; }

/* --- Lege staat --- */
.empty-note {
  padding: var(--space-8); text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-card); color: var(--text-muted); font-size: 14.5px;
}
.below-grid { margin-top: 32px; }

/* --- Detailweergave --- */
.detail { padding: 40px 0 80px; }
.detail-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; }
.detail h1 { margin: 12px 0 0; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; }
.detail__summary { margin: 14px 0 0; font-size: var(--text-md); line-height: 1.6; color: var(--text-body); max-width: 56ch; }
.media-main { margin-bottom: 16px; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.thumb { aspect-ratio: 4 / 3; }

/* Feitentabel */
.facts { padding: var(--space-6); }
.facts h2 { font-size: var(--text-lg); margin: 0 0 var(--space-4); }
.facts dl { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; }
.facts dt, .facts dd {
  padding: 10px 0; border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-sans); font-size: 14px; margin: 0;
}
.facts dt { color: var(--text-muted); padding-right: 20px; }
.facts dd { color: var(--text-strong); font-weight: 500; text-align: right; }
.facts dl > :nth-last-child(1), .facts dl > :nth-last-child(2) { border-bottom: 0; }

.detail-block { margin-top: 32px; }
.detail-block h2 { font-size: var(--text-lg); }
.detail-block p { color: var(--text-body); line-height: 1.7; }

/* Aanvraagblok, blijft in beeld bij het scrollen */
.enquiry { padding: var(--space-6); position: sticky; top: 96px; }
.enquiry h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.enquiry p { font-size: 14px; color: var(--text-body); }
.enquiry .btn { width: 100%; margin-top: var(--space-2); }

/* Melding op een verkocht item */
.sold-note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: var(--space-5); border-radius: var(--radius-md);
  background: var(--status-sold-bg); border: 1px solid var(--border-strong);
  font-size: 14.5px; color: var(--text-body); line-height: 1.55;
}

.related { padding: 0 0 88px; }

/* --- Nieuws --- */
.tag {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: var(--radius-pill); background: var(--accent-quiet);
  color: var(--accent-700); border: 1px solid var(--accent-300);
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.post-date { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--text-muted); }
.news-section { padding: 48px 0 88px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.post {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--surface-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.post:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post__media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-sunken); }
.post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post__body { display: flex; flex-direction: column; gap: 10px; padding: var(--space-5); flex: 1; }
.post__body h2, .post__body h3 { margin: 0; font-family: var(--font-display); font-size: 17.5px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--text-strong); }
.post__body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-body); }
.post__foot { margin-top: auto; padding-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* --- Artikelopmaak --- */
.article { padding: 40px 0 80px; }
.article__body { max-width: 68ch; margin: 0 auto; }
.article__body h2 { margin: 40px 0 14px; font-size: var(--text-xl); letter-spacing: -0.02em; }
.article__body p { font-size: 17px; line-height: 1.75; color: var(--text-body); }
.article__body ul { margin: 0 0 var(--space-4); padding-left: 0; list-style: none; display: grid; gap: 10px; }
.article__body ul li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.65; color: var(--text-body); }
.article__body ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.article__lead { font-size: 19px; line-height: 1.65; color: var(--text-strong); font-weight: 500; }
.article__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }

/* Antwoordblok bovenaan het artikel (opzet voor zoek- en antwoordmachines) */
.answer-box {
  padding: var(--space-5) var(--space-6); border-radius: var(--radius-md);
  background: var(--accent-100); border: 1px solid var(--accent-300);
  margin: 0 0 var(--space-8);
}
.answer-box p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--accent-800); }

/* --- Formulieren + beheerscherm --- */
.form-panel { padding: var(--space-8); }
.form-row { margin-bottom: 16px; }
.form-row--split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.label { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--text-strong); margin-bottom: 6px; }
.input, .select, .textarea { width: 100%; }
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.hint { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }

/* Beheer: tweekoloms — links het formulier, rechts de lijst */
.admin { padding: 32px 0 80px; }
.admin-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 32px; align-items: start; }
.admin__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; margin-bottom: 24px; flex-wrap: wrap;
  border-radius: var(--radius-md); background: var(--accent-100); border: 1px solid var(--accent-300);
  font-size: 13.5px; color: var(--accent-800);
}

/* Beheerlijst: één rij per item, status direct omzetbaar */
.admin-list { display: grid; gap: 10px; }
.admin-row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 14px; background: var(--surface-card);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
}
.admin-row__thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-sunken); }
.admin-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-row__name { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-strong); margin: 0; letter-spacing: -0.01em; }
.admin-row__meta { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-muted); margin: 2px 0 0; }
.admin-row__actions { display: flex; align-items: center; gap: 8px; }
.admin-row--verkocht { background: var(--surface-sunken); }
.admin-row--nieuw { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100); }

/* Waar het item nu te zien is — maakt de verplaatsing zichtbaar */
.where {
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.where b { color: var(--accent-700); font-weight: 700; }

/* --- Responsief --- */
@media (max-width: 1000px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .enquiry { position: static; }
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .page-hero .container { padding: 40px 20px 36px; }
  .breadcrumb .container, .filterbar .container { padding: 12px 20px; }
  .filterbar { position: static; }
  .filterbar .container { gap: 8px; }
  .select, .input, .textarea { font-size: 16px; } /* voorkomt inzoomen op iOS */
  .result-count { margin-left: 0; width: 100%; }
  .news-grid { grid-template-columns: 1fr; }
  .thumbs { grid-template-columns: repeat(3, 1fr); }
  .form-row--split { grid-template-columns: 1fr; }
  .form-panel { padding: var(--space-5); }
  .admin-row { grid-template-columns: 1fr; gap: 10px; }
  .admin-row__thumb { display: none; }
  .admin-row__actions { flex-wrap: wrap; }
  .article__body p { font-size: 16.5px; }
}

/* Beginletter in plaats van een miniatuur: een placeholder van 44 pixels is
   toch onleesbaar, en items die tijdens de demo worden toegevoegd hebben
   nog helemaal geen beeld. */
.admin-row__thumb {
  display: grid; place-content: center;
  background: var(--accent-100); color: var(--accent-600);
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
}

/* ============================================================
   Uitleglaag — tekstbolletjes + wegwijzer
   Voor iemand die dit voor het eerst ziet. Staat standaard aan;
   de knop in de kopbalk zet hem uit (voor een schone opname).
   Alles staat in de pagina, niet zwevend: geen overlap, geen
   positioneringsrekenwerk, werkt op elke breedte.
   ============================================================ */

/* Uit-stand: alleen verbergen, de opmaak eronder blijft gelijk. */
.uitleg-uit .bolletje,
.uitleg-uit [data-wegwijzer] { display: none !important; }

/* --- Het bolletje zelf --- */
.bolletje {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 14px 0;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  background: var(--accent-100);
  border: 1px solid var(--accent-300);
  /* Klein driehoekje linksboven, zodat het als toelichting leest en niet
     als nog een blok inhoud. */
  position: relative;
}
.bolletje::before {
  content: "";
  position: absolute; top: -6px; left: 22px;
  width: 10px; height: 10px;
  background: var(--accent-100);
  border-left: 1px solid var(--accent-300);
  border-top: 1px solid var(--accent-300);
  transform: rotate(45deg);
}
.bolletje__num {
  display: inline-grid; place-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #FFFFFF;
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  margin-top: 1px;
}
.bolletje p {
  margin: 0;
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  color: var(--accent-800);
}
.bolletje p b { font-weight: 700; }

/* Variant zonder nummer, voor een losse opmerking. */
.bolletje--los .bolletje__num { display: none; }

/* Bolletje dat direct onder een kop hangt: dan hoeft de marge erboven weg. */
.bolletje--aansluitend { margin-top: 8px; }

/* --- De wegwijzer bovenaan --- */
[data-wegwijzer] {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--accent-300);
  background: var(--accent-100);
}
.wegwijzer__stippen { display: flex; align-items: center; gap: 8px; flex: none; }
.wegwijzer__stip {
  display: inline-grid; place-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-card); color: var(--text-muted);
  border: 1.5px solid var(--border-strong);
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
}
.wegwijzer__stip.is-nu { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
.wegwijzer__stip.is-gedaan { background: var(--accent-300); color: var(--accent-800); border-color: var(--accent-300); }
.wegwijzer__tekst { flex: 1 1 260px; min-width: 0; }
.wegwijzer__titel {
  margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--accent-800); letter-spacing: -0.01em;
}
.wegwijzer__uitleg {
  margin: 3px 0 0; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5;
  color: var(--accent-800);
}
[data-wegwijzer] .btn { flex: none; }

/* --- Schakelaar in de kopbalk: Uitleg aan / uit ---
   Bewust twee zichtbare standen met de actieve opgelicht, geen enkele knop
   die van tekst wisselt. Bij zo'n knop kun je namelijk niet zien of het
   label de huidige stand is of wat er gebeurt als je klikt. */
.schakel {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none;
  /* Ruimte plus een haarlijn, zodat de schakelaar niet als zesde navigatielink
     leest maar als een aparte bediening. */
  margin-left: 10px; padding-left: 22px;
  border-left: 1px solid var(--border-hairline);
}
.schakel__label {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
  color: var(--text-muted); white-space: nowrap;
}
.schakel__knop {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
  min-height: 44px; min-width: 48px; padding: 8px 14px;
  cursor: pointer;
  background: var(--surface-card); color: var(--text-muted);
  border: 1.5px solid var(--border-strong);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
/* De twee knoppen zitten tegen elkaar aan als één schakelaar. */
.schakel__knop:first-of-type { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.schakel__knop:last-of-type { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-left: -1.5px; }
.schakel__knop:hover { color: var(--text-strong); border-color: var(--text-muted); z-index: 1; }

/* De actieve stand: gevuld, dus in één oogopslag te zien. */
.schakel__knop.is-actief {
  background: var(--accent); color: #FFFFFF; border-color: var(--accent);
  z-index: 2;
}
.schakel__knop.is-actief:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #FFFFFF; }

@media (max-width: 820px) {
  [data-wegwijzer] { padding: 14px 20px; gap: 14px; }
  .wegwijzer__tekst { flex-basis: 100%; }
  [data-wegwijzer] .btn { width: 100%; }
  /* Eigen regel op mobiel: met flex:none stak deze regel 0,9px buiten de
     pagina en gaf dat een horizontale schuifbalk. */
  .wegwijzer__hier { flex: 1 1 100%; }
  .bolletje { padding: 12px 14px; }
  .bolletje p { font-size: 14.5px; }
  /* In het uitklapmenu staat de schakelaar op een eigen regel. */
  .schakel { margin-top: 12px; width: 100%; margin-left: 0; padding-left: 0; border-left: 0; }
  /* min-width: 0 erbij, anders houdt de min-width van 48px de knoppen te breed
     en duwt het uitklapmenu de pagina 8px naar rechts. */
  .schakel__knop { flex: 1 1 0; min-width: 0; }
}

/* "Je bent hier" in plaats van een knop naar de pagina waar je al staat. */
.wegwijzer__hier {
  margin: 0; flex: 0 1 auto; min-width: 0;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  color: var(--accent-800);
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--surface-card); border: 1.5px solid var(--accent-300);
}

/* Alleen voor voorleessoftware. Vervangt de oude left:-9999px-truc: die geeft
   een element een echte plek buiten het beeld, wat de paginabreedte kan
   beïnvloeden en bij focus naar links wegspringt. */
.enkel-voorlezen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}