/**
 * HCOS Calendar View — presentation for the generated calendar block.
 *
 * WHY THIS FILE EXISTS
 *
 * The generator writes inline styles on every element because its other target
 * is BookStack, whose sanitizer strips <style> blocks and cannot be relied on to
 * keep class attributes. WordPress has no such constraint: the plugin echoes the
 * HTML untouched, so a stylesheet works normally here.
 *
 * That means two things. Inline styles win on specificity, so overrides below
 * carry !important — not carelessness, it is the only lever against a style
 * attribute. And the theme gets a say too: Elementor and the active theme style
 * bare <table>/<td>, which is where the boxed cell borders and alternating row
 * fills on the live page came from. Neither is in the generated HTML. The reset
 * block below takes that back.
 *
 * Everything is scoped under .hcos-cal so it cannot leak into the rest of the
 * site.
 *
 * @package hcos-calendar-view
 */

.hcos-cal {
	/* The page heading is Poppins; the calendar was inheriting the theme's
	   system stack, so the one block people came to read was the one block not
	   in the school's typeface. */
	font-family: Poppins, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cal-ink: #2C353F;
	--cal-rule: rgba(44, 53, 63, 0.12);
	--cal-muted: rgba(44, 53, 63, 0.62);
}

/* ---------------------------------------------------------------------------
 * Reset what the theme adds. The generator emits a borderless table with a
 * single hairline under each row; the theme was layering cell borders, striped
 * fills and a tinted first column on top, giving three competing background
 * treatments and the spreadsheet look.
 * ------------------------------------------------------------------------ */

.hcos-cal table,
.hcos-cal tbody,
.hcos-cal tr,
.hcos-cal th,
.hcos-cal td {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.hcos-cal .cal-table {
	border-collapse: collapse !important;
	/* 1140px of content width gave an 832px title column with most of it empty.
	   Capping the measure keeps dates and titles in one comfortable scan. */
	width: 100% !important;
	max-width: 780px;
	margin: 0 !important;
}

.hcos-cal .cal-when,
.hcos-cal .cal-what {
	border-bottom: 1px solid var(--cal-rule) !important;
	padding: 10px 12px 10px 0 !important;
	vertical-align: top !important;
}

.hcos-cal .cal-when {
	width: 190px !important;
	font-size: 13px !important;
	color: var(--cal-muted) !important;
	white-space: nowrap;
}

.hcos-cal .cal-day {
	font-weight: 500;
	color: rgba(44, 53, 63, 0.85);
}

.hcos-cal .cal-what {
	font-size: 16px !important;
	line-height: 1.45 !important;
}

/* ---------------------------------------------------------------------------
 * Months become quiet signposts rather than competing with event titles. They
 * were 16px bold, the same weight as the content they label, so nothing chunked
 * and the page read as one long strip.
 * ------------------------------------------------------------------------ */

.hcos-cal .cal-month {
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cal-muted) !important;
	margin: 40px 0 6px !important;
}

.hcos-cal .cal-month:first-of-type {
	margin-top: 8px !important;
}

/* ---------------------------------------------------------------------------
 * Badges. On a two-category view 15 of 18 rows said the same thing — 132 rows
 * across 12 months on the live Flex family calendar — so the loudest element on
 * the page carried almost no information. The legend at the top already
 * establishes the colour-to-category mapping; the per-row badge only needs to
 * say which one, quietly.
 *
 * So: no fill, a small dot in the category colour plus the label in muted text.
 * The label stays, deliberately — dropping it would encode the category in
 * colour alone, which a colour-blind or greyscale-printing reader cannot
 * resolve. The dot is redundant reinforcement, not the carrier.
 *
 * This works because the generator now emits `--cal-cat` (the fill) and
 * `--cal-cat-ink` (its text colour) in the badge's style attribute. A
 * stylesheet cannot read `background-color` off a style attribute, which is why
 * the earlier stopgap here could only shrink the pill. `!important` throughout
 * for the usual reason: an inline style is what we are overriding.
 *
 * A view that has only one category never reaches this rule — the generator
 * drops badges and the legend entirely for those (`mono` in src/calendar/render.ts).
 * ------------------------------------------------------------------------ */

.hcos-cal .cal-badges {
	margin: 3px 0 0 !important;
}

.hcos-cal .cal-badge {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	background: none !important;
	background-color: transparent !important;
	color: var(--cal-muted) !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 14px 0 0 !important;
	font-size: 11px !important;
	line-height: 1.7 !important;
	letter-spacing: 0.02em;
}

.hcos-cal .cal-badge::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	/* currentColor is the fallback for a sanitizer or browser that lost the
	   custom property: a grey dot next to grey text, still legible. */
	background: var(--cal-cat, currentColor);
}

/* Legend chips keep their presence — they are the key, and there are only a
   few of them. */
.hcos-cal .cal-legend {
	margin: 0 0 4px !important;
}

/* ---------------------------------------------------------------------------
 * Footnote and subscribe section.
 * ------------------------------------------------------------------------ */

.hcos-cal .cal-subscribe h2 {
	font-size: 20px !important;
	font-weight: 600 !important;
	margin: 36px 0 10px !important;
}

/* The generated footnote sits at the bottom in light grey on a cream page.
   Darkened to clear 4.5:1 against #FCFAF0. */
.hcos-cal [data-cal-updated],
.hcos-cal .cal-updated {
	color: var(--cal-muted) !important;
}

/* ---------------------------------------------------------------------------
 * State classes the enhancement script depends on.
 *
 * These are not decoration. assets/calendar.js adds `cal-hidden` to filtered
 * and folded elements and `cal-off` to deselected chips; without the rules
 * below the script runs correctly and nothing visibly happens, which is exactly
 * how it shipped in 1.3.0. `display: none` is the mechanism.
 *
 * All of them are scoped under `.cal-js`, which the script adds to the calendar
 * it has taken over. With the script absent none of this applies and the page
 * stays a complete, printable table.
 * ------------------------------------------------------------------------ */

.cal-js .cal-hidden {
	display: none !important;
}

.cal-js .cal-chip {
	cursor: pointer;
	user-select: none;
	transition: opacity 0.15s;
}

.cal-js .cal-chip.cal-off {
	opacity: 0.3;
}

.cal-js .cal-chip:hover {
	outline: 2px solid var(--cal-ink, #2C353F);
	outline-offset: 1px;
}

/* Keyboard parity. The script builds chips from <span>, so without these they
   are unreachable by tab and invisible to a screen reader as controls. The
   fold and jump links are the same kind of control and need the same ring.
   Counterpart rule: the <style> block in docs/calendar-custom-head.html. */
.cal-js .cal-chip:focus-visible,
.cal-js .cal-pastlink:focus-visible,
.cal-js .cal-nowlink:focus-visible {
	outline: 2px solid var(--cal-ink, #2C353F);
	outline-offset: 2px;
}

.cal-js .cal-pastlink,
.cal-js .cal-nowlink {
	display: inline-block;
	margin: 0 14px 12px 0;
	font-size: 13px;
	color: rgba(44, 53, 63, 0.9);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cal-js .cal-pastlink:hover,
.cal-js .cal-nowlink:hover {
	color: #2C353F;
}

@media print {
	.cal-js .cal-pastlink,
	.cal-js .cal-nowlink {
		display: none;
	}

	/* Print the whole year: folding and filtering are screen conveniences. */
	.cal-js .cal-hidden {
		display: revert !important;
	}
}

/* ---------------------------------------------------------------------------
 * Narrow screens. The two-column table stops working once the date column
 * cannot hold a range like "August 21 - September 8" on one line.
 * ------------------------------------------------------------------------ */

@media (max-width: 600px) {
	.hcos-cal .cal-table,
	.hcos-cal .cal-table tbody,
	.hcos-cal .cal-table tr {
		display: block !important;
		width: 100% !important;
	}

	/* The rules above outrank `.cal-js .cal-hidden` (two classes plus an
	 * element beats two classes), so without this a filtered row or a folded
	 * month came straight back on a phone. Restate the hidden state at higher
	 * specificity than anything in this block. */
	.cal-js .hcos-cal .cal-table.cal-hidden,
	.cal-js .hcos-cal .cal-table tr.cal-hidden,
	.hcos-cal.cal-js .cal-table.cal-hidden,
	.hcos-cal.cal-js .cal-table tr.cal-hidden {
		display: none !important;
	}

	.hcos-cal .cal-when,
	.hcos-cal .cal-what {
		display: block !important;
		width: auto !important;
		white-space: normal;
	}

	.hcos-cal .cal-when {
		border-bottom: 0 !important;
		padding: 12px 0 0 !important;
	}

	.hcos-cal .cal-what {
		padding: 2px 0 12px !important;
	}

	.hcos-cal .cal-time {
		display: inline !important;
		margin-left: 6px;
	}
}