/*
 * PageOne Julekalender – basis (Design-API v1)
 *
 * Designs må KUN bruge disse klassenavne og variabler. Her er struktur og standardværdier;
 * udseendet ligger i designs/<id>/<version>/style.css.
 *
 * Klasser:   .p1jk-page .p1jk-intro .p1jk-kicker .p1jk-title .p1jk-intro-text .p1jk-logo
 *            .p1jk-button .p1jk-small .p1jk-grid .p1jk-door (.is-future|.is-today|.is-past|.is-done|.has-image)
 *            .p1jk-door-num .p1jk-backdrop .p1jk-panel .p1jk-close .p1jk-panel-body
 *            .p1jk-form .p1jk-field .p1jk-quiz .p1jk-msg .p1jk-testbar
 * Variabler: --p1jk-bg-image --p1jk-bg-color --p1jk-text --p1jk-font --p1jk-font-title
 *            --p1jk-accent --p1jk-frame-color --p1jk-frame-width --p1jk-radius --p1jk-gap
 *            --p1jk-cols (sættes ud fra --p1jk-cols-d/-t/-m) --p1jk-door-ratio --p1jk-door-fill --p1jk-door-fill-hover
 *            --p1jk-today-color --p1jk-panel-bg --p1jk-panel-text --p1jk-panel-width
 *            --p1jk-panel-bg-image --p1jk-panel-top-image/-h/-size --p1jk-panel-bottom-image/-h/-size (panelets pynt)
 */
:root {
	--p1jk-bg-color: #12203a;
	--p1jk-bg-image: none;
	--p1jk-text: #ffffff;
	--p1jk-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--p1jk-font-title: var(--p1jk-font);
	--p1jk-accent: #8aa22e;
	--p1jk-frame-color: #ffffff;
	--p1jk-frame-width: 2px;
	--p1jk-radius: 0;
	--p1jk-gap: 10px;
	--p1jk-door-ratio: 1 / 1;
	--p1jk-door-fill: transparent;
	--p1jk-door-fill-hover: rgba(255, 255, 255, .12);
	--p1jk-today-color: var(--p1jk-accent);
	--p1jk-panel-bg: #f5f2ec;
	--p1jk-panel-text: #1b1b1b;
	--p1jk-panel-width: 440px;
}

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

body.p1jk {
	margin: 0;
	min-height: 100vh;
	color: var(--p1jk-text);
	font-family: var(--p1jk-font);
	background-color: var(--p1jk-bg-color);
	background-image: var(--p1jk-bg-image);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.p1jk-page {
	display: grid;
	gap: 2rem;
	padding: 2rem 1rem;
	max-width: 1280px;
	margin: 0 auto;
	align-items: center;
}
.p1jk-layout-intro-left .p1jk-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 100vh; }
/* Seks eller otte låger pr. række: smallere intro og bredere side, så både tekst og gitter er der plads til. */
.p1jk-cols-6.p1jk-layout-intro-left .p1jk-page,
.p1jk-cols-8.p1jk-layout-intro-left .p1jk-page { max-width: 1680px; grid-template-columns: minmax(220px, .6fr) minmax(0, 1.7fr); }
.p1jk-cols-6.p1jk-layout-intro-left .p1jk-title,
.p1jk-cols-8.p1jk-layout-intro-left .p1jk-title { font-size: clamp(1.8rem, 3.2vw, 3rem); }
.p1jk-layout-grid-only .p1jk-intro { display: none; }
.p1jk-layout-stack-left .p1jk-page { grid-template-columns: minmax(0, min(62%, calc(var(--p1jk-cols-d, 4) * 190px))); justify-content: start; align-items: start; margin-left: clamp(1rem, 5vw, 5rem); margin-right: auto; }
.p1jk-layout-stack-left .p1jk-title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.p1jk-layout-grid-center .p1jk-page { grid-template-columns: minmax(0, calc(var(--p1jk-cols-d, 4) * 190px)); justify-content: center; }
.p1jk-layout-grid-only .p1jk-page { grid-template-columns: minmax(0, 1fr); }
.p1jk-layout-grid-center .p1jk-intro { text-align: center; }

.p1jk-title { font-family: var(--p1jk-font-title); margin: .2em 0 .5em; line-height: 1.05; font-size: clamp(2rem, 5vw, 3.5rem); }
.p1jk-kicker { margin: 0; font-size: 1.4rem; }
.p1jk-intro-text { font-size: 1.1rem; line-height: 1.5; }
.p1jk-logo img { max-width: 220px; height: auto; display: block; }
.p1jk-small { font-size: .85rem; }
.p1jk-small a, .p1jk-intro-text a { color: inherit; }

.p1jk-button {
	display: inline-block; padding: .6em 1.2em; background: var(--p1jk-accent); color: #fff;
	text-decoration: none; font-weight: 700; border-radius: var(--p1jk-radius);
}

/* Gitter */
.p1jk-grid {
	--p1jk-cols: var(--p1jk-cols-d, 4);
	display: grid; grid-template-columns: repeat(var(--p1jk-cols), minmax(0, 1fr)); gap: var(--p1jk-gap);
}
.p1jk-door {
	position: relative; aspect-ratio: var(--p1jk-door-ratio); padding: 0; cursor: pointer;
	font: inherit; color: inherit; background: var(--p1jk-door-fill);
	border: var(--p1jk-frame-width) solid var(--p1jk-frame-color); border-radius: var(--p1jk-radius);
	display: grid; place-items: center;
	transition: background .15s ease, transform .15s ease;
}
.p1jk-door:hover, .p1jk-door:focus-visible { background: var(--p1jk-door-fill-hover); }
.p1jk-door:focus-visible { outline: var(--p1jk-focus-width, 2px) solid var(--p1jk-focus-color, #fff); outline-offset: 2px; }
.p1jk-no-focusring .p1jk-door:focus-visible { outline: none; }
.p1jk-door-num { font-size: clamp(1.4rem, 4vw, 2.4rem); font-weight: 700; font-family: var(--p1jk-font-title); }
.p1jk-door.is-today { border-color: var(--p1jk-today-color); color: var(--p1jk-today-color); }
.p1jk-door.is-done::after { content: "\2713"; position: absolute; right: .35rem; top: .15rem; font-size: 1rem; }
.p1jk-door.has-image { background-image: var(--p1jk-door-image); background-size: cover; background-position: center; }

/* Læsbarhed: svag skygge bag tal, kan slås fra i indstillinger */
.p1jk-shadow .p1jk-door-num { text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 0 12px rgba(0, 0, 0, .5); }

/* Slide-in */
.p1jk-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 90; }
.p1jk-panel {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
	width: min(var(--p1jk-panel-width), 100%); color: var(--p1jk-panel-text);
	background-color: var(--p1jk-panel-bg); background-image: var(--p1jk-panel-bg-image, none), var(--p1jk-panel-gradient, none);
	display: flex; flex-direction: column; overflow: hidden; padding: 0;
	transform: translateX(100%); transition: transform .25s ease;
}
.p1jk-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 2.5rem 1.5rem 1.5rem; }
.p1jk-panel-top, .p1jk-panel-bottom { flex: none; }
.p1jk-panel-top { height: var(--p1jk-panel-top-h, 0px); background-image: var(--p1jk-panel-top-image, none); background-size: var(--p1jk-panel-top-size, auto 100%); background-repeat: var(--p1jk-panel-top-repeat, repeat-x); background-position: center top; }
.p1jk-panel-bottom { height: var(--p1jk-panel-bottom-h, 0px); background-image: var(--p1jk-panel-bottom-image, none); background-size: var(--p1jk-panel-bottom-size, 100% 100%); background-repeat: no-repeat; background-position: center bottom; }
.p1jk-panel.is-open { transform: translateX(0); }
.admin-bar .p1jk-panel { top: 32px; }
@media (max-width: 782px) { .admin-bar .p1jk-panel { top: 46px; } }
.p1jk-panel[hidden], .p1jk-backdrop[hidden] { display: none; }
.p1jk-close { position: absolute; right: calc(.5rem + var(--p1jk-sbw, 0px)); top: .25rem; z-index: 3; background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--p1jk-close-color, inherit); text-shadow: var(--p1jk-close-shadow, none); }
.p1jk-panel-body:focus { outline: none; }
.p1jk-panel img { max-width: 100%; height: auto; }
.p1jk-panel h2 { margin-top: 0; font-family: var(--p1jk-font-title); }
.p1jk-prize { text-align: center; }
.p1jk-panel h2 { text-align: center; }
.p1jk-panel img { display: block; margin: 1rem auto; }

/* Panel som popup i midten (panel_style = modal) */
.p1jk-panel-modal .p1jk-panel {
	top: 50%; left: 50%; right: auto; bottom: auto; width: min(var(--p1jk-panel-width), 92vw); max-height: 90vh;
	border-radius: 10px; transform: translate(-50%, -46%) scale(.97); opacity: 0; transition: transform .2s ease, opacity .2s ease;
}
.p1jk-panel-modal .p1jk-panel.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.p1jk-panel-modal.admin-bar .p1jk-panel { top: 50%; }

/* Formular og quiz */
.p1jk-form { display: grid; gap: .75rem; margin-top: 1rem; }
.p1jk-field input[type="text"], .p1jk-field input[type="email"], .p1jk-field input[type="tel"] {
	padding: .7rem .8rem; font: inherit; border: 1px solid #b9b9b9; border-radius: 4px; width: 100%; background: #fff; color: #1b1b1b;
}
.p1jk-check { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; }
.p1jk-check input { margin-top: .25rem; }
.p1jk-check a { color: inherit; }
.p1jk-form button[type="submit"] {
	padding: .75rem 1.2rem; font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: var(--p1jk-radius);
	background: var(--p1jk-accent); color: #fff; justify-self: start;
}
.p1jk-form button[disabled] { opacity: .6; cursor: progress; }

.p1jk-question { font-weight: 700; font-size: 1.1rem; text-align: center; margin: 1.25rem 0 .9rem; line-height: 1.35; }
.p1jk-answers { display: grid; gap: .6rem; }
.p1jk-answer {
	font: inherit; font-weight: 600; cursor: pointer; padding: .7rem 1rem; text-align: center;
	background: #fff; color: #1d1d1d; border: 2px solid var(--p1jk-accent); border-radius: 999px;
	transition: background .15s ease, color .15s ease;
}
.p1jk-answer:hover:not([disabled]), .p1jk-answer:focus-visible { background: var(--p1jk-accent); color: #fff; }
.p1jk-answer[disabled] { opacity: .65; cursor: progress; }
.p1jk-correct { text-align: center; font-size: 1.4rem; margin: 1.25rem 0 .5rem; font-family: var(--p1jk-font-title); }
.p1jk-info { text-align: center; }
.p1jk-lead { text-align: center; font-weight: 700; color: var(--p1jk-accent); }
.p1jk-msg { padding: .75rem; border-radius: 4px; background: #eef3da; margin-top: .75rem; }
.p1jk-msg.is-error { background: #fbe4e4; }
.p1jk-note { font-size: .85rem; opacity: .85; }
.p1jk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.p1jk-testbar { position: sticky; top: 0; z-index: 80; background: #b26a00; color: #fff; text-align: center; padding: .35rem; font-size: .85rem; }

@media (max-width: 800px) {
	.p1jk-layout-intro-left .p1jk-page,
	.p1jk-cols-6.p1jk-layout-intro-left .p1jk-page,
	.p1jk-cols-8.p1jk-layout-intro-left .p1jk-page { grid-template-columns: minmax(0, 1fr); min-height: 0; max-width: none; }
	.p1jk-layout-grid-center .p1jk-page, .p1jk-layout-stack-left .p1jk-page { grid-template-columns: minmax(0, 1fr); margin-left: auto; }
	.p1jk-grid { --p1jk-cols: var(--p1jk-cols-t, 4); }
}
@media (max-width: 480px) {
	.p1jk-grid { --p1jk-cols: var(--p1jk-cols-m, 3); gap: calc(var(--p1jk-gap) * .6); }
}
@media (prefers-reduced-motion: reduce) {
	.p1jk-panel, .p1jk-door { transition: none; }
}

/* Rabatkode og linkknap i panelet */
.p1jk-code { display: grid; gap: .35rem; justify-items: center; margin: 1.1rem 0; padding: 1rem; border: 2px dashed var(--p1jk-accent); border-radius: 8px; background: rgba(255, 255, 255, .55); }
.p1jk-code-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.p1jk-code-value { font-size: 1.6rem; letter-spacing: .08em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.p1jk-code-copy { font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: var(--p1jk-radius); padding: .5rem 1.1rem; background: var(--p1jk-accent); color: #fff; }
.p1jk-linkrow { text-align: center; }
.p1jk-linkbtn { display: inline-block; padding: .7rem 1.3rem; border-radius: var(--p1jk-radius); background: var(--p1jk-accent); color: #fff; font-weight: 700; text-decoration: none; }
.p1jk-linkbtn:hover { filter: brightness(1.08); }
.p1jk-toast { position: fixed; left: 50%; bottom: 28px; z-index: 100000; transform: translate(-50%, 12px); max-width: calc(100vw - 32px); padding: .7rem 1.2rem; border-radius: 999px; background: #1d1d1d; color: #fff; font-size: .95rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.p1jk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.p1jk-door[data-locked] { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .p1jk-toast { transition: none; } }

/* Baggrundsvideo: fast bag alt andet, med et mørkt slør for læsbarhed */
.p1jk-bgvideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; background: #050a1d; }
.p1jk-bgvideo-veil { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(5, 10, 29, .35), rgba(5, 10, 29, .08) 55%, rgba(5, 10, 29, .3)); }

/* Video i lågen tilpasser sig panelets bredde (ingen vandret scrollbar) */
.p1jk-panel-body { overflow-x: hidden; }
.p1jk-video { width: 100%; max-width: 100%; }
.p1jk-video iframe, .p1jk-video video, .p1jk-video embed, .p1jk-video object { display: block; width: 100% !important; max-width: 100%; height: auto !important; aspect-ratio: 16 / 9; border: 0; }
.p1jk-bgvideo { transition: opacity .7s ease; }
/* Lukkekrydset flytter sig væk fra scrollbaren, kun når der er en (bredden sættes af calendar.js) */

/* Når panelet har pynt øverst, behøver indholdet mindre luft over overskriften */
.p1jk-panel-body { padding-top: calc(2.5rem - min(var(--p1jk-panel-top-h, 0px), 1.5rem)); }

/* Konkurrencevilkår i en dialog */
.p1jk-terms-dialog { border: 0; border-radius: 10px; padding: 0; width: min(640px, 92vw); max-height: 88vh; color: var(--p1jk-panel-text, #1d1d1d); background: var(--p1jk-panel-bg, #fff); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.p1jk-terms-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.p1jk-terms-body { padding: 1.75rem 1.75rem 1.5rem; overflow-y: auto; max-height: 88vh; }
.p1jk-terms-body h2 { margin-top: 0; font-family: var(--p1jk-font-title); }
.p1jk-terms-close { position: absolute; right: .75rem; top: .4rem; z-index: 2; background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: inherit; }

/* Små juridiske links under gridet, ude til højre (dækker aldrig lågerne) */
.p1jk-footer { display: flex; gap: .55rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin: 1.1rem 0 0 auto; padding: .15rem 0; font-size: .8rem; color: inherit; opacity: .85; }
.p1jk-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.p1jk-footer a:hover, .p1jk-footer a:focus-visible { opacity: 1; }
.p1jk-gridwrap { padding-bottom: 4.5rem; }
@media (max-width: 800px) { .p1jk-footer { justify-content: center; margin-left: auto; margin-right: auto; } }