/* JJH Site — huisstijl
   Kleuren lopen via het Kadence Global Palette (Customizer > Kleuren),
   met de eigen waarden als terugval. Pas het palet aan in Kadence,
   dan verandert de hele site mee. */

:root {
	--jjh-groen: var(--global-palette1, #2F5D50);
	--jjh-donker: var(--global-palette2, #1F3A33);
	--jjh-inkt: var(--global-palette3, #22211F);
	--jjh-tekst: var(--global-palette5, #45494A);
	--jjh-label: var(--global-palette6, #5C605B);
	--jjh-lijn: var(--global-palette7, #DDDAD0);
	--jjh-alt: var(--global-palette8, #EDEEE6);
	--jjh-grond: var(--global-palette9, #FBFAF7);
	--jjh-oker: #C8892B;
	--jjh-oker-licht: #E3B36A;
	--jjh-licht-op-donker: #D3DAD5;
	--jjh-serif: "Newsreader", Georgia, serif;
	--jjh-sans: "Inter Tight", system-ui, sans-serif;
}

/* Banden */
.jjh-band { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); padding-left: 24px; padding-right: 24px; }
.jjh-band-kort { padding-top: 0; }
.jjh-alt { background: var(--jjh-alt); }
.jjh-dark, .jjh-groen { color: var(--jjh-grond); }
.jjh-dark { background: var(--jjh-donker); }
.jjh-groen { background: var(--jjh-groen); }
.jjh-dark p, .jjh-dark li, .jjh-groen p { color: var(--jjh-licht-op-donker); }
.jjh-dark h1, .jjh-dark h2, .jjh-dark h3, .jjh-dark a,
.jjh-groen h2, .jjh-groen a { color: var(--jjh-grond); }
.jjh-dark .jjh-eyebrow { color: var(--jjh-oker-licht); }

/* Typografie */
.jjh-display, .jjh-h2, .jjh-h3, .jjh-band h3, .jjh-card h3,
.jjh-nummer, .jjh-citaat, .jjh-ondertitel { font-family: var(--jjh-serif); font-weight: 400; }
.jjh-display { font-size: clamp(40px, 5.5vw, 64px); line-height: 1.05; letter-spacing: -0.01em; margin: 0.2em 0 0.4em; }
.jjh-h2, .jjh-h2 a { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; text-decoration: none; }
.jjh-h3 { font-size: clamp(28px, 3vw, 38px); line-height: 1.15; margin-top: 1.2em; }
.jjh-band h3, .jjh-card h3 { font-size: 26px; line-height: 1.2; }
.jjh-eyebrow { font-family: var(--jjh-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jjh-label); margin-bottom: 0.6em; }
.jjh-lead { font-size: 20px; color: var(--jjh-tekst); max-width: 36em; }
.jjh-meta, .jjh-meta a { font-size: 15px; color: var(--jjh-label); }
.jjh-dark .jjh-meta, .jjh-dark .jjh-meta a, .jjh-groen .jjh-meta { color: var(--jjh-licht-op-donker); }
.jjh-ondertitel { font-style: italic; font-size: 22px; color: var(--jjh-tekst); }
.jjh-citaat { font-size: 24px; line-height: 1.35; color: var(--jjh-inkt); }
.jjh-nummer { font-size: 32px; margin: 0.3em 0; }
.jjh-nummer a { text-decoration: none; }
.jjh-mail { font-size: 20px; font-weight: 500; }

/* Kolommen */
.jjh-cols { gap: clamp(32px, 5vw, 64px); align-items: center; }

/* Beelden */
.jjh-portret img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: 4px; background: #E6E3D8; }
.jjh-omslag img { aspect-ratio: 2 / 3; object-fit: cover; max-width: 360px; width: 100%; margin: 0 auto; display: block; background: #E6E3D8; box-shadow: 0 20px 40px rgba(34, 33, 31, 0.12); }

/* Kaarten en kaders */
.jjh-card { background: var(--jjh-grond); border-radius: 4px; padding: 28px; height: 100%; }
.jjh-alt .jjh-card { background: var(--jjh-grond); }
.jjh-band:not(.jjh-alt) .jjh-card { background: var(--jjh-alt); }
.jjh-card h3 a { color: var(--jjh-inkt); text-decoration: none; }
.jjh-card-groot { padding: 36px; }
.jjh-kader { border: 1px solid #45494A; border-radius: 4px; padding: 32px; }
.jjh-kader-vol { border-radius: 4px; padding: clamp(28px, 4vw, 48px); margin: 2em 0; }
.jjh-wijziging { border-top: 1px solid var(--jjh-lijn); border-bottom: 1px solid var(--jjh-lijn); padding: 20px 0; margin: 1.5em 0 2em; }

/* Lijsten */
.jjh-lijst { list-style: none; padding: 0; margin: 0; }
.jjh-lijst li { border-top: 1px solid var(--jjh-lijn); padding: 20px 0; color: var(--jjh-tekst); }
.jjh-lijst li:last-child { border-bottom: 1px solid var(--jjh-lijn); }
.jjh-lijst li strong { font-family: var(--jjh-serif); font-weight: 400; font-size: 24px; color: var(--jjh-inkt); }

/* Serielijst (tag cloud) als nette lijst */
.jjh-serielijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 32px; }
.jjh-serielijst a { display: flex; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--jjh-lijn); color: var(--jjh-inkt); text-decoration: none; margin: 0 !important; }
.jjh-serielijst a:hover { color: var(--jjh-groen); }
.jjh-serielijst .tag-link-count { color: var(--jjh-label); }

/* Afleveringen */
.jjh-afl-query .wp-block-post-title { font-size: 22px; line-height: 1.3; margin: 0.3em 0; }
.jjh-afl-query .wp-block-post-title a, .jjh-afl-lijst .wp-block-post-title a { color: var(--jjh-inkt); text-decoration: none; }
.jjh-rij { border-top: 1px solid var(--jjh-lijn); padding: 20px 0; }
.jjh-rij .wp-block-post-title { font-family: var(--jjh-serif); font-weight: 400; font-size: 22px; margin: 4px 0 0; }
.jjh-rij-meta { gap: 4px 16px; }
.jjh-paginering { margin-top: 32px; gap: 8px; }
.jjh-paginering a, .jjh-paginering .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid #B8B9AE; border-radius: 4px; color: var(--jjh-inkt); text-decoration: none; }
.jjh-paginering .current { background: var(--jjh-inkt); color: var(--jjh-grond); border-color: var(--jjh-inkt); }

/* Knoppen */
.jjh-band .wp-block-button__link, .jjh-kader-vol .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: 4px; font-weight: 500; }
.jjh-btn-ink .wp-block-button__link { background: var(--jjh-inkt); color: var(--jjh-grond); }
.jjh-btn-oker .wp-block-button__link { background: var(--jjh-oker); color: var(--jjh-inkt); font-weight: 600; }
.jjh-btn-licht .wp-block-button__link { background: var(--jjh-grond); color: var(--jjh-inkt); font-weight: 600; }
.jjh-band .is-style-outline .wp-block-button__link { background: transparent; border: 1px solid currentColor; color: var(--jjh-inkt); }
.jjh-dark .is-style-outline .wp-block-button__link, .jjh-groen .is-style-outline .wp-block-button__link { color: var(--jjh-grond); }

/* Essay-leeskolom: gebruik in berichten uit de categorie Essays */
.category-essays .entry-content { font-family: var(--jjh-serif); font-size: 21px; line-height: 1.7; }
.category-essays .entry-content h2 { font-family: var(--jjh-sans); font-weight: 600; font-size: 22px; }
.category-essays .entry-content blockquote { border-left: 3px solid var(--jjh-oker); padding-left: 28px; font-style: italic; font-size: 26px; line-height: 1.4; }
.category-essays .jjh-essay-kop, .category-essays .jjh-versies, .category-essays .jjh-kader-vol { font-family: var(--jjh-sans); font-size: 17px; }

/* Nu nieuw: laatste podcast, artikel en publicatie */
.jjh-nieuw-item { border-top: 1px solid rgba(211, 218, 213, 0.3); padding: 18px 0; }
.jjh-nieuw-item:last-child { border-bottom: 1px solid rgba(211, 218, 213, 0.3); }
.jjh-nieuw-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 4px; color: var(--jjh-label); }
.jjh-dark .jjh-nieuw-label { color: var(--jjh-oker-licht); }
.jjh-nieuw .wp-block-post-title { font-family: var(--jjh-serif); font-weight: 400; font-size: 24px; line-height: 1.25; margin: 0 0 4px; }
.jjh-nieuw .wp-block-post-title a { text-decoration: none; }
.jjh-nieuw .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.jjh-nieuw .jjh-rij-meta { gap: 4px 12px; }

/* Nu nieuw: groene band met drie kolommen */
.jjh-drie { gap: clamp(24px, 4vw, 48px); align-items: stretch !important; margin-top: 8px; }
.jjh-nieuw-kol { border-top: 1px solid rgba(211, 218, 213, 0.3); padding-top: 20px; }
.jjh-nieuw-kol .jjh-nieuw-label { color: var(--jjh-oker-licht); }
.jjh-nieuw-kol .wp-block-post-title { font-family: var(--jjh-serif); font-weight: 400; font-size: 26px; line-height: 1.2; margin: 4px 0 8px; }
.jjh-nieuw-kol .wp-block-post-title a { text-decoration: none; }
.jjh-nieuw-kol .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.jjh-nieuw-kol .jjh-rij-meta { gap: 4px 12px; }
.jjh-nieuw-kol .wp-block-post-excerpt { margin-top: 12px; font-size: 16px; }
.jjh-nieuw-kol .wp-block-post-excerpt__more-link { display: inline-block; margin-top: 8px; font-weight: 500; }

/* Groene band met drie kolommen: compacter */
.jjh-nieuw-band.jjh-band { padding-top: clamp(36px, 4vw, 48px); padding-bottom: clamp(40px, 4.5vw, 56px); }
.jjh-nieuw-band > *:first-child { margin-top: 0; }
.jjh-nieuw-band > *:last-child { margin-bottom: 0; }
.jjh-nieuw-band .wp-block-post-excerpt__excerpt { margin-bottom: 0; }