/*
 * Spil Dansk Kalenderen — approved redesign (design_handoff_spil_dansk_kalender,
 * turn 2: 2a list / 2b month / 2c single event). High-fidelity: colours, type
 * sizes, weights, spacing and copy are final per that handoff's README and
 * are reproduced here, not guide/15's earlier Højskolesangbog placeholder
 * palette (superseded — see guide.md §15).
 *
 * Two open items called out by the handoff, deliberately not "fixed" here:
 * - Fonts: Timonium Black Italic / Bahnschrift are licensed files the client
 *   still has to supply. `--sd-font-head`/`--sd-font-body` fall back to
 *   Archivo Black / a DIN-like stack, same as the prototype. Once the real
 *   files exist, add `@font-face` rules and change only the two variables
 *   below — nothing else should need to move. Re-check headline line breaks
 *   after the swap: Timonium is narrower than Archivo Black.
 * - Logo: the header is untouched (this plugin only owns the content area),
 *   so the prototype's cropped logo asset was never wired in here at all.
 *
 * Hard rule carried over verbatim: border-radius: 0 everywhere. No shadows.
 */

#sd-filter-kommune{
    display: none;
}

:root {
	--sd-navy: #004077;
	--sd-yellow: #FFCE44;
	--sd-yellow-dark: #F0BC2E;
	--sd-navy-hover: #00558F;
	--sd-cream: #EAEBE1;
	--sd-off-white: #F6F5EF;
	--sd-white: #FFFFFF;
	--sd-body-text: #3C4A58;
	--sd-muted-text: #4A5B6B;
	--sd-caption: #6B7785;
	--sd-caption-2: #5A6876;
	--sd-placeholder: #8B857D;

	--sd-hairline-15: rgba(0, 64, 119, .15);
	--sd-hairline-18: rgba(0, 64, 119, .18);
	--sd-hairline-22: rgba(0, 64, 119, .22);
	--sd-control-border: rgba(0, 64, 119, .3);
	--sd-badge-border: rgba(0, 64, 119, .35);
	--sd-grid-border: rgba(0, 64, 119, .14);
	--sd-navy-55: rgba(0, 64, 119, .55);
	--sd-navy-6: rgba(0, 64, 119, .6);
	--sd-navy-65: rgba(0, 64, 119, .65);
	--sd-navy-7: rgba(0, 64, 119, .7);
	--sd-navy-75: rgba(0, 64, 119, .75);
	--sd-on-navy-body: rgba(255, 255, 255, .8);
	--sd-on-navy-border: rgba(255, 255, 255, .55);

	--sd-font-head: italic 700 46px/1 'Timonium', 'Archivo Black', Arial, sans-serif;
	--sd-font-body: 'Bahnschrift', 'DIN Alternate', Arial, sans-serif;

	--sd-gutter: 20px;
}

#sd-calendar {
	/* Every colour here is explicit, always against a light background —
	   without this, a visitor's OS/browser dark-mode preference can still
	   auto-theme native form controls (button/select) that don't happen to
	   set every one of background/color/border themselves, producing
	   unreadable near-black buttons even though the authored CSS looks
	   correct (found on `.sd-practical-card__secondary button` and
	   `.sd-month-toolbar__nav button`, both missing an explicit
	   `background`, fixed alongside this). */
	color-scheme: light;
	color: var(--sd-body-text);
	font-family: var(--sd-font-body);
	/* Matches the theme's own site-container max-width so calendar pages
	   don't overflow it or sit narrower than the header/footer around them. */
	max-width: 1500px;
	margin: 0 auto;
	padding: 0;
}

#sd-calendar * {
	box-sizing: border-box;
	border-radius: 0 !important;
}

#sd-calendar a {
	/* No `color` here on purpose — same reasoning as the `#sd-calendar
	   button` reset above: this selector's ID makes it more specific than
	   any single class (`.sd-practical-card__cta`, `.sd-underline-link`,
	   ...), so a `color` here would silently win over every component's
	   own explicit color instead of losing to it — which is exactly what
	   made `.sd-practical-card__cta`'s white text render as inherited body
	   text instead. Components needing a color still set one themselves,
	   at their own (lower) specificity, uncontested now. The handful of
	   genuinely bare anchors that want to match their container's text
	   (not a component of their own) get an explicit `color: inherit` at
	   that container's selector instead — see `.sd-single-event__content
	   a`, `.sd-event-row__title a`, `.sd-month-panel__item-title a`
	   below. */
	text-decoration: none;
}

#sd-calendar :focus-visible {
	outline: 2px solid var(--sd-navy);
	outline-offset: 2px;
}

#sd-calendar button {
	/* Strip OS button chrome (font, outset border) without setting
	   background/border here — this selector's `#sd-calendar` ID makes it
	   more specific than any single class below (`.sd-icon-button`,
	   `.sd-load-more`, ...), so if it set them too, every real button
	   component's own background/border would silently lose the cascade
	   to this "reset" instead of layering on top of it. Every visible
	   button below already has a component class supplying its own
	   background and border; nothing depends on inheriting one from here. */
	font-family: var(--sd-font-body);
	appearance: none;
	cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
	#sd-calendar a,
	#sd-calendar button {
		transition: background-color 120ms, color 120ms, border-color 120ms;
	}
}

.sd-page-title {
	/* Kept in the DOM for routes without a hero (e.g. before JS/CSS load,
	   or if a future route skips the hero) but visually replaced by the
	   hero H1 everywhere the hero renders. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Hero band (2a, 2b)                                                      */
/* ---------------------------------------------------------------------- */

.sd-hero {
	background: var(--sd-navy);
	padding: 34px var(--sd-gutter) 28px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: end;
}

.sd-hero--month {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 32px;
	padding: 34px var(--sd-gutter) 26px;
}

/* Top-right corner of the hero, both variants (`HeroActions.jsx`). On the
   list view's grid, spanning both columns as its own first row keeps it
   clear of the title/search below rather than trying to float it in a
   fixed corner over content of varying height. On the month view's flex
   row, `justify-content: space-between` already puts it on the right —
   `align-self` just overrides that row's own bottom-alignment so it sits
   at the top instead. */
.sd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	grid-column: 1 / -1;
	justify-content: flex-end;
}

/* Direct child only — `MonthView.jsx` never renders a hero search form, so
   its `.sd-hero--month` only ever has two children (title, actions) and
   `align-self` alone puts actions at the top right. `view-month.php`'s
   no-JS fallback *does* still have a search form there (pre-existing,
   independent of this change) — see `.sd-hero__side` below for that case,
   which this selector deliberately doesn't match. */
.sd-hero--month > .sd-hero__actions {
	align-self: flex-start;
}

/* SSR-only: stacks the actions row above the hero search form, both
   right-aligned, so `.sd-hero--month` still only has two top-level flex
   children (title, this wrapper) and `justify-content: space-between`
   keeps working the way it already did before this wrapper existed. */
.sd-hero__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}

.sd-hero__eyebrow {
	font: 700 11.5px/1 var(--sd-font-body);
	letter-spacing: .18em;
	color: var(--sd-yellow);
	text-transform: uppercase;
	margin: 0 0 14px;
}

.sd-hero__title {
	margin: 0;
	font: var(--sd-font-head);
	font-size: clamp(30px, 4vw, 46px);
	letter-spacing: -.02em;
	color: var(--sd-white);
	text-transform: uppercase;
	max-width: 16em;
}

.sd-hero__sub {
	margin: 14px 0 0;
	font: 400 15px/1.55 var(--sd-font-body);
	color: var(--sd-on-navy-body);
	max-width: 34em;
}

.sd-hero__search {
	display: flex;
	flex: none;
	min-width: 0;
}

.sd-hero__search input[type="search"] {
	padding: 15px 18px;
	background: var(--sd-white);
	border: none;
	font: 700 13px/1 var(--sd-font-body);
	color: var(--sd-navy);
	width: 280px;
	max-width: 44vw;
	margin-bottom: 0;
}

.sd-hero__search input[type="search"]::placeholder {
	color: var(--sd-placeholder);
}

.sd-hero__search button {
	padding: 15px 22px;
	background: var(--sd-yellow);
	color: var(--sd-navy);
	font: 700 12.5px/1 var(--sd-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sd-hero__search button:hover {
	background: var(--sd-yellow-dark);
}

/* ---------------------------------------------------------------------- */
/* Filter bar (2a) / month toolbar (2b)                                    */
/* ---------------------------------------------------------------------- */

.sd-filter-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px var(--sd-gutter);
	background: var(--sd-cream);
	border-bottom: 1px solid var(--sd-hairline-15);
	position: sticky;
	top: 0;
	z-index: 5;
	overflow-x: auto;
}

.sd-filter-bar__select {
	/* The theme's own global reset (`select{width:100%}`) otherwise wins
	   here — a bare-tag selector, but the only rule that sets `width` at
	   all, so it applied uncontested and stretched each select to fill the
	   whole filter bar, forcing the row's scrollWidth past 3600px on a
	   1500px-wide calendar. `width` on a class selector like this one beats
	   it regardless of source order (class > tag specificity). */
	width: auto;
	padding: 10px 14px;
	background: var(--sd-white);
	border: 1px solid var(--sd-control-border);
	font: 700 12px/1 var(--sd-font-body);
	color: var(--sd-navy);
	text-transform: uppercase;
	min-height: 44px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--sd-navy) 50%), linear-gradient(135deg, var(--sd-navy) 50%, transparent 50%);
	background-position: calc(100% - 16px) center, calc(100% - 11px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 30px;
	flex: none;
	margin-bottom:0;
}

.sd-filter-bar__divider {
	width: 1px;
	height: 26px;
	background: var(--sd-hairline-22);
	flex: none;
}

.sd-chip {
	padding: 10px 14px;
	font: 700 12px/1 var(--sd-font-body);
	text-transform: uppercase;
	color: var(--sd-navy);
	background: var(--sd-white);
	border: 1px solid var(--sd-control-border);
	min-height: 44px;
	white-space: nowrap;
	flex: none;
	display: inline-flex;
	align-items: center;
}

.sd-chip[aria-pressed="true"] {
	background: var(--sd-yellow);
	border-color: var(--sd-yellow);
}

.sd-chip:hover {
	border-color: var(--sd-navy);
}

/* No-JS fallback (`templates/view-list.php`, `view-month.php`): a chip is a
   checkbox's `<label>`, not a real `<button aria-pressed>` — a plain button
   can't carry a multi-select toggle on submit without JS. The hydrated
   Preact view replaces this with the spec's literal button; this variant
   only has to be functionally and visually equivalent. */
.sd-chip-wrap {
	display: inline-flex;
	cursor: pointer;
}

.sd-chip-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.sd-chip-input:checked + .sd-chip {
	background: var(--sd-yellow);
	border-color: var(--sd-yellow);
}

.sd-chip-input:focus-visible + .sd-chip {
	outline: 2px solid var(--sd-navy);
	outline-offset: 2px;
}

.sd-view-switch {
	margin-left: auto;
	display: flex;
	border: 1px solid var(--sd-navy);
	font: 700 11.5px/1 var(--sd-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	flex: none;
}

.sd-view-switch a {
	padding: 10px 16px;
	color: var(--sd-navy);
	display: flex;
	align-items: center;
	min-height: 44px;
}

.sd-view-switch a[aria-current="page"] {
	background: var(--sd-navy);
	color: var(--sd-white);
}

.sd-view-switch a:hover:not([aria-current="page"]) {
	background: var(--sd-hairline-15);
}

/* Month toolbar specifics */

.sd-month-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px var(--sd-gutter);
	background: var(--sd-cream);
	border-bottom: 1px solid var(--sd-hairline-15);
	flex-wrap: wrap;
}

.sd-month-toolbar__label {
	font: var(--sd-font-head);
	font-size: 26px;
	color: var(--sd-navy);
	text-transform: uppercase;
	margin: 0;
	white-space: nowrap;
}

.sd-month-toolbar__nav {
	display: flex;
	gap: 4px;
}

.sd-month-toolbar__nav a,
.sd-month-toolbar__nav button {
	width: 32px;
	height: 32px;
	background: var(--sd-white);
	border: 1px solid var(--sd-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sd-navy);
	font: 700 13px/1 var(--sd-font-body);
}

.sd-month-toolbar__nav a:hover,
.sd-month-toolbar__nav button:hover {
	background: var(--sd-hairline-15);
}

.sd-legend {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	font: 700 11px/1 var(--sd-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sd-navy);
	white-space: nowrap;
}

.sd-legend__swatch {
	width: 12px;
	height: 12px;
	background: var(--sd-yellow);
	flex: none;
}

/* Responsive: filter bar chip row scrolls under ~900px; dropdowns collapse
   into a single control under ~700px per the handoff's responsive rules. */
@media (max-width: 900px) {
	.sd-filter-bar {
		flex-wrap: nowrap;
	}
}

@media (max-width: 700px) {
	.sd-filter-bar__select--secondary {
		display: none;
	}
}

/* ---------------------------------------------------------------------- */
/* Event list, grouped by day (2a)                                        */
/* ---------------------------------------------------------------------- */

.sd-event-days {
	padding: 0 var(--sd-gutter) 36px;
	list-style: none;
	margin: 20px 0 0;
}

.sd-day-group {
	margin: 0;
	padding: 0;
}

.sd-day-group__header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 28px 0 12px;
	margin: 0;
}

.sd-day-group:first-child .sd-day-group__header {
	padding-top: 28px;
}

.sd-day-group__date {
	background: var(--sd-navy);
	color: var(--sd-white);
	padding: 8px 12px;
	font: var(--sd-font-head);
	font-size: 15px;
	text-transform: uppercase;
	white-space: nowrap;
}

.sd-day-group__rule {
	flex: 1 1 auto;
	height: 2px;
	background: var(--sd-yellow);
}

.sd-day-group__count {
	font: 700 11.5px/1 var(--sd-font-body);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sd-navy-6);
	white-space: nowrap;
}

.sd-event-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sd-event-row {
	display: flex;
	gap: 24px;
	padding: 20px 0;
	border-top: 1px solid var(--sd-hairline-18);
	align-items: flex-start;
}

/*.sd-event-row:hover {
	background: var(--sd-off-white);
}*/

.sd-event-row__media-link {
	display: block;
	flex: none;
}

.sd-event-row__image {
	width: 190px;
	height: 126px;
	object-fit: cover;
	background: var(--sd-cream);
	flex: none;
}

.sd-event-row__image-fallback {
	width: 190px;
	height: 126px;
	background: var(--sd-navy);
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 14px;
}

.sd-event-row__fallback-cat {
	font: 700 9.5px/1 var(--sd-font-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sd-yellow);
}

.sd-event-row__fallback-title {
	font: var(--sd-font-head);
	font-size: 26px;
	line-height: .95;
	color: var(--sd-white);
	text-transform: uppercase;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sd-event-row__body {
	flex: 1 1 auto;
	min-width: 0;
}

.sd-event-row__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 10px;
}

.sd-badge {
	font: 700 10px/1 var(--sd-font-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sd-navy);
	padding: 6px 8px;
	display: inline-block;
}

.sd-badge--primary {
	background: var(--sd-yellow);
}

.sd-badge--secondary {
	background: transparent;
	border: 1px solid var(--sd-badge-border);
}

.sd-event-row__title {
	margin: 0 0 8px;
	font: var(--sd-font-head);
	font-size: 21px;
	line-height: 1.16;
	color: var(--sd-navy);
	text-transform: uppercase;
}

.sd-event-row__title a {
	color: inherit;
}

.sd-event-row__meta {
	font: 700 12.5px/1 var(--sd-font-body);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sd-navy-7);
	margin-bottom: 9px;
}

.sd-event-row__excerpt {
	margin: 0;
	font: 400 13.5px/1.5 var(--sd-font-body);
	color: var(--sd-body-text);
	max-width: 46em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sd-event-row__actions {
	flex: none;
	width: 132px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.sd-event-row__price {
	font: var(--sd-font-head);
	font-size: 18px;
	color: var(--sd-navy);
	text-transform: uppercase;
	text-align: right;
}

.sd-icon-buttons {
	display: flex;
	gap: 6px;
}

.sd-icon-button {
	width: 34px;
	height: 34px;
	border: 1px solid var(--sd-navy) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sd-navy);
	font: 400 14px/1 var(--sd-font-body);
	background: var(--sd-white);
	padding:0;
}

.sd-icon-button:hover {
	background: var(--sd-hairline-15);
}

.sd-icon-button[aria-pressed="true"] {
	background: var(--sd-yellow);
	border-color: var(--sd-yellow);
}

.sd-underline-link {
	font: 700 11.5px/1 var(--sd-font-body);
	color: var(--sd-navy);
	border-bottom: 2px solid var(--sd-yellow);
	padding-bottom: 1px;
	white-space: nowrap;
	background: none;
}

.sd-underline-link:hover {
	border-bottom-width: 3px;
}

/* "Føj til kalender" popover (`AddToCalendarLink.jsx`) — the trigger is
   `.sd-underline-link` itself (a `<button>` here, styled identically to the
   `<a>` uses of that class elsewhere); this is just the menu it opens. */
.sd-add-to-cal {
	position: relative;
	display: inline-block;
}

.sd-add-to-cal button{
    padding: 4px;
}

.sd-add-to-cal__menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 10px);
	right: 0;
	min-width: 180px;
	background: var(--sd-white);
	border: 1px solid var(--sd-navy);
	padding: 4px;
}

/* A bordered triangle instead of a shadow — this project's hard rule is
   "no shadows" (see the file header), so the popover needs some other way
   to visually connect back to its trigger. */
.sd-add-to-cal__menu::before {
	content: "";
	position: absolute;
	bottom: 100%;
	right: 13px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-bottom-color: var(--sd-navy);
}

.sd-add-to-cal__menu::after {
	content: "";
	position: absolute;
	bottom: 100%;
	right: 14px;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-bottom-color: var(--sd-white);
}

.sd-add-to-cal__option {
	display: block;
	width: 100%;
	padding: 10px 12px;
	text-align: left;
	font: 700 11.5px/1 var(--sd-font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sd-navy);
	background: var(--sd-white);
	white-space: nowrap;
}

.sd-add-to-cal__option:hover {
	background: var(--sd-off-white);
}

.sd-empty {
	padding: 40px 0;
	font: 700 15px/1.4 var(--sd-font-body);
	color: var(--sd-muted-text);
}

.sd-load-more {
	display: block;
	margin: 1.5rem auto 0;
	min-height: 44px;
	min-width: 44px;
	padding: 12px 28px;
	background: var(--sd-navy);
	color: var(--sd-white);
	font: 700 12.5px/1 var(--sd-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sd-load-more:hover {
	background: var(--sd-navy-hover);
}

.sd-load-more:disabled {
	opacity: .6;
	cursor: default;
}

/* Responsive: image full-width above text under ~640px, action column
   becomes a horizontal row below the body. */
@media (max-width: 640px) {
	.sd-event-row {
		flex-wrap: wrap;
	}

	.sd-event-row__image,
	.sd-event-row__image-fallback {
		width: 100%;
		height: auto;
		aspect-ratio: 190 / 126;
	}

	.sd-event-row__actions {
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* ---------------------------------------------------------------------- */
/* Month view (2b)                                                         */
/* ---------------------------------------------------------------------- */

.sd-month-body {
	display: grid;
	grid-template-columns: 1fr 340px;
}

.sd-month-grid-wrap {
	padding: 22px 26px 28px;
	border-right: 1px solid var(--sd-hairline-15);
}

.sd-month-grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 5px;
	table-layout: fixed;
	margin: -5px;
}

.sd-month-grid caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.sd-month-grid th {
	font: 700 10.5px/1 var(--sd-font-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sd-navy-55);
	text-align: left;
	padding: 0 0 8px;
	border: none;
}

.sd-month-grid td {
	border: none;
	padding: 0;
	vertical-align: top;
}

.sd-month-grid__cell {
	width: 100%;
	min-height: 86px;
	padding: 9px 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--sd-off-white);
	border: 1px solid var(--sd-grid-border);
	text-align: left;
	font-family: var(--sd-font-body);
	color: inherit;
}

a.sd-month-grid__cell,
button.sd-month-grid__cell {
	cursor: pointer;
}

a.sd-month-grid__cell:hover,
button.sd-month-grid__cell:hover {
	border-color: var(--sd-navy);
}

.sd-month-grid__cell--outside {
	background: transparent;
	border-color: transparent;
	opacity: .3;
}

.sd-month-grid__cell--sdu {
	background: var(--sd-yellow);
	border-color: var(--sd-yellow);
}

.sd-month-grid__cell--selected {
	background: var(--sd-navy);
	border-color: var(--sd-navy);
}

.sd-month-grid__day-number {
	font: 700 15px/1 var(--sd-font-body);
	color: var(--sd-navy);
}

.sd-month-grid__cell--selected .sd-month-grid__day-number {
	color: var(--sd-white);
}

.sd-month-grid__note {
	font: 700 10.5px/1.25 var(--sd-font-body);
	text-transform: uppercase;
	color: var(--sd-navy-75);
}

.sd-month-grid__cell--selected .sd-month-grid__note {
	/* Contrast note from the handoff: the count colour must flip with
	   selection, since navy-tinted grey on the navy fill fails AA. */
	color: var(--sd-yellow);
}

.sd-month-grid__events,
.sd-month-grid__more {
	display: none;
}

.sd-month-panel {
	padding: 24px 26px 28px;
	background: var(--sd-cream);
}

.sd-month-panel__title {
	font: var(--sd-font-head);
	font-size: 20px;
	line-height: 1.05;
	color: var(--sd-navy);
	text-transform: uppercase;
	margin: 0 0 6px;
}

.sd-month-panel__count {
	font: 700 11.5px/1 var(--sd-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sd-navy-6);
	margin: 0 0 18px;
}

.sd-month-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sd-month-panel__item {
	padding: 14px 0;
	border-top: 1px solid var(--sd-hairline-22);
}

.sd-month-panel__time {
	display: inline-block;
	background: var(--sd-yellow);
	color: var(--sd-navy);
	padding: 4px 7px;
	font: 700 11px/1 var(--sd-font-body);
	margin-bottom: 8px;
}

.sd-month-panel__item-title {
	font: 700 15px/1.3 var(--sd-font-body);
	color: var(--sd-navy);
	margin-bottom: 5px;
}

.sd-month-panel__item-title a {
	color: inherit;
}

.sd-month-panel__place {
	font: 400 12.5px/1.45 var(--sd-font-body);
	color: var(--sd-caption-2);
}

.sd-month-panel__footer {
	margin-top: 9px;
	display: flex;
	gap: 10px;
	align-items: center;
	font: 700 11.5px/1 var(--sd-font-body);
	color: var(--sd-navy);
}

.sd-month-panel__cta {
	margin-top: 18px;
	padding: 13px;
	text-align: center;
	background: var(--sd-navy);
	color: var(--sd-white);
	font: 700 11.5px/1 var(--sd-font-body);
	letter-spacing: .07em;
	text-transform: uppercase;
	display: block;
	min-height: 44px;
}

.sd-month-panel__cta:hover {
	background: var(--sd-navy-hover);
}

/* Responsive: below ~820px, stack the panel under the grid. */
@media (max-width: 820px) {
	.sd-month-body {
		grid-template-columns: 1fr;
	}

	.sd-month-grid-wrap {
		border-right: none;
		border-bottom: 1px solid var(--sd-hairline-15);
	}
}

@media (max-width: 480px) {
	.sd-month-grid th:nth-child(n),
	.sd-month-grid__day-number {
		font-size: 11px;
	}
}

/* ---------------------------------------------------------------------- */
/* Single event page (2c)                                                  */
/* ---------------------------------------------------------------------- */

.sd-single-event {
	background: var(--sd-white);
}

.sd-single-event__hero {
	position: relative;
	height: 430px;
	overflow: hidden;
	background: var(--sd-navy);
}

.sd-single-event__hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .42;
}

.sd-single-event__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 64, 119, .4) 0%, rgba(0, 64, 119, .72) 45%, rgba(0, 64, 119, .97) 100%);
}

.sd-single-event__hero-content {
	position: absolute;
	left: var(--sd-gutter);
	right: var(--sd-gutter);
	bottom: 36px;
}

.sd-single-event__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.sd-badge--on-navy {
	color: var(--sd-white);
	border: 1px solid var(--sd-on-navy-border);
	background: transparent;
	font: 700 10.5px/1 var(--sd-font-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 7px 10px;
}

.sd-badge--on-navy-primary {
	color: var(--sd-navy);
	background: var(--sd-yellow);
	border: none;
	font: 700 10.5px/1 var(--sd-font-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 7px 10px;
}

.sd-single-event__title {
	margin: 0;
	max-width: 22em;
	font: var(--sd-font-head);
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.04;
	letter-spacing: -.02em;
	color: var(--sd-white);
	text-transform: uppercase;
}

.sd-single-event__meta {
	margin-top: 18px;
	font: 700 14px/1 var(--sd-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sd-yellow);
}

.sd-single-event__body {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 48px;
	padding: 44px var(--sd-gutter) 52px;
	background: var(--sd-white);
}

.sd-single-event__content p {
	margin: 0 0 16px;
	font: 400 15.5px/1.7 var(--sd-font-body);
	color: var(--sd-body-text);
}

/* Prose links from the event's own description (`wp_kses_post` output) —
   the only place a submitter's own free-text content can contain a bare,
   unclassed `<a>`. Underlined and coloured explicitly rather than relying
   on inheriting body text, so it still reads as a link. */
.sd-single-event__content a {
	color: var(--sd-navy);
	text-decoration: underline;
}

/* The event's own description (`the_content`) has no separately-marked
   "lead" paragraph — its first `<p>` gets the lead treatment structurally,
   same visual result as the handoff's hand-authored markup without
   guessing at HTML the field never actually produces. */
.sd-single-event__content > p:first-of-type {
	font: 700 19px/1.5 var(--sd-font-body);
	color: var(--sd-navy);
	margin-bottom: 20px;
}

.sd-section-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
}

.sd-section-heading__label {
	font: var(--sd-font-head);
	font-size: 18px;
	color: var(--sd-navy);
	text-transform: uppercase;
	white-space: nowrap;
}

.sd-section-heading__rule {
	flex: 1 1 auto;
	height: 2px;
	background: var(--sd-yellow);
}

.sd-organizer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font: 400 15px/1.6 var(--sd-font-body);
	color: var(--sd-body-text);
}

.sd-organizer-list a {
	color: var(--sd-navy);
	text-decoration: underline;
}

.sd-venue-block {
	background: var(--sd-cream);
	padding: 20px;
	display: grid;
	grid-template-columns: 1fr 200px;
	gap: 20px;
	align-items: center;
}

.sd-venue-block__name {
	font: 700 16px/1.3 var(--sd-font-body);
	color: var(--sd-navy);
	margin-bottom: 6px;
}

.sd-venue-block__address {
	font: 400 13.5px/1.55 var(--sd-font-body);
	color: var(--sd-caption-2);
}

.sd-venue-block__link {
	margin-top: 12px;
	display: inline-block;
}

.sd-venue-block__map {
	width: 100%;
	height: 120px;
	/* Fallback look, and what shows through if the `<img>` variant
	   (Geoapify static map, `Views\SingleEventView`) fails to load —
	   the plain-text placeholder below uses the same class as a `<div>`. */
	background: repeating-linear-gradient(45deg, #d8d6ca, #d8d6ca 8px, #cfccc0 8px, #cfccc0 16px);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 11px/1 var(--sd-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sd-caption);
	object-fit: cover;
}

.sd-practical-card {
	border: 2px solid var(--sd-navy);
	position: sticky;
	top: 20px;
}

.sd-practical-card__head {
	padding: 20px;
	background: var(--sd-yellow);
}

.sd-practical-card__label {
	font: 700 10.5px/1 var(--sd-font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sd-navy-7);
	margin-bottom: 10px;
}

.sd-practical-card__price {
	font: var(--sd-font-head);
	font-size: 30px;
	color: var(--sd-navy);
	text-transform: uppercase;
}

.sd-practical-card__body {
	padding: 6px 20px 20px;
	background: var(--sd-white);
}

.sd-practical-card__row {
	display: flex;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid var(--sd-hairline-15);
	font: 400 13.5px/1.3 var(--sd-font-body);
	color: var(--sd-caption-2);
	gap: 12px;
}

.sd-practical-card__row:last-of-type {
	border-bottom: none;
}

.sd-practical-card__row strong {
	font-weight: 700;
	color: var(--sd-navy);
	text-align: right;
}

.sd-practical-card__cta {
	margin-top: 12px;
	padding: 16px;
	text-align: center;
	background: var(--sd-navy);
	color: var(--sd-white);
	font: 700 13px/1 var(--sd-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	display: block;
	min-height: 44px;
	width:100%;
}

.sd-practical-card__cta:hover {
	background: var(--sd-navy-hover);
}

/* Positioning context for the popover this button opens
   (`.sd-add-to-cal__menu`, shared with `AddToCalendarLink.jsx`'s compact
   version) — `share.js`'s `wireAddToCalendarButton()` only toggles
   `[hidden]` on it, so this just needs to anchor it under the button. */
.sd-practical-card__add-to-cal {
	position: relative;
}

.sd-practical-card__secondary {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.sd-practical-card__secondary button,
.sd-practical-card__secondary a {
	flex: 1;
	padding: 14px;
	text-align: center;
	background: var(--sd-white);
	border: 1px solid var(--sd-navy);
	font: 700 12.5px/1 var(--sd-font-body);
	color: var(--sd-navy);
	text-transform: uppercase;
	min-height: 44px;
}

.sd-practical-card__secondary button:hover,
.sd-practical-card__secondary a:hover {
	background: var(--sd-hairline-15);
}

.sd-practical-card__secondary button[aria-pressed="true"] {
	background: var(--sd-yellow);
	border-color: var(--sd-yellow);
}

.sd-related {
	margin-top: 18px;
	padding: 20px;
	background: var(--sd-cream);
}

.sd-related__label {
	font: 700 10.5px/1 var(--sd-font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sd-navy-65);
	margin-bottom: 12px;
}

.sd-related__item {
	padding: 11px 0;
	border-top: 1px solid var(--sd-hairline-22);
	font: 700 13.5px/1.35 var(--sd-font-body);
	color: var(--sd-navy);
	display: block;
}

.sd-related__item-meta {
	display: block;
	font: 400 12px/1.4 var(--sd-font-body);
	color: var(--sd-caption-2);
	margin-top: 3px;
}

/* Responsive: single column under ~900px; practical card moves right under
   the hero and stops being sticky (most important content on mobile). */
@media (max-width: 900px) {
	.sd-single-event__body {
		grid-template-columns: 1fr;
	}

	.sd-practical-card {
		position: static;
		order: -1;
	}

	.sd-venue-block {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------- */
/* Status pills / notices — unchanged behaviour, restyled to the palette   */
/* ---------------------------------------------------------------------- */

.sd-status-pill {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font: 700 11px/1 var(--sd-font-body);
	text-transform: uppercase;
	letter-spacing: .05em;
	width: fit-content;
}

.sd-status-pill--non-public {
	color: var(--sd-muted-text);
}

.sd-status-pill--canceled,
.sd-status-pill--postponed {
	color: #B03A2E;
}

.sd-notice {
	padding: .75rem 1rem;
	margin: 0;
	border: 1px solid var(--sd-hairline-15);
	font: 700 13px/1.4 var(--sd-font-body);

}

.sd-notice--canceled,
.sd-notice--postponed {
	color: #B03A2E;
	border-color: #B03A2E;
}

/* ---------------------------------------------------------------------- */
/* Dashboard (unchanged UX, tokens updated only)                          */
/* ---------------------------------------------------------------------- */

.sd-my-events {
	list-style: none;
	margin: 0;
	padding: 0 var(--sd-gutter);
}

.sd-my-events li {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--sd-hairline-18);
	padding: 1rem 0;
}

.sd-my-events button {
	min-height: 44px;
	padding: .6rem 1.2rem;
	border: 1px solid var(--sd-navy);
	background: var(--sd-white);
	color: var(--sd-navy);
	font: 700 12.5px/1 var(--sd-font-body);
	text-transform: uppercase;
	margin-right: .5rem;
}

.sd-my-events button:hover {
	background: var(--sd-hairline-15);
}

.sd-hint {
	display: block;
	margin-top: 7px;
	font: 400 12px/1.5 var(--sd-font-body);
	color: var(--sd-caption);
}

/* ---------------------------------------------------------------------- */
/* Submit event (design handoff 3a)                                       */
/* ---------------------------------------------------------------------- */

.sd-submit-hero {
	padding: 34px var(--sd-gutter) 28px;
	background: var(--sd-navy);
	color: var(--sd-white);
}

.sd-submit-hero__eyebrow {
	font: 700 11.5px/1 var(--sd-font-body);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sd-yellow);
	margin-bottom: 14px;
}

.sd-submit-hero__title {
	margin: 0;
	font: var(--sd-font-head);
	font-size: clamp(30px, 4vw, 46px);
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.sd-submit-hero__intro {
	margin: 14px 0 0;
	max-width: 40em;
	font: 400 15px/1.55 var(--sd-font-body);
	color: rgba(255, 255, 255, .8);
}

.sd-submit-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 48px;
	padding: 40px var(--sd-gutter) 52px;
	align-items: start;
}

/* A form/dashboard's "loading…" and post-submit "success" states
   (Submit.jsx's two forms, Dashboard.jsx) — all were a bare, edge-to-edge
   `<p>` with no breathing room; matches `.sd-submit-layout`'s own outer
   padding so the page doesn't visually shrink once the form/list isn't
   there yet (or not any more). */
.sd-form-status {
	margin: 40px var(--sd-gutter) 52px;
	padding: 48px 40px;
	text-align: center;
	background: var(--sd-cream);
	border: 1px solid var(--sd-hairline-18);
}

.sd-form-status__message {
	margin: 0 0 24px;
	font: 400 16px/1.6 var(--sd-font-body);
	color: var(--sd-body-text);
}

.sd-form-status__message:last-child {
	margin-bottom: 0;
}

.sd-form-status__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.sd-fieldset {
	border: 0;
	margin: 0 0 34px;
	padding: 0;
}

.sd-fieldset__legend {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin-bottom: 20px;
	padding: 0;
	font: var(--sd-font-head);
	font-size: 18px;
	text-transform: uppercase;
	color: var(--sd-navy);
}

.sd-fieldset__legend::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--sd-yellow);
}

.sd-field {
	margin-bottom: 20px;
}

.sd-field--last {
	margin-bottom: 0;
}

.sd-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.sd-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font: 700 11px/1 var(--sd-font-body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sd-navy-7);
}

.sd-required {
	background: var(--sd-yellow);
	color: var(--sd-navy);
	padding: 3px 5px;
	font: 700 9px/1 var(--sd-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sd-input,
.sd-textarea,
.sd-select {
	width: 100%;
	padding: 13px 14px;
	background: var(--sd-white);
	border: 1px solid var(--sd-control-border);
	font: 400 14px/1.3 var(--sd-font-body);
	color: var(--sd-navy);
	appearance: none;
	min-height: 44px;
}

.sd-textarea {
	line-height: 1.6;
	resize: vertical;
	min-height: 128px;
}

.sd-input::placeholder,
.sd-textarea::placeholder {
	color: var(--sd-placeholder);
}

.sd-input:focus-visible,
.sd-textarea:focus-visible,
.sd-select:focus-visible {
	outline: 2px solid var(--sd-navy);
	outline-offset: 1px;
}

.sd-select {
	padding-right: 42px;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--sd-navy) 50%),
		linear-gradient(135deg, var(--sd-navy) 50%, transparent 50%);
	background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.sd-dropzone {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px;
	background: var(--sd-cream);
	border: 1px dashed rgba(0, 64, 119, .45);
	cursor: pointer;
}

.sd-dropzone__title {
	font: 700 14px/1.4 var(--sd-font-body);
	color: var(--sd-navy);
	margin-bottom: 5px;
	margin-right: 5px;
}

.sd-dropzone__text {
	font: 400 12.5px/1.55 var(--sd-font-body);
	color: var(--sd-muted-text);
}

.sd-dropzone input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.sd-btn {
	display: inline-block;
	padding: 15px 22px;
	border: 1px solid var(--sd-navy);
	background: var(--sd-navy);
	color: var(--sd-white);
	font: 700 12.5px/1 var(--sd-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	min-height: 44px;
}

.sd-btn:hover {
	background: var(--sd-navy-hover);
	border-color: var(--sd-navy-hover);
}

.sd-btn--ghost {
	background: transparent;
	color: var(--sd-navy);
}

.sd-btn--ghost:hover {
	background: var(--sd-off-white);
	border-color: var(--sd-navy);
	color: var(--sd-navy);
}

.sd-btn--solid {
	background: var(--sd-navy);
	color: var(--sd-white);
}

.sd-btn--solid:hover {
	background: var(--sd-navy-hover);
	border-color: var(--sd-navy-hover);
	color: var(--sd-white);
}

.sd-btn--on-navy {
	background: transparent;
	border-color: rgba(255, 255, 255, .5);
	color: var(--sd-white);
}

.sd-btn--on-navy:hover {
	background: rgba(255, 255, 255, .12);
	border-color: var(--sd-white);
	color: var(--sd-white);
}

/* Shared prominent-CTA style — not single-event-page-specific despite the
   name (`Dashboard.jsx`/`Submit.jsx` reuse it for "Opret nyt arrangement"
   and the submit form's primary action, both combined with `.sd-btn`);
   kept under its established class name rather than introducing a second
   one for the same look. Declared after `.sd-btn` deliberately — same
   specificity, and this is the one that has to win when both classes are
   present on the same element. */
.sd-single-event__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .75rem 1.5rem;
	background: var(--sd-yellow);
	color: var(--sd-navy);
	font: 700 13px/1 var(--sd-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	border: 1px solid var(--sd-yellow);
}

.sd-single-event__cta:hover {
	background: var(--sd-yellow-dark);
	border-color: var(--sd-yellow-dark);
}

.sd-single-event__cta:disabled {
	opacity: .6;
	cursor: default;
}

/* ---------- Category picker (Select2, design handoff 3a superseded per
   direct request — reuses the copy Ultimate Member already enqueues site-
   wide, see `Views\AssetLoader`, rather than a second widget). Select2's
   own theme ships rounded corners and shadows; every rule below overrides
   that to match the plugin's hard-edged, navy/yellow tokens instead of
   Select2's defaults. Scoped under `#sd-calendar` so nothing here leaks
   into Ultimate Member's own forms elsewhere on the site. ---------- */

#sd-calendar .select2-container {
	width: 100% !important;
}

#sd-calendar .select2-container--default .select2-selection--multiple {
	background: var(--sd-white);
	border: 1px solid var(--sd-control-border);
	min-height: 44px;
	padding: 5px 6px;
}

#sd-calendar .select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: var(--sd-navy);
	outline: 2px solid var(--sd-navy);
	outline-offset: 1px;
}

#sd-calendar .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: var(--sd-yellow);
	border: 1px solid var(--sd-yellow);
	color: var(--sd-navy);
	font: 700 12px/1 var(--sd-font-body);
	text-transform: uppercase;
	padding: 6px 8px;
	margin: 3px;
}

#sd-calendar .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: var(--sd-navy);
	border-right: 1px solid rgba(0, 64, 119, .3);
	margin-right: 6px;
	padding-right: 6px;
}

#sd-calendar .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #B03A2E;
	background: none;
}

#sd-calendar .select2-container--default .select2-search--inline .select2-search__field {
	font: 400 14px/1.3 var(--sd-font-body);
	color: var(--sd-navy);
	margin-top: 6px;
}

#sd-calendar .select2-dropdown {
	background: var(--sd-white);
	border: 1px solid var(--sd-navy);
}

#sd-calendar .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--sd-yellow);
	color: var(--sd-navy);
}

#sd-calendar .select2-container--default .select2-results__option[aria-selected="true"] {
	background: var(--sd-cream);
	color: var(--sd-navy);
}

#sd-calendar .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--sd-control-border);
	font: 400 14px/1.3 var(--sd-font-body);
}

.sd-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.sd-check input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	background: var(--sd-white);
	border: 1px solid var(--sd-navy);
	appearance: none;
	cursor: pointer;
}

.sd-check input:checked {
	background: var(--sd-yellow);
}

.sd-check input:checked::after {
	content: "✓";
	display: block;
	font: 700 12px/16px var(--sd-font-body);
	text-align: center;
	color: var(--sd-navy);
}

.sd-check input:focus-visible {
	outline: 2px solid var(--sd-navy);
	outline-offset: 1px;
}

.sd-check__label {
	font: 700 13px/1.3 var(--sd-font-body);
	color: var(--sd-navy);
}

.sd-check__note {
	display: block;
	margin-top: 4px;
	font: 400 12.5px/1.5 var(--sd-font-body);
	color: var(--sd-caption);
}

.sd-account {
	padding: 16px 18px;
	background: var(--sd-cream);
	margin-bottom: 18px;
}

.sd-account__label {
	display: block;
	margin-bottom: 6px;
	font: 700 10px/1 var(--sd-font-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sd-navy-65);
}

.sd-account__name {
	font: 700 14px/1.3 var(--sd-font-body);
	color: var(--sd-navy);
}

/* Cloudflare Turnstile (guide §11.6, revised) — the widget itself is a
   fixed-size iframe rendered by Cloudflare's own script, this just gives
   it breathing room above the submit bar. */
.sd-turnstile {
	margin: 4px 0 18px;
}

.sd-submit-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding: 22px;
	background: var(--sd-navy);
}

.sd-submit-bar__note {
	flex: 1 1 220px;
	font: 400 12.5px/1.5 var(--sd-font-body);
	color: rgba(255, 255, 255, .75);
	margin-bottom:0;
}

/* ---------- Aside: live preview + checklist ---------- */

.sd-aside {
	position: sticky;
	top: 20px;
	display: grid;
	gap: 18px;
}

.sd-preview {
	border: 2px solid var(--sd-navy);
}

.sd-preview__head {
	padding: 14px 18px;
	background: var(--sd-navy);
	font: 700 10.5px/1 var(--sd-font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sd-yellow);
}

.sd-preview__body {
	padding: 18px;
	background: var(--sd-white);
}

/* Live preview, shaped like the real single-event page it becomes
   (`templates/view-single.php`'s hero + lead + Pris + STED), scaled down
   for a 360px sidebar — same tokens, same relationships, smaller type. */
.sd-preview__hero {
	padding: 18px;
	background: var(--sd-navy);
}

.sd-preview__hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.sd-preview__hero-badge {
	padding: 5px 7px;
	font: 700 9px/1 var(--sd-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sd-white);
	border: 1px solid rgba(255, 255, 255, .55);
}

.sd-preview__hero-badge--primary {
	color: var(--sd-navy);
	background: var(--sd-yellow);
	border-color: var(--sd-yellow);
}

.sd-preview__hero-title {
	font: var(--sd-font-head);
	font-size: 20px;
	line-height: 1.05;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--sd-white);
	margin-bottom: 8px;
}

.sd-preview__hero-meta {
	font: 700 10.5px/1.4 var(--sd-font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sd-yellow);
}

.sd-preview__lead {
	margin: 0 0 10px;
	font: 700 13px/1.5 var(--sd-font-body);
	color: var(--sd-navy);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.sd-preview__price-line {
	margin: 0 0 16px;
	font: 400 12.5px/1.4 var(--sd-font-body);
	color: var(--sd-caption-2);
}

.sd-preview__price-line strong {
	color: var(--sd-navy);
}

.sd-preview__sted-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font: var(--sd-font-head);
	font-size: 13px;
	text-transform: uppercase;
	color: var(--sd-navy);
}

.sd-preview__sted-rule {
	flex: 1 1 auto;
	height: 2px;
	background: var(--sd-yellow);
}

.sd-preview__venue {
	background: var(--sd-cream);
	padding: 14px;
}

.sd-preview__venue-name {
	font: 700 13.5px/1.3 var(--sd-font-body);
	color: var(--sd-navy);
	margin-bottom: 4px;
}

.sd-preview__venue-address {
	font: 400 12px/1.5 var(--sd-font-body);
	color: var(--sd-caption-2);
}

.sd-preview__venue-link {
	margin-top: 8px;
	font: 700 11.5px/1 var(--sd-font-body);
	color: var(--sd-navy);
	border-bottom: 2px solid var(--sd-yellow);
	display: inline-block;
	width: fit-content;
}

.sd-preview__foot {
	margin: 0;
	font: 400 12px/1.5 var(--sd-font-body);
	color: var(--sd-caption);
}

.sd-panel {
	padding: 20px;
	background: var(--sd-cream);
}

.sd-panel--outline {
	background: transparent;
	border: 1px solid var(--sd-control-border);
}

.sd-panel__head {
	margin-bottom: 14px;
	font: 700 10.5px/1 var(--sd-font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sd-navy-65);
}

.sd-panel__text {
	font: 400 13px/1.6 var(--sd-font-body);
	color: var(--sd-body-text);
}

.sd-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sd-checklist li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-top: 1px solid var(--sd-hairline-22);
	font: 700 13px/1.3 var(--sd-font-body);
	color: var(--sd-navy-75);
}

.sd-checklist__box {
	flex: none;
	width: 18px;
	height: 18px;
	background: var(--sd-white);
	border: 1px solid var(--sd-navy);
	font: 700 12px/16px var(--sd-font-body);
	text-align: center;
	color: var(--sd-navy);
}

.sd-checklist li[data-done="true"] {
	color: var(--sd-navy);
}

.sd-checklist li[data-done="true"] .sd-checklist__box {
	background: var(--sd-yellow);
}

.sd-checklist li[data-done="true"] .sd-checklist__box::after {
	content: "✓";
}

/* Responsive (design handoff 3a) */
@media (max-width: 900px) {
	.sd-submit-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.sd-aside {
		position: static;
	}
}

@media (max-width: 640px) {
	.sd-grid-2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.sd-dropzone {
		flex-direction: column;
		align-items: flex-start;
	}

	.sd-btn,
	.sd-single-event__cta {
		width: 100%;
		text-align: center;
		padding-block: 16px;
	}
}

/* ---------------------------------------------------------------------- */
/* Mine sider — shared toolbar/tabs (design handoff: my-pages.html)        */
/* ---------------------------------------------------------------------- */

.sd-submit-hero--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
	align-items: end;
}

.sd-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px var(--sd-gutter);
	background: var(--sd-cream);
	border-bottom: 1px solid var(--sd-hairline-15);
}

.sd-toolbar__count {
	font: 700 11.5px/1 var(--sd-font-body);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sd-navy);
}

.sd-toolbar__divider {
	width: 1px;
	height: 26px;
	background: var(--sd-hairline-22);
}

.sd-toolbar__end {
	margin-left: auto;
}

/* Keeps the sort control (label + select) inline with the filter buttons
   rather than wrapping onto its own full-width row. Needs an explicit
   `width: auto` since the theme's global `label { width: 100% }` (style.css)
   would otherwise become this flex item's `flex-basis` (auto defers to
   `width` when it isn't itself auto) and stretch it across the whole line. */
.sd-toolbar__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	width: auto;
	margin-bottom: 0;
}

.sd-toolbar__sort-label {
	font: 700 11.5px/1 var(--sd-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sd-navy);
	white-space: nowrap;
}

.sd-toolbar__sort .sd-select {
	width: auto;
	min-width: 160px;
	margin-bottom: 0;
}

.sd-toolbar__legend {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 700 11px/1 var(--sd-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sd-navy);
}

.sd-toolbar__legend::before {
	content: "";
	width: 12px;
	height: 12px;
	background: var(--sd-yellow);
}

.sd-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sd-tab {
	padding: 10px 16px;
	background: var(--sd-white);
	border: 1px solid var(--sd-navy);
	color: var(--sd-navy);
	font: 700 11.5px/1 var(--sd-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	min-height: 44px;
}

.sd-tab:hover {
	background: var(--sd-off-white);
}

.sd-tab[aria-current="true"] {
	background: var(--sd-navy);
	color: var(--sd-white);
}

.sd-tab[aria-current="true"]:hover {
	background: var(--sd-navy-hover);
}

/* Card/row titles are the only bare `<a>`s here that need an explicit
   color — see the `#sd-calendar a` reset above for why nothing broader
   than this is safe to add. */
.sd-fav__title a,
.sd-my-row__title a {
	color: var(--sd-navy);
	text-decoration: none;
}

.sd-fav__title a:hover,
.sd-my-row__title a:hover {
	color: var(--sd-navy-hover);
}

/* ---------------------------------------------------------------------- */
/* Gemte arrangementer (favourites grid)                                   */
/* ---------------------------------------------------------------------- */

/* Typographic fallback poster (also the favourites-card equivalent of
   `.sd-event-row__image-fallback` — same idea, this card is just taller). */
.sd-poster {
	height: 170px;
	overflow: hidden;
	padding: 16px;
	background: var(--sd-navy);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.sd-poster__kicker {
	flex: none;
	align-self: flex-start;
	max-width: calc(100% - 46px);
	font: 700 9.5px/1 var(--sd-font-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sd-yellow);
}

.sd-poster__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font: var(--sd-font-head);
	font-size: 26px;
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--sd-white);
}

.sd-fav-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	padding: 28px var(--sd-gutter) 44px;
}

.sd-fav {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(0, 64, 119, .25);
	background: var(--sd-white);
}

.sd-fav__media {
	position: relative;
}

.sd-fav__image {
	height: 170px;
	background: var(--sd-cream) center / cover no-repeat;
}

/* The heart is the remove control here — every card in this grid is
   already saved, so it's always filled. */
.sd-fav__heart {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sd-yellow);
	border: 1px solid var(--sd-navy);
	font: 400 15px/1 var(--sd-font-body);
	color: var(--sd-navy);
	cursor: pointer;
}

.sd-fav__heart:hover {
	background: var(--sd-yellow-dark);
}

.sd-fav__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
}

.sd-fav__title {
	margin: 0;
	font: var(--sd-font-head);
	font-size: 20px;
	line-height: 1.14;
	text-transform: uppercase;
	color: var(--sd-navy);
}

.sd-fav__when {
	font: 700 12px/1.4 var(--sd-font-body);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sd-navy-7);
}

.sd-fav__venue {
	font: 400 13px/1.5 var(--sd-font-body);
	color: var(--sd-muted-text);
}

.sd-fav__foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--sd-hairline-18);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.sd-fav__price {
	font: var(--sd-font-head);
	font-size: 17px;
	text-transform: uppercase;
	color: var(--sd-navy);
}

.sd-empty {
	margin: 0 var(--sd-gutter) 44px;
	padding: 52px 40px;
	text-align: center;
	background: var(--sd-cream);
	border: 1px dashed rgba(0, 64, 119, .45);
}

.sd-empty__title {
	margin: 0 0 10px;
	font: var(--sd-font-head);
	font-size: 26px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--sd-navy);
}

.sd-empty__text {
	margin: 0 auto 20px;
	max-width: 30em;
	font: 400 14px/1.6 var(--sd-font-body);
	color: var(--sd-muted-text);
}

/* ---------------------------------------------------------------------- */
/* Dine arrangementer (dashboard rows)                                     */
/* ---------------------------------------------------------------------- */

.sd-my-list {
	list-style: none;
	margin: 0;
	padding: 8px var(--sd-gutter) 0;
	background:white;
}

.sd-my-row {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--sd-hairline-18);
}

.sd-my-date {
	flex: none;
	width: 86px;
	padding: 10px;
	text-align: center;
	background: var(--sd-cream);
}

.sd-my-date--draft {
	background: transparent;
	border: 1px dashed rgba(0, 64, 119, .4);
}

.sd-my-date__mon,
.sd-my-date__year {
	font: 700 10px/1 var(--sd-font-body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sd-navy-65);
}

.sd-my-date__day {
	font: var(--sd-font-head);
	font-size: 24px;
	color: var(--sd-navy);
	margin: 5px 0;
}

.sd-my-row__main {
	flex: 1;
	min-width: 0;
}

.sd-my-row__title {
	margin: 0 0 7px;
	font: var(--sd-font-head);
	font-size: 19px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--sd-navy);
}

.sd-my-row[data-state="draft"] .sd-my-row__title {
	color: var(--sd-navy-6);
}

.sd-my-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.sd-my-row__venue {
	font: 400 12.5px/1.4 var(--sd-font-body);
	color: var(--sd-muted-text);
}

.sd-my-row__note {
	margin: 7px 0 0;
	font: 400 12.5px/1.5 var(--sd-font-body);
	color: var(--sd-caption);
}

.sd-my-row__actions {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.sd-status {
	padding: 6px 8px;
	white-space: nowrap;
	font: 700 10px/1 var(--sd-font-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sd-navy);
	background: transparent;
	border: 1px solid var(--sd-badge-border);
}

.sd-status--draft {
	border-style: dashed;
	color: var(--sd-navy-75);
}

.sd-status--pending {
	background: var(--sd-yellow);
	border-color: var(--sd-yellow);
}

.sd-status--live {
	border-color: var(--sd-badge-border);
}

.sd-status--done {
	color: var(--sd-navy-75);
}

.sd-my-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px var(--sd-gutter) 44px;
}

.sd-my-foot__note {
	font: 400 12.5px/1.5 var(--sd-font-body);
	color: var(--sd-caption);
}

/* ---------- Responsive (Mine sider) ---------- */
@media (max-width: 1000px) {
	.sd-fav-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.sd-submit-hero--split {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.sd-my-row {
		flex-wrap: wrap;
		gap: 14px;
	}

	.sd-my-row__main {
		flex: 1 1 100%;
		order: 2;
	}

	.sd-my-row__actions {
		flex: 1 1 100%;
		order: 3;
	}

	.sd-my-row__actions .sd-btn {
		flex: 1;
		text-align: center;
		padding-block: 15px;
	}
}

@media (max-width: 640px) {
	.sd-fav-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sd-toolbar__end {
		margin-left: 0;
	}

	.sd-toolbar__sort {
		flex: 1 1 100%;
	}

	.sd-toolbar__sort .sd-select {
		flex: 1;
	}
}