/*
Theme Name: Wijkkrant
Theme URI: https://ineendag.com/
Description: Blokthema voor online wijkkranten. Werkt samen met de plugin Wijkkrant Core, die het datamodel, het publicatieslot en de beeldafhandeling levert. Kleuren, typografie en logo zijn per klant aan te passen in theme.json en de Site-editor.
Version: 0.2.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
Text Domain: wijkkrant-thema
Tags: full-site-editing, blog, news, block-patterns
*/

/* =============================================================================
   0. PAGINARASTER
   De site gebruikt de volle breedte van het scherm. De kop, de rubriekbalk en
   de voet lopen van rand tot rand; de inhoud eronder staat in twee kolommen.

   De verhouding (standaard 73% / 27%) en het omslagpunt staan in theme.json
   onder settings.custom.kolom en worden door functions.php als losse regel
   toegevoegd — een mediaquery kan geen CSS-variabele als grenswaarde gebruiken.
   ========================================================================== */

.wk-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wk-tussenruimte, 2rem );
	margin-inline: auto;
	width: 100%;
}

/* Onder het omslagpunt staat de zijbalk onder de inhoud; dat is de
   standaardtoestand hierboven, dus mobiel en tablet staand vragen geen extra
   regels. De tweede kolom verschijnt pas in de mediaquery uit functions.php. */

.wk-layout__inhoud {
	min-width: 0; /* voorkomt dat brede tabellen of code de kolom oprekken */
}

.wk-layout__zijbalk {
	min-width: 0;
	align-self: start;
	max-height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Optionele beteugeling op zeer brede schermen: zet paginabreedte in
   theme.json op bijvoorbeeld "120rem". Standaard staat hij op "none". */
.wk-buitenrand {
	margin-inline: auto;
	width: 100%;
}

/* =============================================================================
   1. KOP VAN DE KRANT
   Het groene vlak met logo, wordmark en de twee navigatielagen.
   Het wordmark is bewust tekst met een webfont en geen afbeelding, zodat hij
   meeschaalt en niet meer buiten beeld loopt zoals in de builder-versie.
   Wil je het originele getekende wordmark: zet het als SVG in de site-logo-slot
   met width:100% en een viewBox, nooit als PNG met vaste breedte.
   ========================================================================== */

.wk-masthead {
	position: relative;
	overflow: hidden;
}

/* Lijntekening van de Eusebiustoren rechtsonder, net als nu. Vervang de URL
   door het eigen bestand van de klant, of haal deze regel weg. */
.wk-masthead::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: min( 28vw, 320px );
	height: 100%;
	background: url( "assets/afbeeldingen/toren.svg" ) right bottom / contain no-repeat;
	opacity: 0.55;
	pointer-events: none;
}

.wk-masthead__bovenregel {
	margin: 0 0 -0.15em 0.25em;
	font-family: var( --wp--preset--font-family--ui );
	font-size: var( --wp--preset--font-size--groot );
	font-weight: 700;
	color: var( --wp--preset--color--inkt );
}

/* Het wordmark: "Binnenstads" wit, "krant" zwart cursief — zelfde gebaar als nu. */
.wk-masthead .wp-block-site-title a {
	color: var( --wp--preset--color--wit );
	text-decoration: none;
	word-break: keep-all;
}

.wk-masthead .wp-block-site-title {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   2. RUBRIEKNAVIGATIE
   Tweede navigatielaag onder de kop. Gevuld met het core-blok Categorieën, dus
   nieuwe rubrieken verschijnen vanzelf en er is niets handmatig bij te houden.
   -------------------------------------------------------------------------- */

.wk-rubrieknav {
	border-block: 1px solid var( --wp--preset--color--lijn );
	background: var( --wp--preset--color--wit );
}

.wk-rubrieknav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 clamp( 0.75rem, 2.5vw, 2rem );
	margin: 0;
	padding: 0.6rem 0;
	list-style: none;
}

.wk-rubrieknav li {
	margin: 0;
}

.wk-rubrieknav a {
	font-family: var( --wp--preset--font-family--ui );
	font-size: var( --wp--preset--font-size--klein );
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: lowercase;
	text-decoration: none;
	color: var( --wp--preset--color--inkt );
	padding: 0.35rem 0;
	display: inline-block;
	border-bottom: 2px solid transparent;
}

.wk-rubrieknav a:hover,
.wk-rubrieknav .current-cat > a {
	border-bottom-color: var( --wp--preset--color--krant-groen );
}

/* -----------------------------------------------------------------------------
   3. RUBRIEKSTROOK
   Een sectie op de voorpagina: rubriekkop met een lijn erdoor, daaronder de
   artikelen. De kop-met-lijn is wat het meest "krant" leest van alles.
   -------------------------------------------------------------------------- */

.wk-rubriekkop {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: var( --wp--preset--spacing--30 );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--kop );
	font-weight: 700;
	text-transform: lowercase;
}

.wk-rubriekkop::after {
	content: "";
	flex: 1;
	height: 3px;
	background: var( --wp--preset--color--krant-groen );
}

.wk-rubriekkop a {
	color: inherit;
	text-decoration: none;
}

/* Artikelkaarten: witte kaart, beeld boven, cursieve kop — zoals de huidige site,
   maar dan opgebouwd uit de Query Loop in plaats van met de hand ingevuld. */
.wk-kaart,
.wk-strook .wp-block-post {
	background: var( --wp--preset--color--wit );
	border: 1px solid var( --wp--preset--color--lijn );
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.wk-strook .wp-block-post > * {
	margin-inline: var( --wp--preset--spacing--30 );
}

.wk-strook .wp-block-post > .wp-block-post-featured-image {
	margin-inline: 0;
}

.wk-strook .wp-block-post-title {
	font-style: italic;
	font-size: var( --wp--preset--font-size--groot );
	line-height: 1.25;
	text-wrap: balance;
}

.wk-strook .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wk-strook .wp-block-post-title a:hover {
	text-decoration: underline;
}

.wk-strook .wp-block-post-excerpt {
	font-size: var( --wp--preset--font-size--klein );
	color: var( --wp--preset--color--grijs );
}

.wk-strook .wp-block-post:last-child > :last-child {
	margin-bottom: var( --wp--preset--spacing--30 );
}

/* -----------------------------------------------------------------------------
   4. VOORPAGINA-OPMAAK
   Eén groot openingsartikel met daarnaast kleinere, net als de bovenste helft
   van een papieren voorpagina.
   -------------------------------------------------------------------------- */

.wk-voorpagina {
	display: grid;
	gap: var( --wp--preset--spacing--40 );
	grid-template-columns: 1fr;
}

@media ( min-width: 56rem ) {
	.wk-voorpagina {
		grid-template-columns: 1.6fr 1fr;
		align-items: start;
	}
}

.wk-opening .wp-block-post-title {
	font-size: var( --wp--preset--font-size--kop-groot );
	font-style: normal;
	line-height: 1.1;
}

/* -----------------------------------------------------------------------------
   4b. ZIJBALK
   Smalle kolom rechts: eerst andere artikelen uit dezelfde rubriek, daaronder
   de laatste berichten. Beide blokken zijn in de Site-editor aan te passen via
   Patronen > Sjabloononderdelen > Zijbalk.
   -------------------------------------------------------------------------- */

.wk-zijbalk {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--40 );
	font-size: var( --wp--preset--font-size--klein );
}

.wk-zijbalkkop {
	margin: 0 0 var( --wp--preset--spacing--20 );
	padding-bottom: 0.4rem;
	border-bottom: 3px solid var( --wp--preset--color--krant-groen );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--groot );
	font-weight: 700;
	text-transform: lowercase;
}

/* Compacte rij: klein vierkant beeld naast de kop. Een volle kaart is in een
   kolom van 27% te log. */
.wk-lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-lijst__item + .wk-lijst__item {
	border-top: 1px solid var( --wp--preset--color--lijn );
}

.wk-lijst__link {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: 0.8rem;
	align-items: start;
	padding-block: 0.7rem;
	text-decoration: none;
	color: inherit;
}

.wk-lijst__link:hover .wk-lijst__titel {
	text-decoration: underline;
}

.wk-lijst__link .wk-beeld {
	width: 5rem;
}

/* Rijen zonder afbeelding laten de tekst de volle breedte pakken. */
.wk-lijst__link:not( :has( .wk-beeld ) ) {
	grid-template-columns: 1fr;
}

.wk-lijst__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.wk-lijst__titel {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}

.wk-lijst__meta {
	font-family: var( --wp--preset--font-family--ui );
	font-size: 0.8em;
	color: var( --wp--preset--color--grijs );
}

/* De Query Loop in de zijbalk krijgt dezelfde compacte rijen zonder dat de
   redactie daar iets voor hoeft in te stellen. */
.wk-zijbalk .wp-block-post-template {
	gap: 0;
}

.wk-zijbalk .wp-block-post {
	padding-block: 0.7rem;
	border: 0;
	border-radius: 0;
	background: none;
}

.wk-zijbalk .wp-block-post + .wp-block-post {
	border-top: 1px solid var( --wp--preset--color--lijn );
}

.wk-zijbalk .wp-block-post > * {
	margin-inline: 0;
}

.wk-zijbalk .wp-block-post-title {
	font-size: 1em;
	font-style: normal;
	line-height: 1.25;
	margin: 0;
}

.wk-zijbalk .wp-block-post-date {
	font-size: 0.8em;
}

/* -----------------------------------------------------------------------------
   5. ARTIKELPAGINA
   -------------------------------------------------------------------------- */

.wk-artikel__bovenregel {
	font-family: var( --wp--preset--font-family--ui );
	font-size: var( --wp--preset--font-size--klein );
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --wp--preset--color--krant-groen-donker );
}

.wk-artikel__byline {
	font-family: var( --wp--preset--font-family--ui );
	font-size: var( --wp--preset--font-size--klein );
	color: var( --wp--preset--color--grijs );
}

/* Introzin groter, zoals de lead in de krant. */
.entry-content > p:first-of-type {
	font-size: var( --wp--preset--font-size--groot );
	line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   6. EDITIEPAGINA
   De hele uitgave op één webpagina: dit is wat de site tot een online krant
   maakt in plaats van een blog.
   -------------------------------------------------------------------------- */

.wk-editiekop {
	display: grid;
	gap: var( --wp--preset--spacing--40 );
	align-items: center;
	grid-template-columns: 1fr;
	padding-block: var( --wp--preset--spacing--40 );
	border-bottom: 3px solid var( --wp--preset--color--inkt );
}

@media ( min-width: 48rem ) {
	.wk-editiekop {
		grid-template-columns: 14rem 1fr;
	}
}

.wk-editiekop img {
	width: 100%;
	height: auto;
	box-shadow: 0 2px 14px rgba( 0, 0, 0, 0.18 );
}

/* -----------------------------------------------------------------------------
   7. PRINT
   Lezers printen artikelen uit. Laat ze dat netjes doen.
   -------------------------------------------------------------------------- */

@media print {
	.wk-masthead,
	.wk-rubrieknav,
	.wp-block-navigation,
	.wp-block-post-comments-form,
	footer {
		display: none !important;
	}

	body {
		font-size: 11pt;
		background: #fff;
	}

	a[href^="http"]::after {
		content: " (" attr( href ) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}