/*
 * Adventio på sajten: kalendern, luckorna och popupen.
 *
 * Varje stil sätter bara variabler. Klasserna (adventio-*) är ett gränssnitt
 * som teman kan bygga vidare på.
 */

/* -------------------------------------------------------------------------
 * Typsnitt
 *
 * Följer med i pluginet (assets/fonts, SIL Open Font License), så att sajten
 * aldrig hämtar något från Google. Namnen har prefixet Adventio, så att de
 * inte krockar med samma typsnitt om temat laddar ett eget.
 * ---------------------------------------------------------------------- */
@font-face {
	font-family: "Adventio Fraunces";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/fraunces-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Adventio Fraunces";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/fraunces-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Adventio Josefin Sans";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/josefin-sans-latin-300-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Adventio Josefin Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/josefin-sans-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Adventio Josefin Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/josefin-sans-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Adventio Fredoka";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/fredoka-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Adventio Fredoka";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/fredoka-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Adventio Fredoka";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/fredoka-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
 * Gemensamt
 * ---------------------------------------------------------------------- */
.adventio {
	--adventio-bg: #0f2e24;
	--adventio-pattern: none;
	--adventio-ink: #f6efdc;
	--adventio-muted: #e6dcc4;
	--adventio-kicker: #d8b25c;
	--adventio-font: inherit;
	--adventio-display: "Adventio Fraunces", Georgia, "Times New Roman", serif;
	--adventio-title-weight: 700;
	--adventio-title-transform: none;
	--adventio-gap: 16px;
	--adventio-radius: 10px;

	--adventio-door-bg: #174a38;
	--adventio-door-border: 1.5px solid rgba(216, 178, 92, 0.55);
	--adventio-door-ink: #d8b25c;
	--adventio-door-shadow: none;
	--adventio-door-weight: 500;

	--adventio-past-bg: #0a2018;
	--adventio-past-border: 1.5px solid rgba(159, 184, 173, 0.35);
	--adventio-past-ink: #9fb8ad;

	--adventio-today-bg: #a3262a;
	--adventio-today-border: 2px solid #d8b25c;
	--adventio-today-ink: #fbf3dc;
	--adventio-today-shadow: 0 0 0 4px rgba(216, 178, 92, 0.25), 0 12px 30px rgba(0, 0, 0, 0.35);

	--adventio-tag-bg: #d8b25c;
	--adventio-tag-ink: #1b2a20;
	--adventio-focus: #f0d48e;

	--adventio-dialog-bg: #fbf7ee;
	--adventio-dialog-ink: #1d2a24;
	--adventio-dialog-muted: #3a4a42;
	--adventio-dialog-accent: #a3262a;
	--adventio-button-bg: #a3262a;
	--adventio-button-ink: #ffffff;

	box-sizing: border-box;
	margin: 0 0 2em;
	padding: clamp(20px, 5vw, 56px);
	border-radius: 16px;
	background-color: var(--adventio-bg);
	background-image: var(--adventio-pattern);
	color: var(--adventio-ink);
	font-family: var(--adventio-font);
}

.adventio *,
.adventio *::before,
.adventio *::after {
	box-sizing: border-box;
}

.adventio[hidden] {
	display: none;
}

/*
 * Kalenderns naturliga bredd ska vara hela det tillgängliga utrymmet. En
 * flex-kolumn med wrap (till exempel en Elementor-behållare med Wrap påslaget)
 * mäter annars kortkodens höjd vid kalenderns naturliga, smala bredd, där
 * luckorna blir små, och klipper kalendern när den sedan ritas i full bredd.
 * Elementet syns inte och tar ingen höjd; max-width hindrar det från att göra
 * sidan bredare.
 */
.adventio::after {
	content: "";
	display: block;
	width: 100vw;
	max-width: 100%;
	height: 0;
}

/* Teman stryker ofta under länkar i innehållet med hög specificitet. */
.adventio a.adventio-lucka,
.adventio a.adventio-lucka:hover,
.adventio a.adventio-button,
.adventio a.adventio-button:hover {
	text-decoration: none !important;
}

.adventio-admin-note {
	margin: 0 0 1.5em;
	padding: 10px 14px;
	border-radius: 8px;
	background: #fff7d6;
	color: #4a3b00;
	font-size: 14px;
}

.adventio-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: clamp(20px, 4vw, 36px);
}

/*
 * Med en bild delas toppen i två lika breda spalter: texten till vänster och
 * bilden till höger. På smala skärmar hamnar bilden under texten.
 */
.adventio-top {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 4vw, 48px);
	align-items: center;
	margin-bottom: clamp(20px, 4vw, 36px);
}

.adventio-top .adventio-head {
	margin-bottom: 0;
}

/* Rubriken delar bredden med bilden och får vara mindre. */
.adventio .adventio-top .adventio-title {
	font-size: clamp(28px, 3.4vw, 48px);
}

.adventio-top__image {
	margin: 0;
}

.adventio .adventio-top__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 440px;
	object-fit: cover;
	border-radius: var(--adventio-radius);
}

@media (max-width: 760px) {
	.adventio-top {
		grid-template-columns: minmax(0, 1fr);
	}

	.adventio .adventio-top .adventio-title {
		font-size: clamp(32px, 6vw, 60px);
	}
}

.adventio-kicker {
	margin: 0;
	color: var(--adventio-kicker);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.adventio .adventio-title {
	margin: 0;
	color: inherit;
	font-size: clamp(32px, 6vw, 60px);
	font-weight: var(--adventio-title-weight);
	line-height: 1.05;
	text-transform: var(--adventio-title-transform);
}

.adventio .adventio-intro p {
	margin: 0 0 0.8em;
	color: inherit;
}

.adventio .adventio-intro p:last-child {
	margin-bottom: 0;
}

.adventio .adventio-intro {
	margin: 0;
	color: var(--adventio-muted);
	font-size: clamp(16px, 2vw, 18px);
}

/* -------------------------------------------------------------------------
 * Luckorna
 * ---------------------------------------------------------------------- */
/*
 * Brytpunkterna är media queries, inte container queries. Sidbyggare med
 * flex-behållare (Elementor, Bricks) mäter kortkodens höjd innan container
 * queries slagit igenom, och klipper då kalendern på mobilen.
 */
.adventio-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--adventio-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 760px) {
	.adventio-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 460px) {
	.adventio-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}
}

.adventio-grid__item {
	margin: 0;
	padding: 0;
}

.adventio .adventio-lucka {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	aspect-ratio: 6 / 5;
	overflow: hidden;
	border: var(--adventio-door-border);
	border-radius: var(--adventio-radius);
	background: var(--adventio-door-bg);
	box-shadow: var(--adventio-door-shadow);
	color: var(--adventio-door-ink);
	text-decoration: none;
	transition: transform 0.15s ease;
}

.adventio .adventio-lucka:hover {
	transform: translateY(-2px);
}

.adventio .adventio-lucka:focus-visible {
	outline: 3px solid var(--adventio-focus);
	outline-offset: 3px;
}

.adventio-lucka__nr {
	position: relative;
	font-size: clamp(26px, 6vw, 48px);
	font-weight: var(--adventio-door-weight);
	line-height: 1;
}

.adventio-lucka__tag {
	position: relative;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.adventio-lucka__tag:empty {
	display: none;
}

.adventio .adventio-lucka.is-past,
.adventio .adventio-lucka.is-closed,
.adventio .adventio-lucka.is-ended {
	border: var(--adventio-past-border);
	background: var(--adventio-past-bg);
	color: var(--adventio-past-ink);
}

.adventio .adventio-lucka.is-past .adventio-lucka__nr,
.adventio .adventio-lucka.is-closed .adventio-lucka__nr,
.adventio .adventio-lucka.is-ended .adventio-lucka__nr {
	font-size: clamp(22px, 5vw, 40px);
}

.adventio .adventio-lucka.is-today {
	border: var(--adventio-today-border);
	background: var(--adventio-today-bg);
	box-shadow: var(--adventio-today-shadow);
	color: var(--adventio-today-ink);
}

.adventio .adventio-lucka.is-today .adventio-lucka__nr {
	font-size: clamp(30px, 7vw, 54px);
	font-weight: 700;
}

.adventio .adventio-lucka.is-today .adventio-lucka__tag {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--adventio-tag-bg);
	color: var(--adventio-tag-ink);
}

@media (max-width: 460px) {
	.adventio-lucka__tag {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Luckan utan JavaScript
 * ---------------------------------------------------------------------- */
.adventio-panel {
	margin-bottom: var(--adventio-gap);
	padding: clamp(20px, 4vw, 40px);
	border-radius: 14px;
	background: var(--adventio-dialog-bg);
	color: var(--adventio-dialog-ink);
}

.adventio-panel__close {
	margin: 1.5em 0 0;
}

.adventio-panel__close a {
	color: var(--adventio-dialog-accent);
}

/* -------------------------------------------------------------------------
 * Popupen
 * ---------------------------------------------------------------------- */
.adventio-dialog {
	width: min(600px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: none;
	border-radius: 16px;
	background: var(--adventio-dialog-bg);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	color: var(--adventio-dialog-ink);
	font-family: var(--adventio-font);
}

.adventio-dialog::backdrop {
	background: rgba(4, 14, 10, 0.74);
}

.adventio-dialog__inner {
	position: relative;
	padding: clamp(28px, 6vw, 44px);
}

.adventio .adventio-dialog__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.adventio .adventio-dialog__close:hover {
	background: rgba(0, 0, 0, 0.06);
}

.adventio .adventio-dialog__close:focus-visible {
	outline: 3px solid var(--adventio-dialog-accent);
	outline-offset: 2px;
}

.adventio-dialog__kicker {
	margin: 0 0 12px;
	color: var(--adventio-dialog-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.adventio .adventio-dialog__title {
	margin: 0 0 16px;
	padding-right: 32px;
	color: inherit;
	font-size: clamp(26px, 5vw, 34px);
	line-height: 1.15;
}

.adventio-dialog__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--adventio-dialog-muted);
	font-size: 17px;
	line-height: 1.6;
}

.adventio-dialog__body p,
.adventio-dialog__text > :first-child {
	margin-top: 0;
}

.adventio-dialog__text > :last-child,
.adventio-dialog__body--message > :last-child {
	margin-bottom: 0;
}

.adventio-dialog__text a {
	color: var(--adventio-dialog-accent);
}

.adventio-dialog__media {
	margin: 0;
}

.adventio-dialog__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.adventio-dialog__media--video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 10px;
	background: #000;
}

.adventio-dialog__media--video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.adventio-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.adventio .adventio-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--adventio-button-bg);
	color: var(--adventio-button-ink);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.adventio .adventio-button:hover {
	filter: brightness(1.08);
}

.adventio .adventio-button--secondary {
	border: 2px solid var(--adventio-button-bg);
	background: transparent;
	color: var(--adventio-button-bg);
}

.adventio .adventio-button:focus-visible {
	outline: 3px solid var(--adventio-dialog-accent);
	outline-offset: 3px;
}

.adventio-dialog__loading,
.adventio-dialog__error {
	margin: 0;
	padding-right: 32px;
	color: var(--adventio-dialog-muted);
}

/* -------------------------------------------------------------------------
 * Stil: Granskog (standardvärdena ovan)
 * ---------------------------------------------------------------------- */
.adventio--granskog {
	--adventio-pattern: radial-gradient(rgba(255, 255, 255, 0.07) 1.5px, transparent 1.5px), radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 46px 46px, 23px 23px;
	background-position: 0 0, 11px 17px;
}

.adventio--granskog .adventio-lucka.is-future {
	outline: 1px dashed rgba(216, 178, 92, 0.35);
	outline-offset: -8px;
}

/* -------------------------------------------------------------------------
 * Stil: Nordisk vinter
 * ---------------------------------------------------------------------- */
.adventio--nordisk {
	--adventio-bg: #eef3f6;
	--adventio-ink: #1d3557;
	--adventio-muted: #4a5f78;
	--adventio-kicker: #b3261e;
	--adventio-display: "Adventio Josefin Sans", "Century Gothic", "Avenir Next", sans-serif;
	--adventio-title-weight: 300;
	--adventio-title-transform: uppercase;
	--adventio-gap: 14px;
	--adventio-radius: 4px;

	--adventio-door-bg: #ffffff;
	--adventio-door-border: 1px solid #d3dee6;
	--adventio-door-ink: #b3261e;
	--adventio-door-shadow: 0 2px 0 #d3dee6;
	--adventio-door-weight: 300;

	--adventio-past-bg: #dde7ee;
	--adventio-past-border: 1px solid #c9d6e0;
	--adventio-past-ink: #4a5f78;

	--adventio-today-bg: #b3261e;
	--adventio-today-border: 1px solid #b3261e;
	--adventio-today-ink: #ffffff;
	--adventio-today-shadow: 0 14px 30px rgba(179, 38, 30, 0.3);

	--adventio-tag-bg: transparent;
	--adventio-tag-ink: #ffffff;
	--adventio-focus: #1d3557;

	--adventio-dialog-bg: #ffffff;
	--adventio-dialog-ink: #1d3557;
	--adventio-dialog-muted: #3d5270;
	--adventio-dialog-accent: #b3261e;
	--adventio-button-bg: #b3261e;
}

.adventio--nordisk .adventio-title {
	letter-spacing: 0.04em;
}

.adventio--nordisk .adventio-kicker {
	letter-spacing: 0.3em;
}

.adventio--nordisk .adventio-dialog__title {
	font-weight: 600;
}

.adventio--pepparkaka .adventio-lucka.is-past .adventio-lucka__nr,
.adventio--pepparkaka .adventio-lucka.is-closed .adventio-lucka__nr,
.adventio--pepparkaka .adventio-lucka.is-ended .adventio-lucka__nr {
	font-weight: 500;
}

.adventio--nordisk .adventio-lucka.is-today .adventio-lucka__tag {
	padding: 0;
	letter-spacing: 0.24em;
}

/* -------------------------------------------------------------------------
 * Stil: Pepparkaka
 * ---------------------------------------------------------------------- */
.adventio--pepparkaka {
	--adventio-bg: #5e361c;
	--adventio-pattern: radial-gradient(rgba(255, 233, 199, 0.08) 2px, transparent 2px);
	--adventio-ink: #fff6e8;
	--adventio-muted: #f1d9bf;
	--adventio-kicker: #ffc9a8;
	--adventio-display: "Adventio Fredoka", "Varela Round", "Trebuchet MS", sans-serif;
	--adventio-gap: 18px;
	--adventio-radius: 22px;

	--adventio-door-bg: #9a5f33;
	--adventio-door-border: 3px dashed #fff6e8;
	--adventio-door-ink: #fff6e8;
	--adventio-door-shadow: 0 0 0 5px #9a5f33, 0 8px 0 5px #74431f;
	--adventio-door-weight: 600;

	--adventio-past-bg: #47280f;
	--adventio-past-border: 3px dashed rgba(233, 200, 164, 0.5);
	--adventio-past-ink: #e9c8a4;

	--adventio-today-bg: #a3221d;
	--adventio-today-border: 4px dashed #fff6e8;
	--adventio-today-ink: #fff6e8;
	--adventio-today-shadow: 0 0 0 6px #a3221d, 0 16px 30px rgba(0, 0, 0, 0.35);

	--adventio-tag-bg: #fff6e8;
	--adventio-tag-ink: #a3221d;
	--adventio-focus: #ffe9c7;

	--adventio-dialog-bg: #fff6e8;
	--adventio-dialog-ink: #4a2a14;
	--adventio-dialog-muted: #5e3a20;
	--adventio-dialog-accent: #a3221d;
	--adventio-button-bg: #a3221d;

	background-size: 32px 32px;
}

.adventio--pepparkaka .adventio-kicker {
	letter-spacing: 0.08em;
	text-transform: none;
	font-size: 18px;
}

.adventio--pepparkaka .adventio-lucka.is-past,
.adventio--pepparkaka .adventio-lucka.is-closed,
.adventio--pepparkaka .adventio-lucka.is-ended {
	box-shadow: 0 0 0 5px #47280f;
}

.adventio--pepparkaka .adventio-lucka.is-today .adventio-lucka__tag {
	letter-spacing: 0.02em;
	text-transform: none;
	font-size: 14px;
}

/* -------------------------------------------------------------------------
 * Stil: Egna bilder
 * ---------------------------------------------------------------------- */
.adventio--egna {
	--adventio-bg: #f4f1ec;
	--adventio-ink: #1f2a26;
	--adventio-muted: #4f5a55;
	--adventio-kicker: #6a5a4a;
	--adventio-gap: 14px;
	--adventio-radius: 12px;

	--adventio-door-bg: #7c8f86;
	--adventio-door-border: none;
	--adventio-door-ink: #1f2a26;
	--adventio-past-bg: #7c8f86;
	--adventio-past-border: none;
	--adventio-past-ink: #1f2a26;
	--adventio-today-bg: #7c8f86;
	--adventio-today-border: none;
	--adventio-today-ink: #ffffff;
	--adventio-today-shadow: 0 0 0 4px #f4f1ec, 0 0 0 7px #a3262a, 0 14px 26px rgba(0, 0, 0, 0.25);
	--adventio-tag-bg: #ffffff;
	--adventio-tag-ink: #1f2a26;
	--adventio-focus: #a3262a;
}

.adventio--egna .adventio-lucka {
	align-items: flex-start;
	justify-content: space-between;
	padding: 10px;
}

.adventio--egna .adventio-grid__item:nth-child(8n+2) .adventio-lucka { background-color: #a4776a; }
.adventio--egna .adventio-grid__item:nth-child(8n+3) .adventio-lucka { background-color: #5f7385; }
.adventio--egna .adventio-grid__item:nth-child(8n+4) .adventio-lucka { background-color: #b39a6e; }
.adventio--egna .adventio-grid__item:nth-child(8n+5) .adventio-lucka { background-color: #6d6a86; }
.adventio--egna .adventio-grid__item:nth-child(8n+6) .adventio-lucka { background-color: #8a9a74; }
.adventio--egna .adventio-grid__item:nth-child(8n+7) .adventio-lucka { background-color: #9c6f7a; }
.adventio--egna .adventio-grid__item:nth-child(8n+8) .adventio-lucka { background-color: #6f8796; }

.adventio--egna .adventio-lucka__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.adventio--egna .adventio-lucka__nr,
.adventio--egna .adventio-lucka.is-past .adventio-lucka__nr,
.adventio--egna .adventio-lucka.is-closed .adventio-lucka__nr,
.adventio--egna .adventio-lucka.is-ended .adventio-lucka__nr,
.adventio--egna .adventio-lucka.is-today .adventio-lucka__nr {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #1f2a26;
	font-size: 22px;
	font-weight: 700;
}

.adventio--egna .adventio-lucka.is-today .adventio-lucka__nr {
	background: #a3262a;
	color: #ffffff;
}

.adventio--egna .adventio-lucka__tag {
	align-self: flex-end;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--adventio-tag-bg);
	color: var(--adventio-tag-ink);
}

.adventio--egna .adventio-lucka.is-past,
.adventio--egna .adventio-lucka.is-closed,
.adventio--egna .adventio-lucka.is-ended {
	filter: grayscale(0.8);
	opacity: 0.6;
}

/* -------------------------------------------------------------------------
 * Typsnitt för rubriker och siffror
 *
 * Stilen sätter --adventio-display, och inställningen Typsnitt kan byta det
 * (adventio--font-*). Med Sajtens typsnitt sätts inget alls, så att temats
 * egna typsnitt för rubriker och brödtext gäller.
 * ---------------------------------------------------------------------- */
.adventio:not(.adventio--font-theme) .adventio-title,
.adventio:not(.adventio--font-theme) .adventio-lucka__nr,
.adventio:not(.adventio--font-theme) .adventio-dialog__title,
.adventio--nordisk:not(.adventio--font-theme) .adventio-kicker,
.adventio--nordisk:not(.adventio--font-theme) .adventio-lucka__tag,
.adventio--nordisk:not(.adventio--font-theme) .adventio-dialog__kicker,
.adventio--pepparkaka:not(.adventio--font-theme) .adventio-kicker,
.adventio--pepparkaka:not(.adventio--font-theme) .adventio-lucka__tag {
	font-family: var(--adventio-display);
}

.adventio--font-theme .adventio-lucka__nr {
	font-family: inherit;
}

/* Valt typsnitt. Ligger efter stilarna, så att valet vinner över stilens eget. */
.adventio--font-fraunces {
	--adventio-display: "Adventio Fraunces", Georgia, "Times New Roman", serif;
}

.adventio--font-josefin {
	--adventio-display: "Adventio Josefin Sans", "Century Gothic", "Avenir Next", sans-serif;
}

.adventio--font-fredoka {
	--adventio-display: "Adventio Fredoka", "Varela Round", "Trebuchet MS", sans-serif;
}

/* -------------------------------------------------------------------------
 * Mindre rörelse
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.adventio .adventio-lucka {
		transition: none;
	}

	.adventio .adventio-lucka:hover {
		transform: none;
	}
}