/* School Year Calendar - list view styles (v2.1)
   Sizes, colors, fonts, and width are driven by CSS variables set inline
   from the plugin settings. Fallback values keep it readable if a variable
   is missing. Mobile first: one column, expanding to two on wider screens. */

.syc-list-wrap {
	--syc-accent: #4f46e5;
	--syc-border: #e5e7eb;
	--syc-muted: #6b7280;
	--syc-maxw: 1100px;
	--syc-colhead-align: center;
	--syc-space-cols: 6px;
	--syc-heading-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--syc-heading-size: 30px;
	--syc-heading-color: #111827;
	--syc-colhead-size: 20px;
	--syc-title-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--syc-title-size: 19px;
	--syc-title-color: #1f2937;
	--syc-date-size: 17px;
	--syc-subtitle-size: 16px;
	--syc-subtitle-color: #4b5563;
	--syc-card-pad: 16px;
	--syc-kicker-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--syc-kicker-size: 12px;
	--syc-kicker-color: #6b7280;
	--syc-title-link-color: #4f46e5;
	--syc-link-color: #4f46e5;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--syc-title-color);
	max-width: var(--syc-maxw);
	margin: 0 auto;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
}

.syc-list-wrap *,
.syc-list-wrap *::before,
.syc-list-wrap *::after {
	box-sizing: border-box;
}

/* Full-bleed: break out of the theme's constrained content column so the
   calendar spans the whole page width, centered on the viewport. Triggered
   when max width is 0. Uses !important to beat theme max-width rules that
   would otherwise cap our element. */
.syc-list-wrap.syc-fullbleed {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	padding-left: clamp(16px, 4vw, 56px);
	padding-right: clamp(16px, 4vw, 56px);
}

.syc-list-title {
	text-align: center;
	margin: 0 0 12px;
	font-family: var(--syc-heading-font);
	font-size: var(--syc-heading-size);
	font-weight: 700;
	line-height: 1.2;
	color: var(--syc-heading-color);
}

/* Legend */
.syc-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	justify-content: center;
	margin: 0 0 14px;
	padding: 12px 16px;
	background: #f9fafb;
	border: 1px solid var(--syc-border);
	border-radius: 12px;
}

.syc-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #374151;
}

.syc-swatch {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	flex: 0 0 auto;
}

/* Two-column semester layout */
.syc-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px 40px;
	margin-top: 0;
}

/* Neutralize stray margins the theme/editor may add around the shortcode
   and, importantly, the large top margins many themes apply to h2/h3, which
   otherwise open a big gap above the semester headings. */
.syc-list-wrap > :first-child {
	margin-top: 0 !important;
}
.syc-list-wrap > :last-child {
	margin-bottom: 0;
}
.syc-list-wrap .syc-list-title {
	margin: 0 0 12px !important;
}
.syc-list-wrap .syc-legend {
	margin: 0 !important;
}
.syc-list-wrap .syc-columns,
.syc-list-wrap .syc-single {
	margin: var(--syc-space-cols) 0 0 !important;
}
.syc-list-wrap .syc-col-head {
	margin: 0 0 12px !important;
	text-align: var(--syc-colhead-align);
}

@media (min-width: 760px) {
	.syc-columns {
		grid-template-columns: 1fr 1fr;
	}
}

.syc-col-head {
	margin: 0 0 12px;
	padding: 0 0 8px;
	font-family: var(--syc-heading-font);
	font-size: var(--syc-colhead-size);
	font-weight: 700;
	color: var(--syc-accent);
	border-bottom: 2px solid var(--syc-accent);
}

@media (max-width: 759px) {
	.syc-columns {
		gap: 8px 40px;
	}
}

/* No trailing space under the last card in a column/list */
.syc-col > .syc-event:last-of-type,
.syc-single > .syc-event:last-of-type {
	margin-bottom: 0;
}

.syc-single {
	display: grid;
	gap: 12px;
}

/* Event row */
.syc-event {
	display: grid;
	grid-template-columns: 6.5em minmax(9em, 1fr);
	gap: 16px;
	align-items: start;
	padding: var(--syc-card-pad);
	margin: 0 0 12px;
	border: 1px solid var(--syc-border);
	border-left: 6px solid var(--syc-accent);
	border-radius: 10px;
}

/* Background modes. The left bracket (border-left) always keeps the
   category color regardless of these. */
.syc-event.syc-bg-full {
	background: var(--syc-card-tint);
}
.syc-event.syc-bg-none {
	background: transparent;
}
.syc-event.syc-bg-date {
	background: transparent;
}
.syc-event.syc-bg-date .syc-when {
	background: var(--syc-card-tint);
	padding: 6px 10px;
	border-radius: 8px;
}

/* Past events: kept on the page but struck through and dimmed. */
.syc-event.syc-past {
	opacity: 0.6;
}

/* Collapsed past events: show only the date and title. Border and background
   are untouched; just less vertical space and fewer details. */
.syc-event.syc-collapsed {
	padding-top: calc(var(--syc-card-pad) * 0.5);
	padding-bottom: calc(var(--syc-card-pad) * 0.5);
	align-items: center;
}
.syc-event.syc-collapsed .syc-time,
.syc-event.syc-collapsed .syc-kicker,
.syc-event.syc-collapsed .syc-subtitle,
.syc-event.syc-collapsed .syc-link {
	display: none;
}
.syc-event.syc-collapsed .syc-body {
	gap: 0;
}

/* Reveal the full listing when hovering or keyboard-focusing a collapsed
   past event. Uncollapses padding and shows the hidden details again. */
.syc-event.syc-collapsed {
	transition: padding 0.12s ease;
}
.syc-event.syc-collapsed:hover,
.syc-event.syc-collapsed:focus-within {
	padding-top: var(--syc-card-pad);
	padding-bottom: var(--syc-card-pad);
	align-items: start;
}
.syc-event.syc-collapsed:hover .syc-time,
.syc-event.syc-collapsed:hover .syc-kicker,
.syc-event.syc-collapsed:hover .syc-subtitle,
.syc-event.syc-collapsed:hover .syc-link,
.syc-event.syc-collapsed:focus-within .syc-time,
.syc-event.syc-collapsed:focus-within .syc-kicker,
.syc-event.syc-collapsed:focus-within .syc-subtitle,
.syc-event.syc-collapsed:focus-within .syc-link {
	display: block;
}
.syc-event.syc-collapsed:hover .syc-body,
.syc-event.syc-collapsed:focus-within .syc-body {
	gap: 4px;
}

/* Per-event highlight: card filled with a chosen color; text switches to a
   readable black/white computed from that color. */
/* Per-event highlight / category background: card filled with a chosen color;
   plain text switches to a readable black/white computed from that color.
   Links keep the colors set in Settings, so they stay on-brand. */
.syc-event.syc-highlight .syc-date,
.syc-event.syc-highlight .syc-time,
.syc-event.syc-highlight .syc-event-title,
.syc-event.syc-highlight .syc-subtitle,
.syc-event.syc-highlight .syc-kicker {
	color: var(--syc-hl-fg);
}
.syc-event.syc-past .syc-date,
.syc-event.syc-past .syc-time,
.syc-event.syc-past .syc-event-title,
.syc-event.syc-past .syc-title-link,
.syc-event.syc-past .syc-subtitle {
	text-decoration: line-through;
}

.syc-when {
	text-align: right;
	padding-top: 2px;
}

.syc-date {
	display: block;
	font-weight: 700;
	font-size: var(--syc-date-size);
	line-height: 1.25;
	color: var(--syc-title-color);
}

.syc-time {
	display: block;
	font-style: italic;
	font-size: calc(var(--syc-date-size) - 3px);
	color: var(--syc-muted);
	margin-top: 3px;
}

.syc-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.syc-kicker {
	font-family: var(--syc-kicker-font);
	font-size: var(--syc-kicker-size);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--syc-kicker-color);
}

.syc-event-title {
	font-family: var(--syc-title-font);
	font-weight: 700;
	font-size: var(--syc-title-size);
	line-height: 1.3;
	color: var(--syc-title-color);
	overflow-wrap: break-word;
}

.syc-title-link {
	color: var(--syc-title-link-color);
	text-decoration: underline;
}

.syc-subtitle {
	font-size: var(--syc-subtitle-size);
	line-height: 1.4;
	color: var(--syc-subtitle-color);
	overflow-wrap: break-word;
}

.syc-link {
	font-size: calc(var(--syc-subtitle-size) - 1px);
	font-weight: 600;
	color: var(--syc-link-color);
	text-decoration: underline;
	width: fit-content;
	margin-top: 3px;
}

.syc-link:hover,
.syc-title-link:hover {
	text-decoration: none;
}

.syc-empty {
	color: var(--syc-muted);
	font-style: italic;
	font-size: var(--syc-subtitle-size);
	margin: 4px 0 0;
}

/* Ready-made "next meeting" button */
.syc-next-btn {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 999px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	line-height: 1.1;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.syc-next-btn:hover {
	opacity: 0.92;
	text-decoration: none;
}

@media print {
	.syc-list-wrap {
		max-width: none;
	}
	.syc-event {
		break-inside: avoid;
	}
}