/*
 * ABU Microsite — aanvullende CSS
 * ------------------------------------------------------------------
 * abu-frontend.css is de ORIGINELE gecompileerde stylesheet van abu.nl en
 * bevat al bijna alles (tokens, Tailwind-utilities, blokstijlen, patronen).
 * Hier staan alleen de stukjes die op abu.nl door plugins inline werden
 * geladen (yard-gutenberg style-index.css) plus kleine microsite-aanvullingen.
 * Pas design-tokens aan door CSS-variabelen te overschrijven in :root
 * (zie onderaan) — NIET door abu-frontend.css te bewerken.
 */

/* --- WordPress core: img auto sizes (inline op abu.nl) ------------------ */
img:is([sizes=auto i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; }

/* --- Block Visibility plugin schermgrootte-classes (inline op abu.nl) ---- */
@media (min-width: 992px) { .block-visibility-hide-large-screen { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .block-visibility-hide-medium-screen { display: none !important; } }
@media (max-width: 767.98px) { .block-visibility-hide-small-screen { display: none !important; } }

/* --- Microsite-aanvullingen -------------------------------------------- */
/* Zoekformulier (core/search) in ABU-stijl, gebruikt op 404 en zoekpagina */
.abu-search-form { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.abu-search-form input[type="search"] {
  flex: 1 1 16rem;
  background: var(--input-bg-color);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  box-shadow: var(--input-box-shadow);
  padding: var(--input-padding);
  font-size: var(--input-font-size);
}
.abu-search-form input[type="search"]:focus { outline: none; border-color: var(--input-border-color-focus); }

/* Paginering (archief/zoeken) */
.abu-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-block: var(--spacing-size-6); }
.abu-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 2.75rem; padding-inline: .75rem;
  border: 1px solid var(--color-anthracite); border-radius: calc(infinity * 1px);
  color: var(--color-anthracite); text-decoration: none; font-weight: 700;
}
.abu-pagination .page-numbers.current,
.abu-pagination a.page-numbers:hover,
.abu-pagination a.page-numbers:focus { background: var(--color-anthracite); color: var(--color-white); }

/* Logo-hoogte als er een eigen (microsite)logo via de Customizer wordt gezet */
.site-branding-logo { max-width: 260px; }

/* ----------------------------------------------------------------------
 * EIGEN TOKENS OVERSCHRIJVEN (voorbeeld, staat uit):
 * :root {
 *   --color-primary-500: #f06021;   ABU-oranje
 *   --radius-theme: 15px;
 *   --container-max-width: 1296px;
 *   --content-container-max-width: 832px;
 * }
 * ---------------------------------------------------------------------- */