/* Brentwood Calendar block — mirrors brentwood.ca/calendar.
   Fonts (Oswald / Open Sans) are enqueued by the timetable block; inherited here.
   Brand primary = rgb(200,39,44). Layout: Select-Calendars sidebar + event list
   (one bordered block per event, prose-width, centred). */

.bw-cal {
	--bw-primary: rgb(200, 39, 44);
	display: grid;
	grid-template-columns: 33.4% 66.6%;
	gap: 0;
	max-width: 100%;
	background: transparent;
	color: #374151;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.bw-cal--no-sidebar {
	grid-template-columns: 1fr;
}

.bw-cal__svg {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	fill: none;
}

/* ---------- Sidebar ---------- */
.bw-cal__sidebar {
	padding: 1.5rem 1.25rem;
	border-right: 4px solid var(--bw-primary);
}

.bw-cal__sidebar-title {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #9ca3af;
	font-weight: 600;
	margin-bottom: 1rem;
}

.bw-cal__calendars {
	list-style: none;
	/* Band left edge sits flush with the "Select Calendars" title (the sidebar
	   content edge). !important beats the theme's list padding/margin. */
	margin: 0 !important;
	padding: 0 !important;
}

.bw-cal__calendar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	/* A little inner padding so the check bullet isn't jammed against the band
	   edge; the band's own left edge still lines up with the title. */
	margin: 0 !important;
	padding: 0.55rem 0.6rem !important;
	border-bottom: 1px solid #f1f3f5;
	list-style: none;
}

/* Zebra striping on the calendar list (matches the event list + live). */
.bw-cal__calendar:nth-child(odd) {
	background: #f3f4f6;
}

.bw-cal__calendar:nth-child(even) {
	background: #fff;
}

.bw-cal__cal-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	cursor: pointer;
	font-size: 0.95rem;
	color: #374151;
}

.bw-cal__cal-check {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.bw-cal__cal-icon {
	position: relative;
	display: inline-flex;
	color: #6b7280;
	font-size: 1.3rem;
}

.bw-cal__cal-on {
	display: none;
}

.bw-cal__cal-check:checked ~ .bw-cal__cal-icon .bw-cal__cal-on {
	display: inline-flex;
}

.bw-cal__cal-check:checked ~ .bw-cal__cal-icon .bw-cal__cal-off {
	display: none;
}

.bw-cal__cal-check:focus-visible ~ .bw-cal__cal-icon {
	outline: 2px solid var(--bw-primary);
	outline-offset: 2px;
	border-radius: 50%;
}

.bw-cal__add {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.78rem;
	white-space: nowrap;
	color: var(--bw-primary);
	text-decoration: none;
}

.bw-cal__add:hover,
.bw-cal__add:focus {
	text-decoration: underline;
	color: var(--bw-primary);
	background: transparent;
	box-shadow: none;
}

/* ---------- Sidebar note + mini calendar ---------- */
.bw-cal__note {
	margin-top: 1.25rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: #4b5563;
}

.bw-cal__note p {
	margin: 0 0 0.85rem;
}

.bw-cal__note-link {
	color: var(--bw-primary);
	text-decoration: none;
}

.bw-cal__note-link:hover {
	text-decoration: underline;
}

.bw-cal__mini {
	position: relative;
	margin-top: 1.25rem;
	padding: 0.75rem 0.85rem;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	background: #fff;
}

.bw-cal__mini-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.bw-cal__mini-title {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 1rem;
	color: #374151;
}

.bw-cal__mini-nav {
	border: 0;
	background: transparent;
	cursor: pointer;
	color: #6b7280;
	font-size: 1.15rem;
	line-height: 1;
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
}

.bw-cal__mini-nav:hover {
	color: var(--bw-primary);
	background: #f3f4f6;
}

.bw-cal__mini-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center;
}

.bw-cal__mini-dow {
	font-size: 0.7rem;
	font-weight: 600;
	color: #9ca3af;
	padding: 0.2rem 0;
}

.bw-cal__mini-day {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #374151;
	font: inherit;
	font-size: 0.8rem;
	line-height: 1;
	/* Keep two-digit dates on one line (theme word-break would split "23"). */
	white-space: nowrap;
	/* Only marked days are interactive (see .is-event / .is-break below). */
	cursor: default;
}

/* Days with events — solid fill (mirrors live: blue normally, red for break/leave),
   and the only clickable cells. */
.bw-cal__mini-day.is-event,
.bw-cal__mini-day.is-break {
	cursor: pointer;
}

.bw-cal__mini-day.is-event {
	background: #2563eb;
	color: #fff;
}

.bw-cal__mini-day.is-break {
	background: var(--bw-primary);
	color: #fff;
}

.bw-cal__mini-day.is-event:hover {
	background: #1d4ed8;
	color: #fff;
}

.bw-cal__mini-day.is-break:hover {
	background: #a51f23;
	color: #fff;
}

/* Today: bold. The chosen start date: a ring so it reads on top of an event fill. */
.bw-cal__mini-day.is-today {
	font-weight: 700;
}

.bw-cal__mini-day.is-selected {
	box-shadow: inset 0 0 0 2px #111827;
}

/* ---------- Mini calendar popover (event details) ---------- */
.bw-cal__pop {
	position: absolute;
	z-index: 30;
	width: 250px;
	max-width: calc(100% - 1rem);
	padding: 0.85rem 0.95rem;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	text-align: left;
	font-size: 0.8rem;
	line-height: 1.45;
	color: #374151;
}

.bw-cal__pop-close {
	position: absolute;
	top: 2px;
	right: 6px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #9ca3af;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.bw-cal__pop-close:hover {
	color: var(--bw-primary);
}

.bw-cal__pop-event + .bw-cal__pop-event {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid #eef0f2;
}

.bw-cal__pop-title {
	font-weight: 700;
	color: #1f2937;
	padding-right: 1rem;
}

.bw-cal__pop-when {
	color: #6b7280;
	margin: 0.15rem 0 0.4rem;
}

.bw-cal__pop-desc {
	margin-bottom: 0.4rem;
}

.bw-cal__pop-desc p {
	margin: 0 0 0.4rem;
}

.bw-cal__pop-desc p:last-child {
	margin-bottom: 0;
}

.bw-cal__pop-desc a {
	color: var(--bw-primary);
	text-decoration: none;
}

.bw-cal__pop-desc a:hover {
	text-decoration: underline;
}

.bw-cal__pop-loc {
	color: #6b7280;
}

/* ---------- Main column ---------- */
.bw-cal__main {
	min-width: 0;
}

.bw-cal__header {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	/* Live uses bg-white/50 — translucent white over the page background. */
	background: rgba(255, 255, 255, 0.5);
}

.bw-cal__header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	border: 1px solid #d1d5db;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	color: #9ca3af;
	font-size: 1.15rem;
	opacity: 0.6;
	flex: 0 0 auto;
}

.bw-cal__heading {
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: 1.5rem;
	color: #374151;
	margin-right: auto;
}

.bw-cal__startdate {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: #6b7280;
	opacity: 0.85;
}

.bw-cal__startdate-label {
	color: #6b7280;
}

.bw-cal__date-input,
.bw-cal__search-input,
.bw-cal__perpage-input {
	font: inherit;
	font-size: 0.85rem;
	padding: 0.3rem 0.5rem;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	background: #fff;
	color: #374151;
}

.bw-cal__search {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #9ca3af;
}

/* prose-width body (matches live max-w-prose) */
.bw-cal__body {
	max-width: 42rem;
	margin: 0 auto;
	padding: 0 1.5rem 1.25rem;
}

/* ---------- Timezone row ---------- */
.bw-cal__tz {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0 0.75rem;
}

.bw-cal__tz-text {
	font-size: 0.85rem;
	font-weight: 600;
	color: #374151;
}

.bw-cal__tz-toggle {
	display: inline-flex;
	padding: 0.25rem 1rem;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	background: #fff;
	color: #6b7280;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}

/* No hover effect — keep it identical to the resting state (override theme). */
.bw-cal__tz-toggle:hover,
.bw-cal__tz-toggle:focus,
.bw-cal__tz-toggle:active {
	background: #fff !important;
	border-color: #d1d5db !important;
	color: #6b7280 !important;
	box-shadow: none !important;
}


/* ---------- Event list ---------- */
.bw-cal__list {
	border-top: 2px solid #e5e7eb;
}

.bw-cal__event {
	position: relative;
	padding: 0.6rem 1rem 0.6rem 1.25rem;
	border-bottom: 2px solid #e5e7eb;
}

.bw-cal__event--bookend {
	margin-top: -2px;
	border-top: 4px solid var(--bw-primary);
}

/* Zebra striping — alternating row background (mirrors live). */
.bw-cal__event:nth-child(odd) {
	background: #f3f4f6;
}

.bw-cal__event:nth-child(even) {
	background: #fff;
}

.bw-cal__year {
	position: absolute;
	top: 0.3rem;
	right: 1rem;
	font-family: "Oswald", sans-serif;
	font-size: 1.875rem;
	font-weight: 600;
	color: #374151;
	opacity: 0.2;
	line-height: 1;
	pointer-events: none;
}

.bw-cal__dr {
	font-size: 0.95rem;
	color: #374151;
	padding-right: 3.5rem;
}

.bw-cal__arrow {
	color: #9ca3af;
	opacity: 0.7;
	padding: 0 0.15rem;
}

.bw-cal__title-row {
	margin-top: 0.4rem;
	padding-top: 0.4rem;
	border-top: 1px dashed #9ca3af;
	font-weight: 600;
	color: #374151;
}

.bw-cal__title-icon {
	margin-right: 0.25rem;
}

.bw-cal__title.is-marked {
	text-decoration: underline;
}

.bw-cal__loc {
	font-size: 0.85rem;
	color: #6b7280;
	margin-top: 0.15rem;
}

.bw-cal__desc {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	margin-top: 0.35rem;
	font-size: 0.9rem;
	color: #4b5563;
}

.bw-cal__info {
	color: #9ca3af;
	font-size: 0.9rem;
	padding-top: 0.15rem;
	flex: 0 0 auto;
}

.bw-cal__desc-body {
	flex: 1 1 auto;
	min-width: 0;
}

.bw-cal__desc-body p {
	margin: 0 0 0.3rem;
}

.bw-cal__desc-body p:last-child {
	margin-bottom: 0;
}

.bw-cal__desc-body a {
	color: var(--bw-primary);
	text-decoration: none;
}

.bw-cal__desc-body a:hover {
	text-decoration: underline;
}

.bw-cal__readmore {
	display: inline;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bw-primary);
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

.bw-cal__empty {
	padding: 2rem 0;
	color: #9ca3af;
}

/* ---------- Footer + pager ---------- */
.bw-cal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 1rem;
}

.bw-cal__count {
	font-size: 0.85rem;
	color: #6b7280;
}

.bw-cal__pager {
	display: flex;
	gap: 0.25rem;
}

.bw-cal__page {
	min-width: 2rem;
	padding: 0.3rem 0.55rem;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	background: #fff;
	color: #374151;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}

.bw-cal__page.is-active {
	background: var(--bw-primary);
	border-color: var(--bw-primary);
	color: #fff;
}

.bw-cal__page:disabled {
	opacity: 0.4;
	cursor: default;
}

.bw-cal__perpage {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: #6b7280;
}

.bw-cal__perpage-input {
	width: 4.5rem;
}

/* ---------- Loading ---------- */
.bw-cal.is-loading .bw-cal__list {
	opacity: 0.5;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

/* ---------- Tablet ---------- */
/* The 33% sidebar is too narrow on tablets, so stack to a single column and let
   the sidebar take the full width (calendar list, note, and mini calendar all
   get room to breathe). */
@media (max-width: 1024px) {
	.bw-cal {
		grid-template-columns: 1fr;
	}

	.bw-cal__sidebar {
		border-right: 0;
		border-bottom: 4px solid var(--bw-primary);
	}

	/* Keep the mini calendar a tidy, calendar-sized box instead of stretching
	   across the full-width sidebar. */
	.bw-cal__mini {
		max-width: 360px;
	}
}

/* Tablet only (not mobile): drop the divider line and give the header a solid
   background. */
@media (min-width: 782px) and (max-width: 1024px) {
	.bw-cal__sidebar {
		border-bottom: 0;
	}

	.bw-cal__header {
		background: #fff;
	}
}

/* Tablet: the sidebar is full width here, so put the calendar list and the note
   side by side (50/50) rather than stacking them — it uses the width, and it keeps
   the note clear of the theme's red accent line (.border-primary-line — absolute,
   at 34.7% of the content column, z-index 0, i.e. BEHIND the content). Stacked, the
   note spanned the full width and that 4px red stripe cut through the body text.
   Split 50/50 the note starts at ~50%, well right of the line, and the line falls in
   the list column where the rows' opaque zebra backgrounds already cover it. The
   line itself is untouched.
   Range is 768–1024px, not the block's 782px "tablet" boundary, because 768px is
   where the theme moves the line to 34.7% (below that it's a border-left at the
   content edge, and above 1024px the note sits inside the 33.4% sidebar). */
@media (min-width: 768px) and (max-width: 1024px) {
	.bw-cal__sidebar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5rem;
		align-items: start;
	}

	/* Left column stacks title → list → mini. Their own margins already supply the
	   vertical rhythm (title's margin-bottom, mini's margin-top), so no row-gap. */
	.bw-cal__sidebar-title { grid-column: 1; grid-row: 1; }
	.bw-cal__calendars     { grid-column: 1; grid-row: 2; }
	.bw-cal__mini          { grid-column: 1; grid-row: 3; }

	/* Right column: the note, spanning the three left-column rows so its first line
	   starts level with the "Select Calendars" title instead of below the list. */
	.bw-cal__note {
		grid-column: 2;
		grid-row: 1 / span 3;
		margin-top: 0;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.bw-cal {
		grid-template-columns: 1fr;
	}

	.bw-cal__sidebar {
		border-right: 0;
		border-bottom: 4px solid var(--bw-primary);
	}

	.bw-cal__header {
		gap: 0.6rem;
		padding: 1rem;
	}

	.bw-cal__heading {
		flex: 1 1 100%;
		order: -1;
	}

	.bw-cal__body {
		padding: 0 1rem 1rem;
	}

	.bw-cal__tz {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Editor-only chrome (bw/calendar) ----------
   These classes are added only by editor.js (the reconstructed sidebar + the
   editable note region). They never appear on the front end. */
.bw-cal--editor .bw-cal__main-ssr {
	min-width: 0;
}
.bw-cal--editor .bw-cal-note-edit {
	outline: 1px dashed #cbd5e1;
	outline-offset: 5px;
}
.bw-cal-note-edit__hint {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #9ca3af;
	margin-bottom: 6px;
}
.bw-cal--editor .bw-cal__add {
	pointer-events: none;
}
.bw-cal-mini-edit {
	display: grid;
	place-items: center;
	min-height: 96px;
	color: #9ca3af;
	font-size: 0.85rem;
	font-style: italic;
}