/*
 * Aanvullingen die alleen nodig zijn omdat de site nu door WordPress wordt
 * gerenderd. De originele stylesheet in style.css is bewust ongewijzigd.
 */

/* De topbar is sticky; de WordPress-adminbalk moet er niet overheen vallen. */
.admin-bar .topbar {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .topbar {
    top: 46px;
  }
}

/* Inhoud die uit de editor komt, in dezelfde ritmiek als de oude pagina's. */
.udr-page-content {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.udr-page-content > * {
  margin: 0;
}

.udr-page-content p,
.udr-page-content li {
  color: var(--muted);
  line-height: 1.65;
}

.udr-page-content h2,
.udr-page-content h3,
.udr-page-content h4 {
  color: var(--text);
}

.udr-page-content ul,
.udr-page-content ol {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.udr-page-content blockquote {
  margin: 0;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.udr-page-content table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.udr-page-content th,
.udr-page-content td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}

.udr-page-content figure {
  margin: 0;
}

.udr-page-content figcaption {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 6px;
}

/* Blok-uitlijning uit de editor. */
.alignleft {
  float: left;
  margin: 0 18px 12px 0;
}

.alignright {
  float: right;
  margin: 0 0 12px 18px;
}

.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.alignwide,
.alignfull {
  width: 100%;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
}

/* Paginering. */
.navigation.pagination .nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.navigation.pagination .page-numbers {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  background: var(--panel);
}

.navigation.pagination .page-numbers.current,
.navigation.pagination .page-numbers:hover {
  border-color: var(--border);
  color: var(--accent);
}

/* Reacties. */
.comment-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comment-list .comment-body {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--panel-strong);
}

.comment-form label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}

.comment-form input:not([type="submit"]),
.comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  margin-bottom: 12px;
}

.comment-form input[type="submit"] {
  padding: 12px 18px;
  border-radius: 12px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

/* Het menu-item dat als knop dienst doet, blijft naast de links staan. */
.nav a.btn-ghost,
.nav .btn-ghost {
  cursor: pointer;
}

/* ==========================================================================
   Blokken uit de editor in de oude vormgeving
   Zodat een pagina die je zelf met blokken opbouwt er hetzelfde uitziet als
   de overgezette pagina's.
   ========================================================================== */

/* Een groep met de klasse grid gedraagt zich als het oude kaartenraster. */
.udr-page-content .wp-block-group.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}

/* Een groep met de klasse card krijgt de kaartopmaak. */
.udr-page-content .wp-block-group.card > *:first-child {
	margin-top: 0;
}

/* Afbeeldingsblokken binnen een kaart: geen figure-marges. */
.udr-page-content figure.wp-block-image {
	margin: 0;
}

.udr-page-content .card-media figure.wp-block-image,
.udr-page-content .card-media .wp-block-image img {
	width: 100%;
	height: 100%;
}

.udr-page-content figure.wp-block-image.profile-photo {
	display: inline-block;
}

.udr-page-content figure.wp-block-image.profile-photo img {
	border-radius: 16px;
}

/* Lijsten in de oude stijl blijven zonder bolletjes. */
.udr-page-content ul.list-clean,
.udr-page-content ol.list-clean {
	list-style: none;
	padding-left: 0;
}

/* Knoppenrij die als alinea is opgebouwd. */
.udr-page-content p.card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* Een groep met profile-layout: twee kolommen zoals op de profielpagina's. */
.udr-page-content .wp-block-group.profile-layout {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 18px;
	align-items: start;
}

@media (max-width: 860px) {
	.udr-page-content .wp-block-group.profile-layout {
		grid-template-columns: 1fr;
	}
}

/* Onder elkaar geplaatste blokken houden dezelfde tussenruimte. */
.udr-page-content > .wp-block-group + .wp-block-group {
	margin-top: 0;
}