/**
 * Årshjul
 *
 * Geometry is taken from the Revolution Slider layer data so the wheel keeps
 * its original proportions. The slider defined four breakpoints:
 *
 *   desktop  1240 x 900   notebook 1024 x 743
 *   tablet    778 x 565   mobile    480 x 500
 *
 * The first three are the same shape (aspect ratio 1.378) and differ only in
 * scale, so one percentage-based layout covers all of them. Only mobile has a
 * genuinely different shape (0.96) and needs its own block.
 *
 * Percentages below are <layer offset or size> / <canvas dimension>, e.g.
 * Vinter is 500px wide on a 1240px canvas -> 40.323%.
 */

.arshjul {
	--ah-canvas-w: 1240;
	--ah-canvas-h: 900;
	--ah-fade: 0.25s;

	width: 100%;
	max-width: calc(var(--ah-canvas-w) * 1px);
	margin-inline: auto;
}

.arshjul__wheel {
	position: relative;
	width: 100%;
	aspect-ratio: var(--ah-canvas-w) / var(--ah-canvas-h);
}

/* --- Wheel elements ---------------------------------------------------- */

.arshjul__seg,
.arshjul__emblem {
	position: absolute;
	display: block;
	text-decoration: none;
}

/*
 * Two stacked pseudo-elements give a crossfade on hover. ::before carries the
 * resting image (default, or active when the matching section is in view) and
 * ::after fades the hover image in on top. Both are painted at all times, so
 * the hover artwork is already loaded when the pointer arrives.
 */
.arshjul__seg::before,
.arshjul__seg::after,
.arshjul__emblem::before,
.arshjul__emblem::after {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: opacity var(--ah-fade) ease;
}

.arshjul__seg::before,
.arshjul__emblem::before {
	background-image: var(--ah-default);
	opacity: 1;
}

.arshjul__seg::after,
.arshjul__emblem::after {
	background-image: var(--ah-hover);
	opacity: 0;
}

.arshjul__seg.is-active::before {
	background-image: var(--ah-active, var(--ah-default));
}

.arshjul__seg:hover::after,
.arshjul__seg:focus-visible::after,
.arshjul__emblem:hover::after,
.arshjul__emblem:focus-visible::after {
	opacity: 1;
}

.arshjul__seg:focus-visible,
.arshjul__emblem:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
	border-radius: 4px;
}

/* The emblem sits above the segments; a circular hit area keeps its
   transparent corners from stealing clicks from the surrounding petals. */
.arshjul__emblem {
	z-index: 2;
	clip-path: circle(50% at 50% 50%);
}

/* Visually hidden but available to screen readers and as link text. */
.arshjul__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Layout: desktop / notebook / tablet (canvas 1240 x 900) ------------ */

/* 500x211 at y=87, horizontally centred -> left (1240-500)/2 = 370 */
.arshjul__seg--vinter {
	left: 29.839%;
	top: 9.667%;
	width: 40.323%;
	height: 23.444%;
}

/* 500x211 at y=609. The original sits 7px off perfect vertical symmetry
   (609 vs 602); kept as-is to match the current rendering. */
.arshjul__seg--sommer {
	left: 29.839%;
	top: 67.667%;
	width: 40.323%;
	height: 23.444%;
}

/* 207x491 at x=253, vertically centred -> top (900-491)/2 = 204.5 */
.arshjul__seg--host {
	left: 20.403%;
	top: 22.722%;
	width: 16.694%;
	height: 54.556%;
}

/* 207x491 at x=780 (mirrors Høst exactly) */
.arshjul__seg--var {
	left: 62.903%;
	top: 22.722%;
	width: 16.694%;
	height: 54.556%;
}

/* 380x380, centred on both axes */
.arshjul__emblem {
	left: 34.677%;
	top: 28.889%;
	width: 30.645%;
	height: 42.222%;
}

/* --- Layout: mobile (canvas 480 x 500) ---------------------------------- */

@media (max-width: 777px) {
	.arshjul {
		--ah-canvas-w: 480;
		--ah-canvas-h: 500;
	}

	.arshjul__seg--vinter {
		left: 18.75%;
		top: 4.8%;
		width: 62.5%;
		height: 25.2%;
	}

	.arshjul__seg--sommer {
		left: 18.75%;
		top: 65.6%;
		width: 62.5%;
		height: 24.8%;
	}

	.arshjul__seg--host {
		left: 5.208%;
		top: 17.6%;
		width: 25.833%;
		height: 60%;
	}

	.arshjul__seg--var {
		left: 68.958%;
		top: 17.6%;
		width: 25.833%;
		height: 60%;
	}

	.arshjul__emblem {
		left: 26.875%;
		top: 25.6%;
		width: 46.25%;
		height: 44.4%;
	}
}

/* --- Scroll targets ----------------------------------------------------- */

/*
 * Clicks are handled by the theme: GRVE.onePage binds a[href*="#"] and calls
 * GRVE.helpers.smoothScrollTo(), which already subtracts the sticky header
 * height. All four season sections are .grve-section, so they qualify.
 *
 * Deliberately NOT setting `scroll-behavior: smooth` here — the theme animates
 * scrollTop with jQuery, and a native smooth scroll would run against it.
 *
 * scroll-margin-top only affects native scrolling, which is what is left for
 * the cases the theme handler does not cover: landing on the page with a hash
 * already in the URL, or JS failing to load. --ah-header-offset is measured by
 * arshjul.js; the value below is the fallback.
 */
:root {
	--ah-header-offset: 100px;
}

#vinter,
#var,
#sommer,
#host,
#torskefakta,
#hodetilhale,
#arshjulet {
	scroll-margin-top: var(--ah-header-offset);
}