/*
 * Fælles grundstil for sider med skabelonen "Winejourney – fuld bredde".
 * Svarer til mockup'ens globale stil; sidens egne regler ligger i pages/<slug>.css.
 */

/*
 * Mockup'en bruger browserens standard (content-box); Kadence sætter border-box på *.
 * :where() giver specificitet 0, så elementer med eksplicit box-sizing beholder deres.
 */
:where(.wj-page),
:where(.wj-page) *,
:where(.wj-page) *::before,
:where(.wj-page) *::after {
	box-sizing: content-box;
}

.wj-page {
	background: var(--wj-sand);
	font-family: var(--wj-sans);
	font-size: 16px;
	line-height: normal;
	color: var(--wj-text);
	overflow-x: clip;
}

.wj-page--gaver-og-shopping {
	background: var(--wj-creme);
}

.wj-page a {
	color: var(--wj-bordeaux);
}

.wj-page a:hover {
	color: var(--wj-hover);
}

.wj-page button {
	font: inherit;
	cursor: pointer;
}

.wj-page input,
.wj-page textarea {
	font: inherit;
}

.wj-page input::placeholder,
.wj-page textarea::placeholder {
	color: #9A8579;
}

/* Blokkenes standardafstande neutraliseres; sidens CSS styrer alt. */
.wj-page .wp-block-group,
.wj-page .wp-block-image,
.wj-page .wp-block-buttons,
.wj-page p,
.wj-page h1,
.wj-page h2,
.wj-page h3,
.wj-page h4,
.wj-page h5,
.wj-page h6 {
	margin-block: 0;
}

.wj-page img {
	height: auto;
}

.wj-page svg {
	flex: none;
}

html {
	scroll-behavior: smooth;
}

/* ---------- Varianter (wj-interact.js) ---------- */

.wj-page .wj-h-vgroup {
	display: contents;
}

.wj-page .wj-h-vgroup:not(.is-ready) > .wj-h-variant:not(:first-child),
.wj-page .wj-h-vgroup.is-ready > .wj-h-variant:not(.is-active) {
	display: none !important;
}

.wj-page .wj-h-vg-box > .wj-h-variant.is-active {
	animation: wj-fade .6s ease;
}

@keyframes wj-fade {
	from { opacity: .55; }
	to { opacity: 1; }
}

.wj-page .wj-h-ctl[role="button"] {
	cursor: pointer;
}

.wj-page .wj-h-progress {
	transition: width .3s;
}

/* Gaveæske-valget i temakasserne. */
.wj-page [data-wj-gift-toggle].is-on > span:first-child {
	background: #4A1524 !important;
}

.wj-page [data-wj-gift-toggle].is-on > span:first-child svg {
	opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
	.wj-page .wj-h-vg-box > .wj-h-variant.is-active {
		animation: none;
	}
}

/* Vendekort (Gaming). */
.wj-page .wj-h-flip.is-flipped .wj-h-flip-inner {
	transform: rotateY(180deg) !important;
}

.wj-page .wj-h-flip:focus-visible {
	outline: 2px solid var(--wj-gold);
	outline-offset: 4px;
}