/**
 * MAVE Calendar — front-end styles.
 * Scoped entirely under .mave-calendar / .mave-calendar-upcoming so it never
 * leaks into the rest of a page. Colors default to the ECFS design tokens
 * (CLAUDE.md "Design system tokens") with plain fallbacks, so the same CSS
 * still looks reasonable on a site that doesn't define those custom
 * properties.
 */

.mave-calendar {
	--mc-accent: var(--bde-palette-ecfs-orange-07e58486-db63-49a9-bcca-4dc6f190492e-3, #fe5000);
	/* This is the "Foreground" token (get-global-settings: colors.text) —
	   near-black (#090f11), the site's real body-text color. Do not swap
	   this for the "Background" token (color-1, #F6F6F6, near-white) —
	   that produced invisible near-white-on-white text (see CLAUDE.md
	   "Design system tokens"). */
	--mc-fg: var(--bde-palette-color-2-ef83a622-d2fd-4dfd-9f28-6245e10aa819, #141827);
	--mc-bg: var(--bde-palette-white-92eb35d3-179f-4868-b6d3-f11322f9fa0d-1, #ffffff);
	--mc-page-bg: var(--bde-palette-color-1-2aa97926-595a-4aa0-926e-e7a3f4722c0d, #f6f6f6);
	--mc-linen: var(--bde-palette-linen-97633939-bbe9-454b-8fba-24d6f720f5aa-15, #f5f1ea);
	--mc-border: #d8d8d8;
	--mc-radius: 8px;
	font-family: inherit;
	color: var(--mc-fg);
	max-width: 100%;
}

.mave-calendar__empty,
.mave-calendar-upcoming__empty {
	color: var(--mc-fg);
	opacity: 0.7;
}

/* ---- controls row -------------------------------------------------- */

/* Row 1: the big Sanomat "September 2026" on its own line — nothing else
   shares the line, so its width never shifts anything else around. Row 2:
   a toolbar — prev/next + Today grouped on the left, Month/List/Day
   grouped on the right, both as matching pill-shaped clusters so the two
   controls read as siblings. A hairline under the whole block separates it
   from the school filter.
   Marco 2026-09-14 (round 4): previously the arrows flanked the date
   itself, so the right arrow's position moved with the date's text width
   (e.g. "May 2026" vs. "September 2026") — a real UX bug, arrows should
   never wander. Also replaced the vertical Month/List/Day stack with a
   horizontal one: once the date got its own full-width row, a lone
   vertical control next to a horizontal nav cluster broke the toolbar's
   left-right rhythm, and every reference calendar UI (Google/Outlook/
   Apple) uses a horizontal view switcher — there was no real case for
   being the exception here. */
.mave-calendar__controls {
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--mc-border);
}

.mave-calendar__title-row {
	margin-bottom: 1rem;
}

/* The date itself: the site's own display/heading face (resolves to the
   literal webfont "Sanomat" everywhere else on the site — set directly
   rather than guessed at as a CSS custom property, see CLAUDE.md's fonts
   note), sized closer to a page heading than a UI label. */
.mave-calendar__period {
	display: block;
	font-family: 'Sanomat', Georgia, serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 1.15rem + 2vw, 2.5rem);
	line-height: 1.1;
	color: var(--mc-fg);
}

.mave-calendar__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
}

.mave-calendar__nav {
	display: inline-flex;
	align-items: center;
	gap: 0.85em;
}

/* Prev/next as one small pill (same treatment as the view switcher below —
   two matching clusters bookend the toolbar) instead of flanking the date;
   the pair's position is now fixed regardless of the date's width. */
.mave-calendar__nav-arrows {
	display: inline-flex;
	background: var(--mc-linen);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}

.mave-calendar__nav-btn--arrow {
	font: inherit;
	font-size: 1rem;
	background: transparent;
	border: 0;
	border-radius: 999px;
	width: 2.1em;
	height: 2.1em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--mc-fg);
	line-height: 1;
}

.mave-calendar__nav-btn--arrow:hover,
.mave-calendar__nav-btn--arrow:focus-visible {
	background: rgba(9, 15, 17, 0.08);
	color: var(--mc-accent);
}

.mave-calendar__today-btn {
	font: inherit;
	font-size: 0.85em;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--mc-fg);
	opacity: 0.65;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mave-calendar__today-btn:hover,
.mave-calendar__today-btn:focus-visible {
	opacity: 1;
	color: var(--mc-accent);
}

/* Today, muted further and inert while the visible period already
   includes today — nothing to jump to, so it stops inviting a click
   (still focusable/announced, just visually quiet; see
   Calendar.prototype.updateTodayState in calendar.js). */
.mave-calendar__today-btn.is-current {
	opacity: 0.3;
	text-decoration: none;
	cursor: default;
	pointer-events: none;
}

/* Month/List/Day as one pill-shaped segmented control (not three separate
   buttons) — reads as "one control, three settings," matches the nav
   pill's language, and stays horizontal at every width now (see the note
   above the block comment). */
.mave-calendar__views {
	display: inline-flex;
	flex-direction: row;
	background: var(--mc-linen);
	border-radius: 12px;
	padding: 3px;
	gap: 2px;
}

.mave-calendar__view-btn {
	font: inherit;
	font-size: 0.9em;
	background: transparent;
	border: 0;
	border-radius: 9px;
	padding: 0.55em 1.5em;
	cursor: pointer;
	color: var(--mc-fg);
	flex: 1 1 0;
}

.mave-calendar__view-btn:hover {
	background: rgba(9, 15, 17, 0.06);
}

/* Selected state: a calm, dark fill (same treatment as the "today" date
   marker in the month grid) rather than the brand orange, which read as
   too loud/alarming for a plain on/off UI state. Orange stays reserved for
   the accent uses: hover, links, per-school color bars. */
.mave-calendar__view-btn[aria-pressed="true"] {
	background: var(--mc-fg);
	color: var(--mc-bg);
}

.mave-calendar__view-btn[aria-pressed="true"]:hover {
	background: var(--mc-fg);
}

.mave-calendar__legend-wrap {
	margin-bottom: 1.75rem;
}

.mave-calendar__legend-label {
	font-size: 0.85em;
	font-weight: 600;
	margin: 0 0 0.6em;
	color: var(--mc-fg);
	opacity: 0.85;
}

.mave-calendar__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	border: 0;
	margin: 0;
	padding: 0;
}

.mave-calendar__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	cursor: pointer;
	font-size: 0.9em;
}

.mave-calendar__chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.mave-calendar__chip-swatch {
	width: 0.85em;
	height: 0.85em;
	border-radius: 3px;
	background: var(--mc-chip-color, currentColor);
	display: inline-block;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.mave-calendar__chip input:not(:checked) + .mave-calendar__chip-swatch {
	opacity: 0.25;
}

.mave-calendar__chip input:not(:checked) ~ .mave-calendar__chip-label {
	opacity: 0.45;
}

.mave-calendar__chip:focus-within {
	outline: 2px solid var(--mc-accent);
	outline-offset: 2px;
}

/* ---- month grid ------------------------------------------------------ */

.mave-calendar__month-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.mave-calendar__month-table caption {
	text-align: left;
	font-weight: 600;
	margin-bottom: 0.5em;
}

.mave-calendar__month-table th {
	text-align: center;
	font-weight: 600;
	padding: 0.5em 0;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mc-fg);
	opacity: 0.6;
}

.mave-calendar__month-table td {
	vertical-align: top;
	border: 1px solid var(--mc-border);
	min-height: 6.5em;
	padding: 0.35em;
	font-size: 0.85em;
}

.mave-calendar__month-table td.is-outside {
	background: var(--mc-linen);
	opacity: 0.5;
}

.mave-calendar__day-num {
	display: inline-block;
	font-weight: 600;
	margin-bottom: 0.25em;
}

.mave-calendar__month-table td.is-today .mave-calendar__day-num {
	background: var(--mc-fg);
	color: var(--mc-bg);
	border-radius: 999px;
	width: 1.6em;
	height: 1.6em;
	line-height: 1.6em;
	text-align: center;
}

.mave-calendar__day-event {
	display: flex;
	align-items: center;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-left: 3px solid var(--mc-chip-color, var(--mc-accent));
	padding: 0.1em 0.35em;
	margin-bottom: 0.2em;
	font-size: 0.95em;
	line-height: 1.3;
	cursor: pointer;
	color: var(--mc-fg);
	border-radius: 2px;
}

/* Marco 2026-09-15: was 1 line with an ellipsis — too many titles ("Grade
   Chair and Class Parent Orientation") got cut down to a few words. Now
   wraps to 2 lines before clamping; the td switched from a fixed `height`
   to `min-height` above so a cell with wrapped titles or a full 4-event
   cap grows instead of overflowing. */
.mave-calendar__day-event .mave-calendar__event-label {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* a flex item's default min-width is auto (its content size), which
	   would let long titles push the button wider than the cell instead of
	   wrapping — this lets it shrink to the row's available width first. */
	min-width: 0;
	flex: 1 1 auto;
}

.mave-calendar__day-event:hover,
.mave-calendar__day-event:focus-visible {
	background: var(--mc-linen);
}

.mave-calendar__day-event.is-allday,
.mave-calendar__day-event.is-multiday {
	background: var(--mc-chip-color, var(--mc-accent));
	color: #fff;
	border-left: 0;
}

/* ---- multi-division indicator -----------------------------------------
   A merged event — the same event posted identically across more than one
   division's feed, collapsed to a single entry (see
   MAVE_Calendar_Normalizer::merge_all()) — shouldn't look like it belongs
   to just its first division's color. Instead it gets a small leading tab
   per division on a neutral (linen) background, everywhere an event
   renders: the month grid chip, list/day rows, and the Family Portal
   dashboard's upcoming-events rows. Marco 2026-09-15: previously these
   collapsed silently with no visual cue that more than one division
   shares the event. */
.mave-calendar__tabs {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 1px;
	margin-right: 0.45em;
}

.mave-calendar__tab {
	width: 4px;
	height: 0.9em;
	border-radius: 1px;
	flex: 0 0 auto;
}

/* .mave-calendar__event-link and .mave-calendar-upcoming__row already put a
   1em `gap` between their flex children — the tabs' own margin-right would
   stack on top of that and read as too much space before the date badge. */
.mave-calendar__event-link .mave-calendar__tabs,
.mave-calendar-upcoming__row .mave-calendar__tabs {
	margin-right: 0;
}

.mave-calendar__day-event.is-multi-division {
	border-left: 0;
	background: var(--mc-linen);
}

.mave-calendar__day-event.is-multi-division:hover,
.mave-calendar__day-event.is-multi-division:focus-visible {
	background: var(--mc-border);
}

.mave-calendar__day-event.is-multi-division.is-allday,
.mave-calendar__day-event.is-multi-division.is-multiday {
	background: var(--mc-linen);
	color: var(--mc-fg);
}

.mave-calendar__event.is-multi-division .mave-calendar__event-link,
.mave-calendar-upcoming__row.is-multi-division {
	background: var(--mc-linen);
	border-radius: 6px;
	padding-left: 0.5em;
}

.mave-calendar__more-btn {
	font: inherit;
	background: none;
	border: 0;
	color: var(--mc-accent);
	cursor: pointer;
	padding: 0;
	font-size: 0.85em;
}

/* ---- list / fallback view --------------------------------------------- */

.mave-calendar__month-heading {
	font-size: 1.1em;
	margin: 1.25em 0 0.5em;
	/* Renders as <h3>: Breakdance's bare h1-h6{color} rule matches it
	   directly and beats inherited color regardless of specificity, so this
	   must be set explicitly rather than relying on inheriting --mc-fg. */
	color: var(--mc-fg);
}

.mave-calendar__event-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mave-calendar__event {
	border-bottom: 1px solid var(--mc-border);
}

.mave-calendar__event-link {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 0.65em 0.25em;
	text-decoration: none;
	color: inherit;
}

.mave-calendar__event-link:hover .mave-calendar__event-title,
.mave-calendar__event-link:focus-visible .mave-calendar__event-title {
	color: var(--mc-accent);
}

.mave-calendar__event-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 3em;
	flex: 0 0 auto;
	text-align: center;
	line-height: 1.1;
}

.mave-calendar__event-weekday {
	font-size: 0.7em;
	text-transform: uppercase;
	opacity: 0.6;
}

.mave-calendar__event-day {
	font-size: 1.3em;
	font-weight: 700;
}

.mave-calendar__event-body {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}

.mave-calendar__event-title {
	font-weight: 600;
}

.mave-calendar__event-meta {
	font-size: 0.85em;
	opacity: 0.75;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	flex-wrap: wrap;
}

.mave-calendar__dot {
	width: 0.6em;
	height: 0.6em;
	border-radius: 999px;
	display: inline-block;
}

.mave-calendar__load-more,
.mave-calendar__past-toggle {
	font: inherit;
	background: none;
	border: 1px solid var(--mc-border);
	border-radius: 999px;
	padding: 0.5em 1.25em;
	margin-top: 1em;
	cursor: pointer;
}

/* ---- day view ---------------------------------------------------------- */

.mave-calendar__day-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- popover ------------------------------------------------------------ */

.mave-calendar__popover {
	position: fixed;
	inset: 0;
	background: rgba(9, 15, 17, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 1rem;
}

.mave-calendar__popover[hidden] {
	display: none;
}

.mave-calendar__popover-body {
	background: var(--mc-bg);
	color: var(--mc-fg);
	border-radius: var(--mc-radius);
	padding: 1.5em;
	max-width: 26em;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	position: relative;
}

.mave-calendar__popover-close {
	position: absolute;
	top: 0.75em;
	right: 0.75em;
	font: inherit;
	font-size: 1.4em;
	line-height: 1;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--mc-fg);
}

.mave-calendar__popover-title {
	font-weight: 700;
	font-size: 1.15em;
	margin: 0 0 0.5em;
	padding-right: 1.5em;
	color: var(--mc-fg); /* also <h3>, see .mave-calendar__month-heading */
}

.mave-calendar__popover-meta {
	font-size: 0.9em;
	opacity: 0.8;
	margin-bottom: 0.75em;
}

.mave-calendar__popover-desc :first-child {
	margin-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.mave-calendar__popover-body {
		animation: mave-calendar-pop-in 0.12s ease-out;
	}
}

@keyframes mave-calendar-pop-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---- mobile month: compact dots ----------------------------------------- */

@media (max-width: 767px) {
	/* Toolbar already wraps (see .mave-calendar__toolbar); once Month/List/
	   Day drops to its own row below the nav cluster, give it the full
	   width so its three segments get a comfortable tap target instead of
	   staying pinned to their natural (narrow) content width. */
	.mave-calendar__views {
		width: 100%;
	}

	.mave-calendar__month-table.is-compact td {
		height: auto;
		padding: 0.5em 0.2em;
		text-align: center;
	}

	.mave-calendar__month-table.is-compact .mave-calendar__day-event {
		display: none;
	}

	.mave-calendar__day-dots {
		display: flex;
		justify-content: center;
		gap: 2px;
		margin-top: 0.2em;
		flex-wrap: wrap;
	}

	.mave-calendar__day-dots .mave-calendar__dot {
		width: 5px;
		height: 5px;
	}

	.mave-calendar__mobile-day-list {
		margin-top: 1em;
		border-top: 1px solid var(--mc-border);
		padding-top: 1em;
	}

	.mave-calendar__mobile-day-heading {
		font-size: 1em;
		margin: 0 0 0.5em;
		color: var(--mc-fg); /* <h4>: see .mave-calendar__month-heading */
	}
}

/* ---- upcoming (Family Portal dashboard) --------------------------------- */

.mave-calendar-upcoming {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mave-calendar-upcoming__row {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 0.6em 0;
	border-bottom: 1px solid var(--mc-border);
}

.mave-calendar-upcoming__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 3em;
	flex: 0 0 auto;
	background: var(--mc-linen);
	border-radius: 6px;
	padding: 0.3em 0;
	line-height: 1.1;
}

.mave-calendar-upcoming__month {
	font-size: 0.65em;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.mave-calendar-upcoming__day {
	font-size: 1.2em;
	font-weight: 700;
}

.mave-calendar-upcoming__body {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}

.mave-calendar-upcoming__title {
	font-weight: 600;
}

.mave-calendar-upcoming__meta {
	font-size: 0.85em;
	opacity: 0.75;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	flex-wrap: wrap;
}

.mave-calendar-upcoming__dot {
	width: 0.6em;
	height: 0.6em;
	border-radius: 999px;
	display: inline-block;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}