/*
Theme Name: KiesMobiel
Author: Redactie
Description: Een helder, toegankelijk blokthema voor smartphones kiezen zonder gedoe.
Version: 1.0.0
Requires at least: 7.0
Requires PHP: 8.2
Text Domain: kiesmobiel
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Structure and small enhancements; core blocks provide all interaction. */
* { box-sizing: border-box; }
html { scroll-padding-top: 2rem; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
a { text-underline-offset: .2em; text-decoration-thickness: .08em; }
a, button, input { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, textarea, select, summary):focus-visible {
    outline: 3px solid #075665;
    outline-offset: 4px;
    box-shadow: 0 0 0 3px #fff;
}
:where(h1, h2, h3, p, a) { overflow-wrap: break-word; }
:where(h1, h2, h3) { text-wrap: balance; }
.wp-site-blocks > * { margin-block-start: 0; }
.site-main { max-width: 1200px; margin-inline: auto; padding-block: 3.5rem 5rem; }
.site-header, .site-footer {
    margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1.25rem)) calc(-1 * var(--wp--style--root--padding-right, 1.25rem));
    padding-inline: var(--wp--style--root--padding-left, 1.25rem) var(--wp--style--root--padding-right, 1.25rem);
}
.site-header { background: #fff; border-bottom: 1px solid #c9d8d5; }
.header-inner {
    max-width: 1200px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .65rem 2rem;
    align-items: center;
    padding-block: 1rem .65rem;
}
.header-inner > * { margin: 0; }
.brand { display: inline-flex; width: fit-content; max-width: 100%; min-width: 0; min-height: 48px; align-items: center; border-radius: 4px; }
.brand svg { width: 225px; height: 48px; display: block; max-width: 100%; }
.header-inner > .wp-block-navigation { grid-column: 1 / -1; grid-row: 2; }
.wp-block-navigation .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; padding-block: .35rem; }
.wp-block-navigation .wp-block-navigation__container { gap: .3rem 1.8rem; }
.wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: .3em; }
.wp-block-navigation .current-menu-item > a { text-decoration: underline; text-decoration-thickness: 2px; }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.header-search { grid-column: 2; grid-row: 1; width: auto; max-width: 100%; }
.wp-block-search__inside-wrapper { border-radius: 12px; border-color: #c9d8d5; }
.wp-block-search__input { min-width: 0; min-height: 44px; border: 1px solid #c9d8d5; border-radius: 8px; padding: .65rem .85rem; font: inherit; color: #18343b; background: #fff; }
.wp-block-search__button { min-height: 44px; min-width: 44px; border-radius: 10px; background: #075665; color: #fff; border: 0; cursor: pointer; }
.wp-block-search__label { display: block; font-weight: 650; margin-bottom: .5rem; }
.wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.wp-block-button__link:hover { background: #ffd1a3; color: #18343b; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 2px solid #075665; color: #075665; padding: calc(.85rem - 2px) calc(1.25rem - 2px); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: #d7eae4; }
.wp-block-buttons { gap: .75rem; }
.eyebrow { margin-top: 0; color: #075665; font-size: .875rem; font-weight: 750; letter-spacing: .055em; }
.hero { display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; gap: 2rem; padding: clamp(1.5rem, 4vw, 3.5rem); background: #eaf4f1; border-radius: 28px; }
.hero > * { margin: 0; min-width: 0; }
.hero-title { font-size: var(--wp--preset--font-size--hero); max-width: 12ch; margin-block: 1rem 1.5rem; }
.hero-intro { max-width: 49ch; margin-bottom: 1.75rem; }
.choice-art svg { width: 100%; height: auto; display: block; }
.section-space { margin-block-start: clamp(3rem, 6vw, 5rem); }
.section-space > h2 { margin-block: .6rem 2rem; }
.category-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.category-card { grid-column: span 2; position: relative; padding: 1.6rem; border: 1px solid #c9d8d5; border-radius: 18px; background: #fff; margin: 0; }
.category-card:nth-child(n+4) { grid-column: span 3; }
.category-card h3 { margin-block: .9rem .6rem; font-size: 1.35rem; }
.category-card h3 a { text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; }
.category-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: 18px; }
.category-card h3 a:focus-visible { outline: none; box-shadow: none; }
.category-card:focus-within { outline: 3px solid #075665; outline-offset: 4px; }
.category-card:hover { border-color: #075665; background: #f3f8f5; }
.category-card p { font-size: 1rem; margin-block: 0; line-height: 1.6; }
.category-card .tile-number { color: #075665; font-size: .875rem; font-weight: 750; background: #eaf4f1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; }
.guides-query { margin-top: 2rem; }
.guides-query .wp-block-post-template { gap: 1.25rem; }
.guides-query .wp-block-post { margin: 0; min-width: 0; }
.article-card { height: 100%; border: 1px solid #c9d8d5; border-radius: 18px; padding: 1.5rem; background: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.article-card > * { margin: 0; }
.article-card .wp-block-post-title { font-size: 1.4rem; line-height: 1.3; }
.article-card .wp-block-post-title a { text-decoration: none; display: inline-block; min-height: 44px; }
.article-card .wp-block-post-title a:hover { text-decoration: underline; }
.article-card .wp-block-post-excerpt { margin-bottom: .4rem; }
.article-card .wp-block-post-excerpt__excerpt { margin: 0; }
.article-card .wp-block-post-date { margin-top: auto; }
.wp-block-post-terms a { display: inline-block; min-height: 44px; padding-block: .5rem; }
.article-card .wp-block-post-terms { font-size: .8125rem; line-height: 1.5; }
.empty-state { padding: 1.5rem; background: #eaf4f1; border-radius: 14px; }
.trust-strip { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; background: #eaf4f1; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 24px; align-items: center; }
.trust-strip > * { margin: 0; }
.trust-copy h2 { margin-block: .75rem 1rem; }
.trust-copy p:last-child { margin-bottom: 0; }
.trust-points p { font-size: 1rem; font-weight: 650; padding-block: .8rem; margin: 0; border-bottom: 1px solid #c9d8d5; }
.trust-points p:last-child { border: 0; }
.archive-heading { margin: 0 0 3rem; max-width: 800px; }
.archive-heading h1 { margin-block: .5rem 1.5rem; }
.archive-heading .wp-block-term-description { color: #4d6368; }
.wp-block-query-pagination { gap: .5rem; margin-top: 2rem; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .4rem .75rem; border-radius: 8px; }
.wp-block-query-pagination .current { background: #075665; color: #fff; }
.article-header { padding-block: .5rem 1.75rem; }
.article-header h1 { margin-block: .75rem 1.5rem; }
.article-meta { gap: .25rem .45rem; color: #4d6368; font-size: .9375rem; line-height: 1.6; }
.article-meta > * { margin: 0; }
.article-meta .meta-author { flex-basis: 100%; }
.article-image { margin-block: 0 2.5rem; }
.article-image img { width: 100%; height: auto; border-radius: 18px; }
.page-main { max-width: 720px; margin-inline: auto; }
.article-shell { max-width: 1200px; margin-inline: auto; }
.article-content { font-size: 1.125rem; line-height: 1.7; }
.article-content h2 { margin-block-start: 2.75rem; margin-block-end: 1rem; }
.article-content h3 { margin-block-start: 2rem; margin-block-end: .8rem; line-height: 1.35; }
.article-content :where(ul, ol) { padding-inline-start: 1.5rem; }
.article-content li + li { margin-top: .5rem; }
.article-content li::marker { color: #075665; }
.article-content :where(img, video, iframe) { max-width: 100%; }
.article-content pre { overflow-x: auto; padding: 1rem; background: #eaf4f1; border-radius: 10px; }
.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: 0; }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table :where(th, td) { border: 1px solid #c9d8d5; padding: .85rem 1rem; text-align: left; min-width: 8rem; vertical-align: top; }
.wp-block-table thead { background: #075665; color: #fff; border: 0; }
.wp-block-table tbody tr:nth-child(even) { background: #eaf4f1; }
.wp-block-table figcaption { text-align: left; font-size: .9375rem; color: #4d6368; margin-top: .75rem; }
.wp-block-quote { margin-inline: 0; border-radius: 0 14px 14px 0; }
.wp-block-quote p:first-child { margin-top: 0; }
.wp-block-quote cite { font-size: .9375rem; }
.wp-block-details { border: 1px solid #c9d8d5; border-radius: 12px; padding: .75rem 1rem; background: #fff; }
.wp-block-details summary { min-height: 44px; padding-block: .5rem; cursor: pointer; font-weight: 650; }
.related-section { border-top: 1px solid #c9d8d5; padding-top: 2.5rem; margin-top: 4rem; }
.not-found { padding-block: 1rem; }
.not-found .wp-block-search { margin-block: 2rem; }
.site-footer { background: #eaf4f1; border-top: 1px solid #c9d8d5; padding-block: 3.5rem 1.5rem; }
.footer-inner { max-width: 1200px; margin-inline: auto; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
.footer-grid > * { margin: 0; }
.footer-grid h2 { font-size: 1.125rem; margin-top: 0; margin-bottom: .8rem; }
.footer-grid p { font-size: 1rem; }
.footer-about p { max-width: 35ch; color: #4d6368; }
.footer-links p { margin: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.copyright { max-width: none !important; border-top: 1px solid #c9d8d5; padding-top: 1.25rem; margin-top: 2.5rem; color: #4d6368; font-size: .875rem; }
@media (max-width: 900px) {
    .header-inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; padding-block: .75rem; }
    .header-inner > .wp-block-navigation { grid-column: 2; grid-row: 1; }
    .header-search { grid-column: 3; }
    .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
    .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
    .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: .5rem; width: 100%; }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.125rem; }
    .header-search.wp-block-search__searchfield-hidden { width: 48px; }
    .header-search:not(.wp-block-search__searchfield-hidden) { position: absolute; right: 1.25rem; left: 1.25rem; top: 5rem; z-index: 5; background: #fff; padding: .5rem; border: 1px solid #c9d8d5; border-radius: 12px; }
    .hero { grid-template-columns: 1.6fr 1fr; gap: .75rem; }
    .hero-title { font-size: clamp(2.75rem, 6vw, 4rem); }
    .guides-query .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .category-card { grid-column: span 3; }
    .category-card:last-child { grid-column: 1 / -1; }
    .trust-strip { gap: 1.5rem; }
    .footer-grid { gap: 1.5rem; }
}
@media (max-width: 600px) {
    .brand svg { width: 177px; height: 44px; }
    .site-main { padding-block: 1.5rem 3.5rem; }
    .hero { grid-template-columns: 1fr; border-radius: 20px; }
    .hero-title { max-width: 13ch; }
    .hero .choice-art { display: none; }
    .hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
    .hero .wp-block-button, .hero .wp-block-button__link { width: 100%; }
    .category-grid { grid-template-columns: 1fr; }
    .category-card, .category-card:nth-child(n+4) { grid-column: auto; }
    .category-card { padding: 1.25rem; }
    .guides-query .wp-block-post-template { grid-template-columns: 1fr; }
    .trust-strip, .footer-grid { grid-template-columns: 1fr; }
    .trust-strip { gap: 1rem; }
    .article-header h1 { font-size: 2.25rem; }
    .article-meta { font-size: .875rem; }
    .article-meta .wp-block-post-date { font-size: .875rem; }
    .site-footer { padding-block: 2.5rem 1.25rem; }
    .footer-grid { gap: 2rem; }
    .wp-block-search__button { margin-left: .5rem; padding-inline: .75rem; }
    .header-search .wp-block-search__button { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Article tables: natural column widths, no mid-word breaks, scroll sideways on small screens. */
.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wp-block-table table { table-layout: auto; width: 100%; min-width: 560px; }
.wp-block-table.alignwide table { min-width: 760px; }
.wp-block-table td, .wp-block-table th { word-break: normal; overflow-wrap: normal; hyphens: manual; vertical-align: top; }

/* Side gutter for homepage/archive sections on screens narrower than the wide track. */
@media (max-width: 1240px) {
	.site-main:not(.single-main) { padding-inline: 16px; box-sizing: border-box; }
}

/* Header and footer: same 16px side gutter as the content on screens narrower than the wide track. */
@media (max-width: 1240px) {
	.header-inner, .footer-inner { padding-inline: 16px; box-sizing: border-box; }
}

/* Category cards: number badge to the left of the title, description below both (saves a row of height). */
.category-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: .85rem; align-items: center; }
.category-card .tile-number { grid-column: 1; grid-row: 1; margin: 0; }
.category-card h3 { grid-column: 2; grid-row: 1; margin: 0; }
.category-card > p:not(.tile-number) { grid-column: 1 / -1; margin-top: .6rem; }