/* Julkalender — module julkalender.php. Buttons carry !important because the kit styles every
   button and link, and would otherwise win over the widget. */

/* A flex item measures its content before it has a width, and aspect-ratio doors then
   measure 0 tall: the widget collapsed to its gaps in a column container. */
.elementor-widget-julkalender {
	width: 100%;
}

/* In a grid container the calendar is the whole grid, not one cell. */
.e-grid > .elementor-widget-julkalender,
.e-grid > .e-con-inner > .elementor-widget-julkalender {
	grid-column: 1 / -1;
}

.jk-calendar {
	--jk-ink: #003A70;
	--jk-accent: #D7007F;
	--jk-glow: 255, 214, 102;
	--jk-radius: 16px;
	--jk-gap: clamp(10px, 2vw, 20px);
	--jk-number-font: "Burbank Big Condensed Bold", "Bariol", sans-serif;
	width: 100%;
}

/* ---------- Luckor ---------- */

.jk-doors {
	display: grid;
	grid-template-columns: repeat(var(--jk-cols, 6), minmax(0, 1fr));
	gap: var(--jk-gap);
}

.jk-door {
	--jk-shadow: 0 4px 0 rgba(0, 58, 112, .18), 0 10px 22px rgba(0, 58, 112, .12);
	--jk-shadow-lit: 0 4px 0 rgba(0, 58, 112, .18), 0 0 26px 6px rgba(var(--jk-glow), .85);
	position: relative;
	aspect-ratio: 1 / 1;
	perspective: 900px;
	border-radius: var(--jk-radius);
}

/* Inside: what an opened door shows. No gradient over it. */
.jk-door__inside {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	border-radius: var(--jk-radius);
	background: var(--jk-door-inside, #fff);
	box-shadow: none;
	overflow: hidden;
	text-align: center;
	transition: box-shadow .2s ease;
}

.jk-door__text {
	position: relative;
	z-index: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 !important;
	font-family: var(--jk-number-font);
	font-size: 1.5rem;
	line-height: 1.05;
	color: var(--jk-ink);
	pointer-events: none;
}

/* Back from the dialog: the door's own content fades in once the card has landed on it. */
.jk-calendar .jk-door.is-landing .jk-door__inside > :not(.jk-door__again) {
	animation: jk-land .2s ease both;
}
@keyframes jk-land {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
}

/* (0,2,0): the kit's image radius rule is .elementor-kit-N img (0,1,1) and would win. */
/* Under the heading: a slot as tall as the door image (64px) for the image or the button, so
   heading + slot is the same height in every door and the headings line up. */
.jk-door__media {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 64px;
	pointer-events: none;
}
/* A door with both an image and a button gets the room it needs. */
.jk-door__media.has-both {
	height: auto;
}
.jk-door__media .jk-door__link {
	pointer-events: auto;
}

.jk-calendar .jk-door__image {
	display: block;
	align-self: stretch;
	flex: 0 1 auto;
	width: 100%;
	min-height: 0;
	max-height: 64px;
	object-fit: cover;
	object-position: center;
	border-radius: calc(var(--jk-radius) - 6px);
	pointer-events: none;
}
.jk-door--image .jk-door__text {
	-webkit-line-clamp: 2;
	flex: 0 0 auto;
}

.jk-calendar .jk-door__link {
	position: relative;
	z-index: 1;
}

/* The whole opened door re-opens the dialog; the link sits above it. */
.jk-calendar .jk-door__again {
	all: unset;
	position: absolute;
	inset: 0;
	z-index: 0;
	cursor: pointer;
	border-radius: var(--jk-radius);
}

/* Opened door: an inset shadow for depth and a grey inset ring, which turns blue on
   hover/focus. Closed doors never show either, so swinging one on hover reveals a plain
   inside and only the yellow shadow. */
.jk-calendar .jk-door--opened .jk-door__inside {
	box-shadow: inset 0 0 0 3px rgba(0, 58, 112, .14), inset 0 8px 18px rgba(0, 58, 112, .18);
}
.jk-calendar .jk-door--opened:is(:hover, :focus-within) .jk-door__inside {
	box-shadow: inset 0 0 0 3px #003A70, inset 0 8px 18px rgba(0, 58, 112, .18);
}

/* The door that is up in the dialog leaves its place empty, so it reads as lifted out. */
.jk-calendar .jk-door.is-lifted {
	visibility: hidden;
}

/* Face: the door itself. */
.jk-calendar .jk-door__face {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--jk-radius);
	background-color: var(--jk-door-bg, #D1E8F6);
	background-image: var(--jk-door-image, none);
	background-size: var(--jk-door-image-size, cover);
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: var(--jk-shadow);
	transform-origin: left center;
	transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), box-shadow .25s ease;
	backface-visibility: hidden;
	cursor: pointer;
	z-index: 2;
}

.jk-door__number {
	font-family: var(--jk-number-font);
	font-size: 3rem;
	line-height: 1;
	color: var(--jk-ink);
	text-shadow: 0 2px 0 rgba(255, 255, 255, .7);
	pointer-events: none;
}

.jk-door__lock {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 18px;
	height: 18px;
	fill: var(--jk-ink);
}

/* Coming doors: quiet, no hover state, a tooltip with the date. */
.jk-calendar .jk-door--locked .jk-door__face {
	opacity: .5;
	cursor: default;
}
/* Nothing behind a coming door, so the half-transparent face shows no content. */
.jk-calendar .jk-door--locked .jk-door__inside {
	visibility: hidden;
}

/* The tooltip sits right on the door's top edge with an arrow into it, so it belongs to
   that door and not the one above. */
.jk-door[data-tip]::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 4px;
	z-index: 6;
	border: 7px solid transparent;
	border-top-color: var(--jk-ink);
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity .15s ease, transform .15s ease;
	pointer-events: none;
}
.jk-door[data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100% - 4px);
	box-shadow: 0 6px 16px rgba(0, 58, 112, .25);
	z-index: 5;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--jk-ink);
	color: #fff;
	font-family: "Bariol", sans-serif;
	font-size: .85rem;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity .15s ease, transform .15s ease;
	pointer-events: none;
}
.jk-door[data-tip]:is(:hover, :focus-within) {
	z-index: 3;
}
.jk-door[data-tip]:is(:hover, :focus-within)::after,
.jk-door[data-tip]:is(:hover, :focus-within)::before {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Openable: hover swings it open a little further and lights it up. */
.jk-calendar :is(.jk-door--openable, .jk-door--today) .jk-door__face:is(:hover, :focus-visible) {
	transform: rotateY(-28deg);
	box-shadow: var(--jk-shadow-lit);
}

/* Today's door, not yet opened: the only one that pulses. */
.jk-calendar .jk-door--today .jk-door__face {
	animation: jk-pulse 2.2s ease-in-out infinite;
}
.jk-calendar .jk-door--today .jk-door__face:is(:hover, :focus-visible) {
	animation: none;
}

@keyframes jk-pulse {
	0%, 100% {
		box-shadow: 0 4px 0 rgba(0, 58, 112, .18), 0 0 14px 2px rgba(var(--jk-glow), .55);
	}
	50% {
		box-shadow: 0 4px 0 rgba(0, 58, 112, .18), 0 0 34px 12px rgba(var(--jk-glow), .9);
	}
}

/* Opened: swung open on its left hinge. */
.jk-calendar .jk-door--opened .jk-door__face {
	transform: rotateY(-108deg);
	box-shadow: none;
	pointer-events: none;
}

/* Empty numbers are decoration. */
.jk-calendar .jk-door__face--static {
	cursor: default;
}

/* ---------- Buttons ---------- */

.jk-calendar .jk-button,
.jk-lock .jk-button {
	display: inline-block !important;
	padding: .75em 1.5em !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--jk-accent, #D7007F) !important;
	color: #fff !important;
	font-family: "Bariol", sans-serif !important;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease, opacity .3s ease;
}
.jk-calendar .jk-button:hover,
.jk-lock .jk-button:hover {
	background: #C10072 !important;
	transform: translateY(-1px);
}
.jk-calendar .jk-button--small {
	padding: .45em 1em !important;
	font-size: .9rem !important;
}
.jk-calendar .jk-button.is-waiting {
	opacity: 0;
	pointer-events: none;
}

/* Buttons in the dialog and on the lock page sit a little apart from the text above them.
   The small button inside a door keeps the door's 8px gap. */
.jk-calendar .jk-reveal__block .jk-button {
	margin-top: 16px !important;
}
.jk-lock .jk-button {
	margin-top: 24px !important;
}

/* ---------- Dialog: grows out of its door ---------- */

.jk-layer {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	padding: 16px;
	box-sizing: border-box;
}

.jk-reveal {
	position: absolute;
	inset: 0;
	background: rgba(0, 58, 112, .55);
	opacity: 0;
	transition: opacity .4s ease;
}
.jk-layer.is-shown .jk-reveal {
	opacity: 1;
}

.jk-reveal__card {
	position: relative;
	width: min(calc(100vw - 32px), calc(100vh - 32px), 480px);
	width: min(calc(100vw - 32px), calc(100dvh - 32px), 480px);
	margin: auto;
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
	container-type: size;
	perspective: 1000px;
	border-radius: 24px;
	background: var(--jk-dialog-bg, #fff);
	color: var(--jk-ink);
	text-align: center;
	box-shadow: 0 24px 60px rgba(0, 58, 112, .35);
	transform-origin: center;
	transition: transform .56s cubic-bezier(.2, .9, .25, 1.05), border-radius .56s cubic-bezier(.2, .9, .25, 1.05);
	outline: none;
}

/* The door itself, grown to dialog size, until it swings open. */
.jk-reveal__face {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	background-color: var(--jk-door-bg, #D1E8F6);
	background-image: var(--jk-door-image, none);
	background-size: var(--jk-door-image-size, cover);
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 4px 0 rgba(0, 58, 112, .18);
	transform-origin: left center;
	backface-visibility: hidden;
	/* Not clipped by the card, so the door visibly swings out towards the viewer. */
	transition: transform .6s cubic-bezier(.55, .05, .3, 1), opacity .15s ease .45s;
}
.jk-reveal__card.is-open .jk-reveal__face {
	transform: rotateY(-105deg);
	opacity: 0;
	pointer-events: none;
}
.jk-reveal__face-number {
	font-family: var(--jk-number-font);
	font-size: 36cqw;
	line-height: 1;
	color: var(--jk-ink);
	text-shadow: 0 2px 0 rgba(255, 255, 255, .7);
}

/* Content: square, centred, scrolls when there is more than fits. */
.jk-reveal__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: safe center;
	overflow-y: auto;
	border-radius: inherit;
}
/* A cover image sits flush at the top and the text follows right under it. */
.jk-reveal__body.is-cover {
	justify-content: flex-start;
}
/* Text block under the image: label, heading, description, button - from the top, so the text
   starts at the same place whether the image is cover or contain. */
.jk-reveal__block {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 28px 28px 28px;
	/* The image is simply there; only the text block fades in, moving up. */
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .24s ease, transform .24s ease;
}
/* No image: room for the close button above the text. */
.jk-reveal__body > .jk-reveal__block:first-child {
	padding-top: 48px;
}
.jk-reveal__card.is-content .jk-reveal__block,
.jk-reveal__card.is-content .jk-reveal__image {
	opacity: 1;
	transform: none;
}

/* Contain: the box shrinks to the picture, so the rounded corners are the picture's. */
.jk-calendar .jk-door__image.is-contain {
	align-self: center;
	width: auto;
	max-width: 100%;
	height: auto;
}

.jk-calendar .jk-reveal__image {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	height: 45cqh;
	margin: 0;
	object-fit: cover;
	object-position: center;
	/* square corners; the scrolling body clips it to the card's radius */
	border-radius: 0;
	/* fades with the text, without moving */
	opacity: 0;
	transition: opacity .24s ease;
}

.jk-calendar .jk-reveal__close {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: var(--jk-ink);
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}
/* A 64px hit area around the 40px circle, about the size of the truck pointer. */
.jk-calendar .jk-reveal__close::after {
	content: "";
	position: absolute;
	inset: -12px;
	border-radius: 50%;
}
.jk-reveal__close svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
}
.jk-reveal__card.is-content .jk-reveal__close {
	opacity: 1;
}
.jk-calendar .jk-reveal__close:focus-visible {
	box-shadow: 0 0 0 3px rgba(var(--jk-glow), .9);
}

/* Hierarchy: small label, heading in the heading font, lead, image, body, button. */
.jk-reveal__number {
	display: block;
	margin: 0 0 6px;
	font-family: "Bariol", sans-serif;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jk-accent);
}

.jk-reveal__title {
	margin: 0 0 4px !important;
	font-family: var(--jk-number-font) !important;
	font-size: 2.75rem !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: var(--jk-ink) !important;
}

.jk-reveal__text {
	margin: 0 0 18px !important;
	font-family: "Bariol", sans-serif;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	white-space: pre-line;
}

.jk-reveal__content {
	margin: 0;
	font-family: "Bariol", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	text-align: center;
	transition: opacity .3s ease;
}
.jk-reveal__content > :first-child { margin-top: 0; }
.jk-reveal__content > :last-child { margin-bottom: 0; }
.jk-reveal__content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
.jk-reveal__content.is-waiting {
	opacity: 0;
}

.jk-caret {
	display: inline-block;
	width: 2px;
	height: 1.1em;
	margin-left: 2px;
	vertical-align: text-bottom;
	background: currentColor;
	animation: jk-blink .8s steps(1) infinite;
}

@keyframes jk-blink { 50% { opacity: 0; } }

/* ---------- Lås ---------- */

html.jk-locked,
html.jk-locked body {
	overflow: hidden !important;
}

.jk-lock[hidden] {
	display: none !important;
}

.jk-lock {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: #D1E8F6;
	background-image: radial-gradient(circle at 50% 30%, #fff 0, #D1E8F6 60%);
}

/* Same place as on the start page: centred, 16px from the top, 80px (64px on phones). */
.jk-lock__logo {
	position: absolute;
	top: 16px;
	left: 50%;
	width: 80px;
	transform: translateX(-50%);
	line-height: 0;
}
.jk-lock__logo img {
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 767px) {
	.jk-lock__logo {
		width: 64px;
	}
}

.jk-lock__box {
	width: min(100%, 440px);
	text-align: center;
	color: #003A70;
}

/* The door itself: same front, image, radius and shadow as in the calendar. */
.jk-lock__number {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 200px;
	margin: 0 0 48px;
	border-radius: 16px;
	background-color: var(--jk-door-bg, #D1E8F6);
	background-image: var(--jk-door-image, none);
	background-size: var(--jk-door-image-size, cover);
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 4px 0 rgba(0, 58, 112, .18), 0 10px 22px rgba(0, 58, 112, .12);
	font-family: "Burbank Big Condensed Bold", sans-serif;
	font-size: 5rem;
	line-height: 1;
	color: #003A70;
	text-shadow: 0 2px 0 rgba(255, 255, 255, .7);
}
.jk-lock__icon {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 24px;
	height: 24px;
	fill: #003A70;
}

.jk-lock__heading {
	margin: 0 0 8px !important;
	font-family: "Burbank Big Condensed Bold", sans-serif !important;
	font-size: 3rem !important;
	line-height: 1 !important;
	color: #003A70 !important;
}

.jk-lock__text {
	margin: 0 !important;
	font-family: "Bariol", sans-serif;
	font-size: 1.125rem;
	line-height: 1.45;
}

.jk-lock-placeholder {
	padding: 12px 16px;
	border: 2px dashed #8DC6E8;
	border-radius: 12px;
	font-family: "Bariol", sans-serif;
	color: #003A70;
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.jk-calendar .jk-door__face,
	.jk-reveal,
	.jk-reveal__card,
	.jk-reveal__face,
	.jk-reveal__block {
		transition: none !important;
	}
	.jk-calendar .jk-door--today .jk-door__face {
		animation: none;
		box-shadow: var(--jk-shadow-lit);
	}
}

/* The kit styles button:hover and :focus at (0,2,1) with border-style: solid and a blue border
   colour. After all: unset the width is the 3px default, so that rule drew a blue border on
   every door on hover. Keep the widget's own surfaces, and no border, at (0,3,0). */
.jk-calendar :is(.jk-door__face, .jk-door__again, .jk-reveal__close, .jk-reset__button):is(:hover, :focus, :active) {
	border: 0;
}
.jk-calendar .jk-door__face:is(:hover, :focus, :active) {
	background-color: var(--jk-door-bg, #D1E8F6);
	color: inherit;
}
.jk-calendar .jk-door__again:is(:hover, :focus, :active) {
	background: transparent;
	color: inherit;
}
.jk-calendar .jk-reveal__close:is(:hover, :focus-visible) {
	background: var(--jk-ink);
	color: #fff;
	transform: scale(1.06);
}
.jk-calendar .jk-reveal__close:is(:focus, :active):not(:hover):not(:focus-visible) {
	background: rgba(255, 255, 255, .85);
	color: var(--jk-ink);
}

/* ---------- Reset ---------- */

.jk-calendar .jk-reset {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	padding-top: clamp(16px, 3vw, 32px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.jk-calendar .jk-reset.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .3s ease, transform .3s ease, visibility 0s;
}

.jk-calendar .jk-reset__button {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .7);
	box-shadow: inset 0 0 0 1px rgba(0, 58, 112, .2);
	font-family: "Bariol", sans-serif;
	font-size: .95rem;
	font-weight: 700;
	color: var(--jk-ink);
	cursor: pointer;
	transition: background-color .15s ease;
}
.jk-calendar .jk-reset__button::before {
	/* Icon from the media library, used as a mask so it takes the button's text colour. */
	content: "";
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask: url("/wp-content/uploads/2026/10/reset.svg") center / contain no-repeat;
	mask: url("/wp-content/uploads/2026/10/reset.svg") center / contain no-repeat;
}
.jk-calendar .jk-reset__button:is(:hover, :focus, :active) {
	background: #fff;
	color: var(--jk-ink);
}
.jk-calendar .jk-reset__button:focus-visible {
	outline: 3px solid var(--jk-accent);
	outline-offset: 2px;
}