/**
 * [smokeschool_calendar] month-grid styling.
 *
 * Visual parity with the SPA calendar at calendar.opaquesmokeschool.com.
 * Values are taken from the SPA's _1uios_ CSS module verbatim — sizes,
 * spacings, and hex codes match so a partner site renders as a sibling
 * of the SPA grid, not a different design.
 *
 * Filled-chip pattern (NOT left-border) — the chip background carries
 * the partner brand color, with event_type modifiers overriding for
 * semi_private (teal) and private (orange) per the SPA palette.
 */

.osc-calendar {
	box-sizing: border-box;
	font-family: inherit;
	color: inherit;
	margin: 1.5rem 0;
	/* SPA palette tokens — local to the calendar so partner themes
	   can't accidentally clobber other plugins. */
	--osc-navy: #1e3167;
	--osc-teal: #0f766e;
	--osc-orange: #e8741a;
	--osc-gray-50: #f9fafb;
	--osc-gray-100: #f3f4f6;
	--osc-gray-200: #e5e7eb;
	--osc-gray-400: #9ca3af;
	--osc-gray-600: #4b5563;
	--osc-gray-800: #1f2937;
	--osc-border: #e2e8f0;
}

.osc-calendar *,
.osc-calendar *::before,
.osc-calendar *::after {
	box-sizing: border-box;
}

/* ── Header (month label + nav) ─────────────────────────────────── */

/* Single-row flex header (Phase 3.6.4 Part B). All controls live
   at the same flex level; the wrap is natural row-by-row when
   width runs out, NOT a forced two-section split. */
.osc-calendar-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: 16px;
}

.osc-calendar-header > * {
	flex: 0 0 auto;
}

/* Search shrinks to fit available row space; everything else keeps
   natural width. min-width prevents it from collapsing too narrow
   to type into when other controls take most of the row. */
.osc-calendar-header .osc-calendar-search-wrap {
	flex: 1 1 200px;
	min-width: 180px;
}
.osc-calendar-header .osc-calendar-search {
	width: 100%;
}

.osc-calendar-search-wrap {
	position: relative;
}
.osc-calendar-search-wrap .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.osc-calendar-search {
	background: #fff;
	border: 1px solid var(--osc-gray-200);
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 0.88rem;
	font-family: inherit;
	color: var(--osc-gray-800);
	min-width: 180px;
}
.osc-calendar-search:focus-visible {
	border-color: var(--osc-navy);
	outline: none;
}

/* Defensive override against WP themes that ship `select { width: 100% }`
   in their normalize rules (Astra, Blocksy etc. do this, and our header's
   flex: 0 0 auto wasn't winning specificity against `select` element-level
   styling). max-width keeps dropdowns from getting absurdly wide on
   ultra-narrow option strings. */
.osc-calendar-header select,
.osc-calendar-header .osc-calendar-filter {
	width: auto;
	max-width: 220px;
	min-width: 140px;
	flex: 0 0 auto;
}

/* Company pill switcher (Phase 3.6.6 Part D — mirrors SPA pills in
   calendar-filters.js v3). Multi-select button group: active pill
   shows partner brand color fill, inactive shows light gray. URL
   query param ?partners=opaque-smoke-school,singleton-smoke-school
   carries shareable filtered state. */
.osc-calendar-pills {
	display: inline-flex;
	gap: 6px;
	flex: 0 0 auto;
}

.osc-pill {
	padding: 5px 14px;
	border-radius: 999px;
	border: 1px solid #d1d5db;
	background: #e5e7eb;
	color: #6b7280;
	font-size: 0.82rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.osc-pill:hover {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.osc-pill:focus-visible {
	outline: 2px solid var(--osc-navy);
	outline-offset: 2px;
}

.osc-pill-navy.osc-pill--active {
	background: var(--osc-navy);
	color: #fff;
	border-color: var(--osc-navy);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18);
}

.osc-pill-orange.osc-pill--active {
	background: var(--osc-orange);
	color: #fff;
	border-color: var(--osc-orange);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18);
}

.osc-calendar-filter {
	background: #fff;
	border: 1px solid var(--osc-gray-200);
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 0.88rem;
	font-family: inherit;
	color: var(--osc-navy);
	cursor: pointer;
}

.osc-calendar-hide-private-btn {
	background: #fff;
	border: 1px solid var(--osc-gray-200);
	border-radius: 8px;
	padding: 6px 14px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--osc-navy);
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s;
}
.osc-calendar-hide-private-btn:hover,
.osc-calendar-hide-private-btn:focus-visible {
	background: var(--osc-gray-100);
	outline: none;
}
.osc-calendar-hide-private-btn--active {
	background: var(--osc-navy);
	color: #fff;
	border-color: var(--osc-navy);
}

.osc-calendar-subscribe-wrap {
	position: relative;
}
.osc-calendar-subscribe-btn {
	background: #fff;
	border: 1px solid var(--osc-gray-200);
	border-radius: 8px;
	padding: 6px 14px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--osc-navy);
	cursor: pointer;
	font-family: inherit;
}
.osc-calendar-subscribe-btn:hover,
.osc-calendar-subscribe-btn:focus-visible {
	background: var(--osc-gray-100);
	outline: none;
}
.osc-calendar-subscribe-popover {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	background: #fff;
	border: 1px solid var(--osc-gray-200);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	min-width: 200px;
	z-index: 20;
	overflow: hidden;
}
.osc-calendar-subscribe-link {
	display: block;
	padding: 10px 14px;
	color: var(--osc-navy);
	text-decoration: none;
	font-size: 0.88rem;
	border-bottom: 1px solid var(--osc-gray-100);
}
.osc-calendar-subscribe-link:last-child {
	border-bottom: none;
}
.osc-calendar-subscribe-link:hover,
.osc-calendar-subscribe-link:focus-visible {
	background: var(--osc-gray-50);
	outline: none;
}

/* Hidden-by-filter state — display:none collapses the chip out of the
   cell's flex column. Modal block stays attached for instant un-filter. */
.osc-event-chip--filtered-out {
	display: none !important;
}

/* Multi-day position modifiers — chips spanning multiple cells get
   rounded outer edges and square inner edges so visually they read
   as a continuous bar across days. */
.osc-event-chip--grid--multiday-start {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin-right: -1px;
}
.osc-event-chip--grid--multiday-middle {
	border-radius: 0;
	margin-left: -1px;
	margin-right: -1px;
}
.osc-event-chip--grid--multiday-end {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-left: -1px;
}

.osc-calendar-month-label {
	flex: 1;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--osc-navy);
	margin: 0;
	min-width: 12rem;
}

.osc-calendar-nav,
.osc-calendar-today-btn {
	background: #fff;
	border: 1px solid var(--osc-gray-200);
	border-radius: 8px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--osc-navy);
	cursor: pointer;
	transition: background 0.15s;
	font-family: inherit;
}

.osc-calendar-nav {
	width: 36px;
	height: 36px;
	font-size: 1.3rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.osc-calendar-today-btn {
	padding: 6px 14px;
}

.osc-calendar-list-toggle {
	background: #fff;
	border: 1px solid var(--osc-gray-200);
	border-radius: 8px;
	padding: 6px 14px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--osc-navy);
	cursor: pointer;
	transition: background 0.15s;
	font-family: inherit;
	margin-top: 12px;
}

.osc-calendar-nav:hover,
.osc-calendar-today-btn:hover,
.osc-calendar-list-toggle:hover,
.osc-calendar-nav:focus-visible,
.osc-calendar-today-btn:focus-visible,
.osc-calendar-list-toggle:focus-visible {
	background: var(--osc-gray-100);
	outline: none;
}

.osc-calendar-status {
	margin: 0 0 8px;
	font-size: 0.85rem;
	color: var(--osc-gray-600);
	text-align: center;
}

.osc-calendar-status--loading::after {
	content: ' …';
	letter-spacing: 0.2em;
}

.osc-calendar-status--error {
	color: #c00;
}

/* ── Grid container ─────────────────────────────────────────────── */

/* Border-via-gap pattern (matches SPA): the parent's #e2e8f0 background
   shows through the 1px gaps between cells, creating crisp hairline
   borders without per-cell border-color tuning. */
.osc-calendar-grid-container {
	border-top: 1px solid var(--osc-border);
	border-bottom: 1px solid var(--osc-border);
	background: var(--osc-border);
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ── Weekday header row ─────────────────────────────────────────── */

.osc-calendar-weekday-row {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1px;
	margin-bottom: 1px;
	background: var(--osc-border);
}

.osc-calendar-weekday {
	padding: 11px 0;
	text-align: center;
	background: var(--osc-navy);
	font-size: 0.78rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* ── Cells ──────────────────────────────────────────────────────── */

.osc-calendar-cells {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1px;
	background: var(--osc-border);
}

.osc-calendar-cell {
	min-height: 145px;
	padding: 7px 6px 5px;
	background: #fff;
	position: relative;
	transition: background 0.1s;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.osc-calendar-cell--empty {
	background: var(--osc-gray-50);
}

.osc-calendar-cell--past {
	background: var(--osc-gray-50);
}

.osc-calendar-cell--past .osc-calendar-cell-date {
	color: var(--osc-gray-400);
}

.osc-calendar-cell--today {
	background: #eff6ff !important;
	box-shadow: inset 0 0 0 2px var(--osc-navy);
}

.osc-calendar-cell-date {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--osc-gray-800);
	line-height: 1;
}

.osc-calendar-cell--today .osc-calendar-cell-date {
	background: var(--osc-navy);
	color: #fff;
	border-radius: 50%;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.osc-calendar-cell-events {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* ── Chip (filled, SPA-parity) ──────────────────────────────────── */

/* Compact single-line pill. The chip is a block-level button with
   one inline text node — no flex children, no line-clamp, no
   stacking spans. Sizing collapses to content + padding ≈ 26px tall.
   min-height: 0 + height: auto defend against any inherited
   min-height from the theme reset chain. */
.osc-event-chip--grid {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	box-sizing: border-box;
	padding: 4px 8px;
	border: none;
	border-radius: 4px;
	font-size: 0.78rem;
	line-height: 1.35;
	font-weight: 600;
	font-family: inherit;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	position: relative;
	transition: filter 0.12s, transform 0.1s;
	/* Default: --brand from the partner resolver (OSS navy, Singleton
	   orange, etc.). Inline style="--brand: <hex>" on each chip. */
	background: var(--brand, var(--osc-navy));
	color: #fff;
}

.osc-event-chip--grid:hover,
.osc-event-chip--grid:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-1px);
	outline: none;
}

/* Two-span chip body (Phase 3.6.7). .osc-chip-time hides on mobile so
   .osc-chip-loc stays readable when the cell narrows — pre-3.6.7 the
   single-text-node + ellipsis truncated to just the time, hiding the
   location which is what mobile users actually need. */
.osc-chip-time {
	font-weight: 700;
	opacity: 0.85;
	margin-right: 0.5em;
}

.osc-chip-loc {
	/* No explicit color — inherits from chip. */
}

/* Event-type modifier — ONLY private gets an override. Public and
   semi_private inherit the chip's default background (var(--brand))
   so partner identity drives the color: OSS events render navy
   (#1e3167), Singleton events render orange (#e8741a). The 3.6.2
   palette override on semi_private was a regression — it shadowed
   the partner brand. Private events render slate gray regardless
   of partner to visually mark "this is not a public booking". */

.osc-event-chip--grid.osc-event-chip--grid--private {
	background: #6b7280;
	color: #fff;
}

/* Hide Private toggle: when the user activates Hide Private, the
   container flips data-osc-hide-private="true" and private chips
   collapse out of the layout. Modal blocks stay attached so the
   filter is reversible without re-fetching. */
.osc-calendar[data-osc-hide-private="true"] .osc-event-chip--grid--private {
	display: none;
}

.osc-calendar-cell--past .osc-event-chip--grid {
	opacity: 0.78;
}

/* ── Mobile (≤720px, matches SPA breakpoint) ────────────────────── */

@media (max-width: 720px) {
	.osc-calendar-month-label {
		font-size: 1.2rem;
	}
	.osc-calendar-cell {
		min-height: 80px;
		padding: 4px 3px;
	}
	.osc-event-chip--grid {
		font-size: 0.73rem;
		padding: 3px 6px;
		-webkit-line-clamp: 1;
	}
	/* Mobile chip: hide time, promote location to primary readable text
	   (Phase 3.6.7 Part A). aria-label keeps the time for SR users. */
	.osc-chip-time {
		display: none;
	}
	.osc-chip-loc {
		font-weight: 600;
	}
}

/* ── Print stylesheet ───────────────────────────────────────────── */

@media print {
	.osc-calendar-nav,
	.osc-calendar-today-btn,
	.osc-calendar-list-toggle,
	.osc-calendar-status {
		display: none !important;
	}

	.osc-calendar-grid-container {
		box-shadow: none;
		border-color: #999;
	}

	.osc-calendar-weekday,
	.osc-event-chip--grid,
	.osc-event-chip--grid--private {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.osc-event-chip--grid {
		background: var(--brand, var(--osc-navy)) !important;
		color: #fff !important;
	}
	.osc-event-chip--grid.osc-event-chip--grid--private {
		background: #6b7280 !important;
		color: #fff !important;
	}

	.osc-calendar-cell {
		min-height: 50px;
		page-break-inside: avoid;
	}
	.osc-calendar-cell--today {
		box-shadow: inset 0 0 0 1px #000 !important;
	}
}