/*
 * Imena calendar.
 *
 * Colours come from the site's theme tokens (Fast: assets/sass/libs/_tokens.scss),
 * so the calendar follows the site's light / dark mode - automatic or the
 * visitor's choice - and its accent, and looks like the site's own panels.
 * On a theme without those tokens it falls back to its own palette, which
 * follows the device setting (--imena-auto-*). A shortcode pinned to light
 * or dark in the settings (data-theme) uses fixed palettes, at the end.
 */
:root {
	--imena-auto-card: #ffffff;
	--imena-auto-soft: #f6f9ff;
	--imena-auto-border: #dfe7ef;
	--imena-auto-text: #111827;
	--imena-auto-muted: #6b7280;
	--imena-auto-accent: #0a84ff;
}

@media (prefers-color-scheme: dark) {
	:root {
		--imena-auto-card: #062038;
		--imena-auto-soft: #031428;
		--imena-auto-border: #143040;
		--imena-auto-text: #e6eef8;
		--imena-auto-muted: #9aa4b2;
		--imena-auto-accent: #3aa0ff;
	}
}

.imena-calendar {
	--imena-card: var(--panel-bg-raised, var(--imena-auto-card));
	--imena-soft: var(--imena-auto-soft);
	/* A faint tint of the text colour: lighter than the panel in dark mode, darker in light. */
	--imena-soft: color-mix(in srgb, var(--text, var(--imena-auto-text)) 5%, transparent);
	--imena-border: var(--border, var(--imena-auto-border));
	--imena-edge: var(--panel-edge, var(--imena-auto-border));
	--imena-text: var(--text, var(--imena-auto-text));
	--imena-strong: var(--text-bold, var(--imena-auto-text));
	--imena-muted: var(--text-light, var(--imena-auto-muted));
	--imena-accent: var(--accent, var(--imena-auto-accent));
	--imena-accent-text: var(--accent-text, var(--imena-accent));

	background: var(--imena-card);
	border: 1px solid var(--imena-edge);
	border-radius: var(--panel-radius, 1rem);
	box-shadow: var(--panel-lip, 0 0 0 transparent), var(--panel-lift-1, 0 6px 18px rgba(2, 6, 23, 0.08));
	box-sizing: border-box;
	color: var(--imena-text);
	margin: 0 auto 2rem;
	max-width: 820px;
	padding: clamp(0.75rem, 2.5vw, 1.5rem);
}

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

.imena-calendar-header {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.imena-calendar-header .imena-month-year {
	color: var(--imena-strong);
	flex: 1 1 0;
	font-size: 1.15rem;
	font-weight: 700;
	min-width: 0;
	order: 0;
	text-transform: capitalize;
}

/* Round buttons, like the site's quick links (.letter-nav). */
.imena-calendar .imena-calendar-header button {
	align-items: center;
	background: transparent;
	border: 1px solid var(--imena-edge);
	border-radius: 999px;
	box-shadow: none;
	color: var(--imena-muted) !important;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 700;
	height: 2.5rem;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1;
	min-width: 2.5rem;
	padding: 0 0.9rem;
	text-transform: none;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.imena-calendar .imena-calendar-header .imena-prev,
.imena-calendar .imena-calendar-header .imena-next {
	font-size: 1.4rem;
	padding: 0;
}

.imena-calendar .imena-calendar-header .imena-prev { order: 1; }
.imena-calendar .imena-calendar-header .imena-today { order: 2; }
.imena-calendar .imena-calendar-header .imena-next { order: 3; }

.imena-calendar .imena-calendar-header button:hover,
.imena-calendar .imena-calendar-header button:focus-visible {
	background: color-mix(in srgb, var(--imena-accent) 8%, transparent);
	border-color: color-mix(in srgb, var(--imena-accent) 45%, transparent);
	color: var(--imena-accent-text) !important;
}

.imena-calendar .imena-calendar-header button:disabled {
	cursor: default;
	opacity: 0.4;
}

.imena-calendar-table {
	border-collapse: separate;
	border-spacing: 4px;
	margin: 0 -4px;
	table-layout: fixed;
	width: calc(100% + 8px);
}

/* The theme stripes and borders table rows; the calendar's cells draw themselves. */
.imena-calendar .imena-calendar-table tr,
.imena-calendar .imena-calendar-table tbody tr:nth-child(2n + 1) {
	background: transparent;
	border: 0;
}

.imena-calendar-table thead th {
	background: transparent;
	border: 0;
	color: var(--imena-muted);
	font-size: 0.8rem;
	font-weight: 700;
	padding: 0.25rem 0;
	text-align: center;
	text-transform: uppercase;
}

.imena-calendar-body td {
	background: var(--imena-soft);
	border: 1px solid transparent;
	border-radius: 0.75rem;
	height: 4.25rem;
	padding: 0.45rem;
	position: relative;
	text-align: left;
	vertical-align: top;
}

.imena-calendar-table td.empty {
	background: transparent;
}

.imena-calendar-table .day-number {
	color: var(--imena-strong);
	font-size: 0.95rem;
	font-weight: 700;
}

/* A day with entries: tinted with the site's accent, and a control. */
.imena-calendar-body td.has-events {
	background: color-mix(in srgb, var(--imena-accent) 18%, transparent);
	cursor: pointer;
}

.imena-calendar-body td.has-events:hover,
.imena-calendar-body td.has-events:focus-visible {
	border-color: color-mix(in srgb, var(--imena-accent) 55%, transparent);
	outline: none;
}

.imena-calendar-body td.today {
	border-color: var(--imena-accent);
	box-shadow: inset 0 0 0 1px var(--imena-accent);
}

.imena-calendar-body td.today .day-number {
	color: var(--imena-accent-text);
}

.imena-loading {
	color: var(--imena-muted);
	padding: 6px;
	text-align: center;
}

.imena-loading[hidden] {
	display: none;
}

/* The month's entries, listed under the grid. */
.imena-calendar-agenda:empty {
	display: none;
}

.imena-calendar .imena-calendar-agenda__title {
	font-size: 1.1rem;
	margin: 1.25rem 0 0.75rem;
}

.imena-calendar-agenda__list {
	display: grid;
	gap: 0.35rem 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.imena-calendar-agenda__list li {
	align-items: baseline;
	border-bottom: 1px solid var(--border-bg, var(--imena-border));
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0.45rem 0;
}

.imena-calendar-agenda__list li::before {
	content: none;
}

.imena-calendar-agenda__list time {
	color: var(--imena-muted);
	flex: 0 0 6.5rem;
	font-size: 0.85rem;
	font-weight: 700;
}

@media (max-width: 600px) {
	.imena-calendar-table {
		border-spacing: 2px;
		margin: 0 -2px;
		width: calc(100% + 4px);
	}

	.imena-calendar-body td {
		border-radius: 0.5rem;
		height: 3.1rem;
		padding: 0.3rem;
		text-align: center;
	}

	.imena-calendar-table .day-number {
		font-size: 0.85rem;
	}

	.imena-calendar-agenda__list {
		grid-template-columns: 1fr;
	}

	.imena-calendar .imena-calendar-header .imena-today {
		padding: 0 0.7rem;
	}
}

/* Dots indicator for days with events */
.event-dots { display:flex; gap:4px; margin-top:6px; align-items:center; justify-content:center }
.event-dot { width:7px; height:7px; border-radius:50%; display:inline-block; background:var(--imena-accent); }
.event-dot-2 { opacity: 0.75; }
.event-dot-3 { opacity: 0.55; }
.event-dot-4 { opacity: 0.4; }

/* Week events row that appears under the week of the clicked day */
.imena-calendar-body .imena-week-events-row td { background: transparent; border: 0; height: auto; padding: 0; text-align: left; }
.imena-week-events-cell { padding: 0 8px 8px 8px; }
.imena-week-events-box {
	position: relative;
	background: var(--imena-card);
	border: 1px solid var(--imena-border);
	padding: 12px 16px 12px 16px;
	border-radius: 0.9rem;
	box-shadow: var(--panel-lift-1, 0 6px 18px rgba(2,6,23,0.06));
	/* allow the pointer/arrow to render above the box */
	overflow: visible;
	max-height: 0; /* collapsed */
	opacity: 0;
	transition: max-height 260ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease;
}
.imena-week-events-arrow {
	position: absolute;
	top: -8px;
	left: 20px; /* adjusted by JS */
	width: 18px;
	height: 18px;
	transform: translateX(-50%);
	z-index: 6;
	pointer-events: none;
}

/* Thicker circular pointer instead of a triangle. This removes the
   triangular border under the box and provides a clearer, ticker-looking
   indicator that matches the accent color. */
.imena-week-events-arrow::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--imena-accent);
	box-shadow: 0 4px 10px rgba(2,6,23,0.12);
	z-index: 7;
}

/* Arrow slide + fade */
.imena-week-events-arrow {
	transition: left 260ms cubic-bezier(.2,.9,.2,1), opacity 160ms ease, transform 220ms ease;
}
.imena-week-events-links { display:flex; gap:12px; flex-wrap:wrap; align-items:center }

/* Each event gets its own row */
.imena-week-events-links { display:flex; flex-direction:column; gap:8px }
.imena-week-event-row { padding:6px 0; border-bottom: 1px dashed var(--imena-border); }
.imena-week-events-links { transition: opacity 180ms ease, transform 180ms ease; }
.imena-week-events-links.refreshing { opacity: 0; transform: translateY(-6px); }
.imena-week-event-row:last-child { border-bottom: none }
.imena-week-event-link { color:var(--imena-accent-text) !important; font-weight:700 }
.imena-week-event-link:hover { text-decoration:underline }

/* Open/closing states */
.imena-week-events-box.open { opacity: 1 }
.imena-week-events-box.closing { opacity: 0 }

/* Make sure the cell containing the box can position things if needed */
.imena-week-events-cell { position: relative }

@media (max-width:520px) {
	.event-dots { gap:6px }
	.imena-week-events-box { padding:10px; }
	.imena-week-events-links { gap:10px }
	.imena-week-event-link { font-size:14px }
}

/* A shortcode pinned to "Always light" / "Always dark" in the settings (config key 'theme'). */
.imena-calendar[data-theme="dark"] {
	--imena-card: #062038;
	--imena-soft: #031428;
	--imena-border: #143040;
	--imena-edge: #143040;
	--imena-text: #e6eef8;
	--imena-strong: #ffffff;
	--imena-muted: #9aa4b2;
	/* The site's accent where it has one. */
	--imena-accent: var(--accent, #3aa0ff);
	--imena-accent-text: var(--accent, #7cc0ff);
}

.imena-calendar[data-theme="light"] {
	--imena-card: #ffffff;
	--imena-soft: #f6f9ff;
	--imena-border: #dfe7ef;
	--imena-edge: #dfe7ef;
	--imena-text: #111827;
	--imena-strong: #111827;
	--imena-muted: #6b7280;
	--imena-accent: var(--accent, #0a84ff);
	--imena-accent-text: var(--accent, #0a5fcc);
}

@media (prefers-reduced-motion: reduce) {
	.imena-week-events-box,
	.imena-week-events-arrow,
	.imena-week-events-links {
		transition: none;
	}
}