/**
 * Caption Copyright Overlay
 * Plaatst het bijschrift als overlay in de hoek van de afbeelding.
 *
 * De kleuren/posities worden aangevuld met CSS-variabelen die door de plugin
 * dynamisch worden ingesteld (zie dmi_co_enqueue_styles in caption-overlay.php).
 */

:root {
	--dmi-co-bottom: 0;
	--dmi-co-top: auto;
	--dmi-co-right: 0;
	--dmi-co-left: auto;
	--dmi-co-align: right;
	--dmi-co-bg: rgba(0, 0, 0, 0.55);
	--dmi-co-font-size: 12px;
	--dmi-co-color: #ffffff;
	--dmi-co-transform: none;
}

/*
 * De figure omsluit de afbeelding zodat de overlay op de foto valt.
 * width:fit-content laat de figure meeschalen met de foto, maar max-width:100%
 * voorkomt dat hij (op mobiel) breder wordt dan het scherm.
 */
figure.wp-block-image,
figure.wp-caption,
.wp-caption {
	position: relative;
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	height: auto;
}

/* Gecentreerde afbeeldingen netjes in het midden houden. */
figure.wp-block-image.aligncenter,
figure.wp-caption.aligncenter,
.wp-caption.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/*
 * De afbeelding zelf: nooit breder dan de container.
 * Dit voorkomt de "mega grote foto" op mobiel.
 */
figure.wp-block-image > img,
figure.wp-caption > img,
.wp-caption > img,
.wp-caption img {
	display: block;
	width: auto;
	max-width: 100% !important;
	height: auto !important;
}

/* De caption/overlay zelf. */
figure.wp-block-image > figcaption,
figure.wp-caption > figcaption,
.wp-caption .wp-caption-text {
	position: absolute !important;
	top: var(--dmi-co-top);
	bottom: var(--dmi-co-bottom);
	right: var(--dmi-co-right);
	left: var(--dmi-co-left);
	display: block !important;
	visibility: visible !important;
	width: auto;
	max-width: 100%;
	margin: 0 !important;
	padding: 4px 10px;
	background: var(--dmi-co-bg);
	color: var(--dmi-co-color);
	font-size: var(--dmi-co-font-size);
	line-height: 1.4;
	text-align: var(--dmi-co-align);
	text-transform: var(--dmi-co-transform);
	box-sizing: border-box;
	pointer-events: none;
	z-index: 2;
	/* Betere leesbaarheid boven op lichte foto's. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}