/* Long Row skin for the School Calendar block.
 *
 * The calendar is the trust's LEAD School Calendar plugin — the same events,
 * admin screens, month/list views, detail dialog, add-to-calendar and
 * subscribe feed the trust's other schools get. This file only changes how it
 * looks, so the two never drift apart in what they do. See DECISIONS.md D-051.
 *
 * Loaded after the plugin's own stylesheet and only on pages that show a
 * calendar. Every rule is scoped to .lsc-calendar, at the plugin's own
 * specificity, and wins by coming second.
 *
 * Colours. The plugin gives each category one of five slots. Here they are
 * the school's five tones, and each carries the tone that is safe to put
 * white text on, because a chip fills with its colour on hover:
 *
 *   primary     Navy  #0d1f52   white 15.7:1
 *   secondary   Sky   #0e5f78   white  7.2:1   (the published sky is 2.8:1)
 *   tertiary    Sun   #ffb703   navy   9.0:1   (sun takes navy text, never white)
 *   quaternary  Red   #d21f28   white  5.3:1
 *   green       Leaf  #256034   white  7.5:1   (the published leaf is 3.4:1)
 *
 * The deep sky and leaf are the same tones the section tiles use for their
 * name bars (longrow-blocks/src/tiles/style.scss), for the same reason.
 */

.lsc-calendar {
	--lsc-primary: var(--wp--preset--color--navy);
	--lsc-secondary: #0e5f78;
	--lsc-tertiary: var(--wp--preset--color--sun);
	--lsc-quaternary: var(--wp--preset--color--red);
	--lsc-green: #256034;
	--lsc-grey: var(--wp--preset--color--surface-alt);
	--lsc-grey-dark: var(--wp--preset--color--navy-tint);
	--lsc-border: var(--wp--preset--color--line);
	--lsc-ease: var(--ease-out);
	--lsc-radius: var(--r-sm);

	/* What goes on top of a filled chip. Only sun changes it. */
	--lsc-on-colour: var(--wp--preset--color--paper);

	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: var(--wp--custom--line-height--body);
	color: var(--wp--preset--color--ink);
}

/* Category tints. The plugin's are 8% of the LEAD colours; these are the
   school's own tint swatches, which is what every other tinted surface on the
   site uses. */
.lsc-calendar :is(.lsc-chip--primary, .lsc-event--primary, .lsc-tag--primary, .lsc-detail--primary, .lsc-day__dot--primary) { --lsc-tint: var(--wp--preset--color--navy-tint); }
.lsc-calendar :is(.lsc-chip--secondary, .lsc-event--secondary, .lsc-tag--secondary, .lsc-detail--secondary, .lsc-day__dot--secondary) { --lsc-tint: var(--wp--preset--color--sky-tint); }
.lsc-calendar :is(.lsc-chip--tertiary, .lsc-event--tertiary, .lsc-tag--tertiary, .lsc-detail--tertiary, .lsc-day__dot--tertiary) { --lsc-tint: var(--wp--preset--color--sun-tint); --lsc-on-colour: var(--wp--preset--color--navy); }
.lsc-calendar :is(.lsc-chip--quaternary, .lsc-event--quaternary, .lsc-tag--quaternary, .lsc-detail--quaternary, .lsc-day__dot--quaternary) { --lsc-tint: var(--wp--preset--color--red-tint); }
.lsc-calendar :is(.lsc-chip--green, .lsc-event--green, .lsc-tag--green, .lsc-detail--green, .lsc-day__dot--green) { --lsc-tint: var(--wp--preset--color--leaf-tint); }

/* Focus. The theme draws a white gap and a navy ring as a box-shadow on every
   focusable element; the plugin adds an outline of its own on top, which gave
   two rings. The theme's one is kept, since it is the one the rest of the site
   uses and the one that was measured (D-028). */
.lsc-calendar :focus-visible {
	outline: none;
}

.lsc-calendar :is(a, button, select, input, [tabindex]):focus-visible {
	box-shadow:
		0 0 0 3px var(--wp--preset--color--paper),
		0 0 0 6px var(--wp--preset--color--navy);
}

/* The theme's content styles are written for prose: underlined links, red
   list markers and a red rule under every h2. None of that belongs inside a
   calendar grid. */
.lsc-calendar ul,
.lsc-calendar ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lsc-calendar li::marker {
	content: none;
}

.lsc-calendar h2::after,
.lsc-calendar h3::after {
	content: none;
}

.lsc-calendar a {
	text-decoration: none;
}

/* ---------- Headings: the display face, as on every heading on the site ---------- */

.lsc-calendar :is(.lsc-title, .lsc-detail__title, .lsc-daypanel__title, .lsc-event__title, .lsc-daygroup__num) {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: var(--wp--custom--tracking--heading);
	color: var(--wp--preset--color--navy);
}

.lsc-calendar .lsc-title {
	font-weight: 600;
}

.lsc-calendar .lsc-event__title {
	font-weight: 600;
	line-height: var(--wp--custom--line-height--snug);
}

/* ---------- Toolbar ---------- */

.lsc-calendar .lsc-toolbar {
	margin-block-end: var(--sp-5);
}

/* Round nav buttons: navy fill on hover, a press that shrinks, as with every
   other button on the site. */
.lsc-calendar .lsc-navbtn {
	border: var(--bw) solid var(--wp--preset--color--navy);
	transition:
		background-color var(--dur) var(--ease-out),
		color var(--dur) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.lsc-calendar .lsc-navbtn:active,
.lsc-calendar .lsc-today:active,
.lsc-calendar .lsc-subscribe:active,
.lsc-calendar .lsc-btn:active {
	transform: var(--press-scale);
}

.lsc-calendar .lsc-today,
.lsc-calendar .lsc-subscribe,
.lsc-calendar .lsc-toggle__btn,
.lsc-calendar .lsc-btn {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	border-radius: var(--r-pill);
}

.lsc-calendar .lsc-today,
.lsc-calendar .lsc-subscribe {
	border-width: var(--bw);
	transition:
		background-color var(--dur) var(--ease-out),
		color var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

/* Subscribe is the one thing on this screen a parent is being asked to do,
   so it takes the site's call-to-action colour: red, deepening on hover,
   exactly like the theme's buttons. */
.lsc-calendar .lsc-subscribe {
	background: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
}

.lsc-calendar .lsc-subscribe:hover {
	background: var(--wp--preset--color--red-deep);
	border-color: var(--wp--preset--color--red-deep);
	color: var(--wp--preset--color--paper);
}

.lsc-calendar .lsc-toggle {
	background: var(--wp--preset--color--surface-alt);
	border: 1px solid var(--wp--preset--color--line);
}

.lsc-calendar .lsc-filter select {
	border: var(--bw) solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1f52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.lsc-calendar .lsc-filter select:hover {
	border-color: var(--wp--preset--color--navy-tint);
}

.lsc-calendar .lsc-filter select:focus {
	border-color: var(--wp--preset--color--navy);
	box-shadow: var(--shadow-sm);
}

.lsc-calendar .lsc-key {
	font-size: var(--wp--preset--font-size--caption, 0.875rem);
	color: var(--wp--preset--color--ink-muted);
	margin-block-end: var(--sp-4);
}

.lsc-calendar .lsc-key__dot {
	inline-size: 12px;
	block-size: 12px;
}

/* ---------- Month grid ---------- */

/* A card rather than a ruled table: rounded, a hairline border and the
   site's card shadow. The weekday strip across the top is navy with the red
   edge the header's dropdowns and the "Dates for the fridge" tiles carry. */
.lsc-calendar .lsc-month {
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--paper);
}

.lsc-calendar .lsc-month__head {
	background: var(--wp--preset--color--navy);
	border-block-start: 4px solid var(--wp--preset--color--red);
}

.lsc-calendar .lsc-dow {
	padding: var(--sp-3) var(--sp-3);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--paper);
}

.lsc-calendar .lsc-month__grid {
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--line);
}

/* Wider padding only where the grid holds event chips. On phones each day is
   a small square with a dot under the number, and the plugin's own 4px is
   what leaves the number room to stay round. */
@media (min-width: 768px) {
	.lsc-calendar .lsc-day {
		padding: var(--sp-2);
	}
}

.lsc-calendar .lsc-day__num {
	flex-shrink: 0;
}

.lsc-calendar .lsc-day.is-weekend {
	background: #fafbff;
}

.lsc-calendar .lsc-day.is-other {
	background: var(--wp--preset--color--surface-alt);
}

.lsc-calendar .lsc-day__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--navy);
}

/* Today is the red circle, not a second navy: the one day on the grid that
   should jump out. White on #d21f28 is 5.3:1. */
.lsc-calendar .lsc-day.is-today .lsc-day__num {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
}

.lsc-calendar .lsc-chip {
	border-left-width: 4px;
	border-radius: var(--r-xs);
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	transition:
		background-color var(--dur) var(--ease-out),
		color var(--dur) var(--ease-out);
}

.lsc-calendar .lsc-chip:hover,
.lsc-calendar .lsc-chip:focus-visible {
	color: var(--lsc-on-colour);
}

.lsc-calendar .lsc-day__more button {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

/* ---------- List view ---------- */

/* The date block is the design system's EventItem date: a navy tile with a
   red top edge, the same as the homepage's "Dates for the fridge". */
.lsc-calendar .lsc-daygroup__date {
	border-radius: var(--r-sm);
	background: var(--wp--preset--color--navy);
	border-block-start: 3px solid var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--display);
}

.lsc-calendar .lsc-daygroup__num {
	color: inherit;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.lsc-calendar .lsc-daygroup__dow,
.lsc-calendar .lsc-daygroup__mon {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 11px;
	opacity: 0.9;
}

.lsc-calendar .lsc-daygroup.is-today .lsc-daygroup__date {
	background: var(--wp--preset--color--red);
	border-block-start-color: var(--wp--preset--color--navy);
}

/* Past days go pale rather than transparent, so the text on them still has
   a background to be measured against. #152c6e on navy-tint is 10.4:1. */
.lsc-calendar .lsc-daygroup.is-past .lsc-daygroup__date {
	opacity: 1;
	background: var(--wp--preset--color--navy-tint);
	border-block-start-color: transparent;
	color: var(--wp--preset--color--navy-mid);
}

.lsc-calendar .lsc-event {
	border: var(--bw) solid var(--wp--preset--color--line);
	border-left: 6px solid var(--lsc-colour);
	border-radius: var(--r-md);
	color: var(--wp--preset--color--ink);
	transition:
		transform var(--dur) var(--ease-out),
		box-shadow var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out);
}

.lsc-calendar .lsc-event:hover,
.lsc-calendar .lsc-event:focus-visible {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--navy-tint);
	border-left-color: var(--lsc-colour);
	transform: var(--hover-lift);
	box-shadow: var(--shadow-card);
}

.lsc-calendar .lsc-event:focus-visible {
	box-shadow:
		0 0 0 3px var(--wp--preset--color--paper),
		0 0 0 6px var(--wp--preset--color--navy);
}

.lsc-calendar .lsc-event__meta {
	color: var(--wp--preset--color--ink-muted);
}

/* Sun is too pale to carry an icon or an arrow on white; those take navy. */
.lsc-calendar .lsc-event--tertiary :is(.lsc-event__meta svg, .lsc-event__arrow),
.lsc-calendar .lsc-detail--tertiary .lsc-detail__facts svg {
	color: var(--wp--preset--color--navy);
}

.lsc-calendar .lsc-tag {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--navy);
}

.lsc-calendar .lsc-empty {
	border-radius: var(--r-lg);
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--ink);
}

.lsc-calendar .lsc-link,
.lsc-calendar .lsc-detail__more a,
.lsc-calendar .lsc-back a {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--navy);
}

.lsc-calendar .lsc-link:hover,
.lsc-calendar .lsc-detail__more a:hover,
.lsc-calendar .lsc-back a:hover {
	color: var(--wp--preset--color--red);
}

/* ---------- Dialog and single event page ---------- */

.lsc-calendar .lsc-dialog {
	border-radius: var(--r-lg);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--shadow-pop);
}

.lsc-calendar .lsc-dialog::backdrop {
	background: rgba(8, 21, 58, 0.6);
}

.lsc-calendar .lsc-dialog[open] {
	animation-duration: var(--dur-slow);
	animation-timing-function: var(--ease-out);
}

/* A red strip across the top of the details card, like the header dropdowns. */
.lsc-calendar .lsc-dialog__content {
	border-block-start: 6px solid var(--wp--preset--color--red);
}

.lsc-calendar .lsc-dialog__close {
	color: var(--wp--preset--color--navy);
	box-shadow: var(--shadow-sm), 0 0 0 1px var(--wp--preset--color--line);
}

.lsc-calendar .lsc-dialog__close:hover {
	color: var(--wp--preset--color--red);
}

.lsc-calendar .lsc-detail__image {
	border-radius: 0;
}

.lsc-calendar--single .lsc-detail__image {
	border-radius: var(--r-lg);
}

.lsc-calendar .lsc-detail__title {
	font-weight: 600;
	line-height: var(--wp--custom--line-height--heading);
}

.lsc-calendar .lsc-detail__desc {
	border-block-start: var(--bw) solid var(--wp--preset--color--line);
}

.lsc-calendar .lsc-detail__desc a {
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--red);
	text-underline-offset: 3px;
}

.lsc-calendar .lsc-detail__desc ul {
	list-style: disc;
}

.lsc-calendar .lsc-detail__desc ol {
	list-style: decimal;
}

.lsc-calendar .lsc-detail__desc li::marker {
	content: normal;
	color: var(--wp--preset--color--red);
}

/* Buttons: outlined navy by default, the solid one is the site's red button. */
.lsc-calendar .lsc-btn {
	border-width: var(--bw);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
	transition:
		background-color var(--dur) var(--ease-out),
		color var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.lsc-calendar .lsc-btn:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
}

.lsc-calendar .lsc-btn--solid {
	background: var(--wp--preset--color--red);
	border-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
}

.lsc-calendar .lsc-btn--solid:hover {
	background: var(--wp--preset--color--red-deep);
	border-color: var(--wp--preset--color--red-deep);
	color: var(--wp--preset--color--paper);
}

.lsc-calendar .lsc-copy input {
	border: var(--bw) solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--navy);
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {
	.lsc-calendar .lsc-month {
		border-radius: var(--r-md);
	}

	.lsc-calendar .lsc-dow {
		padding: var(--sp-2) 0;
	}

	.lsc-calendar .lsc-day.is-selected {
		background: var(--wp--preset--color--navy-tint);
	}

	.lsc-calendar .lsc-day.is-selected .lsc-day__num {
		box-shadow: 0 0 0 2px var(--wp--preset--color--navy);
	}

	.lsc-calendar .lsc-day__dot {
		inline-size: 7px;
		block-size: 7px;
	}

	.lsc-calendar .lsc-daypanel {
		border: var(--bw) solid var(--wp--preset--color--line);
		border-radius: var(--r-md);
		box-shadow: var(--shadow-sm);
	}

	.lsc-calendar .lsc-daypanel__close {
		background: var(--wp--preset--color--surface-alt);
		color: var(--wp--preset--color--navy);
	}

	.lsc-calendar .lsc-event {
		border-radius: var(--r-sm);
	}
}

/* ---------- Reduced motion ---------- */

/* The theme already collapses --dur and friends to 1ms, and --hover-lift to
   none, under this preference, so everything above follows automatically.
   The press scale is the one transform that is not a token there. */
@media (prefers-reduced-motion: reduce) {
	.lsc-calendar :is(.lsc-navbtn, .lsc-today, .lsc-subscribe, .lsc-btn):active {
		transform: none;
	}
}