/*
 * PageOne Julekalender – lågeformer (Design-API v1)
 *
 * Formen sættes uafhængigt af farver og skabeloner med klassen .p1jk-shape-<form> på body.
 * Former uden kant (snebold, stjerne, sekskant, julekugle) får en fyldfarve, hvis lågen
 * ellers er en tom ramme. Skabeloner (.p1jk-set) og billeder (.has-image) beholder deres udseende.
 * Variabler: --p1jk-shape-fill, --p1jk-shape-text.
 */
:root { --p1jk-shape-fill: #f4b942; --p1jk-shape-text: #4a2f00; }

/* Afrundet og rund: kanten bevares */
.p1jk-shape-rounded .p1jk-door { border-radius: 22%; }
.p1jk-shape-circle .p1jk-door { border-radius: 50%; }

/* Snebold: hvid, blød kugle med skygge */
.p1jk-shape-snowball .p1jk-door { border: 0; border-radius: 52% 48% 55% 45% / 48% 54% 46% 52%; box-shadow: 0 7px 10px rgba(30, 60, 90, .28), inset 0 -7px 10px rgba(120, 150, 185, .28); }
.p1jk-shape-snowball .p1jk-door:not(.p1jk-set):not(.has-image) { background: radial-gradient(circle at 36% 30%, #ffffff 0 34%, #eaf1f8 72%, #d3deea 100%); color: #2b3a4a; }
.p1jk-shape-snowball .p1jk-door .p1jk-door-num { text-shadow: none; }
.p1jk-shape-snowball.p1jk-shadow .p1jk-door:not(.p1jk-set):not(.has-image) .p1jk-door-num { text-shadow: none; }

/* Stjerne og sekskant: klippet form, derfor fyldfarve i stedet for ramme */
.p1jk-shape-star .p1jk-door, .p1jk-shape-hexagon .p1jk-door { border: 0; }
.p1jk-shape-star .p1jk-door { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); padding-top: 3%; }
.p1jk-shape-hexagon .p1jk-door { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%); }
.p1jk-shape-star .p1jk-door:not(.p1jk-set):not(.has-image),
.p1jk-shape-hexagon .p1jk-door:not(.p1jk-set):not(.has-image) { background: var(--p1jk-shape-fill); color: var(--p1jk-shape-text); }
.p1jk-shape-star .p1jk-door .p1jk-door-num, .p1jk-shape-hexagon .p1jk-door .p1jk-door-num { text-shadow: none; }
.p1jk-shape-star .p1jk-door:hover, .p1jk-shape-hexagon .p1jk-door:hover { filter: brightness(1.1); }

/* Julekugle: rund med en lille kappe øverst */
.p1jk-shape-bauble .p1jk-door { border: 0; border-radius: 50%; margin-top: 10px; overflow: visible; box-shadow: inset -8px -10px 16px rgba(0, 0, 0, .18), inset 8px 8px 14px rgba(255, 255, 255, .28); }
.p1jk-shape-bauble .p1jk-door::before { content: ""; position: absolute; top: -9px; left: 50%; width: 24%; height: 11px; transform: translateX(-50%); background: #d9c27a; border-radius: 3px 3px 0 0; box-shadow: 0 -4px 0 -1px #b99f55; }
.p1jk-shape-bauble .p1jk-door:not(.p1jk-set):not(.has-image) { background: var(--p1jk-shape-fill); color: var(--p1jk-shape-text); }
.p1jk-shape-bauble .p1jk-door .p1jk-door-num { text-shadow: none; }

/* Dagens låge: markering, der også virker uden kant */
.p1jk-shape-snowball .p1jk-door.is-today, .p1jk-shape-bauble .p1jk-door.is-today { box-shadow: 0 0 0 3px var(--p1jk-today-color), 0 7px 10px rgba(30, 60, 90, .28); }
.p1jk-shape-star .p1jk-door.is-today, .p1jk-shape-hexagon .p1jk-door.is-today { filter: drop-shadow(0 0 0 var(--p1jk-today-color)) brightness(1.12); }
.p1jk-shape-star .p1jk-door.is-done::after, .p1jk-shape-hexagon .p1jk-door.is-done::after { right: 24%; top: 14%; }
.p1jk-shape-star .p1jk-set-stjerner .p1jk-door-num { color: #1a1230; font-size: 2em; }