/**
 * VTS – sidelayout oven på GeneratePress: header, hero, sektioner, grids, footer.
 * Komponenter ligger i theme.css. Kun tokens fra tokens.css.
 */

/* ==================================================================
 * Header
 * ================================================================ */
.site-header {
	border-bottom: var(--vts-border-width) solid var(--vts-color-border);
}

.site-header .inside-header {
	padding-block: var(--vts-space-3);
	padding-inline: var(--vts-gutter);
}

.site-logo img,
.site-header .header-image {
	width: auto;
	max-height: 48px;
}

.main-navigation .main-nav ul li a {
	font-size: var(--vts-text-sm);
	font-weight: var(--vts-weight-semibold);
	color: var(--vts-ink-950);
	padding-inline: var(--vts-space-3);
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a,
.main-navigation .main-nav ul li.current-page-ancestor > a {
	color: var(--vts-color-primary);
}

.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-page-ancestor > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.5em;
}

.menu-bar-items .vts-header-cta {
	display: flex;
	align-items: center;
	padding-inline-start: var(--vts-space-3);
}

.menu-bar-items .vts-header-cta .vts-btn {
	padding: var(--vts-space-2) var(--vts-space-4);
	font-size: var(--vts-text-sm);
	line-height: 1.2;
}

@media (max-width: 479px) {
	.menu-bar-items .vts-header-cta .vts-btn {
		padding-inline: var(--vts-space-3);
	}
}

/* Sitenavn skjules – logoet bærer navnet */
.site-branding {
	display: none;
}

/* GP-menuens linkfarve må ikke overskrive CTA-knappen */
.main-navigation .menu-bar-items .vts-header-cta a.vts-btn,
.main-navigation .menu-bar-items .vts-header-cta a.vts-btn:hover,
.main-navigation .menu-bar-items .vts-header-cta a.vts-btn:focus {
	display: inline-flex;
	align-items: center;
	color: var(--vts-white);
}

/* ==================================================================
 * Gruppeblokke: klassiske temaer pakker indholdet i __inner-container.
 * Vores sektioner/containere styrer selv bredde og luft.
 * ================================================================ */
.wp-block-group[class*="vts-"] > .wp-block-group__inner-container {
	display: contents;
}

/* ==================================================================
 * Indholdsområde
 * ================================================================ */
/* GP's one-container-padding (40px) fjernes – kanten styres af .inside-article */
.site-content,
.one-container .site-content,
.one-container.right-sidebar .site-main,
.one-container.no-sidebar .site-main {
	padding: 0;
	margin: 0;
}

.one-container .site-content .inside-article,
.inside-article {
	box-sizing: border-box;
	padding: var(--vts-space-7) var(--vts-gutter);
}

/* Tekstsider: flugter med hero-containeren, men med læsevenlig linjelængde */
body.page:not(.full-width-content) .inside-article,
.single-koeretoej .inside-article {
	max-width: var(--vts-container);
	margin-inline: auto;
}

body.page:not(.full-width-content) .entry-content,
.single-tur .entry-content,
.single-koeretoej .entry-content {
	max-width: var(--vts-container-narrow);
}

.entry-content > * + h2 {
	margin-top: var(--vts-space-7);
}

.entry-content > * + h3 {
	margin-top: var(--vts-space-6);
}

/* Fuldbredde-sider (forside, oversigter) bygges af sektioner */
.full-width-content .site-content .inside-article {
	padding: 0;
}

.full-width-content .entry-content > :not(.vts-section):not(.alignfull) {
	box-sizing: border-box;
	max-width: var(--vts-container);
	margin-inline: auto;
	padding-inline: var(--vts-gutter);
}

.full-width-content .entry-content > .vts-section:first-child {
	padding-top: var(--vts-space-7);
}

.vts-section > .vts-container > :last-child,
.vts-section > .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}

/* ==================================================================
 * Hero (GP Page Hero-element og forsidens hero)
 * Hvid flade, stor overskrift og en kort skrå rød streg under H1 (logoets kursiv).
 * ================================================================ */
.vts-hero {
	padding-block: var(--vts-space-5) var(--vts-space-7);
	border-bottom: var(--vts-border-width) solid var(--vts-color-border);
}

.vts-hero__inner {
	display: grid;
	gap: var(--vts-space-6);
	align-items: end;
}

@media (min-width: 1024px) {
	.vts-hero__inner:has(.vts-hero__media img) {
		grid-template-columns: 1.1fr 1fr;
	}
}

.vts-hero__media:not(:has(img)) {
	display: none;
}

.vts-hero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.vts-hero h1,
.vts-home-hero h1 {
	margin-bottom: var(--vts-space-5);
}

.vts-hero h1::after,
.vts-home-hero h1::after {
	content: "";
	display: block;
	width: 4.5rem;
	height: 0.4rem;
	margin-top: var(--vts-space-4);
	background-color: var(--vts-color-brand);
	transform: skewX(var(--vts-skew));
	transform-origin: bottom left;
}

.vts-hero .vts-lead {
	margin-bottom: var(--vts-space-5);
}

.vts-hero .vts-breadcrumbs {
	margin-bottom: var(--vts-space-5);
}

.vts-hero .vts-facts {
	margin: var(--vts-space-6) 0 0;
}

.vts-hero .vts-iconlist {
	margin-bottom: var(--vts-space-5);
}

.vts-hero .vts-el-badge {
	margin-bottom: var(--vts-space-3);
}

/* Mørk variant (VIP, limousine) og mørke sektioner */
.vts-hero--dark,
.vts-section--inverse {
	background-color: var(--vts-color-bg-inverse);
	color: var(--vts-color-text-inverse);
	border-bottom: 0;
}

.vts-hero--dark .vts-lead,
.vts-hero--dark .vts-breadcrumbs,
.vts-hero--dark .vts-breadcrumbs a {
	color: var(--vts-color-text-inverse-muted);
}

/* Forsidens hero */
.vts-home-hero {
	border-bottom: var(--vts-border-width) solid var(--vts-color-border);
}

@media (min-width: 1024px) {
	.vts-home-hero .wp-block-columns {
		align-items: end;
	}
}

.vts-home-hero .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ==================================================================
 * Core-knapper = VTS-knapper (5.2)
 * Primær: skrå højrekant. Outline-stil bruges som sekundær tekstlink.
 * ================================================================ */
.wp-block-buttons {
	align-items: center;
	gap: var(--vts-space-3) var(--vts-space-6);
}

/* :not(.has-background) matcher GP's egen knapregel, så vores vinder */
.wp-block-button a.wp-block-button__link:not(.has-background) {
	display: inline-flex;
	align-items: center;
	min-height: var(--vts-target-min);
	padding: var(--vts-space-3) calc(var(--vts-space-5) + var(--vts-slant)) var(--vts-space-3) var(--vts-space-5);
	border: 0;
	border-radius: 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--vts-slant)) 100%, 0 100%);
	background-color: var(--vts-color-primary);
	color: var(--vts-white);
	font-size: var(--vts-text-base);
	font-weight: var(--vts-weight-bold);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--vts-duration) var(--vts-ease), color var(--vts-duration) var(--vts-ease);
}

.wp-block-button a.wp-block-button__link:not(.has-background):hover,
.wp-block-button a.wp-block-button__link:not(.has-background):focus {
	background-color: var(--vts-ink-950);
	color: var(--vts-white);
}

.wp-block-button a.wp-block-button__link:not(.has-background):focus-visible {
	clip-path: none;
	outline: 3px solid var(--vts-color-focus);
	outline-offset: 3px;
	box-shadow: none;
}

.wp-block-button.is-style-outline a.wp-block-button__link:not(.has-background) {
	padding-inline: 0;
	clip-path: none;
	background: none;
	color: var(--vts-ink-950);
	text-decoration: underline;
	text-decoration-color: var(--vts-color-brand);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.35em;
}

.wp-block-button.is-style-outline a.wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline a.wp-block-button__link:not(.has-background):focus {
	background: none;
	color: var(--vts-ink-950);
	text-decoration-color: currentColor;
}

.vts-section--inverse .wp-block-button.is-style-outline a.wp-block-button__link:not(.has-background),
.vts-section--inverse .wp-block-button.is-style-outline a.wp-block-button__link:not(.has-background):hover,
.vts-hero--dark .wp-block-button.is-style-outline a.wp-block-button__link:not(.has-background),
.vts-hero--dark .wp-block-button.is-style-outline a.wp-block-button__link:not(.has-background):hover {
	color: var(--vts-white);
}

.vts-section--inverse .wp-block-button a.wp-block-button__link:not(.has-background):not(:where(.is-style-outline *)):hover {
	background-color: var(--vts-white);
	color: var(--vts-ink-950);
}

/* ==================================================================
 * Kort-grid (vts/kort)
 * ================================================================ */
.vts-grid {
	display: grid;
	gap: var(--vts-space-7) var(--vts-space-6);
	margin: 0 0 var(--vts-space-6);
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.vts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.vts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vts-grid > li {
	display: flex;
}

.vts-grid .vts-card {
	width: 100%;
}

.vts-card__media img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}


.vts-card__meta .vts-icon {
	width: 16px;
	height: 16px;
	color: var(--vts-color-text-muted);
}

/* ==================================================================
 * Områdefilter (vts/omraade-filter) – faner med understregning
 * ================================================================ */
.vts-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--vts-space-5);
	margin: 0 0 var(--vts-space-6);
	padding: 0;
	list-style: none;
	border-bottom: var(--vts-border-width) solid var(--vts-color-border);
}

.vts-filter a {
	display: inline-flex;
	align-items: center;
	gap: var(--vts-space-1);
	min-height: var(--vts-target-min);
	margin-bottom: -1px;
	border-bottom: 3px solid transparent;
	color: var(--vts-ink-950);
	font-weight: var(--vts-weight-semibold);
	text-decoration: none;
}

.vts-filter a:hover {
	border-bottom-color: var(--vts-ink-400);
	color: var(--vts-ink-950);
}

.vts-filter a[aria-current="page"] {
	border-bottom-color: var(--vts-color-brand);
}

.vts-filter__count {
	font-weight: var(--vts-weight-regular);
	color: var(--vts-color-text-muted);
}

/* ==================================================================
 * Områdearkiv: kort i grid (GP Content Template)
 * ================================================================ */
.tax-omraade .site-main {
	display: grid;
	gap: var(--vts-space-7) var(--vts-space-6);
	box-sizing: border-box;
	max-width: var(--vts-container);
	margin: var(--vts-space-7) auto;
	padding-inline: var(--vts-gutter);
}

@media (min-width: 768px) {
	.tax-omraade .site-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.tax-omraade .site-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tax-omraade .site-main > article {
	display: flex;
	margin: 0;
}

.tax-omraade .site-main > :not(article) {
	grid-column: 1 / -1;
}

.tax-omraade .inside-article {
	display: flex;
	width: 100%;
	padding: 0;
	background: none;
}

.tax-omraade .dynamic-content-template {
	display: flex;
	width: 100%;
}

.tax-omraade .vts-card .wp-block-post-featured-image {
	margin: 0;
}

/* ==================================================================
 * Tabel-wrapper (flådetabel)
 * ================================================================ */
.vts-table-wrap {
	overflow-x: auto;
	margin-bottom: var(--vts-space-6);
	border-top: 3px solid var(--vts-ink-950);
	background-color: var(--vts-white);
}

.vts-table-wrap table {
	min-width: 560px;
	margin: 0;
}

.vts-table caption {
	padding: var(--vts-space-4) var(--vts-space-4) 0;
	text-align: left;
	font-weight: var(--vts-weight-semibold);
}

.vts-table tbody tr:last-child > * {
	border-bottom: 0;
}

.vts-table tbody th {
	font-weight: var(--vts-weight-semibold);
}

/* ==================================================================
 * CTA før footer (hook-element)
 * ================================================================ */
/* Rød flade: den tydeligste handling på siden. Hvid på red-700 = 5.85:1. */
.vts-prefooter {
	position: relative;
	overflow: hidden;
	padding-block: var(--vts-section-y);
	background-color: var(--vts-color-primary);
	color: var(--vts-white);
}

/* Skrå, mørkere flade i højre side – logoets kursiv */
.vts-prefooter::after {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	width: 38%;
	background-color: var(--vts-red-800);
	transform: skewX(var(--vts-skew));
	transform-origin: bottom right;
	pointer-events: none;
}

.vts-prefooter .vts-container {
	position: relative;
	z-index: 1;
}

.vts-prefooter h2 {
	margin-bottom: var(--vts-space-3);
	color: var(--vts-white);
}

.vts-prefooter .vts-lead {
	color: var(--vts-white);
}

.vts-prefooter .wp-block-button a.wp-block-button__link:not(.has-background) {
	background-color: var(--vts-ink-950);
	color: var(--vts-white);
}

.vts-prefooter .wp-block-button a.wp-block-button__link:not(.has-background):hover,
.vts-prefooter .wp-block-button a.wp-block-button__link:not(.has-background):focus {
	background-color: var(--vts-white);
	color: var(--vts-ink-950);
}

.vts-prefooter .wp-block-button.is-style-outline a.wp-block-button__link:not(.has-background),
.vts-prefooter .wp-block-button.is-style-outline a.wp-block-button__link:not(.has-background):hover {
	background: none;
	color: var(--vts-white);
	text-decoration-color: var(--vts-white);
}

.vts-prefooter :focus-visible {
	outline-color: var(--vts-white) !important;
}

/* ==================================================================
 * Footer (GP Site Footer-element)
 * ================================================================ */
.vts-footer {
	padding-block: var(--vts-space-8) var(--vts-space-6);
	background-color: var(--vts-ink-950);
	color: var(--vts-ink-400);
	font-size: var(--vts-text-sm);
}

.vts-footer a {
	color: var(--vts-white);
}

.vts-footer a:hover {
	color: var(--vts-red-300);
}

.vts-footer h2 {
	margin-bottom: var(--vts-space-3);
	color: var(--vts-white);
	font-size: var(--vts-text-base);
	letter-spacing: 0;
}

.vts-footer ul {
	display: grid;
	gap: var(--vts-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vts-footer .wp-block-columns {
	gap: var(--vts-space-6);
	margin-bottom: 0;
}

.vts-footer__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vts-space-4);
	margin-top: var(--vts-space-7);
	padding-top: var(--vts-space-5);
	border-top: var(--vts-border-width) solid var(--vts-ink-800);
}

.vts-footer__trust figure {
	margin: 0;
	padding: var(--vts-space-2) var(--vts-space-3);
	background-color: var(--vts-white);
}

.vts-footer__trust img {
	display: block;
	width: auto;
	height: 36px;
}

.vts-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vts-space-2) var(--vts-space-5);
	margin-top: var(--vts-space-5);
}

.vts-footer__bottom p {
	margin: 0;
}

/* ==================================================================
 * Tur: sticky tilbudsboks i højre kolonne (GP Right Sidebar-element)
 * ================================================================ */
.single-tur .site-content {
	max-width: var(--vts-container);
	margin-inline: auto;
}

.single-tur .inside-article {
	padding-right: var(--vts-space-7);
}

.single-tur .is-right-sidebar {
	padding: var(--vts-space-7) var(--vts-gutter) var(--vts-space-7) 0;
}

.single-tur .inside-right-sidebar {
	position: sticky;
	top: var(--vts-space-5);
}

.admin-bar.single-tur .inside-right-sidebar {
	top: calc(32px + var(--vts-space-5));
}

.vts-tilbudsboks {
	padding: var(--vts-space-6) var(--vts-space-5);
	background-color: var(--vts-ink-950);
	color: var(--vts-white);
	border-top: 6px solid var(--vts-color-brand);
}

.vts-tilbudsboks h2 {
	margin-bottom: var(--vts-space-3);
	color: var(--vts-white);
	font-size: var(--vts-text-2xl);
}

.vts-tilbudsboks p {
	color: var(--vts-ink-400);
}

.vts-tilbudsboks .wp-block-buttons {
	margin-block: var(--vts-space-5);
}

.vts-tilbudsboks .wp-block-button,
.vts-tilbudsboks .wp-block-button a.wp-block-button__link:not(.has-background) {
	width: 100%;
	justify-content: center;
}

.vts-tilbudsboks .wp-block-button a.wp-block-button__link:not(.has-background):hover {
	background-color: var(--vts-white);
	color: var(--vts-ink-950);
}

.vts-tilbudsboks__kontakt {
	margin: 0;
	padding-top: var(--vts-space-4);
	border-top: var(--vts-border-width) solid var(--vts-ink-800);
	font-size: var(--vts-text-sm);
	line-height: 1.9;
}

.vts-tilbudsboks__kontakt a {
	color: var(--vts-white);
	font-weight: var(--vts-weight-bold);
}

.vts-tilbudsboks__kontakt a:hover {
	color: var(--vts-red-300);
}

/* Under 1024px: én kolonne; boksen skjules, da samme handling findes i
   hero ("Få et tilbud på turen") og i tilbudssektionen efter indholdet. */
@media (max-width: 1023px) {
	.single-tur .site-content {
		display: block;
	}

	.single-tur .content-area {
		width: 100%;
	}

	.single-tur .inside-article {
		padding-right: var(--vts-gutter);
	}

	.single-tur .is-right-sidebar {
		display: none;
	}
}