/* =============================================================
   PARISH CALENDAR — additions for the live (Google-backed) calendar.

   The base component (.cal-wrapper, .cal-grid, .cal-chip, …) lives in
   site.css and is unchanged. This file only adds what the static mockup
   never had: filter on/off states, the list view, the populated day-detail
   sidebar, and loading/notice states.

   Loaded only where the stjohns/calendar block renders.
   ============================================================= */

/* ===== TOOLBAR & FILTERS ===== */

/* The mockup's pills were inert <span>s; they're buttons now. */
.cal-filter-pill {
	font-family: inherit;
	cursor: pointer;
	transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.cal-filter-pill:hover { opacity: 0.85; }
.cal-filter-pill:focus-visible,
.cal-view-btn:focus-visible,
.cal-nav-btn:focus-visible,
.cal-day:focus-visible {
	outline: 2px solid hsl(var(--ring));
	outline-offset: 2px;
}

/* Filtered out: drained of colour, but still legible and clickable. */
.cal-filter-pill--off {
	background: transparent;
	color: hsl(var(--muted-foreground));
	border-color: hsl(var(--border));
	text-decoration: line-through;
	opacity: 0.65;
}

.cal-view-btn { font-family: inherit; }

/* ===== GRID ADDITIONS ===== */

/* Real event titles are longer than the mockup's placeholders. A bare `1fr`
   floors at min-content, and the chips are white-space: nowrap, so a long
   title ("Food Pantry Distribution") stretched its column and pushed the rest
   past the grid's overflow: hidden — invisible, not merely cramped.
   minmax(0, 1fr) keeps the seven columns equal and lets chips ellipsize. */
.cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-day, .cal-events { min-width: 0; }

/* Days are <button>s, and browsers centre a button's content vertically, so
   a lone event floated mid-cell. Stack from the top instead, with the date
   number in the top-right corner. */
.cal-day {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.cal-day-num { align-self: flex-end; }

.cal-day--selected {
	background: hsl(var(--secondary));
	box-shadow: inset 0 0 0 2px hsl(var(--primary) / 0.55);
}
/* Empty days shouldn't advertise themselves as clickable. */
.cal-day:not(.cal-day--has-events) { cursor: default; }

.cal-chip--more {
	background: transparent;
	color: hsl(var(--muted-foreground));
	font-weight: 600;
	border-color: transparent;
	padding-left: 0.25rem;
}

/* Fade the grid while a month is in flight, rather than blanking it. */
.cal-wrapper--loading .cal-grid-wrap,
.cal-wrapper--loading .cal-list {
	opacity: 0.45;
	transition: opacity 0.15s;
	pointer-events: none;
}

/* ===== LIST VIEW ===== */

.cal-list {
	border: 1px solid hsl(var(--border));
	border-radius: 0.25rem;
	overflow: hidden;
	background: hsl(var(--card, var(--background)));
}
.cal-list-day {
	display: flex;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid hsl(var(--border));
}
.cal-list-day:last-child { border-bottom: none; }

.cal-list-date {
	flex-shrink: 0;
	width: 3rem;
	text-align: center;
	line-height: 1.2;
}
.cal-list-dow {
	display: block;
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: hsl(var(--muted-foreground));
}
.cal-list-num {
	display: block;
	font-family: "Cormorant Garamond", Garamond, Georgia, serif;
	font-size: 1.625rem;
	font-weight: 600;
	color: hsl(var(--foreground));
}
.cal-list-day--today .cal-list-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.cal-list-items {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.cal-list-item {
	padding-left: 0.875rem;
	border-left: 3px solid hsl(var(--border));
}
.cal-list-time {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: hsl(var(--muted-foreground));
}
.cal-list-title {
	font-family: "Cormorant Garamond", Garamond, Georgia, serif;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: hsl(var(--foreground));
	margin-top: 0.125rem;
}
.cal-list-title a { color: inherit; text-decoration: none; }
.cal-list-title a:hover { text-decoration: underline; }
.cal-list-loc {
	font-size: 0.875rem;
	color: hsl(var(--muted-foreground));
	margin-top: 0.125rem;
}
.cal-list-empty {
	padding: 2.5rem 1.25rem;
	text-align: center;
	font-size: 0.875rem;
	color: hsl(var(--muted-foreground));
}

/* Category accent on the list rail, matching the grid chips. */
.cal-list-item--worship     { border-left-color: hsl(var(--cat-worship)); }
.cal-list-item--music       { border-left-color: hsl(var(--cat-music)); }
.cal-list-item--formation   { border-left-color: hsl(var(--cat-formation)); }
.cal-list-item--parish-life { border-left-color: hsl(var(--cat-parish)); }
.cal-list-item--community   { border-left-color: hsl(var(--cat-community)); }
.cal-list-item--committees  { border-left-color: hsl(var(--cat-committees)); }
.cal-list-item--private   { border-left-color: hsl(var(--border)); border-left-style: dashed; }

/* ===== DAY DETAIL SIDEBAR ===== */

.cal-detail-date {
	font-family: "Cormorant Garamond", Garamond, Georgia, serif;
	font-size: 1.25rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid hsl(var(--border));
}
.cal-detail-list { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; }
.cal-detail-event {
	padding-left: 0.75rem;
	border-left: 3px solid hsl(var(--border));
}
.cal-detail-event--worship     { border-left-color: hsl(var(--cat-worship)); }
.cal-detail-event--music       { border-left-color: hsl(var(--cat-music)); }
.cal-detail-event--formation   { border-left-color: hsl(var(--cat-formation)); }
.cal-detail-event--parish-life { border-left-color: hsl(var(--cat-parish)); }
.cal-detail-event--community   { border-left-color: hsl(var(--cat-community)); }
.cal-detail-event--committees  { border-left-color: hsl(var(--cat-committees)); }
.cal-detail-event--private   { border-left-color: hsl(var(--border)); border-left-style: dashed; }

.cal-detail-time {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: hsl(var(--muted-foreground));
}
.cal-detail-title {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: hsl(var(--foreground));
	margin-top: 0.125rem;
}
.cal-detail-loc {
	display: block;
	font-size: 0.8125rem;
	color: hsl(var(--muted-foreground));
	margin-top: 0.125rem;
}
.cal-detail-desc {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: hsl(var(--muted-foreground));
	margin-top: 0.5rem;
}
.cal-detail-desc p + p { margin-top: 0.5rem; }
.cal-detail-desc ul, .cal-detail-desc ol { margin: 0.5rem 0 0 1.125rem; }
.cal-detail-desc a { color: hsl(var(--primary)); }
.cal-detail-link {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: hsl(var(--primary));
	text-decoration: none;
}
.cal-detail-link:hover { text-decoration: underline; }

/* On wide screens the card follows you down the grid. */
@media (min-width: 1024px) {
	.cal-detail-card { position: sticky; top: calc(var(--header-height) + 1.5rem + var(--admin-bar-h, 0px)); }
}

/* ===== ADMIN NOTICE (signed-in editors only) ===== */

.cal-notice {
	margin-bottom: 1.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid hsl(var(--accent) / 0.4);
	border-radius: 0.25rem;
	background: hsl(var(--accent) / 0.1);
	font-size: 0.875rem;
	color: hsl(var(--accent-foreground));
}
.cal-notice a { color: hsl(var(--primary)); margin-left: 0.5rem; }