/* Overzichtspagina's: zoekresultaten (search.php), 404 (404.php) en archieven (index.php).
   Waarden gemeten op de oude site (blog-rasterlayout van het oude thema, systeemfont van body). Alles in rem/em, zodat
   het net als daar meeschaalt met html{font-size:91.2%} onder 921px (base.css). Laadt na site.css en
   alleen op deze pagina's (inc/assets.php). */

.arch { display: flow-root; color: #334155; }

/* Kop: titel en kruimelpad, gecentreerd, lijn eronder */
.arch-head { max-width: 1200px; margin: 2em auto; padding: 3em; border-bottom: 1px solid #d1d5db; text-align: center; }
.arch-title { margin: 0 0 10px; font-size: 2rem; font-weight: 600; line-height: 1.4; color: #1e293b; }
.arch-title span { font: inherit; color: inherit; }
.arch-desc { margin: 10px 0 0; }
.arch-desc p { margin: 0; font: inherit; }
.arch-trail { display: inline-block; margin: 0; padding: 0; list-style: none; }
.arch-trail li { display: inline-block; margin: 0; padding: 0; }
.arch-trail li::after { content: "\00bb"; padding: 0 .3em; }
.arch-trail li:last-child::after { display: none; }
.arch-trail a { color: #046bd2; }
.arch-trail a:hover, .arch-trail a:focus { color: #045cb4; }

/* Kaarten: drie kolommen, zachte schaduw, afbeelding tot aan de rand van de kaart */
.arch-grid { display: flex; flex-wrap: wrap; align-items: stretch; }
.arch-card { position: relative; width: 33.33%; margin: 0 0 2em; padding: 0 20px; }
.arch-card-in { padding: 1.5em; box-shadow: 0 6px 15px -2px rgba(16, 24, 40, .05); }
.arch-card-body { position: relative; }
.arch-thumb-w { margin: 0 0 1.5em; }
.arch-thumb-w:empty { margin: 0; }
.arch-thumb { margin: -1.5em -1.5em 0; overflow: hidden; }
.arch-thumb a { display: block; }
.arch-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; transform: scale(1); transition: transform .5s ease; }
.arch-card:hover .arch-thumb img { transform: scale(1.1); }
.arch-cats { display: block; margin: 0 0 .8em; font-weight: 600; }
.arch-cats a { font-size: .875rem; font-weight: 600; color: #046bd2; }
.arch-cats a:hover, .arch-cats a:focus { color: #045cb4; }
.arch-card-title { margin: 0 0 .6em; font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: #1e293b; }
.arch-card-title a { color: inherit; }
.arch-card-title a:hover, .arch-card-title a:focus { color: #046bd2; }
.arch-meta { margin: 2em 0 1em; font-size: .8125rem; font-weight: 600; line-height: 1.45; color: #046bd2; }
.arch-meta a { color: inherit; }
.arch-meta a:hover, .arch-meta a:focus { color: #045cb4; }
.arch-excerpt p { margin: 0; }
.arch-excerpt img.wp-smiley { display: inline; width: 1em; height: 1em; margin: 0 .07em; padding: 0; border: 0; box-shadow: none; background: none; vertical-align: -.1em; }

/* Paginering: genummerd, "Volgende" rechts */
.arch-pagination { padding: 2em; text-align: center; }
.arch-nav-links::after { content: ""; display: table; clear: both; }
.arch-pagination .page-numbers { display: inline-block; width: 2.33333em; height: 2.33333em; font-size: 1.06666rem; font-weight: 500; line-height: calc(2.33333em - 3px); color: #334155; text-align: center; }
.arch-pagination a.page-numbers:hover, .arch-pagination a.page-numbers:focus { color: #045cb4; }
.arch-pagination .page-numbers.current { color: #fff; background-color: #046bd2; }
.arch-pagination .prev.page-numbers, .arch-pagination .next.page-numbers { display: block; width: auto; padding: 0 1.5em; }
.arch-pagination .prev.page-numbers { float: left; }
.arch-pagination .next.page-numbers { float: right; }

/* Geen resultaten */
.arch-none { margin: 4em 0; text-align: center; }
.arch-none p { margin: 0 0 1.75em; }

/* 404 */
.err404 { margin: 4em 0; text-align: center; }
.err404-head { margin: 0 0 1.5em; }
.err404-title { margin: 0; font-size: 2.25rem; font-weight: 400; line-height: 1.4; color: #1e293b; }
.err404-sub { margin: 0; font-size: 1.5rem; font-weight: 400; line-height: 1.3; color: #1e293b; }
.err404-search { margin: 1.5em 0 0; padding-top: .5em; }

/* Zoekveld met vergrootglas (searchform.php) */
.srch { position: relative; max-width: 370px; margin: 0 auto; text-align: left; }
.srch-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.srch-field { display: block; box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 12px 45px 12px 15px; font-family: inherit; font-size: 16px; line-height: 24px; color: #475569; background-color: #fafafa; border: 1px solid #d1d5db; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); -webkit-appearance: none; appearance: none; }
.srch-field::placeholder { color: #9ca3af; opacity: 1; }
.srch-field:focus { outline: none; border-color: #046bd2; }
.srch-btn { position: absolute; top: 0; right: 15px; bottom: 0; display: flex; align-items: center; margin: 0; padding: 1px 0 0; border: 0; background: none; color: #3a3a3a; cursor: pointer; }
.srch-btn svg { display: block; width: .9em; height: 1em; margin: 3px 2px 0 0; fill: currentColor; }
.srch-btn:hover, .srch-btn:focus { color: #046bd2; }
.srch-btn:focus-visible { outline: thin dotted; }

@media (max-width: 921px) {
	.arch-card { width: 100%; }
	.err404-title { font-size: 1.875rem; }
}
@media (max-width: 420px) {
	.arch-pagination .prev.page-numbers, .arch-pagination .next.page-numbers { width: 100%; margin: 0; text-align: center; }
}