/* =============================================================================
   Wijkkrant Core — image and layout rules

   Core of the image approach: the frame sets the aspect ratio, the image fills
   the frame, and cropping happens around the focal point stored per image in
   the meta (--wk-focus, set by the plugin). That way every photo from the
   newspaper PDF, portrait or landscape, fits without manual work.
   ========================================================================== */

:root {
	--wk-ratio-kaart:   3 / 2;
	--wk-ratio-hero:    16 / 9;
	--wk-ratio-portret: 3 / 4;
	--wk-ratio-breed:   21 / 9;

	--wk-beeld-achtergrond: #ece9e4;
	--wk-radius: 4px;
}

/* -----------------------------------------------------------------------------
   1. Beeldhouder
   -------------------------------------------------------------------------- */

.wk-beeld {
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: var(--wk-radius);
	aspect-ratio: var(--wk-ratio, var(--wk-ratio-kaart));
	/* Visible while the image loads; prevents a white flash. */
	background-color: var(--wk-beeld-achtergrond);
}

/* height: 100% is needed to override the `img { height: auto }` from most
   themes. That is why the selector is deliberately a little more specific. */
.wk-beeld > img,
.wk-beeld > a > img,
.wk-beeld > picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--wk-focus, 50% 40%);
}

/* -----------------------------------------------------------------------------
   Placeholder: posts without a featured image still keep the image space free
   in overviews, so the headlines start on one line.
   A calm area in the paper colour; no icon or cross, because that reads as an
   error instead of a deliberate choice.
   -------------------------------------------------------------------------- */

.wk-plaatshouder {
	display: block;
	width: 100%;
	border-radius: var( --wk-radius );
	background-color: var( --wk-beeld-achtergrond );
	/* Barely visible inner line: gives the area an edge without emphasis. */
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
}

/* Variants */
.wk-beeld--hero     { --wk-ratio: var(--wk-ratio-hero); }
.wk-beeld--portret  { --wk-ratio: var(--wk-ratio-portret); }
.wk-beeld--breed    { --wk-ratio: var(--wk-ratio-breed); }
.wk-beeld--vierkant { --wk-ratio: 1 / 1; }

/* -----------------------------------------------------------------------------
   1b. DETAIL VIEW — the photo at the top of an article
   No cropping here. An article has plenty of room, so the photo keeps its own
   aspect ratio: a narrow portrait stays narrow, a wide panorama stays wide.
   Only the outliers are capped, so that a very tall portrait photo does not
   fill the whole screen before the text begins.

   The limits come from wijkkrant_config (detail_max_hoogte /
   detail_max_breedte) and are passed along as variables.
   -------------------------------------------------------------------------- */

.wk-artikelbeeld {
	margin-inline: auto;
	text-align: center;
}

.wk-artikelbeeld img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var( --wk-detail-hoogte, 78vh );
	margin-inline: auto;
	/* No object-fit: there is no fixed frame to fit into. */
	object-fit: fill;
	border-radius: var(--wk-radius);
}

/* Portrait and square photos get a narrower frame than landscape ones, so
   they do not become disproportionately large next to the text column. */
.wk-artikelbeeld:has( img[data-wk-orientatie="staand"] ) {
	max-width: var( --wk-detail-staand, 32rem );
}

.wk-artikelbeeld:has( img[data-wk-orientatie="vierkant"] ) {
	max-width: var( --wk-detail-vierkant, 40rem );
}

/* Let the frame follow the photo's orientation. Use this on standalone
   images and in articles — NOT in a grid, see section 2. */
.wk-beeld--auto:has( img[data-wk-orientatie="staand"] )   { --wk-ratio: var(--wk-ratio-portret); }
.wk-beeld--auto:has( img[data-wk-orientatie="vierkant"] ) { --wk-ratio: 1 / 1; }
.wk-beeld--auto:has( img[data-wk-orientatie="liggend"] )  { --wk-ratio: var(--wk-ratio-kaart); }

/* -----------------------------------------------------------------------------
   1c. TOP MENU
   Small service menu at the top right of the header: plain text, separators,
   dropdown in the same size. Colour and separator come from
   Settings > Wijkkrant; the colour is passed along as a variable.
   -------------------------------------------------------------------------- */

.wk-topmenu {
	font-family: var( --wp--preset--font-family--ui, system-ui, sans-serif );
	font-size: var( --wp--preset--font-size--klein, 0.875rem );
	line-height: 1.4;
}

.wk-topmenu__rij,
.wk-topmenu__uitklap {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-topmenu__rij {
	justify-content: flex-end;
	align-items: baseline;
	gap: 0;
}

.wk-topmenu__item {
	position: relative;
	margin: 0;
}

.wk-topmenu__link {
	display: inline-block;
	padding: 0.35rem 0.5rem;
	color: var( --wk-topmenu-kleur, #fff );
	text-decoration: none;
}

.wk-topmenu__link:hover,
.wk-topmenu__link:focus-visible {
	text-decoration: underline;
}

.wk-topmenu__item.is-actief > .wk-topmenu__link {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* aria-hidden is set on this element, so a screen reader skips it. */
.wk-topmenu__scheiding {
	color: var( --wk-topmenu-kleur, #fff );
	opacity: 0.55;
	user-select: none;
}

/* Dropdown without JavaScript: hover and focus-within both open it, so it
   can also be reached with the keyboard. */
.wk-topmenu__uitklap {
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 20;
	flex-direction: column;
	flex-wrap: nowrap;
	min-width: max-content;
	padding: 0.25rem 0;
	background: var( --wk-topmenu-paneel, rgba( 0, 0, 0, 0.28 ) );
	border-radius: 0 0 var( --wk-radius ) var( --wk-radius );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.22 );
	visibility: hidden;
	opacity: 0;
}

.wk-topmenu__item--uitklap:hover > .wk-topmenu__uitklap,
.wk-topmenu__item--uitklap:focus-within > .wk-topmenu__uitklap {
	visibility: visible;
	opacity: 1;
}

.wk-topmenu__uitklap .wk-topmenu__link {
	display: block;
	padding: 0.35rem 0.9rem;
	white-space: nowrap;
}

/* On a phone a floating panel fits badly: there, align left and simply show
   the dropdown as a second small line. */
@media ( max-width: 36rem ) {
	.wk-topmenu__rij {
		justify-content: flex-start;
	}

	.wk-topmenu__uitklap {
		position: static;
		visibility: visible;
		opacity: 1;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.wk-topmenu__uitklap .wk-topmenu__link {
		padding-inline: 0.5rem;
		opacity: 0.85;
	}
}

/* -----------------------------------------------------------------------------
   1d. MAIN MENU AND FOOTER MENU
   The same mechanism as the top menu — horizontal row, dropdown without
   JavaScript — but without its own colour: the theme decides that.
   -------------------------------------------------------------------------- */

.wk-hoofdmenu__rij,
.wk-voetmenu__rij {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 0 clamp( 0.75rem, 2vw, 1.75rem );
}

.wk-hoofdmenu__item,
.wk-voetmenu__item {
	position: relative;
	margin: 0;
}

.wk-hoofdmenu__link,
.wk-voetmenu__link {
	display: inline-block;
	padding: 0.3rem 0;
	color: inherit;
	text-decoration: none;
}

.wk-hoofdmenu__link:hover,
.wk-hoofdmenu__link:focus-visible,
.wk-voetmenu__link:hover,
.wk-voetmenu__link:focus-visible {
	text-decoration: underline;
}

.wk-hoofdmenu__scheiding,
.wk-voetmenu__scheiding {
	opacity: 0.55;
	user-select: none;
}

.wk-hoofdmenu__uitklap,
.wk-voetmenu__uitklap {
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 20;
	display: flex;
	flex-direction: column;
	min-width: max-content;
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
	background: var( --wk-topmenu-paneel, rgba( 0, 0, 0, 0.28 ) );
	border-radius: 0 0 var( --wk-radius ) var( --wk-radius );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.22 );
	visibility: hidden;
	opacity: 0;
}

.wk-hoofdmenu__item--uitklap:hover > .wk-hoofdmenu__uitklap,
.wk-hoofdmenu__item--uitklap:focus-within > .wk-hoofdmenu__uitklap,
.wk-voetmenu__item--uitklap:hover > .wk-voetmenu__uitklap,
.wk-voetmenu__item--uitklap:focus-within > .wk-voetmenu__uitklap {
	visibility: visible;
	opacity: 1;
}

.wk-hoofdmenu__uitklap .wk-hoofdmenu__link,
.wk-voetmenu__uitklap .wk-voetmenu__link {
	display: block;
	padding: 0.35rem 0.9rem;
	white-space: nowrap;
}

@media ( max-width: 36rem ) {
	.wk-hoofdmenu__uitklap,
	.wk-voetmenu__uitklap {
		position: static;
		visibility: visible;
		opacity: 1;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.wk-hoofdmenu__uitklap .wk-hoofdmenu__link,
	.wk-voetmenu__uitklap .wk-voetmenu__link {
		padding-inline: 0.4rem;
		opacity: 0.85;
	}
}

/* -----------------------------------------------------------------------------
   2. Overviews
   In a grid, calm beats fidelity: one fixed aspect ratio for all cards
   looks better than every photo in its own format. We only let the
   orientation count on the article page itself.
   -------------------------------------------------------------------------- */

.wk-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 17rem ), 1fr ) );
	gap: clamp( 1rem, 3vw, 2rem );
}

.wk-grid .wk-beeld {
	--wk-ratio: var(--wk-ratio-kaart);
}

.wk-kaart {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.wk-kaart__rubriek {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
}

.wk-kaart__titel {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.3;
	text-wrap: balance;
}

.wk-kaart__meta {
	font-size: 0.85rem;
	opacity: 0.7;
}

/* Highlight the first card larger, without extra markup. */
.wk-grid--uitgelicht > :first-child {
	grid-column: 1 / -1;
}

.wk-grid--uitgelicht > :first-child .wk-beeld {
	--wk-ratio: var(--wk-ratio-hero);
}

/* -----------------------------------------------------------------------------
   3. Block theme: the same rules on the core blocks, so that Query Loop and
   the featured image follow along automatically.
   -------------------------------------------------------------------------- */

.wp-block-post-featured-image img,
.wp-block-image img {
	object-position: var(--wk-focus, 50% 40%);
}

/* Portrait photos within the running text, not at full width. */
.entry-content .wp-block-image img[data-wk-orientatie="staand"] {
	max-width: min( 100%, 26rem );
	height: auto;
	margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   4. Credits and source
   -------------------------------------------------------------------------- */

.wk-bron {
	margin-top: 2rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba( 0, 0, 0, 0.12 );
	opacity: 0.75;
}

.wk-bron a {
	color: inherit;
}

/* -----------------------------------------------------------------------------
   5. Accessibility
   Some of the readers are elderly. These two rules cost nothing and
   make a big difference.
   -------------------------------------------------------------------------- */

.entry-content {
	font-size: clamp( 1.05rem, 0.98rem + 0.35vw, 1.25rem );
	line-height: 1.65;
	max-width: 68ch;
}

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