/*
 * patterns/calendar.css — "Calendar"
 * Markup: wp-content/themes/fcs/patterns/calendar.php (the section)
 *         wp-content/plugins/fcs-core/src/blocks/events-calendar/render.php
 *         and fcs-core/inc/calendar.php (everything inside it)
 *         fcs-core/inc/subscribe.php (the Subscribe menu and block)
 * Root:   .fcs-calendar, and .fcs-subscribe for the block that can stand alone
 *
 * Filters, a month heading, the day grid, month arrows, and one shared
 * <dialog> for the event pop-up. The <dialog> is rendered inside the root, so
 * it is styled from here even though the browser paints it in the top layer.
 *
 * DERIVED — Figma 8071:11411 is a placeholder square, at desktop only. Every
 * choice below is ours, built from the site's existing idioms:
 *
 *   Filters   two labelled dropdowns, the site's form styling with the nav's
 *             chevron. Stacked on Small; side by side, 280px each, from Medium.
 *
 *   Subscribe a button at the right end of the filter row, opening the
 *             subscribe controls — see "Subscribe" below.
 *
 *   Month     Small   an AGENDA, not a grid. Seven columns on a 390px phone
 *                     are ~50px each — too narrow for any event title. The
 *                     same markup is restyled as a list of only the days that
 *                     have a visible event, each headed "Wednesday, October 7".
 *                     Days outside the month, empty days, and days whose every
 *                     event is filtered out are hidden.
 *             Medium  the 7-column grid, the day number in each cell, chips
 *                     clamped to two lines; the pop-up carries the full title.
 *             Large   the same grid with taller cells and a little more room.
 *
 *   Chips     timed:   surface ground, link-blue rule on the left, time bold
 *             all-day: a solid primary (navy) bar, so the day's all-day
 *                      events read as a band above the timed ones
 *             "Cont.": a multi-day event on the days after its first
 *             cancelled: greyed out (stripe ground, muted rule and text) with
 *                      the title struck through, all-day or not. The palette has
 *                      no red, and a struck-through grey chip reads as "off"
 *                      without one. "Cancelled:" is spoken before the title.
 *                      The pop-up adds a "Cancelled" badge above its title.
 *
 *   Today     the day number in a navy circle (the grid); "(Today)" after the
 *             heading (the agenda).
 *
 *   Arrows    the slider arrow from Multicolumn, as a mask, labelled with the
 *             month it goes to from Medium (arrow only on Small, the name kept
 *             for screen readers). "Back to this month" between them when away
 *             from the current month.
 *
 *   Pop-up    Staff Directory's dialog: 626px, 28px padding, 12px radius; 20px
 *             padding and 20px from each viewport edge on Small.
 *
 * THE PROSE UNDERLINE IS UNSET INSIDE THE MONTH
 * ---------------------------------------------
 * The section lands inside .wp-block-post-content, so components/links.css
 * draws its prose underline as a background-image on every link. The month's
 * links are a chip (a box, not a run of text) and two arrow links that hold an
 * icon — the same layout reason the cards elsewhere unset it. Links inside the
 * pop-up's description keep the prose treatment.
 */

/* Section ------------------------------------------------------------- */

/*
 * Section padding is NOT declared here for Medium and Large — the editor owns
 * those from the sidebar's Dimensions panel. Small is pinned in
 * layout/spacing.css, on the root (vertical) and on __inner (the 20px gutter).
 * See CLAUDE.md § "Section padding".
 */

.fcs-calendar .fcs-calendar__month a:not( .wp-element-button ) {
	background-image: none;
	padding-bottom: 0;
}

.fcs-calendar .fcs-calendar__close {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* Toolbar: filters, then Subscribe ------------------------------------ */

/*
 * The filters on the left, the Subscribe button at the far right of the same
 * row from Medium. Small stacks them, Subscribe full width under the filters.
 */
.fcs-calendar .fcs-calendar__toolbar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 32px;
}

@media ( min-width: 768px ) {
	.fcs-calendar .fcs-calendar__toolbar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: 20px;
		margin-block-end: 40px;
	}
}

/* Filters ------------------------------------------------------------- */

.fcs-calendar .fcs-calendar__filters {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

@media ( min-width: 768px ) {
	.fcs-calendar .fcs-calendar__filters {
		flex: 1 1 auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 20px;
	}

	.fcs-calendar .fcs-calendar__filter {
		flex: 0 1 280px;
	}
}

.fcs-calendar .fcs-calendar__filter {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fcs-calendar .fcs-calendar__label {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	line-height: 1.4286; /* 20px */
	color: var( --wp--preset--color--primary );
}

/*
 * The select keeps the site's form styling (components/forms.css); only the
 * native arrow is swapped for the nav's chevron, painted as a mask on the
 * wrapper — a <select> cannot carry a pseudo-element of its own.
 */
.fcs-calendar .fcs-calendar__select {
	position: relative;
	display: block;
}

.fcs-calendar .fcs-calendar__select select {
	width: 100%;
	padding-inline-end: 44px;
	appearance: none;
	cursor: pointer;
	line-height: 1.5;
}

.fcs-calendar .fcs-calendar__select::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 16px;
	width: 16px;
	margin-block: auto;
	height: 16px;
	background-color: var( --wp--preset--color--primary );
	pointer-events: none;
	-webkit-mask: url( "../../images/icons/FCS_Chevron_Down.svg" ) center / contain no-repeat;
	mask: url( "../../images/icons/FCS_Chevron_Down.svg" ) center / contain no-repeat;
}

/* Without JavaScript the form submits; view.js hides the button. */
.fcs-calendar .fcs-calendar__apply[hidden],
.editor-styles-wrapper .fcs-calendar .fcs-calendar__apply {
	display: none;
}

/* Month heading -------------------------------------------------------- */

/*
 * Heading type is theme.json's h2. The doubled class beats core's flow-layout
 * margin rule, which is (0,1,0) and prints after the theme's stylesheets.
 */
.fcs-calendar .fcs-calendar__title.fcs-calendar__title {
	margin: 0 0 24px;
	color: var( --wp--preset--color--primary );
}

.fcs-calendar .fcs-calendar__title:focus {
	outline: none;
}

.fcs-calendar .fcs-calendar__title:focus-visible {
	outline: 2px solid var( --wp--preset--color--link );
	outline-offset: 4px;
}

.fcs-calendar .fcs-calendar__empty {
	margin: 0 0 24px;
	padding: 20px;
	border-radius: var( --wp--preset--border-radius--medium );
	background-color: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--muted );
	text-align: center;
}

.fcs-calendar .fcs-calendar__empty[hidden] {
	display: none;
}

/* While the next month loads. */
.fcs-calendar [data-fcs-calendar-region] {
	transition: opacity var( --fcs-transition );
}

.fcs-calendar [aria-busy="true"] [data-fcs-calendar-region] {
	opacity: 0.6;
}

/* Days — Small: the agenda ---------------------------------------------- */

.fcs-calendar .fcs-calendar__weekdays {
	display: none;
}

/* (0,2,1) to beat the prose list indent in base/typography.css. */
.fcs-calendar ol.fcs-calendar__days,
.fcs-calendar ul.fcs-calendar__events {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fcs-calendar ol.fcs-calendar__days {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fcs-calendar .fcs-calendar__day {
	margin: 0;
}

.fcs-calendar .fcs-calendar__day.is-outside,
.fcs-calendar .fcs-calendar__day:not( :has( .fcs-calendar__event:not( [hidden] ) ) ) {
	display: none;
}

.fcs-calendar .fcs-calendar__date {
	margin: 0 0 8px;
	padding-block-end: 8px;
	border-block-end: 1px solid var( --wp--preset--color--stroke );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	color: var( --wp--preset--color--primary );
}

.fcs-calendar .fcs-calendar__date time {
	display: block;
}

.fcs-calendar .fcs-calendar__date-number {
	display: none;
}

.fcs-calendar .fcs-calendar__today-label {
	font-weight: 400;
	color: var( --wp--preset--color--link );
}

.fcs-calendar ul.fcs-calendar__events {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fcs-calendar .fcs-calendar__event {
	margin: 0;
}

.fcs-calendar .fcs-calendar__event[hidden] {
	display: none;
}

/* Chips ------------------------------------------------------------------ */

.fcs-calendar .fcs-calendar__event-link {
	display: flex;
	flex-wrap: wrap;
	column-gap: 8px;
	padding: 10px 12px;
	border-inline-start: 3px solid var( --wp--preset--color--link );
	border-radius: var( --wp--preset--border-radius--small );
	background-color: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--foreground );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4286;
	text-decoration: none;
	transition:
		background-color var( --fcs-transition ),
		color var( --fcs-transition );
}

.fcs-calendar .fcs-calendar__event-link:hover,
.fcs-calendar .fcs-calendar__event-link:focus-visible {
	background-color: var( --wp--preset--color--surface-alt );
	color: var( --wp--preset--color--link );
}

.fcs-calendar .fcs-calendar__event-time {
	flex: none;
	font-weight: 700;
	color: var( --wp--preset--color--primary );
}

.fcs-calendar .fcs-calendar__event-title {
	min-width: 0;
	overflow-wrap: anywhere;
}

.fcs-calendar .fcs-calendar__event.is-all-day .fcs-calendar__event-link {
	border-inline-start-color: var( --wp--preset--color--primary );
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--on-primary );
}

.fcs-calendar .fcs-calendar__event.is-all-day .fcs-calendar__event-time {
	color: inherit;
	opacity: 0.8;
}

.fcs-calendar .fcs-calendar__event.is-all-day .fcs-calendar__event-link:hover,
.fcs-calendar .fcs-calendar__event.is-all-day .fcs-calendar__event-link:focus-visible {
	border-inline-start-color: var( --wp--preset--color--link );
	background-color: var( --wp--preset--color--link );
	color: var( --wp--preset--color--on-primary );
}

.fcs-calendar .fcs-calendar__event.is-continued:not( .is-all-day ) .fcs-calendar__event-time {
	font-weight: 400;
	color: var( --wp--preset--color--muted );
}

/* Cancelled — beats the all-day colours too; it is still clickable. */
.fcs-calendar .fcs-calendar__event.is-cancelled .fcs-calendar__event-link {
	border-inline-start-color: var( --wp--preset--color--muted );
	background-color: var( --wp--preset--color--stripe );
	color: var( --wp--preset--color--muted );
}

.fcs-calendar .fcs-calendar__event.is-cancelled .fcs-calendar__event-link:hover,
.fcs-calendar .fcs-calendar__event.is-cancelled .fcs-calendar__event-link:focus-visible {
	border-inline-start-color: var( --wp--preset--color--link );
	background-color: var( --wp--preset--color--surface-alt );
	color: var( --wp--preset--color--link );
}

.fcs-calendar .fcs-calendar__event.is-cancelled .fcs-calendar__event-time {
	color: inherit;
	opacity: 1;
}

.fcs-calendar .fcs-calendar__event.is-cancelled .fcs-calendar__event-title {
	text-decoration: line-through;
}

/* Days — Medium and up: the grid ------------------------------------------ */

@media ( min-width: 768px ) {
	.fcs-calendar .fcs-calendar__weekdays,
	.fcs-calendar ol.fcs-calendar__days {
		display: grid;
		grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	}

	.fcs-calendar .fcs-calendar__weekdays {
		border: 1px solid var( --wp--preset--color--stroke );
		border-block-end: 0;
		border-start-start-radius: var( --wp--preset--border-radius--medium );
		border-start-end-radius: var( --wp--preset--border-radius--medium );
		background-color: var( --wp--preset--color--primary );
		color: var( --wp--preset--color--on-primary );
	}

	.fcs-calendar .fcs-calendar__weekday {
		padding: 12px 8px;
		font-size: var( --wp--preset--font-size--x-small );
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.125em;
		text-align: center;
		text-transform: uppercase;
	}

	/*
	 * Cell borders: each day draws its right and bottom edge, the list draws
	 * the left. The weekday bar above supplies the top.
	 */
	.fcs-calendar ol.fcs-calendar__days {
		gap: 0;
		overflow: hidden;
		border-inline-start: 1px solid var( --wp--preset--color--stroke );
		border-end-start-radius: var( --wp--preset--border-radius--medium );
		border-end-end-radius: var( --wp--preset--border-radius--medium );
	}

	.fcs-calendar .fcs-calendar__day,
	.fcs-calendar .fcs-calendar__day.is-outside,
	.fcs-calendar .fcs-calendar__day:not( :has( .fcs-calendar__event:not( [hidden] ) ) ) {
		display: flex;
		flex-direction: column;
		gap: 6px;
		min-width: 0;
		min-height: 112px;
		padding: 8px;
		border-inline-end: 1px solid var( --wp--preset--color--stroke );
		border-block-end: 1px solid var( --wp--preset--color--stroke );
	}

	.fcs-calendar .fcs-calendar__day.is-outside {
		background-color: var( --wp--preset--color--stripe );
	}

	.fcs-calendar .fcs-calendar__date {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: var( --wp--preset--font-size--small );
		line-height: 1;
	}

	.fcs-calendar .fcs-calendar__date-number {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: var( --wp--preset--border-radius--pill );
	}

	.fcs-calendar .fcs-calendar__day.is-outside .fcs-calendar__date {
		color: var( --wp--preset--color--muted );
		font-weight: 400;
	}

	.fcs-calendar .fcs-calendar__day.is-today .fcs-calendar__date-number {
		background-color: var( --wp--preset--color--primary );
		color: var( --wp--preset--color--on-primary );
	}

	/* The grid says the date with the number; the words are for screen readers. */
	.fcs-calendar .fcs-calendar__date-full {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
		border: 0;
	}

	.fcs-calendar ul.fcs-calendar__events {
		gap: 4px;
	}

	.fcs-calendar .fcs-calendar__event-link {
		display: block;
		padding: 4px 6px;
		border-inline-start-width: 2px;
		font-size: var( --wp--preset--font-size--x-small );
		line-height: 1.3;
	}

	.fcs-calendar .fcs-calendar__event-time {
		display: block;
	}

	.fcs-calendar .fcs-calendar__event-title {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
}

@media ( min-width: 1024px ) {
	.fcs-calendar .fcs-calendar__day,
	.fcs-calendar .fcs-calendar__day.is-outside,
	.fcs-calendar .fcs-calendar__day:not( :has( .fcs-calendar__event:not( [hidden] ) ) ) {
		min-height: 140px;
		padding: 10px;
	}

	.fcs-calendar .fcs-calendar__event-link {
		padding: 6px 8px;
	}

	/* Time and title share a line when the cell is wide enough. */
	.fcs-calendar .fcs-calendar__event-time {
		display: inline;
		margin-inline-end: 4px;
	}
}

/* Month arrows ------------------------------------------------------------ */

.fcs-calendar .fcs-calendar__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "prev today next";
	align-items: center;
	gap: 16px;
	margin-block-start: 32px;
}

@media ( min-width: 768px ) {
	.fcs-calendar .fcs-calendar__nav {
		margin-block-start: 40px;
	}
}

.fcs-calendar .fcs-calendar__nav-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var( --wp--preset--color--link );
	font-weight: 700;
	text-decoration: none;
}

.fcs-calendar .fcs-calendar__nav-link--prev {
	grid-area: prev;
	justify-self: start;
}

.fcs-calendar .fcs-calendar__nav-link--next {
	grid-area: next;
	flex-direction: row-reverse;
	justify-self: end;
}

.fcs-calendar .fcs-calendar__today {
	grid-area: today;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--link );
	text-align: center;
}

/*
 * Multicolumn's slider arrow (FCS_Slider_Arrow.svg) as a mask, so it takes the
 * link colour; the previous arrow is the same glyph turned round. See the long
 * note in patterns/multicolumn.css for why the faded file is not used.
 */
.fcs-calendar .fcs-calendar__arrow {
	flex: none;
	width: 34px;
	height: 34px;
	background-color: currentcolor;
	-webkit-mask: url( "../../images/icons/FCS_Slider_Arrow.svg" ) center / contain no-repeat;
	mask: url( "../../images/icons/FCS_Slider_Arrow.svg" ) center / contain no-repeat;
	transition: transform var( --fcs-transition );
}

.fcs-calendar .fcs-calendar__nav-link--prev .fcs-calendar__arrow {
	transform: rotate( 180deg );
}

.fcs-calendar a.fcs-calendar__nav-link--prev:hover .fcs-calendar__arrow {
	transform: rotate( 180deg ) translateX( 4px );
}

.fcs-calendar a.fcs-calendar__nav-link--next:hover .fcs-calendar__arrow {
	transform: translateX( 4px );
}

/*
 * Small: the month names are for screen readers only — two names plus "Back to
 * this month" do not fit across a phone. The arrows and the middle link remain.
 */
.fcs-calendar .fcs-calendar__nav-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

/*
 * From Medium the label shows and sweeps like every other standalone link —
 * the .fcs-link--animated bar, written out here because the hover belongs to
 * the whole link (arrow included), not to the label alone.
 */
@media ( min-width: 768px ) {
	.fcs-calendar .fcs-calendar__nav-label {
		position: relative;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
}

.fcs-calendar a.fcs-calendar__nav-link .fcs-calendar__nav-label::after {
	content: "";
	position: absolute;
	inset: auto 0 calc( var( --fcs-underline-gap ) * -1 ) 0;
	height: var( --fcs-underline-size );
	background: currentcolor;
	transform: scaleX( 0 );
	transform-origin: right;
	transition: transform var( --fcs-sweep-link );
}

.fcs-calendar a.fcs-calendar__nav-link:hover .fcs-calendar__nav-label::after,
.fcs-calendar a.fcs-calendar__nav-link:focus-visible .fcs-calendar__nav-label::after {
	transform: scaleX( 1 );
	transform-origin: left;
}

/* The end of the navigable range: Multicolumn's faded end stop. */
.fcs-calendar .fcs-calendar__nav-link[aria-disabled="true"] {
	opacity: 0.5;
	cursor: default;
}

@media ( prefers-reduced-motion: reduce ) {
	.fcs-calendar a.fcs-calendar__nav-link--prev:hover .fcs-calendar__arrow {
		transform: rotate( 180deg );
	}

	.fcs-calendar a.fcs-calendar__nav-link--next:hover .fcs-calendar__arrow {
		transform: none;
	}
}

/* Pop-up ------------------------------------------------------------------ */

/*
 * The <dialog> is a bare box and the white panel fills it exactly, so a click
 * that lands on the dialog element itself can only be on the backdrop — which
 * is how view.js closes on an outside click. Same as Staff Directory.
 */
.fcs-calendar .fcs-calendar__dialog {
	width: calc( 100vw - 40px );
	max-width: 626px;
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var( --wp--preset--color--foreground );
	overflow: visible;
}

.fcs-calendar .fcs-calendar__dialog::backdrop {
	background-color: rgb( 0 0 0 / 50% );
}

.fcs-calendar .fcs-calendar__dialog-panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-height: calc( 100dvh - 40px );
	padding: 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 12px;
	background-color: var( --wp--preset--color--background );
	box-shadow: var( --fcs-shadow-lg );
}

.fcs-calendar .fcs-calendar__dialog-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media ( min-width: 768px ) {
	.fcs-calendar .fcs-calendar__dialog-panel {
		padding: 28px;
	}

	.fcs-calendar .fcs-calendar__dialog-body {
		gap: 28px;
	}
}

/* Close — a 24px glyph in a 44px hit area, as in Staff Directory. */
.fcs-calendar .fcs-calendar__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-end;
	margin: -10px;
	padding: 10px;
	color: var( --wp--preset--color--link );
}

.fcs-calendar .fcs-calendar__close svg {
	display: block;
	width: 24px;
	height: 24px;
}

.fcs-calendar .fcs-calendar__modal-media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background-color: var( --wp--preset--color--surface-alt );
}

.fcs-calendar .fcs-calendar__modal-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fcs-calendar .fcs-calendar__modal-intro {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fcs-calendar .fcs-calendar__modal-intro > * {
	margin: 0;
}

.fcs-calendar .fcs-calendar__modal-eyebrow {
	color: var( --wp--preset--color--link );
	font-size: var( --wp--preset--font-size--small );
}

.fcs-calendar .fcs-calendar__modal-badge {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: var( --wp--preset--border-radius--pill );
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--on-primary );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.125em;
	text-transform: uppercase;
}

/*
 * The title is the dialog's <h2> (its accessible name) but drawn at the h4
 * preset: a 36px h2 would dwarf a 626px panel. Staff Directory does the same
 * with its name, for the same reason.
 */
.fcs-calendar .fcs-calendar__modal-title {
	font-size: var( --wp--preset--font-size--h-4 );
	line-height: 1.25;
	color: var( --wp--preset--color--primary );
}

/* Details: bold uppercase label over its value — Staff Directory's rows. */
.fcs-calendar .fcs-calendar__modal-details {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.5;
}

.fcs-calendar .fcs-calendar__modal-detail dt {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted );
}

.fcs-calendar .fcs-calendar__modal-detail dd {
	margin: 0;
}

.fcs-calendar .fcs-calendar__modal-text {
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.5;
}

.fcs-calendar .fcs-calendar__modal-text > :first-child {
	margin-block-start: 0;
}

.fcs-calendar .fcs-calendar__modal-text > :last-child {
	margin-block-end: 0;
}

.fcs-calendar .fcs-calendar__modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/*
 * Add to my calendar — a quiet footer under a rule, not buttons: Register is
 * the pop-up's action, and a one-time copy is secondary to subscribing. The
 * label borrows the details' uppercase label; the links sweep like every
 * standalone link (the prose underline unset, as in the month); the note says
 * plainly that the copy will not update.
 */
.fcs-calendar .fcs-calendar__modal-add {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-block-start: 20px;
	border-block-start: 1px solid var( --wp--preset--color--stroke );
}

.fcs-calendar .fcs-calendar__modal-add > * {
	margin: 0;
}

.fcs-calendar .fcs-calendar__modal-add-title {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted );
}

.fcs-calendar .fcs-calendar__modal-add-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.5;
}

.fcs-calendar .fcs-calendar__modal-add-links a {
	background-image: none;
	padding-bottom: 0;
	color: var( --wp--preset--color--link );
	font-weight: 700;
}

.fcs-calendar .fcs-calendar__modal-add-note {
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4286;
	color: var( --wp--preset--color--muted );
}

/* Subscribe ---------------------------------------------------------------- */

/*
 * The subscribe controls (fcs-core/inc/subscribe.php) appear in two places:
 *
 *   the calendar's Subscribe menu   .fcs-calendar__subscribe, below
 *   the Subscribe to the Calendar   the block, on a page of its own (e.g.
 *   block                           Athletics, with only that feed)
 *
 * The controls are styled under their OWN root, .fcs-subscribe, not under
 * .fcs-calendar, so the block keeps its look wherever it is placed; every
 * partial loads site-wide, so these rules follow it.
 *
 * DERIVED — there is no design for any of it.
 *
 *   Toggle   a primary button at the right end of the filter row, with the
 *            nav's chevron, turned up while open. Full width on Small.
 *   Menu     a <details>, so it works without JavaScript. From Medium a
 *            460px white panel dropping from the button's right edge, over
 *            the month; on Small it opens in the flow, pushing the month down,
 *            because a floating panel on a phone covers what it explains.
 *   Panel    Google as the primary action, Apple / Outlook as outline,
 *            stacked full width inside the menu (two long uppercase labels do
 *            not fit side by side in 460px); side by side in the block from
 *            Medium. The URL field and its Copy button share a row at every
 *            size, the field shrinking. The refresh note is small and muted
 *            but never hidden.
 */

.fcs-calendar .fcs-calendar__subscribe {
	position: relative;
	flex: none;
}

.fcs-calendar .fcs-calendar__subscribe-toggle {
	--fcs-button-wipe: rgb( 255 255 255 / 18% ); /* the primary button's veil */

	display: flex;
	justify-content: center;
	width: 100%;
	cursor: pointer;
	list-style: none;
}

.fcs-calendar .fcs-calendar__subscribe-toggle::-webkit-details-marker {
	display: none;
}

.fcs-calendar .fcs-calendar__subscribe-chevron {
	flex: none;
	width: 14px;
	height: 14px;
	background-color: currentcolor;
	-webkit-mask: url( "../../images/icons/FCS_Chevron_Down.svg" ) center / contain no-repeat;
	mask: url( "../../images/icons/FCS_Chevron_Down.svg" ) center / contain no-repeat;
	transition: transform var( --fcs-transition );
}

.fcs-calendar .fcs-calendar__subscribe[open] .fcs-calendar__subscribe-chevron {
	transform: rotate( 180deg );
}

.fcs-calendar .fcs-calendar__subscribe-menu {
	margin-block-start: 12px;
}

.fcs-calendar .fcs-calendar__subscribe-menu .fcs-subscribe__panel {
	padding: 20px;
	border: 1px solid var( --wp--preset--color--stroke );
	background-color: var( --wp--preset--color--background );
	box-shadow: var( --fcs-shadow-lg );
}

@media ( min-width: 768px ) {
	.fcs-calendar .fcs-calendar__subscribe-toggle {
		display: inline-flex;
		width: auto;
	}

	.fcs-calendar .fcs-calendar__subscribe-menu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-end: 0;
		z-index: calc( var( --fcs-z-header ) - 1 ); /* over the month, under the sticky header */
		width: min( 460px, calc( 100vw - 40px ) );
	}

	.fcs-calendar .fcs-calendar__subscribe-menu .fcs-subscribe__panel {
		padding: 28px;
	}
}

.fcs-calendar .fcs-calendar__subscribe-menu p.fcs-subscribe__title {
	font-size: var( --wp--preset--font-size--large );
	font-weight: 700;
	line-height: 1.3;
}
/*
 * The block wrapper is bare; the panel carries the ground. In the Calendar
 * section the wrapper also has .fcs-calendar__inner, whose Small gutter is
 * PADDING (layout/spacing.css) — so the panel sits inside the gutter instead of
 * running to the edge of the phone.
 */
.fcs-subscribe__panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px 20px;
	border-radius: var( --wp--preset--border-radius--medium );
	background-color: var( --wp--preset--color--surface );
}

@media ( min-width: 768px ) {
	.fcs-subscribe__panel {
		padding: 40px;
	}
}

/* Doubled to (0,3,0): .wp-block-button and .fcs-link--animated both set a display. */
.fcs-subscribe [hidden][hidden] {
	display: none;
}

.fcs-subscribe__panel > *,
.fcs-subscribe__intro > * {
	margin: 0;
}

.fcs-subscribe__intro {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fcs-subscribe__title {
	color: var( --wp--preset--color--primary );
}

.fcs-subscribe__lede {
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.5;
}

.fcs-subscribe .fcs-subscribe__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.fcs-subscribe .fcs-subscribe__actions .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
}

/* Side by side in the block; the menu is too narrow, so it keeps them stacked. */
@media ( min-width: 768px ) {
	.fcs-subscribe:not( .fcs-calendar__subscribe-menu ) .fcs-subscribe__actions {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px;
	}

	.fcs-subscribe:not( .fcs-calendar__subscribe-menu ) .fcs-subscribe__actions .wp-block-button__link {
		width: auto;
	}
}

/* Copy link */

.fcs-subscribe__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fcs-subscribe__label {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	line-height: 1.4286;
	color: var( --wp--preset--color--primary );
}

.fcs-subscribe__copy-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.fcs-subscribe .fcs-subscribe__url {
	flex: 1 1 auto;
	min-width: 0;
	background-color: var( --wp--preset--color--background );
	font-size: var( --wp--preset--font-size--small );
	text-overflow: ellipsis;
}

.fcs-subscribe .fcs-subscribe__copy-button {
	flex: none;
	margin: 0;
}

.fcs-subscribe .fcs-subscribe__copy-button .wp-block-button__link {
	height: 100%;
	white-space: nowrap;
}

/* The required "updates on its own schedule" sentence. */
.fcs-subscribe__note {
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4286;
	color: var( --wp--preset--color--muted );
}

/* One category or campus instead */

.fcs-subscribe__more {
	padding-block-start: 20px;
	border-block-start: 1px solid var( --wp--preset--color--stroke );
}

.fcs-subscribe__more-toggle {
	font-weight: 700;
	color: var( --wp--preset--color--link );
	cursor: pointer;
}

.fcs-subscribe__more-intro {
	margin: 12px 0 16px;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4286;
}

/* (0,2,1) to beat the prose list indent in base/typography.css. */
.fcs-subscribe ul.fcs-subscribe__feeds {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fcs-subscribe .fcs-subscribe__feed {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0;
	padding-block-end: 12px;
	padding-inline-start: calc( var( --fcs-depth, 0 ) * 16px );
	border-block-end: 1px solid var( --wp--preset--color--stroke );
}

.fcs-subscribe__feed-name {
	font-weight: 700;
	color: var( --wp--preset--color--primary );
}

.fcs-subscribe__feed-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	font-size: var( --wp--preset--font-size--small );
}

/*
 * The block lands inside .wp-block-post-content, whose prose underline would
 * draw under these links as well as the sweep — unset, as in the month above.
 */
.fcs-subscribe .fcs-subscribe__feed-links a {
	background-image: none;
	padding-bottom: 0;
	color: var( --wp--preset--color--link );
}

.fcs-subscribe .fcs-subscribe__copy-text {
	padding: 0;
	border: 0;
	background: none;
	color: var( --wp--preset--color--link );
	font: inherit;
	cursor: pointer;
}

/* Print -------------------------------------------------------------------- */

/* The filters and arrows mean nothing on paper; the month itself prints. */
@media print {
	.fcs-calendar .fcs-calendar__filters,
	.fcs-calendar .fcs-calendar__nav,
	.fcs-calendar .fcs-calendar__subscribe,
	.fcs-subscribe {
		display: none;
	}
}