.buestad-tjeneste {
	max-width: 960px;
	margin-inline: auto;
}

/* Colours follow the site theme (buestad-site presets), so light and dark both work.
   Fallbacks derive from the inherited text colour when the presets are missing. */
.kalender {
	--kal-ink: var(--wp--preset--color--contrast, currentColor);
	--kal-muted: var(--wp--preset--color--ink-muted, color-mix(in oklab, currentColor 60%, transparent));
	--kal-surface: var(--wp--preset--color--panel, color-mix(in oklab, currentColor 6%, transparent));
	--kal-field: var(--wp--preset--color--surface-field, color-mix(in oklab, currentColor 8%, transparent));
	--kal-line: var(--wp--preset--color--line, color-mix(in oklab, currentColor 25%, transparent));
	--kal-accent: var(--wp--preset--color--accent-cool, #1d4ed8);
	--kal-on-accent: var(--wp--preset--color--on-accent, #fff);
	--kal-warm: var(--wp--preset--color--accent-warm, #f59e0b);
	--kal-red: color-mix(in oklab, #e5484d 70%, var(--kal-ink));
	--kal-hover: color-mix(in oklab, var(--kal-accent) 18%, transparent);
	--kal-stripe: color-mix(in oklab, var(--kal-ink) 6%, transparent);
	--kal-stripe-strong: color-mix(in oklab, var(--kal-ink) 11%, transparent);
	--kal-mark: color-mix(in oklab, var(--kal-warm) 35%, transparent);
	color: var(--kal-ink);
}

.kal-head { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.kal-year { margin: 0; min-width: 4ch; text-align: center; }
.kal-btn { font: inherit; padding: 0.4rem 0.9rem; min-height: 2.5rem; cursor: pointer; color: var(--kal-ink); background: var(--kal-field); border: 1px solid var(--kal-line); border-radius: 6px; }
.kal-btn:hover:not(:disabled) { border-color: var(--kal-accent); }
.kal-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.25rem; margin: 1rem 0; }
.kal-month { border-collapse: collapse; width: 100%; font-size: 0.9rem; border: 1px solid var(--kal-line); table-layout: fixed; background: var(--kal-surface); }
.kal-month thead .kal-wk { width: 2.6rem; }
.kal-month caption { font-weight: 600; text-align: left; padding-bottom: 0.25rem; }
.kal-month th, .kal-month td { text-align: center; padding: 0.2rem; border: 1px solid var(--kal-line); }
/* Calendar grid: header band and every other week row tinted. */
.kal-month thead th { background: linear-gradient(var(--kal-stripe-strong), var(--kal-stripe-strong)), var(--kal-surface); }
.kal-month tbody tr:nth-child(even) td { background: linear-gradient(var(--kal-stripe), var(--kal-stripe)), var(--kal-surface); }
.kal-month tbody td:has(.kal-day) { padding: 0; }
.kal-month .kal-wk { color: var(--kal-muted); font-size: 0.75rem; font-weight: 400; }
.kal-red { color: var(--kal-red); }
.kal-today { background: var(--kal-accent); color: var(--kal-on-accent); border-radius: 4px; font-weight: 700; }
.kal-holidays { padding-left: 1.2rem; }

.kal-year-btn { flex: none; font: inherit; padding: 0.3rem 0.5rem; cursor: pointer; border: 1px solid var(--kal-line); background: var(--kal-field); color: var(--kal-ink); border-radius: 4px; min-width: 4.5ch; }
.kal-years { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.6rem 50%; position: relative; scrollbar-width: thin; scrollbar-color: var(--kal-line) transparent; }
.kal-year-btn:hover { border-color: var(--kal-accent); }
.kal-year-btn.kal-active { background: var(--kal-accent); border-color: var(--kal-accent); color: var(--kal-on-accent); font-weight: 700; }
.kal-btn:disabled { opacity: 0.4; cursor: default; }
.kal-periods { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.kal-chip { font: inherit; padding: 0.45rem 1rem; min-height: 2.5rem; cursor: pointer; border: 1px solid var(--kal-accent); background: transparent; color: var(--kal-ink); border-radius: 999px; }
.kal-chip:hover { background: var(--kal-hover); }
.kal-chip[aria-pressed="true"] { background: var(--kal-accent); color: var(--kal-on-accent); }
.kal-note { color: var(--kal-muted); font-size: 0.85rem; margin: 0.4rem 0; }
.kal-month .kal-day { font: inherit; display: block; width: 100%; padding: 0.4rem 0; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 0; }
.kal-month .kal-day.kal-red { color: var(--kal-red); }
.kal-month .kal-day:hover { background: var(--kal-hover); }
.kal-day:focus-visible, .kal-chip:focus-visible, .kal-year-btn:focus-visible { outline: 2px solid var(--kal-accent); outline-offset: 1px; }
.kal-month .kal-day.kal-marked { background: var(--kal-mark); color: var(--kal-ink); font-weight: 600; }
.kal-month .kal-day.kal-selected { background: var(--kal-warm); color: var(--kal-on-accent); font-weight: 600; }
.kal-month .kal-day.kal-today { background: var(--kal-accent); color: var(--kal-on-accent); }
.kal-month .kal-day.kal-today.kal-selected { box-shadow: inset 0 0 0 2px var(--kal-accent); background: var(--kal-warm); }
.kal-holidays { list-style: none; padding: 0; margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--kal-muted); }
.kal-hd { color: var(--kal-red); font-weight: 600; display: inline-block; min-width: 2.2ch; }
.kal-summary { position: sticky; top: 0.5rem; z-index: 2; background: var(--kal-surface); border: 1px solid var(--kal-line); border-radius: 8px; padding: 0.75rem 1rem; margin: 0.75rem 0; }
.kal-summary h3 { margin: 0 0 0.4rem; }
.kal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.5rem; margin: 0; }
.kal-stats dt { font-size: 0.8rem; color: var(--kal-muted); }
.kal-stats dd { margin: 0; font-size: 1.5rem; font-weight: 700; }
@keyframes kal-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 40% { box-shadow: 0 0 0 5px var(--kal-warm); background: var(--kal-warm); } }
.kal-flash { animation: kal-flash 0.9s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) { .kal-flash { animation: none; } }
@media (max-width: 480px) { .kal-summary { position: static; } }

.kal-ad-slot { grid-column: 1 / -1; min-height: 90px; margin: 1rem 0; }
@media (max-width: 480px) { .kal-ad-slot { min-height: 100px; } }