/* ==========================================================================
   Live Course Events — Calendar styles (v2 redesign)
   --------------------------------------------------------------------------
   All selectors scoped under .ldle-calendar to avoid leaking into theme
   styles. Design tokens live as CSS custom properties on the wrapper so
   admins or themes can override by re-declaring values on that selector.

   Category colors are emitted by two patterns:
   - [data-cat-class="X"] attribute selector  → event-cell, event-card
   - .ldle-event-agenda--X modifier class     → event-agenda wrapper + pill
   ========================================================================== */

/* --- Scoping + box-sizing reset --- */
.ldle-calendar,
.ldle-calendar * {
	box-sizing: border-box;
}

/* --- Design tokens --- */
.ldle-calendar {
	--ldle-brand:        #046bd2;
	--ldle-brand-dark:   #0357a8;
	--ldle-brand-soft:   #e6f1fb;
	--ldle-enrolled:     #2563eb;
	--ldle-enrolled-rgb: 37, 99, 235;

	--ldle-text:         #1a1a1a;
	--ldle-text-muted:   #6b7280;
	--ldle-text-faded:   #9ca3af;
	--ldle-bg:           #ffffff;
	--ldle-bg-soft:      #f9fafb;
	--ldle-bg-page:      #f3f4f6;
	--ldle-border:       #e5e7eb;
	--ldle-border-light: #f0f1f3;

	--ldle-cat-agency-bg:           #ccfbf1;
	--ldle-cat-agency-solid:        #0d9488;
	--ldle-cat-agency-text:         #134e4a;
	--ldle-cat-contracts-bg:        #ede9fe;
	--ldle-cat-contracts-solid:     #7c3aed;
	--ldle-cat-contracts-text:      #4c1d95;
	--ldle-cat-ethics-bg:           #ffedd5;
	--ldle-cat-ethics-solid:        #ea580c;
	--ldle-cat-ethics-text:         #7c2d12;
	--ldle-cat-general-bg:          #e2e8f0;
	--ldle-cat-general-solid:       #475569;
	--ldle-cat-general-text:        #1e293b;
	--ldle-cat-law-bg:              #fce7f3;
	--ldle-cat-law-solid:           #be123c;
	--ldle-cat-law-text:            #831843;
	--ldle-cat-property-mgmt-bg:    #dcfce7;
	--ldle-cat-property-mgmt-solid: #16a34a;
	--ldle-cat-property-mgmt-text:  #14532d;
	--ldle-cat-risk-bg:             #fef3c7;
	--ldle-cat-risk-solid:          #d97706;
	--ldle-cat-risk-text:           #78350f;

	--ldle-space-1: 4px;
	--ldle-space-2: 8px;
	--ldle-space-3: 12px;
	--ldle-space-4: 16px;
	--ldle-space-5: 24px;
	--ldle-space-6: 32px;
	--ldle-space-7: 48px;

	--ldle-radius-sm: 4px;
	--ldle-radius-md: 8px;
	--ldle-radius-lg: 12px;
	--ldle-radius-xl: 24px;

	/* v2.1: blue-tinted globally for brand cohesion */
	--ldle-shadow-sm: 0 1px 2px rgba(2, 53, 111, 0.06);
	--ldle-shadow-md: 0 4px 12px rgba(2, 53, 111, 0.10);
	--ldle-shadow-lg: 0 8px 24px rgba(2, 53, 111, 0.14);
	--ldle-shadow-xl: 0 24px 56px rgba(2, 53, 111, 0.18);

	--ldle-gradient-hero: linear-gradient(135deg, #046bd2 0%, #02356f 100%);

	color: var(--ldle-text);
	font-family: inherit;
	line-height: 1.5;
}

/* --- screen-reader-text fallback (defensive against themes without it) --- */
.ldle-calendar .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* --- Outer wrapper — transparent positioning container (v2.1) ---
   Card chrome moved to .ldle-calendar__shell so the hero can sit
   above the white card with a negative-margin overlap. */
.ldle-calendar {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Mobile notice — hidden when :empty; calendar.js sets textContent to reveal */
.ldle-calendar__mobile-notice {
	background: var(--ldle-brand-soft);
	border-left: 4px solid var(--ldle-brand);
	padding: var(--ldle-space-4);
	margin-bottom: var(--ldle-space-4);
	border-radius: var(--ldle-radius-sm);
}
.ldle-calendar__mobile-notice:empty { display: none; }

/* ==========================================================================
   Filter bar — two-row layout: search form (row 1), view toggle +
   category pill toggles + clear link (row 2)
   ========================================================================== */
.ldle-calendar__filter-bar {
	display: flex;
	flex-direction: column;
	gap: var(--ldle-space-3);
	margin-bottom: var(--ldle-space-5);
}

/* === Row 1: Search form === */
/* === Row 1 container: search form (left, capped) + clear link (right) === */
.ldle-calendar__filter-search-row {
	display: flex;
	align-items: center;
	gap: var(--ldle-space-3);
	width: 100%;
}

.ldle-calendar__filter-search-form {
	display: flex;
	align-items: center;
	gap: var(--ldle-space-2);
	max-width: 450px;
	flex: 1; /* grow up to max-width within row-1 container */
	background: var(--ldle-bg);
	border: 1px solid var(--ldle-border);
	border-radius: var(--ldle-radius-md);
	padding: var(--ldle-space-2) var(--ldle-space-4);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ldle-calendar__filter-search-form:focus-within {
	background: var(--ldle-brand-soft);
	border-color: var(--ldle-brand);
}

.ldle-calendar__search-input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: var(--ldle-space-2) 0;
	font-size: 0.9375rem;
	color: var(--ldle-text);
	font-family: inherit;
	min-width: 0; /* allow flexbox to shrink */
	-webkit-appearance: none;
	appearance: none;
	outline: 0;
}

.ldle-calendar__search-input:focus {
	outline: 0;
	box-shadow: none;
}

.ldle-calendar__search-input::placeholder {
	color: var(--ldle-text-faded);
}

/* Search icon via background-image — keeps markup clean */
.ldle-calendar__filter-search-form::before {
	content: '';
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* === Row 2: View toggle + pills + clear === */
.ldle-calendar__filter-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ldle-space-3);
}

/* Visual separator after view toggle, before pills */
.ldle-calendar__filter-controls .ldle-calendar__view-toggle {
	margin-bottom: 0; /* override default — already spaced via gap */
	margin-right: var(--ldle-space-2);
	position: relative;
}

.ldle-calendar__filter-controls .ldle-calendar__view-toggle::after {
	content: '';
	position: absolute;
	right: calc(var(--ldle-space-2) * -1);
	top: 25%;
	bottom: 25%;
	width: 1px;
	background: var(--ldle-border);
}

/* === Category pills container === */
.ldle-calendar__category-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ldle-space-2);
	flex: 1; /* expand to fill row, pushing clear link to end */
	min-width: 0;
}

/* === Individual category pill === */
.ldle-calendar__category-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--ldle-space-2);
	padding: 6px 12px;
	background: var(--ldle-bg);
	border: 1px solid var(--ldle-border);
	border-radius: 999px;
	color: var(--ldle-text);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
	user-select: none;
}

.ldle-calendar__category-pill:hover {
	background: var(--ldle-brand-soft);
	border-color: var(--ldle-brand);
	color: var(--ldle-brand);
}

.ldle-calendar__category-pill:hover .ldle-calendar__category-pill-dot {
	/* Keep the dot showing the category's own color, not the brand hover color */
	background: var(--ldle-cat-color, #ccc);
}

.ldle-calendar__category-pill:active {
	transform: scale(0.97);
}

/* The colored dot (inactive state) */
.ldle-calendar__category-pill-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ldle-cat-color, #ccc);
	flex-shrink: 0;
}

/* Active state: pill fills with the category color */
.ldle-calendar__category-pill--active {
	background: var(--ldle-cat-color, #6b7280);
	border-color: var(--ldle-cat-color, #6b7280);
	color: #fff;
}

.ldle-calendar__category-pill--active:hover {
	background: var(--ldle-cat-color, #6b7280);
	border-color: var(--ldle-cat-color, #6b7280);
	color: #fff;
	filter: brightness(0.92);
}

/* When active, the dot disappears (the whole pill is colored) */
.ldle-calendar__category-pill--active .ldle-calendar__category-pill-dot {
	display: none;
}

/* Active state shows a checkmark instead */
.ldle-calendar__category-pill-check {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* === Clear filters link === */
.ldle-calendar__filter-clear {
	display: inline-flex;
	align-items: center;
	gap: var(--ldle-space-1);
	padding: 6px 10px;
	color: var(--ldle-text-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--ldle-radius-sm);
	transition: background-color 150ms ease, color 150ms ease;
	flex-shrink: 0; /* never compress below natural width */
	white-space: nowrap; /* keep "✕ Clear" together on one line */
	margin-left: auto; /* push to far right of row-1 container */
}

.ldle-calendar__filter-clear:hover {
	background: var(--ldle-bg-soft);
	color: var(--ldle-text);
}

.ldle-calendar__filter-clear-icon {
	font-size: 0.875rem;
	line-height: 1;
}

/* View toggle */
.ldle-calendar__view-toggle {
	display: inline-flex;
	gap: 0;
	background: var(--ldle-bg-soft);
	border: 1px solid var(--ldle-border);
	border-radius: var(--ldle-radius-md);
	padding: 2px;
	margin-bottom: var(--ldle-space-4);
}
.ldle-calendar__view-button {
	padding: var(--ldle-space-2) var(--ldle-space-4);
	border: 0;
	border-radius: var(--ldle-radius-sm);
	background: transparent;
	color: var(--ldle-text-muted);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: background-color 150ms ease, color 150ms ease;
}
.ldle-calendar__view-button:hover {
	color: var(--ldle-text);
}
.ldle-calendar__view-button--active {
	background: var(--ldle-bg);
	color: var(--ldle-brand);
	box-shadow: var(--ldle-shadow-sm);
}

/* ==========================================================================
   Nav bar — prev / period label (centered, big) / today / next
   ========================================================================== */
.ldle-calendar__nav-bar {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: var(--ldle-space-3);
	padding: var(--ldle-space-4) 0;
	margin-bottom: var(--ldle-space-4);
	border-bottom: 1px solid var(--ldle-border-light);
}

.ldle-calendar__nav-button {
	padding: var(--ldle-space-2) var(--ldle-space-3);
	background: transparent;
	border: 1px solid var(--ldle-border);
	border-radius: var(--ldle-radius-md);
	color: var(--ldle-text-muted);
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
	display: inline-flex;
	align-items: center;
	gap: var(--ldle-space-1);
	font-size: 0.875rem;
}
.ldle-calendar__nav-button:hover {
	background: var(--ldle-brand-soft);
	border-color: var(--ldle-brand);
	color: var(--ldle-brand);
}
.ldle-calendar__nav-button--today {
	background: var(--ldle-brand);
	color: #fff;
	border-color: var(--ldle-brand);
}
.ldle-calendar__nav-button--today:hover {
	background: var(--ldle-brand-dark);
	color: #fff;
}

.ldle-calendar__period-label {
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ldle-text);
	text-align: center;
	justify-self: center;
	letter-spacing: -0.01em;
}

/* ==========================================================================
   Month grid — 7-col grid, taller cells with big bold dates
   ========================================================================== */
.ldle-calendar__month-grid {
	border: 1px solid var(--ldle-border);
	border-radius: var(--ldle-radius-md);
	overflow: hidden;
	background: var(--ldle-border-light);
}

.ldle-calendar__weekday-headers {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1px;
	background: var(--ldle-border-light);
}
.ldle-calendar__weekday-header {
	padding: var(--ldle-space-3) var(--ldle-space-2);
	text-align: center;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--ldle-text-muted);
	text-transform: uppercase;
	background: var(--ldle-bg-soft);
}

.ldle-calendar__cells {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1px;
}
.ldle-calendar__cell {
	background: var(--ldle-bg);
	min-height: 120px;
	padding: var(--ldle-space-2);
	display: flex;
	flex-direction: column;
	gap: var(--ldle-space-1);
}
.ldle-calendar__cell--past {
	opacity: 0.55;
}
.ldle-calendar__cell--other-month {
	background: var(--ldle-bg-soft);
	opacity: 0.4;
}
.ldle-calendar__cell-date {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ldle-text);
	padding: 2px var(--ldle-space-1);
	align-self: flex-start;
	line-height: 1.2;
}
/* Today: blue circle on the date number */
.ldle-calendar__cell--today .ldle-calendar__cell-date {
	background: var(--ldle-brand);
	color: #fff;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.ldle-calendar__cell-events {
	display: flex;
	flex-direction: column;
	gap: 3px;
	overflow: hidden;
}

/* "+N more" link */
.ldle-calendar__event-more {
	font-size: 0.75rem;
	color: var(--ldle-brand);
	text-decoration: none;
	padding: 2px var(--ldle-space-1);
	font-weight: 500;
}
.ldle-calendar__event-more:hover {
	color: var(--ldle-brand-dark);
	text-decoration: underline;
}

/* ==========================================================================
   Event cell — compact tile (month grid)
   Category color = tinted bg + ::before stripe accent
   ========================================================================== */
.ldle-calendar__event-cell {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 4px 6px 4px 10px;
	background: var(--ldle-bg-soft);
	color: var(--ldle-text);
	border-radius: var(--ldle-radius-sm);
	text-decoration: none;
	font-size: 0.75rem;
	line-height: 1.3;
	position: relative;
	overflow: hidden;
	transition: filter 150ms ease;
	cursor: pointer;
}
.ldle-calendar__event-cell::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--ldle-event-color, #ccc);
}
.ldle-calendar__event-cell:hover {
	filter: brightness(0.97);
}

.ldle-calendar__event-cell-time {
	font-weight: 600;
	font-size: 0.7rem;
	opacity: 0.85;
}
.ldle-calendar__event-cell-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
}
.ldle-calendar__event-cell-course-number {
	font-size: 0.65rem;
	opacity: 0.75;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Per-category tinted bg + text (attribute selector — reads data-cat-class) */
.ldle-calendar__event-cell[data-cat-class="agency"]        { background: var(--ldle-cat-agency-bg);        color: var(--ldle-cat-agency-text); }
.ldle-calendar__event-cell[data-cat-class="contracts"]     { background: var(--ldle-cat-contracts-bg);     color: var(--ldle-cat-contracts-text); }
.ldle-calendar__event-cell[data-cat-class="ethics"]        { background: var(--ldle-cat-ethics-bg);        color: var(--ldle-cat-ethics-text); }
.ldle-calendar__event-cell[data-cat-class="general"]       { background: var(--ldle-cat-general-bg);       color: var(--ldle-cat-general-text); }
.ldle-calendar__event-cell[data-cat-class="law"]           { background: var(--ldle-cat-law-bg);           color: var(--ldle-cat-law-text); }
.ldle-calendar__event-cell[data-cat-class="property-mgmt"] { background: var(--ldle-cat-property-mgmt-bg); color: var(--ldle-cat-property-mgmt-text); }
.ldle-calendar__event-cell[data-cat-class="risk"]          { background: var(--ldle-cat-risk-bg);          color: var(--ldle-cat-risk-text); }

/* ==========================================================================
   Week view — 7 columns side by side
   ========================================================================== */
.ldle-calendar__week-columns {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1px;
	background: var(--ldle-border-light);
	border: 1px solid var(--ldle-border);
	border-radius: var(--ldle-radius-md);
	overflow: hidden;
}
.ldle-calendar__week-column {
	background: var(--ldle-bg);
	min-height: 320px;
	padding: var(--ldle-space-2);
	display: flex;
	flex-direction: column;
	gap: var(--ldle-space-2);
}
.ldle-calendar__week-column--past { opacity: 0.55; }
.ldle-calendar__week-column--today { background: var(--ldle-brand-soft); }

.ldle-calendar__week-column-header {
	text-align: center;
	padding: var(--ldle-space-2) 0;
	border-bottom: 1px solid var(--ldle-border-light);
}
.ldle-calendar__week-column-day-name {
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ldle-text-muted);
	font-weight: 600;
}
.ldle-calendar__week-column-day-number {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ldle-text);
	display: block;
	line-height: 1.2;
}
.ldle-calendar__week-column--today .ldle-calendar__week-column-day-number {
	color: var(--ldle-brand);
}
.ldle-calendar__week-column-events {
	display: flex;
	flex-direction: column;
	gap: var(--ldle-space-2);
}

/* ==========================================================================
   Event card — expanded format (week view default context)
   Category color = tinted bg + ::before stripe (similar to event-cell)
   ========================================================================== */
.ldle-calendar__event-card {
	display: flex;
	flex-direction: column;
	gap: var(--ldle-space-1);
	padding: var(--ldle-space-3) var(--ldle-space-3) var(--ldle-space-3) calc(var(--ldle-space-3) + 4px);
	background: var(--ldle-bg-soft);
	border-radius: var(--ldle-radius-md);
	color: var(--ldle-text);
	text-decoration: none;
	position: relative;
	transition: filter 150ms ease;
	cursor: pointer;
}
.ldle-calendar__event-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--ldle-event-color, #ccc);
	border-radius: var(--ldle-radius-md) 0 0 var(--ldle-radius-md);
}
.ldle-calendar__event-card:hover {
	filter: brightness(0.97);
}
.ldle-calendar__event-card-header {
	display: flex;
	justify-content: space-between;
	gap: var(--ldle-space-2);
	font-size: 0.75rem;
}
.ldle-calendar__event-card-time {
	font-weight: 600;
	font-size: 0.8125rem;
}
.ldle-calendar__event-card-course-number {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.7rem;
	opacity: 0.75;
}
.ldle-calendar__event-card-title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}
.ldle-calendar__event-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ldle-space-2);
	font-size: 0.75rem;
	opacity: 0.85;
}

/* Per-category tinted bg + text for event-card */
.ldle-calendar__event-card[data-cat-class="agency"]        { background: var(--ldle-cat-agency-bg);        color: var(--ldle-cat-agency-text); }
.ldle-calendar__event-card[data-cat-class="contracts"]     { background: var(--ldle-cat-contracts-bg);     color: var(--ldle-cat-contracts-text); }
.ldle-calendar__event-card[data-cat-class="ethics"]        { background: var(--ldle-cat-ethics-bg);        color: var(--ldle-cat-ethics-text); }
.ldle-calendar__event-card[data-cat-class="general"]       { background: var(--ldle-cat-general-bg);       color: var(--ldle-cat-general-text); }
.ldle-calendar__event-card[data-cat-class="law"]           { background: var(--ldle-cat-law-bg);           color: var(--ldle-cat-law-text); }
.ldle-calendar__event-card[data-cat-class="property-mgmt"] { background: var(--ldle-cat-property-mgmt-bg); color: var(--ldle-cat-property-mgmt-text); }
.ldle-calendar__event-card[data-cat-class="risk"]          { background: var(--ldle-cat-risk-bg);          color: var(--ldle-cat-risk-text); }

/* ==========================================================================
   Day view — date-block header + agenda card stack
   ========================================================================== */
.ldle-calendar__day {
	background: var(--ldle-bg);
}
.ldle-calendar__day--past { opacity: 0.7; }

.ldle-calendar__day-header {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--ldle-space-5);
	align-items: center;
	padding: var(--ldle-space-4) 0;
	margin-bottom: var(--ldle-space-4);
	border-bottom: 1px solid var(--ldle-border-light);
}
.ldle-calendar__day-date-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--ldle-space-3) var(--ldle-space-4);
	background: var(--ldle-brand-soft);
	border-radius: var(--ldle-radius-md);
	min-width: 100px;
}
.ldle-calendar__day-month {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ldle-brand);
}
.ldle-calendar__day-num {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--ldle-text);
	line-height: 1;
}
.ldle-calendar__day-dow {
	font-size: 0.8125rem;
	color: var(--ldle-text-muted);
}
.ldle-calendar__day-summary-count {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ldle-text);
}
.ldle-calendar__day-summary-meta {
	font-size: 0.875rem;
	color: var(--ldle-text-muted);
	margin-top: var(--ldle-space-1);
}
.ldle-calendar__day-summary-meta strong {
	color: var(--ldle-brand);
	font-weight: 700;
}
.ldle-calendar__day-events {
	display: flex;
	flex-direction: column;
	gap: var(--ldle-space-4);
}

/* ==========================================================================
   Event agenda — 3-column rich card (image | body | cta-col)
   ========================================================================== */
.ldle-event-agenda {
	display: grid;
	grid-template-columns: 240px 1fr 180px;
	gap: var(--ldle-space-4);
	padding: var(--ldle-space-4);
	background: var(--ldle-bg);
	border: 1px solid var(--ldle-border);
	border-left: 4px solid var(--ldle-event-color, #ccc);
	border-radius: var(--ldle-radius-md);
	transition: box-shadow 150ms ease;
}
.ldle-event-agenda:hover {
	box-shadow: var(--ldle-shadow-md);
}

.ldle-event-agenda__image {
	width: 240px;
	height: 150px;
	background-color: var(--ldle-bg-page);
	background-size: cover;
	background-position: center;
	border-radius: var(--ldle-radius-sm);
}

.ldle-event-agenda__body {
	display: flex;
	flex-direction: column;
	gap: var(--ldle-space-2);
	min-width: 0;
}

.ldle-event-agenda__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ldle-space-2);
}
.ldle-event-agenda__cat-pill,
.ldle-event-agenda__hours-pill {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 3px var(--ldle-space-2);
	border-radius: 999px;
	display: inline-block;
}
.ldle-event-agenda__cat-pill {
	background: var(--ldle-bg-page);
	color: var(--ldle-text-muted);
}
.ldle-event-agenda__hours-pill {
	background: var(--ldle-brand-soft);
	color: var(--ldle-brand);
}

/* Per-category cat-pill colors */
.ldle-event-agenda__cat-pill--agency        { background: var(--ldle-cat-agency-bg);        color: var(--ldle-cat-agency-text); }
.ldle-event-agenda__cat-pill--contracts     { background: var(--ldle-cat-contracts-bg);     color: var(--ldle-cat-contracts-text); }
.ldle-event-agenda__cat-pill--ethics        { background: var(--ldle-cat-ethics-bg);        color: var(--ldle-cat-ethics-text); }
.ldle-event-agenda__cat-pill--general       { background: var(--ldle-cat-general-bg);       color: var(--ldle-cat-general-text); }
.ldle-event-agenda__cat-pill--law           { background: var(--ldle-cat-law-bg);           color: var(--ldle-cat-law-text); }
.ldle-event-agenda__cat-pill--property-mgmt { background: var(--ldle-cat-property-mgmt-bg); color: var(--ldle-cat-property-mgmt-text); }
.ldle-event-agenda__cat-pill--risk          { background: var(--ldle-cat-risk-bg);          color: var(--ldle-cat-risk-text); }

/* Event-card cat-pill — filled solid + white text variant */
.ldle-calendar__event-card-cat-pill {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--ldle-space-1);
    padding: 2px 6px;
    border-radius: var(--ldle-radius-md);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
}
.ldle-calendar__event-card-cat-pill--agency        { background: var(--ldle-cat-agency-solid); }
.ldle-calendar__event-card-cat-pill--contracts     { background: var(--ldle-cat-contracts-solid); }
.ldle-calendar__event-card-cat-pill--ethics        { background: var(--ldle-cat-ethics-solid); }
.ldle-calendar__event-card-cat-pill--general       { background: var(--ldle-cat-general-solid); }
.ldle-calendar__event-card-cat-pill--law           { background: var(--ldle-cat-law-solid); }
.ldle-calendar__event-card-cat-pill--property-mgmt { background: var(--ldle-cat-property-mgmt-solid); }
.ldle-calendar__event-card-cat-pill--risk          { background: var(--ldle-cat-risk-solid); }

.ldle-event-agenda__time {
	display: flex;
	align-items: center;
	gap: var(--ldle-space-2);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ldle-text);
}
.ldle-event-agenda__time-icon {
	color: var(--ldle-text-muted);
	flex-shrink: 0;
}

.ldle-event-agenda__title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
}
.ldle-event-agenda__title a {
	color: var(--ldle-text);
	text-decoration: none;
}
.ldle-event-agenda__title a:hover {
	color: var(--ldle-brand);
}

.ldle-event-agenda__desc {
	margin: 0;
	font-size: 0.875rem;
	color: var(--ldle-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.5;
}

.ldle-event-agenda__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ldle-space-3);
	font-size: 0.75rem;
	color: var(--ldle-text-muted);
	margin-top: auto;
	padding-top: var(--ldle-space-2);
}
.ldle-event-agenda__course-num {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ldle-event-agenda__cta-col {
	display: flex;
	flex-direction: column;
	gap: var(--ldle-space-2);
	align-items: stretch;
	justify-content: center;
	padding-left: var(--ldle-space-3);
	border-left: 1px solid var(--ldle-border-light);
}
.ldle-event-agenda__price {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ldle-text);
	text-align: center;
	margin-bottom: var(--ldle-space-1);
}
.ldle-event-agenda__cta {
	padding: var(--ldle-space-2) var(--ldle-space-3);
	background: var(--ldle-brand);
	color: #fff;
	text-decoration: none;
	border-radius: var(--ldle-radius-sm);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	transition: background-color 150ms ease;
}
.ldle-event-agenda__cta:hover {
	background: var(--ldle-brand-dark);
	color: #fff;
}
.ldle-event-agenda__cta--secondary {
	background: transparent;
	color: var(--ldle-brand);
	border: 1px solid var(--ldle-brand);
}
.ldle-event-agenda__cta--secondary:hover {
	background: var(--ldle-brand-soft);
	color: var(--ldle-brand-dark);
}

/* ==========================================================================
   List view — TEC-style left date column + event rows
   ========================================================================== */
.ldle-calendar__list {
	display: flex;
	flex-direction: column;
}
.ldle-calendar__list-section {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--ldle-space-5);
	padding: var(--ldle-space-4) 0;
	border-top: 1px solid var(--ldle-border-light);
	align-items: flex-start;
}
.ldle-calendar__list-section:first-child {
	border-top: 0;
}
.ldle-calendar__list-section--past { opacity: 0.6; }
.ldle-calendar__list-section--today .ldle-calendar__list-section-header h3 {
	color: var(--ldle-brand);
}

.ldle-calendar__list-section-header h3 {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ldle-text);
	line-height: 1.4;
	border-left: 3px solid var(--ldle-brand);
	padding-left: var(--ldle-space-3);
}
.ldle-calendar__list-section-events {
	display: flex;
	flex-direction: column;
	gap: var(--ldle-space-2);
}

/* ==========================================================================
   Event card — list view context (horizontal flexbox restyle)
   ========================================================================== */
.ldle-calendar__list-section-events .ldle-calendar__event-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--ldle-space-4);
	align-items: center;
	padding: var(--ldle-space-3) var(--ldle-space-4);
}
.ldle-calendar__list-section-events .ldle-calendar__event-card-header {
	flex-direction: column;
	display: flex;
	justify-content: flex-start;
	gap: 2px;
	min-width: 130px;
}
.ldle-calendar__list-section-events .ldle-calendar__event-card-title {
	font-size: 1rem;
}
.ldle-calendar__list-section-events .ldle-calendar__event-card-meta {
	white-space: nowrap;
}

/* ==========================================================================
   Empty state
   ========================================================================== */
.ldle-calendar__empty-state {
	padding: var(--ldle-space-7) var(--ldle-space-4);
	text-align: center;
	background: var(--ldle-bg-soft);
	border: 1px dashed var(--ldle-border);
	border-radius: var(--ldle-radius-md);
}
.ldle-calendar__empty-state-message {
	margin: 0;
	color: var(--ldle-text-muted);
	font-size: 1rem;
}

/* ==========================================================================
   Popover — hover-revealed event details, JS-positioned
   ========================================================================== */
.ldle-calendar__popover {
	position: absolute;
	z-index: 100;
	width: 320px;
	background: var(--ldle-bg);
	border: 1px solid var(--ldle-border);
	border-radius: var(--ldle-radius-md);
	box-shadow: var(--ldle-shadow-lg);
	padding: var(--ldle-space-4);
	opacity: 0;
	transform: scale(0.96);
	pointer-events: none;
	transition: opacity 150ms ease, transform 150ms ease;
}
.ldle-calendar__popover.is-visible {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}
.ldle-calendar__popover-image {
	width: 100%;
	height: 120px;
	background-color: var(--ldle-bg-page);
	background-size: cover;
	background-position: center;
	border-radius: var(--ldle-radius-sm);
	margin-bottom: var(--ldle-space-3);
}
.ldle-calendar__popover-cat {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ldle-text-muted);
}
.ldle-calendar__popover-title {
	margin: var(--ldle-space-1) 0 var(--ldle-space-3);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ldle-text);
}
.ldle-calendar__popover-meta {
	display: flex;
	flex-direction: column;
	gap: var(--ldle-space-2);
	margin-bottom: var(--ldle-space-3);
}
.ldle-calendar__popover-meta-row {
	display: flex;
	align-items: center;
	gap: var(--ldle-space-2);
	font-size: 0.8125rem;
	color: var(--ldle-text-muted);
}
.ldle-calendar__popover-meta-row svg {
	flex-shrink: 0;
	color: var(--ldle-text-faded);
}
.ldle-calendar__popover-cta {
	display: block;
	padding: var(--ldle-space-2) var(--ldle-space-3);
	background: var(--ldle-brand);
	color: #fff;
	text-decoration: none;
	border-radius: var(--ldle-radius-sm);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	transition: background-color 150ms ease;
}
.ldle-calendar__popover-cta:hover {
	background: var(--ldle-brand-dark);
	color: #fff;
}

/* ==========================================================================
   Focus styles — :focus-visible for keyboard navigation
   ========================================================================== */
.ldle-calendar a:focus-visible,
.ldle-calendar button:focus-visible,
.ldle-calendar input:focus-visible {
	outline: 2px solid var(--ldle-brand);
	outline-offset: 2px;
}

/* Scoped override: the search input is wrapped in a container with its
   own :focus-within fill (brand-soft + brand border), which serves as
   the keyboard focus indicator. The outer ring is redundant here and
   reads as a doubled indicator. Specificity (0,3,0) wins over the
   global (0,2,1). */
.ldle-calendar .ldle-calendar__search-input:focus-visible {
	outline: 0;
}

/* ==========================================================================
   Reduced motion preference
   --------------------------------------------------------------------------
   Single source of truth for honoring (prefers-reduced-motion: reduce).
   Covers both transitions (everywhere) and the hero badge dot animation
   (v2.1 addition). The hero-only rules below this section's mobile block
   were merged in here during Phase 3 cleanup wave 1.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ldle-calendar *,
	.ldle-calendar *::before,
	.ldle-calendar *::after {
		transition: none !important;
	}
	.ldle-calendar__hero-badge-dot {
		animation: none;
	}
}

/* ==========================================================================
   Mobile responsive — 768px breakpoint
   ========================================================================== */
@media (max-width: 768px) {
	.ldle-calendar__shell {
		padding: var(--ldle-space-3);
		border-radius: var(--ldle-radius-md);
	}

	/* Filter controls stack vertically on mobile */
	.ldle-calendar__filter-controls {
		flex-direction: column;
		align-items: stretch;
	}

	/* View toggle: remove separator, align to start */
	.ldle-calendar__filter-controls .ldle-calendar__view-toggle {
		margin-right: 0;
		align-self: flex-start;
	}

	.ldle-calendar__filter-controls .ldle-calendar__view-toggle::after {
		display: none;
	}

	/* Category pills row wraps naturally; take full width */
	.ldle-calendar__category-pills {
		width: 100%;
	}

	/* Clear link: align to right on its own */
	.ldle-calendar__filter-clear {
		align-self: flex-end;
		margin-left: 0;
	}

	/* View toggle — hide Month/Week, defaulting users to Day/List */
	.ldle-calendar__view-button--desktop-only {
		display: none;
	}

	/* Nav bar — stack vertical, period label on top */
	.ldle-calendar__nav-bar {
		grid-template-columns: 1fr;
		gap: var(--ldle-space-2);
	}
	.ldle-calendar__nav-button {
		justify-content: center;
	}
	.ldle-calendar__period-label {
		order: -1;
		font-size: 1.25rem;
	}

	/* Month grid — horizontal scroll fallback for no-JS month landings */
	.ldle-calendar__month-grid {
		overflow-x: auto;
	}
	.ldle-calendar__cells,
	.ldle-calendar__weekday-headers {
		min-width: 480px;
	}
	.ldle-calendar__cell {
		min-height: 80px;
	}
	.ldle-calendar__cell-date {
		font-size: 0.875rem;
	}

	/* Week — stack columns to 1 */
	.ldle-calendar__week-columns {
		grid-template-columns: 1fr;
	}
	.ldle-calendar__week-column {
		min-height: auto;
	}

	/* Day — date block above summary */
	.ldle-calendar__day-header {
		grid-template-columns: 1fr;
		gap: var(--ldle-space-3);
	}
	.ldle-calendar__day-date-block {
		min-width: 0;
	}

	/* Event agenda — single column (image stacks above body, cta below) */
	.ldle-event-agenda {
		grid-template-columns: 1fr;
		gap: var(--ldle-space-3);
	}
	.ldle-event-agenda__image {
		width: 100%;
		height: 180px;
	}
	.ldle-event-agenda__cta-col {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--ldle-border-light);
		padding-top: var(--ldle-space-3);
	}

	/* List view — date column above events */
	.ldle-calendar__list-section {
		grid-template-columns: 1fr;
		gap: var(--ldle-space-2);
	}

	/* Popover — hide entirely (defense alongside JS touch-detect skip) */
	.ldle-calendar__popover {
		display: none !important;
	}
}

/* ==========================================================================
   v2.1 BRAND HERO + CARD SHELL
   --------------------------------------------------------------------------
   Brand-blue gradient hero rendered above the calendar shell on /nvcalendar/.
   Visual language mirrors the ceASAP FAQ page (faq/): 135deg gradient with
   two decorative radial overlays for depth, glassmorphic NRED pill, large
   page-title h1, and a white card "shell" that overlaps the hero by 4rem
   with the signature 4px brand-blue top accent.

   .ldle-calendar itself is now a transparent positioning container; its
   prior card chrome (bg/border/radius/padding) lives on .ldle-calendar__shell.
   ========================================================================== */

.ldle-calendar__shell {
	/* migrated chrome */
	background: var(--ldle-bg);
	border-radius: var(--ldle-radius-lg);
	padding: var(--ldle-space-5);

	/* v2.1 additions */
	max-width: min(1200px, 100% - 3rem);
	margin: -4rem auto 0;
	border-top: 4px solid var(--ldle-brand);
	box-shadow: var(--ldle-shadow-xl);
	/* isolation creates a new stacking context so the shell paints
	   above the hero's positioned overlays in the 4rem overlap zone,
	   WITHOUT making the shell a positioning ancestor (which would
	   break .ldle-calendar__popover's document-space coordinates). */
	isolation: isolate;
}

.ldle-calendar__hero {
	position: relative;
	/* Full-viewport-width escape so the blue banner spans edge-to-edge
	   regardless of the theme's constrained content container. Matches the
	   production /faq/ hero technique; deferred in v2.1, adopted once that
	   reference confirmed it. Lets the 1200px white shell overlap a true
	   full-bleed banner instead of revealing blue in its rounded corners. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	min-height: 360px;
	background: var(--ldle-gradient-hero);
	color: #fff;
}

.ldle-calendar__hero::before {
	content: "";
	position: absolute;
	top: -20%;
	right: -10%;
	width: 60%;
	height: 120%;
	background: radial-gradient(circle, rgba(214, 230, 249, 0.18) 0%, rgba(214, 230, 249, 0) 60%);
	pointer-events: none;
}

.ldle-calendar__hero::after {
	content: "";
	position: absolute;
	bottom: -25%;
	left: -10%;
	width: 50%;
	height: 100%;
	background: radial-gradient(circle, rgba(10, 133, 240, 0.15) 0%, rgba(10, 133, 240, 0) 65%);
	pointer-events: none;
}

.ldle-calendar__hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 4rem 1.5rem 5.5rem;
}

.ldle-calendar__hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}

.ldle-calendar__hero-badge-dot {
	width: 8px;
	height: 8px;
	background: #4ade80;
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
	animation: ldle-hero-pulse 2s ease-in-out infinite;
}

.ldle-calendar__hero-title {
	margin: 0 0 1rem 0;
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #fff;
}

.ldle-calendar__hero-subtitle {
	margin: 0;
	max-width: 92ch;
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
}

@keyframes ldle-hero-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}

@media (max-width: 768px) {
	.ldle-calendar__hero {
		min-height: 280px;
	}
	.ldle-calendar__hero-inner {
		padding: 2.5rem 1rem 4rem;
	}
	.ldle-calendar__shell {
		margin-top: -2rem;
	}
}

/* === Elementor Pro chrome compat (this sheet loads only on /nvcalendar/) ===
   On the synthetic calendar endpoint Elementor's menu-cart JS never inits,
   so the side-cart tray + lightbox overlay render visible by default.
   Suppress them here; the header cart icon (__toggle) is unaffected.
   Proper fix (query-context so Elementor treats the endpoint as a document)
   is tracked as post-launch hardening. */
.elementor-menu-cart__container { display: none !important; }

/* Breathing room between the calendar and the site footer. */
.ldle-calendar { padding-bottom: 3rem; }

/* --- Enrolled highlight (slice 3b) ---------------------------------------
   Single shared modifier applied across event-cell / event-card / event-agenda
   wrappers. Visual: pulsing corner dot (enrolled indicator). Position context
   is guaranteed by an explicit `position: relative` (the three host elements
   default to static otherwise). --ldle-enrolled token (default #2563eb)
   declared in :root above; override at the page or theme level. */
.ldle-event--enrolled {
	position: relative;
}
.ldle-event--enrolled::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--ldle-enrolled);
    pointer-events: none;
    animation: ldle-enrolled-pulse 2s ease-out infinite;
}

@keyframes ldle-enrolled-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--ldle-enrolled-rgb), 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(var(--ldle-enrolled-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--ldle-enrolled-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ldle-event--enrolled::after { animation: none; }
}

/* Agenda Zoom join CTA (slice 3b) — enrolled-only, server-side rendered. */
.ldle-event-agenda__cta--zoom {
	background: var(--ldle-enrolled);
	color: #fff;
}
.ldle-event-agenda__cta--zoom:hover {
	background: color-mix(in srgb, var(--ldle-enrolled) 85%, #000);
	color: #fff;
}