/*
Theme Name: Evert van Hemert
Theme URI: https://www.evertvanhemert.nl/
Author: Albert Jan
Description: Blokthema voor kunstenaar Evert van Hemert. Galeriewand, brons en patina. Eigen berichttypes voor beelden en schilderijen met afmetingen, oplage en detailweergave.
Version: 1.2.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: evh
*/

/* Donkere modus: volgt het systeem en herdefinieert alleen de kleurtokens */
@media (prefers-color-scheme: dark) {
	:root:root {
		--wp--preset--color--wall: #141516;
		--wp--preset--color--paper: #1c1d1f;
		--wp--preset--color--ink: #ecebe7;
		--wp--preset--color--muted: #a19f99;
		--wp--preset--color--line: #2d2e30;
		--wp--preset--color--bronze: #d39a5e;
		--wp--preset--color--patina: #7fbfae;
		--wp--preset--color--patina-soft: #1f2d2a;
		color-scheme: dark;
	}
}

:root {
	--evh-shade: rgba(20, 20, 20, .93);
	--evh-mono: var(--wp--preset--font-family--mono);
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { text-wrap: balance; }
:where(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--wp--preset--color--patina); outline-offset: 3px; }

/* ---------- Kop ---------- */
.evh-header {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid var(--wp--preset--color--line);
	isolation: isolate;
}
/* Blur op een achtergrondlaag: backdrop-filter op de kop zelf zou het (fixed) mobiele menu
   opsluiten binnen de hoogte van de kop. */
.evh-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--wall) 92%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.admin-bar .evh-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .evh-header { top: 0; } }
.evh-brand, .evh-brand a { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1; text-decoration: none; color: var(--wp--preset--color--ink); white-space: nowrap; }
.evh-brand em { color: var(--wp--preset--color--bronze); }
.evh-header .wp-block-navigation a { color: var(--wp--preset--color--muted); text-decoration: none; border-bottom: 1px solid transparent; padding-block: 4px; transition: color .2s, border-color .2s; }
.evh-header .wp-block-navigation a:hover { color: var(--wp--preset--color--ink); }
.evh-header .wp-block-navigation .current-menu-item > a,
.evh-header .wp-block-navigation a[aria-current="page"] { color: var(--wp--preset--color--ink); border-bottom-color: var(--wp--preset--color--bronze); }
.evh-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--wall); color: var(--wp--preset--color--ink); padding: calc(env(safe-area-inset-top, 0px) + 20px) var(--wp--custom--gutter) 32px; z-index: 100000; }
.admin-bar .evh-header .wp-block-navigation__responsive-container.is-menu-open { top: var(--wp-admin--admin-bar--height, 46px); }
.evh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 2.5rem; align-items: flex-start; }
.evh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; align-items: stretch; width: 100%; }
.evh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--wp--preset--color--line); }
.evh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; padding-block: 12px; font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; color: var(--wp--preset--color--ink); border: 0; }
.evh-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
.evh-header .wp-block-navigation__responsive-container.is-menu-open a[aria-current="page"] { color: var(--wp--preset--color--bronze); }
.evh-header .wp-block-navigation__responsive-container-open,
.evh-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--ink); }

/* ---------- Typografische hulpstukken ---------- */
.is-style-eyebrow, .evh-eyebrow {
	font-family: var(--evh-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	line-height: 1.3;
}
.is-style-lede { font-size: 1.15rem; max-width: 58ch; }
.is-style-life { font-family: var(--evh-mono); font-size: .95rem; color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
.evh-brons { color: var(--wp--preset--color--bronze); }
.wp-block-heading em { color: var(--wp--preset--color--bronze); font-style: italic; }

/* Kaartjes op de homepage */
.evh-notice { gap: 1px !important; background: var(--wp--preset--color--line); border: 1px solid var(--wp--preset--color--line); }
.evh-notice > .wp-block-column { background: var(--wp--preset--color--paper); padding: 22px 24px; margin: 0 !important; }
.evh-notice h3 { font-size: 1.45rem; margin-block: 6px; }

/* Mozaïek op de homepage */
.evh-mosaic { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 1 / 1.05; max-width: 100%; }
.evh-mosaic > * { margin: 0 !important; min-width: 0; overflow: hidden; background: var(--wp--preset--color--patina-soft); }
.evh-mosaic > *:first-child { grid-row: 1 / 3; }
.evh-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 781px) { .evh-mosaic { aspect-ratio: 1; } }

/* Genummerde lijst (Famkes, werk in stock) */
ol.is-style-stops, ul.is-style-stops { list-style: none; padding: 0; display: grid; gap: 18px; counter-reset: stop; }
/* Nummer absoluut links; de tekst (strong + losse tekst) blijft één doorlopend blok */
ol.is-style-stops li { position: relative; padding-left: 2.6rem; counter-increment: stop; }
ol.is-style-stops li::before { content: counter(stop, decimal-leading-zero); position: absolute; left: 0; top: .3em; font-family: var(--evh-mono); font-size: .8rem; line-height: 1; color: var(--wp--preset--color--bronze); font-variant-numeric: tabular-nums; }
ul.is-style-stops li { padding-left: 1.2rem; position: relative; }
ul.is-style-stops li::before { content: "—"; position: absolute; left: 0; color: var(--wp--preset--color--bronze); }

/* Gewone lijsten in de tekst: bronzen nummers en bullets */
.entry-content :where(ul, ol):not([class*="is-style-"]),
.wp-block-post-content :where(ul, ol):not([class*="is-style-"]) { padding-left: 1.4em; }
.wp-block-post-content :where(ol, ul):not([class*="is-style-"]) li { padding-left: .25em; margin-block: .35em; }
.wp-block-post-content :where(ol, ul):not([class*="is-style-"]) li::marker { color: var(--wp--preset--color--bronze); font-family: var(--evh-mono); font-size: .85em; }

/* Lijststijl Bullets: ronde bronzen stip */
ul.is-style-bullets, ol.is-style-bullets { list-style: none; padding: 0; display: grid; gap: 12px; }
.is-style-bullets li { position: relative; padding-left: 1.5rem; }
.is-style-bullets li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--wp--preset--color--bronze); }

/* Kolommenlijst met plaatsen */
ul.is-style-columns { columns: 4 170px; column-gap: 28px; list-style: none; padding: 0; color: var(--wp--preset--color--muted); font-size: .95rem; }
ul.is-style-columns li { break-inside: avoid; padding: 2px 0; }

/* Tabel */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-collapse: collapse; min-width: 560px; }
.wp-block-table th, .wp-block-table td { border: 0; border-bottom: 1px solid var(--wp--preset--color--line); padding: 12px 16px; text-align: left; vertical-align: top; }
.wp-block-table th { font-family: var(--evh-mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.wp-block-table td:first-child { font-family: var(--evh-mono); font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wp-block-table thead { border-bottom: 0; }

/* Links met pijl */
.is-style-arrow a, a.evh-linkout { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- Galerij ---------- */
.evh-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.evh-count { font-family: var(--evh-mono); font-size: .8rem; color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
.evh-search { border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: .95rem; width: min(260px, 100%); }
.evh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(14px, 2vw, 26px); }
@media (max-width: 520px) { .evh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.evh-work { display: grid; gap: 10px; min-width: 0; text-decoration: none; color: var(--wp--preset--color--ink); }
.evh-work[hidden] { display: none !important; }
.evh-work .evh-ph { aspect-ratio: 4 / 5; }
.evh-work:hover img { transform: scale(1.04); }
.evh-work:hover { color: var(--wp--preset--color--ink); }
.evh-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.evh-cap .t { font-family: var(--wp--preset--font-family--display); font-size: 1.2rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evh-cap .d { font-family: var(--evh-mono); font-size: .72rem; color: var(--wp--preset--color--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.evh-ph { position: relative; overflow: hidden; background: var(--wp--preset--color--patina-soft); display: grid; place-items: center; }
.evh-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.evh-ph .fb { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 1.25rem; color: var(--wp--preset--color--patina); padding: 12px; text-align: center; }
.evh-empty { color: var(--wp--preset--color--muted); }

/* ---------- Detailweergave (lightbox) ---------- */
.evh-lb { position: fixed; inset: 0; z-index: 100000; background: var(--evh-shade); color: #f2f0ea; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 28px; padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px); }
.evh-lb[hidden] { display: none !important; }
.evh-lb .stage { display: grid; place-items: center; min-width: 0; min-height: 0; }
.evh-lb .stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.evh-lb aside { align-self: center; display: grid; gap: 18px; min-width: 0; }
.evh-lb h2 { color: #fff; margin: 0; }
.evh-lb .kind { font-family: var(--evh-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #c9c6bd; }
.evh-spec { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 16px; }
.evh-spec dt { font-family: var(--evh-mono); font-size: .72rem; line-height: 1.9; letter-spacing: .1em; text-transform: uppercase; color: #aaa69c; }
.evh-spec dd { margin: 0; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.evh-spec dd.na { color: #8f8b82; font-style: italic; }
.evh-spec dd p { margin: 0 0 .6em; }
.evh-lb .ctl { display: flex; gap: 8px; flex-wrap: wrap; }
.evh-lb button, .evh-lb .more { background: transparent; color: #f2f0ea; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 9px 16px; font: 500 .85rem var(--wp--preset--font-family--body); cursor: pointer; text-decoration: none; }
.evh-lb button:hover, .evh-lb .more:hover { border-color: #fff; color: #fff; }
.evh-lb .close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px; z-index: 2; }
.evh-lb .pos { font-family: var(--evh-mono); font-size: .78rem; color: #aaa69c; font-variant-numeric: tabular-nums; }
.admin-bar .evh-lb { padding-top: calc(var(--wp-admin--admin-bar--height, 32px) + 20px); }
@media (max-width: 820px) {
	.evh-lb { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; overflow: auto; }
	.evh-lb aside { align-self: start; }
}
body.evh-lb-open { overflow: hidden; }

/* Losse werkpagina (single) */
.evh-single { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.evh-single .evh-spec { border-top-color: var(--wp--preset--color--line); }
.evh-single .evh-spec dt { color: var(--wp--preset--color--muted); }
.evh-single .evh-spec dd.na { color: var(--wp--preset--color--muted); }
.evh-single-img { background: var(--wp--preset--color--patina-soft); }
.evh-single-img img { width: 100%; height: auto; display: block; }
@media (max-width: 781px) { .evh-single { grid-template-columns: 1fr; } }

/* ---------- Formulieren ---------- */
.evh-form { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; max-width: 640px; }
.evh-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.evh-form label { display: grid; gap: 6px; font-size: .85rem; color: var(--wp--preset--color--muted); }
.evh-form input, .evh-form textarea, .evh-form select { font: inherit; font-size: 1rem; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--wall); border: 1px solid var(--wp--preset--color--line); border-radius: 4px; padding: 10px 12px; width: 100%; }
.evh-form textarea { min-height: 130px; resize: vertical; }
.evh-form .qty { display: grid; grid-template-columns: 1fr 84px; gap: 12px; align-items: center; font-size: .95rem; color: var(--wp--preset--color--ink); }
.evh-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.evh-form button { justify-self: start; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--wall); border: 0; border-radius: 999px; padding: 12px 22px; font: inherit; font-weight: 600; cursor: pointer; }
.evh-form button:hover { background: var(--wp--preset--color--patina); }
.evh-msg { padding: 12px 16px; border-left: 3px solid var(--wp--preset--color--patina); background: var(--wp--preset--color--patina-soft); max-width: 640px; }
.evh-msg.is-error { border-left-color: var(--wp--preset--color--bronze); }
.evh-total { font-family: var(--evh-mono); font-size: .85rem; color: var(--wp--preset--color--muted); }

/* Boekenraster */
.evh-books .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--wp--preset--color--patina-soft); }
.evh-price { font-family: var(--evh-mono); font-size: .85rem; color: var(--wp--preset--color--bronze); }

/* Voet */
.evh-footer { border-top: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--muted); font-size: .88rem; }
.evh-footer a { color: var(--wp--preset--color--muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Mobiel menu links uitlijnen (desktopmenu staat rechts) */
.evh-header .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container, .wp-block-navigation-item) { align-items: flex-start !important; justify-content: flex-start !important; text-align: left; }