/*!
 * O2 School Calendar: front-end styles for [o2_school_calendar].
 * Ported from the approved mockup. Everything is scoped under .o2sc so nothing leaks into the theme,
 * and the rules for buttons and links are specific enough (3+ classes) that theme button/link styles
 * (Hello Elementor reset, Elementor kit) don't bleed in.
 * Light only. Colors come from settings as inline custom properties on the root element.
 *
 * @since 1.0.0
 */

/* ---- Tokens ---- */
.o2sc {
	--o2sc-surface: #ffffff;
	--o2sc-bg: #f4f5f9;
	--o2sc-ink: #1f1f1f;
	--o2sc-muted: #454754;
	--o2sc-line: #dde1ec;
	--o2sc-line-strong: #b9c0d3;
	--o2sc-accent: #3c4c80;
	--o2sc-on-accent: #ffffff;
	--o2sc-accent-soft: #e9ecf5;
	--o2sc-accent-soft: color-mix(in srgb, var(--o2sc-accent) 11%, #ffffff);
	--o2sc-today: #bb4b51;
	--o2sc-on-today: #ffffff;
	--o2sc-band-1: #0192c6;
	--o2sc-band-2: #97a554;
	--o2sc-band-3: #fbcb78;
	--o2sc-band-4: #e85568;
	--o2sc-band-5: #f2e757;
	--o2sc-band-ink: #1d3155;
	--o2sc-backdrop: rgba(10, 14, 20, .45);
	--o2sc-shadow: 0 1px 2px rgba(24, 33, 46, .06), 0 6px 24px rgba(24, 33, 46, .06);
	--o2sc-font-display: var(--e-global-typography-primary-font-family, inherit);
	--o2sc-this-month: "This month";

	color: var(--o2sc-ink);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	color-scheme: light;
}
.o2sc *,
.o2sc *::before,
.o2sc *::after { box-sizing: border-box; }
.o2sc [hidden] { display: none !important; }

/* ---- Theme bleed reset (buttons, links, headings, lists, tables) ---- */
.o2sc.o2sc button,
.o2sc.o2sc button:hover,
.o2sc.o2sc button:focus,
.o2sc.o2sc button:active {
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	text-decoration: none;
	font-family: inherit;
	min-height: 0;
	min-width: 0;
	transition: none;
	-webkit-appearance: none;
	appearance: none;
}
.o2sc.o2sc a,
.o2sc.o2sc a:hover,
.o2sc.o2sc a:focus { text-decoration: none; box-shadow: none; }
.o2sc .o2sc-layout h2,
.o2sc .o2sc-layout h3,
.o2sc .o2sc-dialog h3 {
	color: var(--o2sc-ink);
	letter-spacing: normal;
	text-transform: none;
	font-family: var(--o2sc-font-display);
	font-weight: 700;
}
.o2sc .o2sc-layout ul,
.o2sc .o2sc-layout li { margin: 0; padding: 0; list-style: none; }
.o2sc .fc table { margin: 0; font-size: 1em; }
.o2sc .fc table tbody > tr > td,
.o2sc .fc table tbody > tr:hover > td,
.o2sc .fc table tbody > tr:nth-child(odd) > td { background-color: transparent; }
.o2sc .fc .fc-daygrid-day.fc-day-today { background-color: var(--fc-today-bg-color); }
.o2sc .fc table th,
.o2sc .fc table td { line-height: inherit; }

/* ---- Layout: Coming up card above a full-width calendar card ---- */
.o2sc .o2sc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }

.o2sc .o2sc-cal-card {
	background: var(--o2sc-surface); border: 1px solid var(--o2sc-line); border-radius: 14px;
	box-shadow: var(--o2sc-shadow); padding: 16px; min-width: 0;
}
.o2sc .o2sc-rail {
	background: var(--o2sc-surface); border: 1px solid var(--o2sc-line); border-radius: 14px;
	padding: 18px; display: grid; gap: 12px; min-width: 0;
}
.o2sc .o2sc-rail .o2sc-rail-title { font-size: 18px; line-height: 1.3; margin: 0; padding: 0; }
.o2sc .o2sc-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.o2sc .o2sc-actions-bar { display: flex; justify-content: flex-end; }
.o2sc .o2sc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.o2sc .o2sc-menu-wrap { position: relative; }

/* Buttons (Subscribe, PDF, editor tools) */
.o2sc .o2sc-layout .o2sc-btn {
	display: inline-flex; align-items: center; gap: 8px; margin: 0;
	font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
	color: var(--o2sc-on-accent); background: var(--o2sc-accent); border: 0; border-radius: 8px;
	padding: 9px 14px; cursor: pointer; box-shadow: none; text-decoration: none;
}
.o2sc .o2sc-layout .o2sc-btn:hover,
.o2sc .o2sc-layout .o2sc-btn:focus { color: var(--o2sc-on-accent); background: var(--o2sc-accent); }
.o2sc .o2sc-layout .o2sc-btn svg { width: 16px; height: 16px; flex: none; }
.o2sc .o2sc-layout .o2sc-btn:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: 2px; }
.o2sc .o2sc-layout .o2sc-btn.o2sc-btn--secondary,
.o2sc .o2sc-layout .o2sc-btn.o2sc-btn--secondary:hover,
.o2sc .o2sc-layout .o2sc-btn.o2sc-btn--secondary:focus {
	color: var(--o2sc-accent); background: var(--o2sc-surface); box-shadow: inset 0 0 0 1.5px var(--o2sc-accent);
}

/* Dropdown menus (PDF, Subscribe) */
.o2sc .o2sc-menu {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(260px, calc(100vw - 32px));
	background: var(--o2sc-surface); border: 1px solid var(--o2sc-line); border-radius: 10px; box-shadow: var(--o2sc-shadow);
	padding: 6px; display: grid; gap: 2px; text-align: left;
}
.o2sc .o2sc-menu.o2sc-menu--wide { width: min(300px, calc(100vw - 32px)); }
.o2sc .o2sc-menu .o2sc-menu-item {
	display: block; width: 100%; margin: 0; text-align: left; font-size: 14px; font-weight: 500; line-height: 1.3;
	color: var(--o2sc-ink); background: none; border: 0; border-radius: 6px; padding: 9px 10px;
	text-decoration: none; cursor: pointer; white-space: normal; box-shadow: none;
}
.o2sc .o2sc-menu .o2sc-menu-item:hover { color: var(--o2sc-ink); background: var(--o2sc-bg); }
.o2sc .o2sc-menu .o2sc-menu-item:focus { color: var(--o2sc-ink); }
.o2sc .o2sc-menu .o2sc-menu-item:focus:not(:hover) { background: none; }
.o2sc .o2sc-menu .o2sc-menu-item:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: -2px; }
.o2sc .o2sc-menu small { display: block; font-size: 12px; color: var(--o2sc-muted); font-weight: 400; line-height: 1.3; }
.o2sc .o2sc-menu .o2sc-menu-status { font-size: 12.5px; color: var(--o2sc-muted); padding: 2px 10px 4px; overflow-wrap: anywhere; }
.o2sc .o2sc-menu .o2sc-menu-status:empty { display: none; }
.o2sc .o2sc-menu .o2sc-menu-note {
	font-size: 12.5px; line-height: 1.45; color: var(--o2sc-muted); padding: 6px 10px 8px; margin: 0 0 4px;
	border-bottom: 1px solid var(--o2sc-line);
}
.o2sc .o2sc-menu .o2sc-menu-group {
	font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--o2sc-muted);
	margin: 0; padding: 8px 10px 2px; display: flex; align-items: center; gap: 8px;
}
.o2sc .o2sc-menu .o2sc-menu-group:not(:first-of-type) { border-top: 1px solid var(--o2sc-line); margin-top: 4px; padding-top: 10px; }
.o2sc .o2sc-menu .o2sc-menu-group .o2sc-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--o2sc-sw); flex: none; }
.o2sc .o2sc-menu .o2sc-menu-item.o2sc-pdf-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: center; }
.o2sc .o2sc-pdf-icon { width: 26px; height: 30px; display: block; }

/* Phones: the PDF and Subscribe menus open like the event popup (centered, wide, dimmed background, close button) */
.o2sc .o2sc-menu-head { display: none; }
.o2sc .o2sc-menu-backdrop { position: fixed; inset: 0; background: var(--o2sc-backdrop); z-index: 99998; }
@media (max-width: 560px) {
	.o2sc .o2sc-menu,
	.o2sc .o2sc-menu.o2sc-menu--wide {
		position: fixed; top: 50%; transform: translateY(-50%); z-index: 99999; width: auto;
		left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)) !important;
		max-height: calc(100% - 48px); overflow-y: auto; padding: 14px; border-radius: 14px; gap: 4px;
	}
	.o2sc .o2sc-menu .o2sc-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 6px 10px; }
	.o2sc .o2sc-menu .o2sc-menu-title { font-size: 20px; line-height: 1.2; margin: 0; padding: 0; }
	.o2sc .o2sc-menu .o2sc-menu-close,
	.o2sc .o2sc-menu .o2sc-menu-close:hover,
	.o2sc .o2sc-menu .o2sc-menu-close:focus {
		width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; margin: 0; border-radius: 8px;
		border: 1px solid var(--o2sc-line); background: var(--o2sc-surface); color: var(--o2sc-ink); font-size: 20px; line-height: 1;
		cursor: pointer; box-shadow: none;
	}
	.o2sc .o2sc-menu .o2sc-menu-close:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: 2px; }
	.o2sc .o2sc-menu .o2sc-menu-item { padding: 13px 10px; font-size: 15.5px; }
	.o2sc .o2sc-menu .o2sc-menu-note { font-size: 13.5px; }
	.o2sc .o2sc-pdf-icon { width: 30px; height: 34px; }
	.o2sc .o2sc-menu .o2sc-menu-item.o2sc-pdf-item { grid-template-columns: 30px minmax(0, 1fr); }
}

/* ---- Coming up ---- */
.o2sc .o2sc-layout .o2sc-upcoming {
	list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 12px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.o2sc .o2sc-upcoming .o2sc-up-btn,
.o2sc .o2sc-upcoming .o2sc-up-btn:focus {
	width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center;
	text-align: left; background: none; border: 0; border-radius: 10px; padding: 8px; margin: 0; cursor: pointer;
	color: var(--o2sc-ink); font-size: inherit; font-weight: inherit; line-height: inherit; white-space: normal; box-shadow: none;
}
.o2sc .o2sc-upcoming .o2sc-up-btn:hover { background: var(--o2sc-bg); color: var(--o2sc-ink); }
.o2sc .o2sc-upcoming .o2sc-up-btn:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: 1px; }
.o2sc .o2sc-upcoming .o2sc-up-note { font-size: 12.5px; color: var(--o2sc-muted); padding: 4px 8px; }
/* Date chips: band color follows the month, so it groups cards by month and never implies an event type */
.o2sc .o2sc-datebox {
	display: block; border-radius: 8px; border: 1px solid var(--o2sc-line); text-align: center; overflow: hidden;
	font-variant-numeric: tabular-nums; background: var(--o2sc-surface);
}
.o2sc .o2sc-datebox .o2sc-datebox-m {
	font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: block; line-height: 1.5;
	background: var(--o2sc-band); color: var(--o2sc-band-ink); padding: 3px 0 2px;
}
.o2sc .o2sc-datebox .o2sc-datebox-d {
	font-family: var(--o2sc-font-display); font-size: 19px; font-weight: 700; line-height: 1.1; display: block; padding: 3px 0 5px;
}
.o2sc .o2sc-up-title { font-weight: 600; font-size: 14px; line-height: 1.3; display: block; }
.o2sc .o2sc-up-meta { font-size: 12.5px; line-height: 1.4; color: var(--o2sc-muted); display: block; }

/* ---- Above the calendar: legend chips and editor tools ---- */
.o2sc .o2sc-cal-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; }
.o2sc .o2sc-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.o2sc .o2sc-legend-label { font-size: 13px; color: var(--o2sc-muted); margin-right: 4px; }
.o2sc .o2sc-legend .o2sc-chip,
.o2sc .o2sc-legend .o2sc-chip:hover,
.o2sc .o2sc-legend .o2sc-chip:focus {
	display: inline-flex; align-items: center; gap: 8px; margin: 0;
	font-size: 13px; font-weight: 500; line-height: 1; color: var(--o2sc-ink);
	background: var(--o2sc-surface); border: 1px solid var(--o2sc-line); border-radius: 999px;
	padding: 7px 12px; cursor: pointer; box-shadow: none; white-space: nowrap;
}
.o2sc .o2sc-legend .o2sc-chip:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: 2px; }
.o2sc .o2sc-chip .o2sc-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--o2sc-sw); }
.o2sc .o2sc-legend .o2sc-chip[aria-pressed="false"] { opacity: .5; }
.o2sc .o2sc-chip[aria-pressed="false"] .o2sc-sw { background: transparent; box-shadow: inset 0 0 0 1.5px var(--o2sc-sw); }
.o2sc .o2sc-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.o2sc .o2sc-tools-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--o2sc-muted); }
.o2sc .o2sc-layout .o2sc-tools .o2sc-btn { font-size: 13.5px; padding: 8px 12px; }
.o2sc .o2sc-note { margin: 0 0 12px; font-size: 13.5px; color: var(--o2sc-muted); }

/* ---- FullCalendar theming via its CSS variables ---- */
.o2sc .fc {
	--fc-border-color: var(--o2sc-line);
	--fc-page-bg-color: var(--o2sc-surface);
	--fc-neutral-bg-color: var(--o2sc-bg);
	--fc-neutral-text-color: var(--o2sc-muted);
	--fc-today-bg-color: var(--o2sc-accent-soft);
	--fc-button-text-color: var(--o2sc-ink);
	--fc-button-bg-color: var(--o2sc-surface);
	--fc-button-border-color: var(--o2sc-line);
	--fc-button-hover-text-color: var(--o2sc-ink);
	--fc-button-hover-bg-color: var(--o2sc-bg);
	--fc-button-hover-border-color: var(--o2sc-line);
	--fc-button-active-bg-color: var(--o2sc-accent);
	--fc-button-active-border-color: var(--o2sc-accent);
	--fc-list-event-hover-bg-color: var(--o2sc-bg);
	--fc-more-link-bg-color: transparent;
	--fc-more-link-text-color: var(--o2sc-accent);
	--fc-small-font-size: .78em;
	--fc-event-border-color: var(--o2sc-accent);
	--fc-event-bg-color: var(--o2sc-accent);
	font-family: inherit;
	color: var(--o2sc-ink);
}
.o2sc .fc .fc-toolbar { flex-wrap: wrap; gap: 10px; }
/* Toolbar: "Today ‹ title ›" on the left, "Show past  Year | Month | List" on the right. Spacing by gap, not FC's margins. */
.o2sc .fc .fc-toolbar-chunk { display: flex; align-items: center; gap: 8px; min-width: 0; }
.o2sc .fc .fc-toolbar-chunk:empty { display: none; }
.o2sc .fc.fc-direction-ltr .fc-toolbar > * > :not(:first-child),
.o2sc .fc.fc-direction-rtl .fc-toolbar > * > :not(:first-child) { margin-left: 0; margin-right: 0; }
.o2sc .fc .fc-toolbar-chunk:first-child .fc-toolbar-title { margin: 0 2px; }
.o2sc .fc .fc-toolbar-chunk:first-child .fc-today-button { margin-right: 4px; }
.o2sc .fc .fc-toolbar.fc-header-toolbar { margin-bottom: 14px; }
.o2sc .fc .fc-toolbar-title {
	font-family: var(--o2sc-font-display); font-size: 21px; font-weight: 700; line-height: 1.3; margin: 0;
	color: var(--o2sc-ink); letter-spacing: normal; text-transform: none;
}
/* FC's buttons, restated at a specificity theme hover/focus rules can't beat */
.o2sc .fc .fc-button,
.o2sc .fc .fc-button:hover,
.o2sc .fc .fc-button:focus {
	font-family: inherit; font-weight: 500; font-size: 13.5px; line-height: 1.5; box-shadow: none; text-transform: none;
	letter-spacing: normal; white-space: nowrap; min-height: 0; text-decoration: none; border-radius: .25em; padding: .4em .65em;
}
.o2sc .fc .fc-button-primary,
.o2sc .fc .fc-button-primary:focus {
	color: var(--fc-button-text-color); background-color: var(--fc-button-bg-color); border: 1px solid var(--fc-button-border-color);
}
.o2sc .fc .fc-button-primary:not(:disabled):hover {
	color: var(--fc-button-hover-text-color); background-color: var(--fc-button-hover-bg-color); border-color: var(--fc-button-hover-border-color);
}
.o2sc .fc .fc-button-primary:disabled,
.o2sc .fc .fc-button-primary:disabled:hover {
	color: var(--fc-button-text-color); background-color: var(--fc-button-bg-color); border-color: var(--fc-button-border-color); opacity: .5; cursor: default;
}
.o2sc .fc .fc-button-group > .fc-button { border-radius: 0; }
.o2sc .fc .fc-button-group > .fc-button:first-child { border-top-left-radius: .25em; border-bottom-left-radius: .25em; }
.o2sc .fc .fc-button-group > .fc-button:last-child { border-top-right-radius: .25em; border-bottom-right-radius: .25em; }
.o2sc .fc .fc-button-primary:not(:disabled).fc-button-active,
.o2sc .fc .fc-button-primary:not(:disabled).fc-button-active:hover,
.o2sc .fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.o2sc .fc .fc-button-primary:not(:disabled):active {
	color: var(--o2sc-on-accent); background-color: var(--fc-button-active-bg-color); border-color: var(--fc-button-active-border-color);
}
.o2sc .fc .fc-button:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: 2px; position: relative; z-index: 2; }
.o2sc .fc a,
.o2sc .fc a:hover,
.o2sc .fc a:focus { color: inherit; }
.o2sc .fc .fc-daygrid-day-number,
.o2sc .fc .fc-col-header-cell-cushion { text-decoration: none; font-variant-numeric: tabular-nums; }
.o2sc .fc .fc-day-today .fc-daygrid-day-number {
	background: var(--o2sc-today); color: var(--o2sc-on-today); border-radius: 999px; min-width: 1.7em; text-align: center; font-weight: 700;
}

/* Year views */
.o2sc .fc .fc-multimonth { border: 0; }
/* Padding sits one class lower so FullCalendar's own multi-column padding still wins there, as in the mockup */
.o2sc .fc-multimonth-month { padding: 10px; }
.o2sc .fc .fc-multimonth-month { border-radius: 12px; transition: opacity .2s; }
.o2sc .fc .fc-multimonth-title {
	font-family: var(--o2sc-font-display); font-size: 16px; font-weight: 700; text-align: left; padding: 6px 0 12px;
	background: linear-gradient(var(--o2sc-band, transparent), var(--o2sc-band, transparent)) left calc(100% - 4px) / 32px 4px no-repeat;
}
.o2sc .fc .fc-multimonth-month.o2sc-is-past { opacity: .5; }
.o2sc .fc .fc-multimonth-month.o2sc-is-past:hover,
.o2sc .fc .fc-multimonth-month.o2sc-is-past:focus-within { opacity: 1; }
/* Same white as Year scroll's sticky header, so the current month looks the same in both year views */
.o2sc .fc .fc-multimonth-month.o2sc-is-current { background: var(--o2sc-surface); box-shadow: inset 0 0 0 2px var(--o2sc-accent); }
.o2sc .fc .fc-multimonth-month.o2sc-is-current .fc-multimonth-title { color: var(--o2sc-accent); }
.o2sc .fc .fc-multimonth-month.o2sc-is-current .fc-multimonth-title::after {
	content: var(--o2sc-this-month); font-family: var(--o2sc-font-body, inherit); font-size: 11px; font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; margin-left: 8px; color: var(--o2sc-on-accent); background: var(--o2sc-accent);
	border-radius: 999px; padding: 2px 8px; vertical-align: 2px;
}
.o2sc .fc .fc-multimonth-daygrid { border-radius: 6px; overflow: hidden; }
.o2sc .fc .fc-daygrid-body .fc-h-event .fc-event-title { white-space: normal; line-height: 1.2; }
.o2sc .fc .fc-daygrid-body .fc-h-event .fc-event-main { padding: 1px 3px; }
/* Year view pills */
.o2sc .fc .fc-multimonth .fc-h-event .fc-event-main { padding: 1px 4px; }
.o2sc .fc .fc-multimonth .fc-h-event .fc-event-title {
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 1.35; font-weight: 600;
}
.o2sc .fc .fc-multimonth .fc-h-event { border-radius: 999px; }
.o2sc .fc .fc-multimonth .fc-h-event:not(.fc-event-start) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.o2sc .fc .fc-multimonth .fc-h-event:not(.fc-event-end) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Single-day pills: let the short label wrap to two lines instead of truncating */
.o2sc .fc .fc-multimonth .fc-h-event.fc-event-start.fc-event-end { border-radius: 6px; }
.o2sc .fc .fc-multimonth .fc-h-event.fc-event-start.fc-event-end .fc-event-main { padding: 2px 3px; }
.o2sc .fc .fc-multimonth .fc-h-event.fc-event-start.fc-event-end .fc-event-title {
	white-space: normal; text-overflow: clip; overflow-wrap: break-word; hyphens: auto; font-size: 10.5px; line-height: 1.2;
}
/* Timed events in year views: dot, start time and short title on one line */
.o2sc .fc .fc-multimonth .fc-daygrid-dot-event {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
	white-space: normal; font-size: 10.5px; line-height: 1.25; padding: 1px 2px;
}
.o2sc .fc .fc-multimonth .fc-daygrid-dot-event > *,
.o2sc .fc .fc-multimonth .fc-daygrid-dot-event .o2sc-ev-lead > * { display: inline; }
.o2sc .fc .fc-multimonth .fc-daygrid-dot-event .o2sc-ev-lead { white-space: nowrap; }
.o2sc .fc .fc-multimonth .fc-daygrid-dot-event .fc-daygrid-event-dot {
	display: inline-block; vertical-align: 1px; margin: 0 3px 0 1px; border-width: 3px;
}
.o2sc .fc .fc-multimonth .fc-daygrid-dot-event .fc-event-time { margin: 0; }
.o2sc .fc .fc-multimonth .fc-daygrid-dot-event .fc-event-title { overflow: visible; }

/* Event colors: FullCalendar sets each event's calendar color inline */
.o2sc .fc .fc-event { cursor: pointer; }
.o2sc .fc .fc-h-event { border: 0; border-radius: 4px; }
.o2sc .fc .fc-h-event .fc-event-main { font-weight: 500; }
.o2sc .fc .fc-daygrid-dot-event,
.o2sc .fc .fc-daygrid-dot-event:hover,
.o2sc .fc .fc-daygrid-dot-event:focus { color: var(--o2sc-ink); }
.o2sc .fc .fc-daygrid-dot-event:hover { background: var(--o2sc-bg); }
.o2sc .fc .fc-daygrid-dot-event .fc-event-title { font-weight: 600; }
.o2sc .fc .fc-event:focus-visible { outline: 2px solid var(--o2sc-ink); outline-offset: 1px; }
.o2sc .fc .fc-event:focus::after { display: none; }
.o2sc .fc .fc-list-day-cushion { background: var(--o2sc-bg); }
.o2sc .fc .fc-list-event:hover td { background: var(--o2sc-bg); }
.o2sc .fc .fc-list-event:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: -2px; }
/* FullCalendar puts an absolutely positioned ::before/::after overlay on a focused event. On a List
   row (a <tr>) Safari lays that box out as an extra table cell, which pushes the row's cells apart
   and squeezes the date headers, e.g. after an event popup closes and focus returns to the row. */
.o2sc .fc .fc-list-event:focus::before,
.o2sc .fc .fc-list-event:focus::after { content: none; display: none; }
/* No focus ring after a tap or click; keyboard users still get one (:focus-visible). */
.o2sc .fc .fc-event:focus:not(:focus-visible) { outline: none; }
.o2sc .fc .fc-list-event-title { font-weight: 500; }
.o2sc .fc .fc-popover { background: var(--o2sc-surface); border-color: var(--o2sc-line); box-shadow: var(--o2sc-shadow); }
.o2sc .fc .fc-popover-header { background: var(--o2sc-bg); color: var(--o2sc-ink); }
.o2sc.o2sc-is-editor .fc .fc-daygrid-day-frame { cursor: pointer; }

/* An event opened from a link gets a ring in the "today" color so it's easy to spot */
.o2sc .fc .o2sc-is-linked { box-shadow: 0 0 0 3px var(--o2sc-today); border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) { .o2sc .fc .o2sc-is-linked { animation: o2sc-linkpulse 1.2s ease-out 2; } }
@keyframes o2sc-linkpulse { 0% { box-shadow: 0 0 0 0 var(--o2sc-today); } 100% { box-shadow: 0 0 0 3px var(--o2sc-today); } }

/* ---- Event popup and calendar chooser ---- */
.o2sc.o2sc-portal { position: static; }
.o2sc .o2sc-overlay {
	position: fixed; inset: 0; background: var(--o2sc-backdrop); display: grid; place-items: center; z-index: 100000;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.o2sc .o2sc-dialog {
	background: var(--o2sc-surface); color: var(--o2sc-ink); border-radius: 14px; border: 1px solid var(--o2sc-line);
	box-shadow: var(--o2sc-shadow); width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
	padding: 22px; display: grid; gap: 12px; position: relative; text-align: left;
}
.o2sc .o2sc-dialog .o2sc-tag {
	justify-self: start; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
	color: var(--o2sc-tag-on, #ffffff); background: var(--o2sc-sw, var(--o2sc-accent)); border-radius: 999px; padding: 3px 10px;
}
.o2sc .o2sc-dialog .o2sc-dialog-title {
	font-size: 22px; line-height: 1.2; margin: 0; padding: 0 32px 0 0; text-wrap: balance; overflow-wrap: break-word;
}
.o2sc .o2sc-dialog .o2sc-meta { margin: 0; padding: 0; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 6px 12px; font-size: 14px; line-height: 1.45; }
.o2sc .o2sc-dialog .o2sc-meta dt { color: var(--o2sc-muted); font-weight: 400; margin: 0; padding: 0; }
.o2sc .o2sc-dialog .o2sc-meta dd { margin: 0; padding: 0; overflow-wrap: break-word; }
.o2sc .o2sc-dialog .o2sc-desc { margin: 0; padding: 0; color: var(--o2sc-ink); font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: break-word; }
.o2sc .o2sc-dialog .o2sc-desc a,
.o2sc .o2sc-dialog .o2sc-desc a:hover,
.o2sc .o2sc-dialog .o2sc-desc a:focus { color: var(--o2sc-accent); text-decoration: underline; overflow-wrap: anywhere; }
.o2sc .o2sc-dialog .o2sc-share { display: grid; gap: 8px; border-top: 1px solid var(--o2sc-line); padding-top: 12px; }
.o2sc .o2sc-dialog .o2sc-share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.o2sc .o2sc-dialog .o2sc-copy,
.o2sc .o2sc-dialog .o2sc-copy:hover,
.o2sc .o2sc-dialog .o2sc-copy:focus {
	font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--o2sc-on-accent); background: var(--o2sc-accent); border: 0;
	border-radius: 8px; padding: 9px 14px; margin: 0; cursor: pointer; box-shadow: none;
}
.o2sc .o2sc-dialog .o2sc-copy.o2sc-copy--secondary,
.o2sc .o2sc-dialog .o2sc-copy.o2sc-copy--secondary:hover,
.o2sc .o2sc-dialog .o2sc-copy.o2sc-copy--secondary:focus {
	color: var(--o2sc-accent); background: var(--o2sc-surface); box-shadow: inset 0 0 0 1.5px var(--o2sc-accent);
}
.o2sc .o2sc-dialog .o2sc-copy:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: 2px; }
.o2sc .o2sc-dialog .o2sc-status { font-size: 13px; color: var(--o2sc-muted); overflow-wrap: anywhere; }
.o2sc .o2sc-dialog .o2sc-url,
.o2sc .o2sc-dialog .o2sc-url:focus {
	width: 100%; min-width: 0; margin: 0; font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--o2sc-muted);
	background: var(--o2sc-bg); border: 1px solid var(--o2sc-line); border-radius: 6px; padding: 6px 8px; box-shadow: none; height: auto;
}
.o2sc .o2sc-dialog .o2sc-url:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: 1px; }
.o2sc .o2sc-dialog .o2sc-close,
.o2sc .o2sc-dialog .o2sc-close:hover,
.o2sc .o2sc-dialog .o2sc-close:focus {
	position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--o2sc-line);
	background: var(--o2sc-surface); color: var(--o2sc-ink); font-size: 18px; line-height: 1; cursor: pointer;
	display: grid; place-items: center; padding: 0; margin: 0; box-shadow: none;
}
.o2sc .o2sc-dialog .o2sc-close:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: 2px; }
.o2sc .o2sc-dialog.o2sc-dialog--chooser { width: min(360px, 100%); }
.o2sc .o2sc-dialog .o2sc-chooser-sub { margin: 0; font-size: 14px; color: var(--o2sc-muted); }
.o2sc .o2sc-dialog .o2sc-chooser-sub:empty { display: none; }
.o2sc .o2sc-dialog .o2sc-chooser-list { display: grid; gap: 6px; }
.o2sc .o2sc-dialog .o2sc-chooser-item,
.o2sc .o2sc-dialog .o2sc-chooser-item:hover,
.o2sc .o2sc-dialog .o2sc-chooser-item:focus {
	display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--o2sc-line); border-radius: 8px;
	color: var(--o2sc-ink); background: var(--o2sc-surface); font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.o2sc .o2sc-dialog .o2sc-chooser-item:hover { background: var(--o2sc-bg); }
.o2sc .o2sc-dialog .o2sc-chooser-item:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: 2px; }
.o2sc .o2sc-dialog .o2sc-chooser-item .o2sc-sw { width: 12px; height: 12px; border-radius: 3px; background: var(--o2sc-sw); flex: none; }
.o2sc .o2sc-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 560px) {
	/* Phones: row 1 "Today ‹ title ›", row 2 "Show past … Year | Month | List". */
	.o2sc .fc .fc-toolbar { flex-direction: column; align-items: stretch; }
	.o2sc .fc .fc-toolbar-chunk { justify-content: center; gap: 6px; }
	.o2sc .fc .fc-toolbar-chunk:last-child { justify-content: flex-end; }
	.o2sc .fc .fc-toolbar-chunk:first-child { gap: 4px; }
	.o2sc .fc .fc-toolbar-title { font-size: 15px; text-align: center; flex: 0 1 auto; text-wrap: balance; }
	.o2sc .fc .fc-toolbar-chunk:first-child .fc-today-button { font-size: 12.5px; padding: 6px 8px; margin-right: 4px; flex: none; }
	.o2sc .fc .fc-toolbar-chunk:first-child .fc-back-button,
	.o2sc .fc .fc-toolbar-chunk:first-child .fc-fwd-button { padding: 5px 5px; flex: none; }
	.o2sc .o2sc-cal-card { padding: 10px; }
	.o2sc .fc .fc-multimonth .fc-h-event.fc-event-start.fc-event-end .fc-event-main { padding: 2px; }
	.o2sc .fc .fc-multimonth .fc-h-event.fc-event-start.fc-event-end .fc-event-title {
		font-size: 9.5px; overflow-wrap: normal; letter-spacing: -0.01em;
	}
}

/* Small two-across grids (sideways phones, small tablets): compact single-day pills like on phones */
/* Also applied by class when the calendar sits in a narrow column on a wide screen. */
@media (max-width: 900px) {
	.o2sc .fc .fc-multimonth .fc-h-event.fc-event-start.fc-event-end .fc-event-main { padding: 2px; }
	.o2sc .fc .fc-multimonth .fc-h-event.fc-event-start.fc-event-end .fc-event-title { font-size: 9.5px; overflow-wrap: normal; letter-spacing: -0.01em; }
}
.o2sc.o2sc-compact .fc .fc-multimonth .fc-h-event.fc-event-start.fc-event-end .fc-event-main { padding: 2px; }
.o2sc.o2sc-compact .fc .fc-multimonth .fc-h-event.fc-event-start.fc-event-end .fc-event-title { font-size: 9.5px; overflow-wrap: normal; letter-spacing: -0.01em; }
/* Upright phones (or a calendar narrower than about 614px): no room for a grid, so only Year scroll is offered */
@media (max-width: 679px) { .o2sc .fc .fc-schoolYear-button { display: none; } }
.o2sc.o2sc-no-grid .fc .fc-schoolYear-button { display: none; }
@media (prefers-reduced-motion: reduce) {
	.o2sc *,
	.o2sc *::before,
	.o2sc *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Flow layout (touch screens and narrow calendars): the calendar is full length and the page scrolls.
   The current school year starts at this month; "Show past" (left of Year / Month / List) brings the earlier months back. */
.o2sc .fc .fc-showPast-button { display: none; }
.o2sc.o2sc-can-show-past .fc .fc-showPast-button.fc-button,
.o2sc.o2sc-can-show-past .fc .fc-showPast-button.fc-button:hover,
.o2sc.o2sc-can-show-past .fc .fc-showPast-button.fc-button:focus,
.o2sc.o2sc-can-show-past .fc .fc-showPast-button.fc-button:active {
	display: inline-flex; align-items: center; margin: 0 auto 0 0; padding: 6px 2px;
	color: var(--o2sc-accent); background: transparent; border: 0; box-shadow: none;
	font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.o2sc.o2sc-can-show-past .fc .fc-showPast-button.fc-button:hover { text-decoration-thickness: 2px; }
.o2sc.o2sc-can-show-past .fc .fc-showPast-button.fc-button:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: 2px; border-radius: 4px; }
/* Its chunk spreads out so "Show past" sits left and the view buttons right. */
.o2sc.o2sc-can-show-past .fc .fc-toolbar-chunk:last-child { gap: 12px; }
.o2sc .fc .fc-multimonth-title:focus { outline: none; }
.o2sc .fc .fc-multimonth-title:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: 2px; }

/* Pager under the calendar: previous / next school year (year views) or month (Month, List). */
.o2sc .o2sc-cal-card .o2sc-pager { display: flex; justify-content: space-between; align-items: stretch; gap: 10px; margin-top: 14px; }
.o2sc .o2sc-cal-card .o2sc-pager[hidden] { display: none; }
.o2sc .o2sc-cal-card .o2sc-pager-btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 10px 14px;
	font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: none;
	color: var(--o2sc-accent); background: var(--o2sc-surface); border: 0; border-radius: 8px;
	box-shadow: inset 0 0 0 1.5px var(--o2sc-line-strong); cursor: pointer; text-align: left;
}
.o2sc .o2sc-cal-card .o2sc-pager-btn:hover,
.o2sc .o2sc-cal-card .o2sc-pager-btn:focus { color: var(--o2sc-accent); background: var(--o2sc-accent-soft); }
.o2sc .o2sc-cal-card .o2sc-pager-btn:focus-visible { outline: 2px solid var(--o2sc-accent); outline-offset: 2px; }
.o2sc .o2sc-cal-card .o2sc-pager-btn[hidden] { display: none; }
.o2sc .o2sc-cal-card .o2sc-pager-next { margin-left: auto; text-align: right; }
.o2sc .o2sc-cal-card .o2sc-pager-arrow { font-size: 20px; line-height: 1; }
.o2sc .fc .fc-toolbar-title:focus { outline: none; }
@media (max-width: 560px) {
	.o2sc .o2sc-cal-card .o2sc-pager-btn { flex: 1 1 0; justify-content: center; text-align: center; }
	.o2sc .o2sc-cal-card .o2sc-pager-prev[hidden] + .o2sc-pager-next { flex: 0 1 auto; }
}