/*
 * NFHB Umsjón 1.4.0: cancelled events ("AFLÝST").
 *
 * A diagonal red band across the image area of a cancelled event: a CSS overlay, the image itself is
 * never changed. It covers a featured image and the date placeholder alike, because it is drawn on the
 * box that holds either. Every selector needs a "cancelled" marker, so active events are never touched:
 *   - body.nfhb-aflyst (single event page; Event_Status::body_class) → NFHB's .evd-media figure and
 *     Events Manager's default single-event .em-item-image;
 *   - .em-event-cancelled (EM 7 list format: {is_cancelled}em-event-cancelled{/is_cancelled}) →
 *     .em-item-image (image or .has-placeholder);
 *   - .nfhb-aflyst (post_class, e.g. Elementor loop items) and any format that adds
 *     {is_cancelled}nfhb-aflyst{/is_cancelled} → an element marked .nfhb-aflyst-flotur.
 * NFHB red #B22F31 with white text (6.3:1), white edge lines, Merriweather Sans 800 as on the site.
 * The text is generated content with an empty alternative, so screen readers skip it; the visible,
 * readable notice is #_NFHBAFLYST / the registration notice outside the image.
 */

body.nfhb-aflyst .nfhb-evd .evd-media,
body.nfhb-aflyst .em-event-single .em-item-image,
.em-event-cancelled .em-item-image,
.nfhb-aflyst .nfhb-aflyst-flotur {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* EM's list card stretches the image box to the card's height, and the cancelled notice makes the card
   taller: let the photograph fill the box (cropped, never distorted) so the band lies across it. */
.em-event-cancelled .em-item-image > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A light veil, so the band reads on any photograph. */
body.nfhb-aflyst .nfhb-evd .evd-media::before,
body.nfhb-aflyst .em-event-single .em-item-image::before,
.em-event-cancelled .em-item-image::before,
.nfhb-aflyst .nfhb-aflyst-flotur::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(5, 25, 45, 0.28);
	pointer-events: none;
}

body.nfhb-aflyst .nfhb-evd .evd-media::after,
body.nfhb-aflyst .em-event-single .em-item-image::after,
.em-event-cancelled .em-item-image::after,
.nfhb-aflyst .nfhb-aflyst-flotur::after {
	content: "AFLÝST";
	content: "AFLÝST" / "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	box-sizing: border-box;
	width: 150%;
	padding: 0.32em 0;
	border-top: 0.12em solid #FFFFFF;
	border-bottom: 0.12em solid #FFFFFF;
	background: #B22F31;
	color: #FFFFFF;
	font-family: "Merriweather Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: clamp(18px, 6vw, 64px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.14em;
	text-align: center;
	text-indent: 0.14em; /* Balances the trailing letter spacing. */
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 0.18em 0.6em rgba(0, 0, 0, 0.35);
	transform: translate(-50%, -50%) rotate(-24deg);
	pointer-events: none;
}

/* Small boxes (list cards, thumbnails): size the band from the box itself where supported. */
@supports (container-type: inline-size) {
	.em-event-cancelled .em-item-image,
	.nfhb-aflyst .nfhb-aflyst-flotur,
	body.nfhb-aflyst .nfhb-evd .evd-media,
	body.nfhb-aflyst .em-event-single .em-item-image {
		container-type: inline-size;
	}

	.em-event-cancelled .em-item-image::after,
	.nfhb-aflyst .nfhb-aflyst-flotur::after,
	body.nfhb-aflyst .nfhb-evd .evd-media::after,
	body.nfhb-aflyst .em-event-single .em-item-image::after {
		font-size: clamp(14px, 11cqi, 72px);
	}
}

/* The visible notice outside the image (#_NFHBAFLYST). */
.nfhb-aflyst-tilkynning {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
	margin: 12px 0;
	padding: 10px 14px;
	border-left: 4px solid #B22F31;
	border-radius: 4px;
	background: #FBECEC;
	color: #5C1416;
	font-weight: 600;
	line-height: 1.4;
}

.nfhb-aflyst-tilkynning__ord {
	color: #B22F31;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The registration box of a cancelled event (Event_Registration). */
:root .nfhb-skraning.nfhb-skraning--aflyst {
	display: block;
	margin: 0;
	padding: 12px 14px;
	border-left: 4px solid #B22F31;
	border-radius: 4px;
	background: #FBECEC;
	color: #5C1416;
	font-weight: 700;
}

@media (forced-colors: active) {
	body.nfhb-aflyst .nfhb-evd .evd-media::after,
	body.nfhb-aflyst .em-event-single .em-item-image::after,
	.em-event-cancelled .em-item-image::after,
	.nfhb-aflyst .nfhb-aflyst-flotur::after {
		border-color: CanvasText;
		background: Canvas;
		color: CanvasText;
		forced-color-adjust: none;
	}
}