/* VP Forside – Vandpolo Danmark
   Palette taken from vandpolodanmark.dk. Fonts inherit from the site
   (Roboto / Roboto Condensed / Montserrat are already loaded by Elementor). */

.vpf {
	--vpf-blue: #0B77B9;        /* nav blue */
	--vpf-sky: #0AA2D8;         /* hero sky */
	--vpf-action: #0074C4;      /* buttons, links */
	--vpf-deep: #07466F;        /* headings, dark surfaces */
	--vpf-ink: #0B2A42;         /* body text */
	--vpf-muted: #4A5B6A;
	--vpf-tint: #EEF6FB;        /* light section background */
	--vpf-line: #DCE9F2;
	--vpf-scrim: 4, 30, 50;     /* rgb of the photo darkening */
	--vpf-display: "Roboto", "Helvetica Neue", Arial, sans-serif;
	--vpf-condensed: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	--vpf-title: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--vpf-gutter: max(20px, calc((100% - 1200px) / 2));
	box-sizing: border-box;
	color: var(--vpf-ink);
	font-family: var(--vpf-display);
}
.vpf *, .vpf *::before, .vpf *::after { box-sizing: inherit; }
.vpf a { text-decoration: none; }
.vpf :focus-visible { outline: 3px solid var(--vpf-action); outline-offset: 3px; border-radius: 4px; }

.vpf-wrap { padding: 0 var(--vpf-gutter); }
.vpf-h2 {
	margin: 0;
	font-family: var(--vpf-display);
	font-weight: 900;
	font-size: clamp(30px, 3.2vw, 44px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--vpf-deep);
}
.vpf-link {
	font-family: var(--vpf-condensed);
	font-weight: 700;
	font-size: 17px;
	color: var(--vpf-action);
	white-space: nowrap;
}
.vpf-link:hover { color: var(--vpf-deep); text-decoration: underline; }
.vpf-btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 30px;
	border-radius: 40px;
	font-family: var(--vpf-condensed);
	font-weight: 700;
	font-size: 18px;
}
.vpf-btn--light { background: #fff; color: var(--vpf-deep); }
.vpf-btn--light:hover { background: var(--vpf-tint); color: var(--vpf-deep); }

/* Editor-only notice */
.vpf-notice {
	padding: 16px 20px;
	margin: 16px 0;
	border: 2px dashed var(--vpf-action, #0074C4);
	background: #EEF6FB;
	color: #07466F;
	font: 500 15px/1.5 "Roboto", Arial, sans-serif;
	border-radius: 8px;
}

/* ============ HERO ============ */
.vpf-hero {
	position: relative;
	height: clamp(560px, 88vh, 820px);
	min-height: calc(480px + var(--vpf-header-offset, 0px));
	background: var(--vpf-deep);
	overflow: hidden;
	color: #fff;
}
.vpf-hero__slides, .vpf-hero__slide { position: absolute; inset: 0; }
.vpf-hero__slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease, visibility 0s linear .7s;
}
.vpf-hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.vpf-hero__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 30%;
}

/* Three layers so white text holds on light photos:
   header band, bottom band behind the title, left edge behind the text column. */
.vpf-hero__scrim {
	position: absolute; inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(var(--vpf-scrim), .88) 0, rgba(var(--vpf-scrim), .55) calc(var(--vpf-header-offset, 0px) * .6 + 80px), rgba(var(--vpf-scrim), 0) calc(var(--vpf-header-offset, 0px) + 140px)),
		linear-gradient(180deg, rgba(var(--vpf-scrim), 0) 30%, rgba(var(--vpf-scrim), .72) 60%, rgba(var(--vpf-scrim), .96) 100%),
		linear-gradient(90deg, rgba(var(--vpf-scrim), .55) 0, rgba(var(--vpf-scrim), 0) 75%);
}
.vpf-hero:not(.vpf-hero--under-header) .vpf-hero__scrim {
	background:
		linear-gradient(180deg, rgba(var(--vpf-scrim), 0) 30%, rgba(var(--vpf-scrim), .72) 60%, rgba(var(--vpf-scrim), .96) 100%),
		linear-gradient(90deg, rgba(var(--vpf-scrim), .55) 0, rgba(var(--vpf-scrim), 0) 75%);
}

.vpf-hero__content {
	position: absolute;
	left: var(--vpf-gutter);
	right: var(--vpf-gutter);
	bottom: 236px;
	max-width: 860px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}
.vpf-hero__meta { display: flex; align-items: center; gap: 14px; font-size: 15px; color: rgba(255,255,255,.9); }
.vpf-tag--hero {
	background: var(--vpf-sky);
	color: #062A44;
	font-family: var(--vpf-title);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 4px;
}
.vpf-tag--hero:hover { background: #fff; color: var(--vpf-deep); }
.vpf-hero__title {
	margin: 0;
	font-family: var(--vpf-display);
	font-weight: 900;
	font-size: clamp(38px, 5.3vw, 76px);
	line-height: .98;
	letter-spacing: -0.02em;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.vpf-hero__title a { color: #fff; }
.vpf-hero__title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.vpf-hero :focus-visible { outline-color: #fff; }

/* story picker */
.vpf-hero__picker {
	position: absolute;
	left: var(--vpf-gutter);
	right: var(--vpf-gutter);
	bottom: 96px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 32px;
}
.vpf-hero__pick {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 0 0;
	background: none;
	border: 0;
	border-top: 3px solid rgba(255,255,255,.3);
	color: rgba(255,255,255,.78);
	text-align: left;
	cursor: pointer;
	font: inherit;
}
.vpf-hero__pick:hover, .vpf-hero__pick[aria-selected="true"] { color: #fff; }
.vpf-hero__pick[aria-selected="true"] { border-top-color: #fff; }
.vpf-hero__pick-cat { font-family: var(--vpf-title); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.vpf-hero__pick-title { font-family: var(--vpf-title); font-weight: 600; font-size: 17px; line-height: 1.3; }
.vpf-hero__progress {
	position: absolute; top: -3px; left: 0;
	height: 3px; width: 0;
	background: var(--vpf-sky);
}
.vpf-hero.is-playing .vpf-hero__pick.is-active .vpf-hero__progress {
	animation: vpf-progress var(--vpf-interval, 7s) linear forwards;
}
@keyframes vpf-progress { to { width: 100%; } }

/* ============ SHORTCUT TILES ============ */
.vpf-tiles { position: relative; z-index: 3; padding: 0 var(--vpf-gutter); }
.vpf-tiles--overlap {
	margin-top: -52px;
	background: linear-gradient(180deg, transparent 52px, var(--vpf-tiles-under, var(--vpf-tint)) 52px);
}
.vpf-tiles__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--vpf-tiles, 6), minmax(0, 1fr));
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(7, 40, 66, .16);
	overflow: hidden;
}
.vpf-tiles__list li + li { border-left: 1px solid #E3EDF4; }
.vpf-tile {
	height: 128px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--vpf-deep);
	text-align: center;
	padding: 0 8px;
	transition: background-color .15s ease;
}
.vpf-tile:hover { background: var(--vpf-tint); color: var(--vpf-deep); }
.vpf-tile__icon { color: var(--vpf-action); flex-shrink: 0; }
.vpf-tile__label { font-family: var(--vpf-condensed); font-weight: 700; font-size: 17px; line-height: 1.15; }

/* ============ KAMPCENTER ============ */
.vpf-kc { background: var(--vpf-tint); padding: 72px 0 80px; }
.vpf-kc__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 24px;
	margin-bottom: 28px;
}
.vpf-kc__head .vpf-h2 { margin-right: auto; }
.vpf-kc__mode {
	display: inline-flex;
	background: #fff;
	border: 1.5px solid #B9D3E4;
	border-radius: 40px;
	padding: 3px;
}
.vpf-kc__mode button {
	border: 0;
	background: transparent;
	color: var(--vpf-deep);
	border-radius: 40px;
	min-height: 40px;
	padding: 0 18px;
	font-family: var(--vpf-condensed);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}
.vpf-kc__mode button[aria-pressed="true"] { background: var(--vpf-deep); color: #fff; }
.vpf-kc__divs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.vpf-chip {
	min-height: 44px;
	padding: 0 18px;
	border-radius: 40px;
	border: 1.5px solid #B9D3E4;
	background: transparent;
	color: var(--vpf-deep);
	font-family: var(--vpf-condensed);
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	cursor: pointer;
}
.vpf-chip:hover { border-color: var(--vpf-deep); }
.vpf-chip[aria-selected="true"] { background: var(--vpf-deep); border-color: var(--vpf-deep); color: #fff; }

.vpf-kc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vpf-kc[data-mode="resultater"] [data-list="kommende"],
.vpf-kc[data-mode="kommende"] [data-list="resultater"] { display: none; }
.vpf-kc__empty { grid-column: 1 / -1; margin: 0; padding: 24px; background: #fff; border-radius: 10px; color: var(--vpf-muted); }

.vpf-match {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--vpf-line);
	border-radius: 10px;
	color: var(--vpf-ink);
}
.vpf-match__badge {
	align-self: flex-start;
	margin-bottom: -4px;
	padding: 4px 10px;
	border-radius: 4px;
	background: #F6E7B8;
	color: #5A4300;
	font-family: var(--vpf-title);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
}
a.vpf-match:hover { border-color: var(--vpf-action); color: var(--vpf-ink); }
.vpf-match__meta {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-family: var(--vpf-title);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--vpf-muted);
	text-transform: uppercase;
}
.vpf-match__team { display: flex; align-items: center; gap: 12px; }
.vpf-match__crest { width: 28px; height: 28px; border-radius: 14px; background: #D6E7F2; object-fit: contain; flex-shrink: 0; }
.vpf-match__name { flex: 1; font-family: var(--vpf-title); font-weight: 600; font-size: 16px; line-height: 1.25; }
.vpf-match__score { font-family: var(--vpf-condensed); font-weight: 700; font-size: 24px; color: var(--vpf-deep); min-width: 1.5em; text-align: right; }
.vpf-match__team:not(.is-winner) .vpf-match__score { color: var(--vpf-muted); }
.vpf-match__team.is-winner .vpf-match__name { font-weight: 800; }

/* ============ NEWS ============ */
.vpf-news { padding: 88px 0 96px; }
.vpf-news__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 36px; }
.vpf-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.vpf-card { display: flex; flex-direction: column; gap: 14px; }
.vpf-card__media { display: block; aspect-ratio: 5 / 3; border-radius: 10px; overflow: hidden; background: var(--vpf-tint); }
.vpf-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.vpf-card:hover .vpf-card__img { transform: scale(1.03); }
.vpf-card__meta { display: flex; gap: 12px; align-items: baseline; font-family: var(--vpf-title); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--vpf-muted); }
.vpf-card__cat { color: var(--vpf-action); }
.vpf-card__cat:hover { color: var(--vpf-deep); }
.vpf-card__title { margin: 0; font-family: var(--vpf-title); font-weight: 700; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; }
.vpf-card__title a { color: var(--vpf-ink); }
.vpf-card__title a:hover { color: var(--vpf-action); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
	.vpf-kc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vpf-hero__pick-title { font-size: 15px; }
	.vpf-tiles__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vpf-tiles__list li + li { border-left: 0; }
	.vpf-tiles__list li { border-top: 1px solid #E3EDF4; }
	.vpf-tiles__list li:nth-child(-n+3) { border-top: 0; }
	.vpf-tiles__list li:not(:nth-child(3n+1)) { border-left: 1px solid #E3EDF4; }
	.vpf-tile { height: 104px; }
}
@media (max-width: 767px) {
	.vpf-hero { height: 640px; }
	.vpf-hero__content { bottom: 64px; gap: 14px; }
	.vpf-hero__picker { bottom: 28px; gap: 6px; grid-auto-columns: 28px; justify-content: start; }
	.vpf-hero__pick { padding: 12px 0 0; min-height: 24px; }
	.vpf-hero__pick-cat, .vpf-hero__pick-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.vpf-tiles--overlap { margin-top: 0; background: var(--vpf-tiles-under, var(--vpf-tint)); padding-top: 20px; padding-bottom: 4px; }
	.vpf-tiles__list { box-shadow: none; border: 1px solid var(--vpf-line); }
	.vpf-tile { height: 84px; gap: 8px; }
	.vpf-tile__icon { width: 28px; height: 28px; }
	.vpf-tile__label { font-size: 15px; }
	.vpf-kc { padding: 48px 0 56px; }
	.vpf-kc__head .vpf-h2 { flex-basis: 100%; }
	.vpf-kc__divs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
	.vpf-kc__grid { grid-template-columns: 1fr; gap: 12px; }
	.vpf-news { padding: 48px 0 56px; }
	.vpf-news__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.vpf-hero__slide, .vpf-card__img, .vpf-tile { transition: none; }
}

/* ============ THEME-PROOFING ============
   Elementor's kit and the theme style every img and button with selectors
   like ".elementor img" and ".elementor-kit-N button". These rules are
   scoped more specifically so the plugin's own styling always wins. */

.vpf.vpf-hero .vpf-hero__img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	object-position: center 30%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.vpf.vpf-news .vpf-card__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	border-radius: 0;
}

/* Reset theme button styling inside every module */
.vpf.vpf button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	box-shadow: none;
	text-transform: none;
	text-shadow: none;
	line-height: 1.2;
	letter-spacing: normal;
	width: auto;
}

/* Story picker: thin progress lines, not boxes */
.vpf.vpf-hero .vpf-hero__pick,
.vpf.vpf-hero .vpf-hero__pick:hover,
.vpf.vpf-hero .vpf-hero__pick:focus {
	background: transparent;
	border: 0;
	border-top: 3px solid rgba(255,255,255,.35);
	border-radius: 0;
	padding: 16px 0 0;
	color: rgba(255,255,255,.78);
	min-height: 0;
	text-align: left;
	font-weight: inherit;
}
.vpf.vpf-hero .vpf-hero__pick[aria-selected="true"] { border-top-color: rgba(255,255,255,.35); color: #fff; }
.vpf.vpf-hero .vpf-hero__pick:not(.is-active):hover { border-top-color: rgba(255,255,255,.7); color: #fff; }
/* the active line is white when not auto-playing, and fills up while playing */
.vpf.vpf-hero:not(.is-playing) .vpf-hero__pick.is-active .vpf-hero__progress { width: 100%; }
.vpf.vpf-hero .vpf-hero__progress { background: #fff; top: -3px; }

/* Kampcenter + tiles buttons keep their own look */
.vpf.vpf-kc .vpf-chip { background: transparent; color: var(--vpf-deep); border: 1.5px solid #B9D3E4; border-radius: 40px; padding: 0 18px; min-height: 44px; font-family: var(--vpf-condensed); font-weight: 700; font-size: 15px; }
.vpf.vpf-kc .vpf-chip:hover { background: transparent; color: var(--vpf-deep); border-color: var(--vpf-deep); }
.vpf.vpf-kc .vpf-chip[aria-selected="true"] { background: var(--vpf-deep); border-color: var(--vpf-deep); color: #fff; }
.vpf.vpf-kc .vpf-kc__mode button { background: transparent; color: var(--vpf-deep); border: 0; border-radius: 40px; padding: 0 18px; min-height: 40px; font-family: var(--vpf-condensed); font-weight: 700; font-size: 15px; }
.vpf.vpf-kc .vpf-kc__mode button[aria-pressed="true"] { background: var(--vpf-deep); color: #fff; }

@media (max-width: 767px) {
	/* Mobile: three short lines, with a generous invisible tap area */
	.vpf.vpf-hero .vpf-hero__picker { bottom: 24px; gap: 8px; grid-auto-columns: 36px; }
	.vpf.vpf-hero .vpf-hero__pick,
	.vpf.vpf-hero .vpf-hero__pick:hover,
	.vpf.vpf-hero .vpf-hero__pick:focus { padding: 0; height: 24px; }
	.vpf.vpf-hero .vpf-hero__content { bottom: 72px; }
}

/* ============ MOBILE HERO: photo on top, text below ============
   On narrow screens a full-height photo gets cropped and zoomed.
   Instead the photo keeps a wide 3:2 shape at full width, and the
   text sits underneath on the federation's dark blue. */
@media (max-width: 767px) {
	.vpf.vpf-hero {
		height: auto;
		min-height: 0;
		background: var(--vpf-deep);
	}
	.vpf.vpf-hero .vpf-hero__slides {
		position: relative;
		inset: auto;
		display: grid;
	}
	.vpf.vpf-hero .vpf-hero__slide {
		position: relative;
		inset: auto;
		grid-area: 1 / 1;
		display: flex;
		flex-direction: column;
	}
	.vpf.vpf-hero .vpf-hero__img {
		position: relative !important;
		inset: auto;
		height: auto !important;
		aspect-ratio: 3 / 2;
		object-position: center 30%;
	}
	/* soft fade from photo into the blue text area */
	.vpf.vpf-hero .vpf-hero__scrim {
		inset: auto 0 auto 0;
		top: 0;
		height: 0;
		padding-top: 66.667%;
		background: linear-gradient(180deg, rgba(var(--vpf-scrim), 0) 70%, var(--vpf-deep) 100%);
	}
	.vpf.vpf-hero .vpf-hero__content {
		position: static;
		max-width: none;
		padding: 16px 20px 60px;
		gap: 12px;
	}
	.vpf.vpf-hero .vpf-hero__title {
		font-size: 30px;
		line-height: 1.05;
		text-shadow: none;
	}
	.vpf.vpf-hero .vpf-btn {
		min-height: 44px;
		padding: 0 24px;
		font-size: 16px;
	}
	.vpf.vpf-hero .vpf-hero__picker {
		left: 20px;
		right: 20px;
		bottom: 20px;
	}
}

/* ============ TURNERINGSKORT ============ */
.vpf-tour { padding: 64px 0 72px; }
.vpf-tour__title { margin-bottom: 28px; }
.vpf-tour__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.vpf.vpf-tour .vpf-tcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 26px 24px 22px;
	background: #fff;
	border: 1px solid var(--vpf-line);
	border-top: 4px solid var(--vpf-blue);
	border-radius: 12px;
	color: var(--vpf-ink);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vpf.vpf-tour .vpf-tcard.has-link:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(7, 40, 66, .14);
	border-top-color: var(--vpf-sky);
	color: var(--vpf-ink);
}
.vpf-tcard__top { display: flex; flex-direction: column; gap: 6px; }
.vpf.vpf-tour .vpf-tcard__name {
	margin: 0;
	font-family: var(--vpf-display);
	font-weight: 900;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--vpf-deep);
}
.vpf-tcard__desc { margin: 0; font-size: 15px; line-height: 1.45; color: var(--vpf-muted); }
.vpf-tcard__block {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--vpf-line);
}
.vpf-tcard__label {
	font-family: var(--vpf-title);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vpf-action);
}
.vpf-tcard__leader { display: flex; align-items: center; gap: 10px; }
.vpf-tcard__crest { width: 32px; height: 32px; border-radius: 16px; background: #D6E7F2; object-fit: contain; flex-shrink: 0; }
.vpf-tcard__team {
	flex: 1;
	display: flex;
	flex-direction: column;
	font-family: var(--vpf-title);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
}
.vpf-tcard__pool {
	font-family: var(--vpf-condensed);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vpf-muted);
}
.vpf-tcard__pts {
	font-family: var(--vpf-condensed);
	font-weight: 700;
	font-size: 22px;
	color: var(--vpf-deep);
	white-space: nowrap;
}
.vpf-tcard__pts small { font-size: 12px; font-weight: 600; color: var(--vpf-muted); }
.vpf-tcard__match { font-family: var(--vpf-title); font-weight: 700; font-size: 15px; line-height: 1.3; }
.vpf-tcard__when { font-size: 14px; color: var(--vpf-muted); }
.vpf-tcard__muted { display: flex; flex-direction: column; font-size: 14px; color: var(--vpf-muted); }
.vpf-tcard__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--vpf-line);
}
.vpf-tcard__progress { height: 6px; border-radius: 3px; background: var(--vpf-tint); overflow: hidden; }
.vpf-tcard__progress span { display: block; height: 100%; background: var(--vpf-blue); border-radius: 3px; }
.vpf-tcard__count { font-size: 13px; color: var(--vpf-muted); }
.vpf-tcard__cta {
	font-family: var(--vpf-condensed);
	font-weight: 700;
	font-size: 17px;
	color: var(--vpf-action);
}
.vpf.vpf-tour .vpf-tcard__btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	margin-top: 4px;
	max-width: 100%;
	padding: 0 20px;
	border-radius: 40px;
	background: var(--vpf-blue);
	color: #fff;
	font-family: var(--vpf-condensed);
	font-weight: 700;
	font-size: 16px;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .15s ease;
}
/* The whole card is clickable through the button (one link, no nesting) */
.vpf.vpf-tour .vpf-tcard__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}
.vpf.vpf-tour .vpf-tcard.has-link:hover .vpf-tcard__btn,
.vpf.vpf-tour .vpf-tcard__btn:focus-visible { background: var(--vpf-deep); color: #fff; }
.vpf.vpf-tour .vpf-tcard__btn:focus-visible { outline: 3px solid var(--vpf-action); outline-offset: 3px; }
.vpf .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
@media (max-width: 640px) {
	.vpf.vpf-tour .vpf-tcard__btn { align-self: stretch; justify-content: center; }
}

@media (max-width: 1100px) {
	.vpf-tour__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.vpf-tour { padding: 40px 0 48px; }
	.vpf-tour__grid { grid-template-columns: 1fr; gap: 14px; }
	.vpf.vpf-tour .vpf-tcard { padding: 22px 20px 18px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.vpf.vpf-tour .vpf-tcard { transition: none; }
}


/* ============ LANDSHOLD = RED ============
   Only the Landshold category (slug "national") gets the national
   team red from the site's "National Pages" color, with white text. */
.vpf { --vpf-red: #E41E2C; }
.vpf.vpf-hero .vpf-tag--hero.vpf-cat-national {
	background: var(--vpf-red);
	color: #fff;
}
.vpf.vpf-hero .vpf-tag--hero.vpf-cat-national:hover { background: #fff; color: var(--vpf-red); }
/* All category labels in the news grid are filled pills:
   blue (Main Pages) as standard, red for Landshold. */
.vpf.vpf-news .vpf-card__meta { align-items: center; }
.vpf.vpf-news .vpf-card__cat {
	display: inline-block;
	background: var(--vpf-blue);
	color: #fff;
	padding: 5px 10px;
	border-radius: 4px;
	line-height: 1.2;
}
.vpf.vpf-news .vpf-card__cat:hover { background: var(--vpf-deep); color: #fff; }
.vpf.vpf-news .vpf-card__cat.vpf-cat-national { background: var(--vpf-red); color: #fff; }
.vpf.vpf-news .vpf-card__cat.vpf-cat-national:hover { background: #B8141F; color: #fff; }
.vpf-kc__overview { white-space: nowrap; }


/* ============ HEADER SEARCH ============ */
.vpf.vpf-sog { position: relative; display: inline-flex; align-items: center; color: #fff; }
.vpf.vpf-sog .vpf-sog__form {
	display: flex;
	align-items: center;
	height: 42px;
	border-radius: 40px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .35);
	transition: background-color .15s ease, border-color .15s ease;
}
.vpf.vpf-sog .vpf-sog__form:focus-within { background: #fff; border-color: #fff; }
.vpf.vpf-sog .vpf-sog__input {
	width: 140px;
	height: 40px;
	margin: 0;
	padding: 0 4px 0 18px;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #fff;
	font-family: var(--vpf-display);
	font-size: 16px; /* 16px stops iPhones from zooming in on focus */
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.vpf.vpf-sog .vpf-sog__input::placeholder { color: rgba(255, 255, 255, .8); opacity: 1; }
.vpf.vpf-sog .vpf-sog__form:focus-within .vpf-sog__input { color: var(--vpf-ink); }
.vpf.vpf-sog .vpf-sog__form:focus-within .vpf-sog__input::placeholder { color: var(--vpf-muted); }
.vpf.vpf-sog .vpf-sog__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.vpf.vpf-sog .vpf-sog__submit,
.vpf.vpf-sog .vpf-sog__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 40px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.vpf.vpf-sog .vpf-sog__form:focus-within .vpf-sog__submit { color: var(--vpf-deep); }
.vpf.vpf-sog .vpf-sog__toggle { display: none; }
.vpf.vpf-sog :focus-visible { outline: 3px solid #80C9E0; outline-offset: 2px; }
.vpf.vpf-sog .vpf-sog__input:focus,
.vpf.vpf-sog .vpf-sog__input:focus-visible { outline: none; }
.vpf.vpf-sog .vpf-sog__form:focus-within { box-shadow: 0 0 0 3px #80C9E0; }

@media (max-width: 1024px) {
	.vpf.vpf-sog .vpf-sog__toggle {
		display: inline-flex;
		width: 44px;
		height: 44px;
		border: 1px solid rgba(255, 255, 255, .35);
	}
	.vpf.vpf-sog .vpf-sog__form {
		display: none;
		position: fixed;
		top: var(--vpf-sog-top, 90px);
		left: 16px;
		right: 16px;
		z-index: 1000;
		height: 52px;
		background: #fff;
		border-color: #fff;
		box-shadow: 0 12px 30px rgba(7, 40, 66, .25);
	}
	.vpf.vpf-sog.is-open .vpf-sog__form { display: flex; }
	.vpf.vpf-sog .vpf-sog__input { flex: 1; width: auto; color: var(--vpf-ink); }
	.vpf.vpf-sog .vpf-sog__input::placeholder { color: var(--vpf-muted); }
	.vpf.vpf-sog .vpf-sog__submit { color: var(--vpf-deep); }
}

/* ============ HELPER CLASSES (site-wide) ============
   Add as a CSS class on any Elementor element or menu item. */
@media (min-width: 1025px) { .vp-skjul-desktop { display: none !important; } }
@media (max-width: 1024px) { .vp-skjul-mobil { display: none !important; } }


/* ============ PHONE MENU: RED THEME ON NATIONAL TEAM PAGES ============
   body.vp-landshold is added by the plugin on pages whose address (or
   parent page's address) contains "landshold". More specific than the
   navy menu rules in Additional CSS, so these win on those pages only. */
@media (max-width: 1024px) {
	body.vp-landshold .elementskit-menu-container.elementskit-menu-offcanvas-elements {
		background: #E41E2C !important;
	}
	body.vp-landshold .elementskit-menu-overlay {
		background: rgba(70, 8, 14, .55) !important;
	}
	body.vp-landshold .elementskit-nav-identity-panel {
		border-bottom-color: rgba(255, 255, 255, .25) !important;
	}
	body.vp-landshold .elementskit-menu-close {
		border-color: rgba(255, 255, 255, .55) !important;
	}
	body.vp-landshold .elementskit-navbar-nav > li > a {
		color: #fff !important;
		border-bottom-color: rgba(255, 255, 255, .18) !important;
	}
	/* Current page: white with a white bar on the left (light blue is unreadable on red) */
	body.vp-landshold .elementskit-navbar-nav > li.current-menu-item > a,
	body.vp-landshold .elementskit-navbar-nav > li.current-menu-ancestor > a {
		color: #fff !important;
		box-shadow: inset 4px 0 0 #fff;
	}
	body.vp-landshold .elementskit-navbar-nav .elementskit-dropdown {
		background: rgba(0, 0, 0, .16) !important;
	}
	body.vp-landshold .elementskit-navbar-nav .elementskit-dropdown li a {
		color: #fff !important;
	}
	body.vp-landshold .elementskit-navbar-nav .elementskit-dropdown li.current-menu-item > a {
		color: #fff !important;
		text-decoration: underline;
		text-underline-offset: 4px;
	}
	body.vp-landshold .elementskit-navbar-nav > li.vp-skjul-desktop > a {
		color: #B8141F !important;
	}
}

/* ============ HERO TITLE LINK STATES ============
   No underline and no dark colour when hovered or tapped:
   the title just turns light blue (palette: #80C9E0) and opens the article.
   Specific enough to beat the theme's/Elementor's global a:hover rules. */
.vpf.vpf-hero .vpf-hero__title a,
.vpf.vpf-hero .vpf-hero__title a:visited {
	color: #fff !important;
	text-decoration: none !important;
}
.vpf.vpf-hero .vpf-hero__title a:hover,
.vpf.vpf-hero .vpf-hero__title a:focus,
.vpf.vpf-hero .vpf-hero__title a:active {
	color: #80C9E0 !important;
	text-decoration: none !important;
}
.vpf.vpf-hero .vpf-hero__title a { -webkit-tap-highlight-color: transparent; }


/* ============ DESKTOP DROPDOWNS ON NATIONAL TEAM PAGES ============
   The dropdown under the menu takes the red header colour on national
   team pages, instead of the navy used everywhere else. */
@media (min-width: 1025px) {
	body.vp-landshold .elementskit-navbar-nav .elementskit-dropdown,
	body.vp-landshold .elementskit-navbar-nav .elementskit-submenu-panel {
		background: #E41E2C !important;
		border-color: #E41E2C !important;
	}
	body.vp-landshold .elementskit-navbar-nav .elementskit-dropdown li,
	body.vp-landshold .elementskit-navbar-nav .elementskit-dropdown li a {
		background: transparent !important;
		color: #fff !important;
	}
	body.vp-landshold .elementskit-navbar-nav .elementskit-dropdown li a:hover,
	body.vp-landshold .elementskit-navbar-nav .elementskit-dropdown li.current-menu-item > a {
		background: #C3151F !important;
		color: #fff !important;
	}
}