/* ==========================================================================
   Almanac by Soren — Frontend Styles
   Unopinionated about page LAYOUT — these rules only style the calendar's
   own internals (cards, pills, grid).

   Colour is a different matter. Anywhere the plugin paints a background it
   must also set the text colour, or the result is half-themed: our white
   cell behind the site's own text colour. That bug made day numbers
   invisible on a site whose inherited colour was light — every date in the
   month vanished, while the greyed-out days either side of it stayed
   readable purely because .is-outside-month happened to set a colour.
   It also meant the Styling tab's "Text Color" field did almost nothing.
   ========================================================================== */

.almanac {
	color: var(--almanac-text);
	--almanac-accent: #31b599;
	--almanac-accent-tint: #e6f6f3;
	/* Teal is 2.56:1 on white, so it can colour fills and borders but never
	   text. Text-coloured accent uses the darker ink (5.47:1) unless the site
	   saved its own accent, in which case the shortcode emits that value here. */
	--almanac-accent-text: #2c7565;
	--almanac-text: #262626;
	--almanac-border: rgba(38, 38, 38, .16);
	--almanac-muted: rgba(38, 38, 38, .68);
	--almanac-card-bg: #ffffff;
	/* Fonts default to "inherit" so the site's own typography shows through
	   unless a font is explicitly chosen in the Styling tab. */
	--almanac-heading-font: inherit;
	--almanac-heading-size: 16px;
	--almanac-body-font: inherit;
	--almanac-body-size: 13px;
	--almanac-radius: 10px;
}

/* Anchor targets (a day click from the month grid, and the month nav's own
   jump back to the calendar) shouldn't land flush against the viewport top —
   themes with a sticky header would otherwise cover them. */
.almanac[id],
.almanac [id^="almanac-event-"] {
	scroll-margin-top: 2rem;
}

/* ── Filter pills ───────────────────────────────────────────── */

.almanac-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 0 0 20px;
}

.almanac-filter-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.almanac-pill {
	font-family: var(--almanac-body-font);
	padding: 6px 14px;
	background: transparent;
	border: 1px solid var(--almanac-border);
	border-radius: 999px;
	color: var(--almanac-text);
	font-size: 13px;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.almanac .almanac-pill.is-active,
.almanac .almanac-pill:hover {
	background: var(--almanac-accent-tint);
	border-color: var(--almanac-accent-text);
	color: var(--almanac-accent-text);
}

/* ── List / Grid ────────────────────────────────────────────── */

.almanac-date-heading {
	font-family: var(--almanac-heading-font);
	margin: 24px 0 12px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--almanac-border);
	font-size: 16px;
}

.almanac-list .almanac-date-heading:first-child {
	margin-top: 0;
}

.almanac-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.almanac-card {
	font-family: var(--almanac-body-font);
	font-size: var(--almanac-body-size);
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
	border: 1px solid var(--almanac-border);
	/* Shares the calendar's radius so cards and grid round together rather
	   than drifting apart when one is changed. */
	border-radius: var(--almanac-radius, 10px);
	overflow: hidden;
	background: var(--almanac-card-bg);
}

.almanac-grid .almanac-card {
	margin-bottom: 0;
	height: 100%;
}

.almanac-card-image img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

/* A column that fills whatever height the card has, so .almanac-card-actions
   can be pushed to the bottom with margin-top:auto. Without this the actions
   sat wherever the text happened to end, and a row of cards with different
   amounts of copy had its buttons at four different heights — which is what
   made them look scattered rather than placed. */
.almanac-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 16px;
}

.almanac-card-title {
	margin: 0 0 6px;
	color: var(--almanac-text);
	font-family: var(--almanac-heading-font);
	font-size: var(--almanac-heading-size);
}

/* The colour is the title's, inherited, so the Style tab's Event Title colour
   reaches the words. Set here, it stopped at the link and the setting did
   nothing. */
.almanac-card-title a {
	color: inherit;
	text-decoration: none;
}

.almanac-card-title a:hover {
	text-decoration: underline;
}

.almanac-card-meta,
.almanac-card-location,
.almanac-card-cost {
	margin: 0 0 4px;
	color: var(--almanac-muted);
	font-size: 13px;
}

/* One row along the bottom of every card, whatever is in it. align-items
   centres a ticket button against the plain text links beside it, which were
   previously sitting on different baselines. The top margin is the minimum
   gap; auto does the pushing. */
.almanac-card-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: auto;
	padding-top: 12px;
}

/* ── List rows ───────────────────────────────────────────────
   A list card is a row: a thumbnail on the left, the text beside it. It used
   to be the grid card stretched to the full content width, so every event
   carried a 1200px-wide, 160px-tall banner of a cropped photo and one line of
   text, and a week of events took several screens. The thumbnail fills the
   row's height whatever the text runs to, so rows with a ticket button and
   rows without one stay tidy. Calendar List uses the same rows. */
.almanac-list .almanac-card {
	flex-direction: row;
	margin-bottom: 12px;
}

.almanac-list .almanac-card-image {
	flex: 0 0 clamp(120px, 22%, 220px);
	min-height: 120px;
	overflow: hidden;
}

.almanac-list .almanac-card-image img {
	position: absolute;
	inset: 0;
	height: 100%;
}

.almanac-list .almanac-card-body {
	min-width: 0;
	padding: 14px 18px;
}

.almanac-list .almanac-card-actions {
	padding-top: 8px;
}

@media (max-width: 480px) {
	.almanac-list .almanac-card-image {
		flex-basis: 96px;
		min-height: 96px;
	}

	.almanac-list .almanac-card-badge {
		top: 6px;
		left: 6px;
		min-width: 2.4rem;
		padding: 4px 6px;
	}

	.almanac-list .almanac-card-body {
		padding: 10px 12px;
	}
}

/* ── Date badge ────────────────────────────────────────────── */

/* The badge's accessible date, and anything else meant for a screen reader.
   .screen-reader-text is a theme convention, not something WordPress ships to
   the front end — on a theme that does not define it, or scopes it under its
   own wrapper, the full date printed right under a badge reading DEC 5, which
   is the duplication the badge exists to remove. Scoped to .almanac so it
   cannot alter a theme's own copy. */
.almanac .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.almanac-card-image {
	position: relative;
}

.almanac-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 3rem;
	padding: 6px 8px;
	background: var(--almanac-card-bg);
	border-radius: var(--almanac-radius, 10px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	line-height: 1.05;
	text-align: center;
}

.almanac-card-badge-month {
	color: var(--almanac-accent-text);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.almanac-card-badge-day {
	color: var(--almanac-text);
	font-size: 20px;
	font-weight: 700;
}

.almanac-card-badge-year {
	color: var(--almanac-muted);
	font-size: 10px;
	font-weight: 600;
}

.almanac-card-link,
.almanac-card-ics {
	color: var(--almanac-accent-text);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.almanac-card-link:hover,
.almanac-card-ics:hover {
	text-decoration: underline;
}

.almanac-empty {
	color: var(--almanac-muted);
}

/* Editors only — see Almanac_Shortcode::range_note(). Dashed so it reads as a
   note about the page rather than as part of it. */
.almanac-editor-note {
	margin: 8px 0 0;
	padding: 10px 14px;
	border: 1px dashed #89643a;
	border-radius: 6px;
	background: #fcf1e4;
	color: #262626;
	font-size: 14px;
	line-height: 1.5;
}

/* ── Calendar nav bar ───────────────────────────────────────── */
/* Google Calendar ordering: Today, then the arrow pair, then the month.
   All three share --almanac-nav-height so they line up on one baseline
   regardless of the theme's own font metrics. */

.almanac-calendar-nav-bar {
	--almanac-nav-height: 40px;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.almanac-today-button,
.almanac-month-jump select {
	display: inline-flex;
	align-items: center;
	height: var(--almanac-nav-height);
	box-sizing: border-box;
	background: var(--almanac-card-bg);
	/* Explicit on every side: a transparent border lets a theme's own select
	   styling show through on individual edges, which read as a stray
	   half-border above the month name. */
	border: 1px solid var(--almanac-border);
	border-radius: 999px;
	box-shadow: none;
	color: var(--almanac-text);
	line-height: 1;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.almanac-today-button {
	padding: 0 20px;
	font-family: var(--almanac-body-font);
	font-size: 14px;
	text-decoration: none;
}

.almanac .almanac-today-button:hover,
.almanac .almanac-today-button:focus {
	background: var(--almanac-accent-tint);
	border-color: var(--almanac-accent-text);
	color: var(--almanac-accent-text);
	text-decoration: none;
}

.almanac-calendar-arrows {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

/* Bare glyphs rather than filled circles — the hover target stays the full
   square, it just isn't drawn until hovered. */
.almanac-calendar-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--almanac-nav-height);
	height: var(--almanac-nav-height);
	border-radius: 50%;
	color: var(--almanac-text);
	font-family: var(--almanac-body-font);
	font-size: 26px;
	line-height: 1;
	text-decoration: none;
}

.almanac-calendar-nav:hover,
.almanac-calendar-nav:focus {
	background: var(--almanac-accent-tint);
	color: var(--almanac-accent-text);
	text-decoration: none;
}

.almanac-calendar-title {
	font-family: var(--almanac-heading-font);
	margin: 0;
	font-size: 18px;
}

.almanac-month-jump {
	display: inline-flex;
	margin: 0;
}

/* The month label is the dropdown, so the native control is fully reset and
   rebuilt as a pill with a caret. */
.almanac-month-jump select {
	max-width: 100%;
	margin: 0;
	padding: 0 38px 0 20px;
	font-family: var(--almanac-heading-font);
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 22px center, right 16px center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.almanac .almanac-month-jump select:hover,
.almanac .almanac-month-jump select:focus {
	background-color: var(--almanac-accent-tint);
	border-color: var(--almanac-accent-text);
	color: var(--almanac-accent-text);
	outline: none;
}

/* ── Calendar layout: month grid + day sidebar ──────────────── */

.almanac-calendar-layout {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: 8px;
	align-items: start;
	margin-bottom: 8px;
}

.almanac-calendar-main {
	min-width: 0;
}

.almanac-calendar-side {
	min-width: 0;
	font-family: var(--almanac-body-font);
	font-size: var(--almanac-body-size);
}

/* The sidebar card is the same component as the grid cards below, so it
   needs the grid's own no-bottom-margin treatment rather than the list's. */
.almanac-calendar-side .almanac-card {
	margin-bottom: 8px;
}

.almanac-calendar-side .almanac-card:last-child {
	margin-bottom: 0;
}

.almanac-day-panel {
	display: none;
}

.almanac-day-panel.is-active {
	display: block;
}

.almanac-day-panel-heading {
	font-family: var(--almanac-heading-font);
	margin: 0 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--almanac-border);
	font-size: 14px;
}

.almanac-day-panel-today {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--almanac-accent);
	color: var(--almanac-accent-contrast, #262626);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	vertical-align: middle;
}

@media screen and (max-width: 860px) {
	.almanac-calendar-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.almanac-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: var(--almanac-border);
	border: 1px solid var(--almanac-border);
	/* The grid lines are a 1px gap showing the container's background through,
	   so the cells sit flush to the edge and would square off the corners —
	   overflow clips them back to the radius. */
	border-radius: var(--almanac-radius, 10px);
	overflow: hidden;
	margin-bottom: 24px;
}

.almanac-calendar-weekday {
	padding: 8px 4px;
	background: #fafafa;
	color: var(--almanac-muted);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

.almanac-calendar-day {
	position: relative;
	min-height: 64px;
	padding: 6px;
	background: var(--almanac-card-bg);
	font-family: var(--almanac-body-font);
}

.almanac-calendar-day.is-outside-month {
	background: var(--almanac-outside-bg, #fafafa);
}

.almanac-calendar-day.is-outside-month .almanac-calendar-day-number {
	color: var(--almanac-muted);
}

.almanac-calendar-day-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	/* Stated rather than inherited: this number sits inside a link on any day
	   that has events, and a theme's own link colour would otherwise win. */
	color: var(--almanac-text);
	font-family: var(--almanac-body-font);
	font-size: var(--almanac-day-number-size, 13px);
	font-weight: var(--almanac-day-number-weight, 400);
}

/* Today gets the filled circle. The number's color comes from
   --almanac-accent-contrast, which is derived from the accent's own
   luminance when the accent is set in the Styling tab, so a pale accent
   doesn't end up with unreadable white text on it. */
.almanac-calendar-day.is-today .almanac-calendar-day-number {
	border-radius: 50%;
	background: var(--almanac-accent);
	color: var(--almanac-accent-contrast, #262626);
	font-weight: 700;
}

/* The day the sidebar is currently showing. */
.almanac-calendar-day.is-selected {
	box-shadow: inset 0 0 0 2px var(--almanac-accent);
}

/* A dot underneath an already-filled circle just reads as noise. */
.almanac-calendar-day.is-today .almanac-calendar-day-dot {
	display: none;
}

.almanac-calendar-day-link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.almanac-calendar-day.has-events {
	background: var(--almanac-accent-tint);
}

.almanac-calendar-day-dot {
	display: block;
	width: 6px;
	height: 6px;
	margin-top: 4px;
	border-radius: 50%;
	background: var(--almanac-accent);
}

.almanac-calendar-events .almanac-date-heading:first-child {
	margin-top: 0;
}

/* Calendar Grid view: a fixed 4-across grid rather than the main Grid view's
   auto-fill. Under a full-width month calendar, auto-fill left each card
   stretched across the whole row with only a few lines of content in it. */
.almanac-grid--calendar {
	grid-template-columns: repeat(var(--almanac-calendar-columns, 4), minmax(0, 1fr));
}

@media screen and (max-width: 1100px) {
	.almanac-grid--calendar {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (max-width: 860px) {
	.almanac-grid--calendar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 600px) {
	.almanac-calendar-weekday {
		font-size: 10px;
	}

	.almanac-calendar-day {
		min-height: 44px;
	}

	.almanac-calendar-nav-bar {
		flex-wrap: wrap;
		gap: 10px;
	}

	.almanac-grid--calendar {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ── Tickets & performance status ───────────────────────────── */

/* The ticket link is the primary action on a venue calendar, so it reads as a
   filled button while "More Info" and "Add to Calendar" stay as plain links.
   Everything else on the card competes for the same row. */
.almanac-card-tickets {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--almanac-accent);
	color: var(--almanac-accent-contrast, #262626);
	font-family: var(--almanac-body-font);
	font-size: var(--almanac-body-size);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.almanac-card-tickets:hover,
.almanac-card-tickets:focus {
	color: var(--almanac-accent-contrast, #262626);
	text-decoration: none;
	filter: brightness(.92);
}

.almanac-card-performance {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}

.almanac-status {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	font-family: var(--almanac-body-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Deliberately not the accent colour. These are exception states, and painting
   them in the site's own brand colour makes "Sold Out" look like a feature
   rather than a warning. */
.almanac-status--low {
	background: rgba(183, 121, 31, .14);
	color: #8a5a12;
}

.almanac-status--sold_out {
	background: rgba(38, 38, 38, .1);
	color: var(--almanac-muted);
}

.almanac-status--cancelled {
	background: rgba(176, 42, 42, .12);
	color: #a32020;
}

.almanac-performance-note {
	font-family: var(--almanac-body-font);
	font-size: var(--almanac-body-size);
	font-style: italic;
	color: var(--almanac-muted);
}

/* ── Past events ────────────────────────────────────────────── */

/* Only the calendar views reach a past date — List and Grid start at today —
   so this is about browsing a month and being able to tell at a glance what
   has already happened. Dimmed rather than hidden: someone looking at
   September should still see that the ATV Jamboree was on the 14th.

   Opacity alone leaves a full-colour photo looking current, so the image is
   desaturated too. The text stays legible, which matters more than the effect
   being dramatic — this is still information. */
.almanac-card.is-past {
	opacity: .6;
}

.almanac-card.is-past .almanac-card-image img {
	filter: grayscale(1);
}

.almanac-card.is-past:hover,
.almanac-card.is-past:focus-within {
	opacity: 1;
}

.almanac-card.is-past:hover .almanac-card-image img,
.almanac-card.is-past:focus-within .almanac-card-image img {
	filter: none;
}

/* A past day keeps its event dot so the month still reads as a record of what
   happened, but drops the accent tint that marks a day worth acting on. */
.almanac-calendar-day.is-past.has-events {
	background: var(--almanac-card-bg);
}

.almanac-calendar-day.is-past .almanac-calendar-day-number,
.almanac-calendar-day.is-past .almanac-calendar-day-dot {
	opacity: .45;
}

/* A cancelled performance stays on the calendar so someone looking for a date
   they already know about is told it's off. It's dimmed, not hidden, and the
   title is struck through so the state reads without depending on the badge. */
.almanac-card.is-cancelled {
	opacity: .72;
}

.almanac-card.is-cancelled .almanac-card-title {
	text-decoration: line-through;
}


/* ── Shows view ─────────────────────────────────────────────── */

/* One card per event, however many dates it has (view="events"; "shows" is
   its first name and still works). Artwork leads, because the event is the
   thing being sold rather than any one date, which is the reason this view
   exists alongside the per-date ones. */
.almanac-shows {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.almanac-show {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--almanac-border);
	border-radius: var(--almanac-radius, 10px);
	background: var(--almanac-card-bg);
	color: var(--almanac-text);
}

.almanac-show-image {
	position: relative;
	display: block;
	overflow: hidden;
	/* Reserved whether or not there's artwork, so a show without a poster
	   doesn't sit shorter than its neighbours and break the grid's rhythm. */
	aspect-ratio: 3 / 2;
	background: var(--almanac-accent-tint);
}

.almanac-show-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}

.almanac-show:hover .almanac-show-image img {
	transform: scale(1.03);
}

.almanac-show-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px 20px;
}

.almanac-show-eyebrow {
	margin: 0;
	color: var(--almanac-muted);
	font-family: var(--almanac-body-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.almanac-show-title {
	margin: 0;
	color: var(--almanac-text);
	font-family: var(--almanac-heading-font);
	font-size: var(--almanac-show-title-size, 22px);
	line-height: 1.2;
}

/* Inherited for the same reason as .almanac-card-title a. */
.almanac-show-title a {
	color: inherit;
	text-decoration: none;
}

.almanac-show-title a:hover {
	text-decoration: underline;
}

.almanac-show-run,
.almanac-show-location {
	margin: 0;
	color: var(--almanac-muted);
	font-family: var(--almanac-body-font);
	font-size: var(--almanac-body-size);
}

/* The one line a returning visitor scans for, so it gets its own rule above
   the actions rather than being folded into the meta lines. */
.almanac-show-next {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 6px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--almanac-border);
	font-family: var(--almanac-body-font);
	font-size: var(--almanac-body-size);
}

.almanac-show-next-label {
	color: var(--almanac-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.almanac-show-next-value {
	font-weight: 700;
}

.almanac-show-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	/* As tall as a ticket button, so a card without one has its More Info
	   link on the same line as the links beside the buttons next to it. */
	min-height: 42px;
	/* Pinned to the bottom so buttons line up across a row of cards whose
	   titles wrap to different heights. */
	margin-top: auto;
	padding-top: 14px;
}

/* A run whose dates have all passed within the requested window. Kept rather
   than filtered out — a season page that silently drops last month's show
   looks broken to anyone who bookmarked it. */
.almanac-show.is-past {
	opacity: .78;
}

@media (max-width: 600px) {
	.almanac-shows {
		grid-template-columns: 1fr;
	}
}

/* ── columns="" on Grid and Shows ─────────────────────────────
   Without it both views fit as many cards as their minimum width allows,
   which tops out at four on a normal content width, so columns="6" used to
   change nothing. With it, the count is a maximum: the breakpoints below
   still lower it, so six across a desktop is not six across a phone. Set
   through data-columns rather than an inline style, which would outrank
   the media queries. */
.almanac-grid[data-columns],
.almanac-shows[data-columns] {
	grid-template-columns: repeat(var(--almanac-columns), minmax(0, 1fr));
}

.almanac-grid[data-columns="1"], .almanac-shows[data-columns="1"] { --almanac-columns: 1; }
.almanac-grid[data-columns="2"], .almanac-shows[data-columns="2"] { --almanac-columns: 2; }
.almanac-grid[data-columns="3"], .almanac-shows[data-columns="3"] { --almanac-columns: 3; }
.almanac-grid[data-columns="4"], .almanac-shows[data-columns="4"] { --almanac-columns: 4; }
.almanac-grid[data-columns="5"], .almanac-shows[data-columns="5"] { --almanac-columns: 5; }
.almanac-grid[data-columns="6"], .almanac-shows[data-columns="6"] { --almanac-columns: 6; }

@media (max-width: 1100px) {
	.almanac-grid:is([data-columns="4"], [data-columns="5"], [data-columns="6"]),
	.almanac-shows:is([data-columns="4"], [data-columns="5"], [data-columns="6"]) {
		--almanac-columns: 3;
	}
}

@media (max-width: 782px) {
	.almanac-grid:is([data-columns="3"], [data-columns="4"], [data-columns="5"], [data-columns="6"]),
	.almanac-shows:is([data-columns="3"], [data-columns="4"], [data-columns="5"], [data-columns="6"]) {
		--almanac-columns: 2;
	}
}

@media (max-width: 480px) {
	.almanac-grid[data-columns],
	.almanac-shows[data-columns] {
		--almanac-columns: 1;
	}
}

/* ── Slider view ───────────────────────────────────────────── */

/* A scroll-snap row of the grid's own cards, not a carousel library. Swipe on
   a phone and trackpad scrolling come free, which a transform-based carousel
   has to reimplement, and nothing is added to a plugin that ships no
   dependencies.

   Flex rather than grid: a percentage inside grid-auto-columns resolves
   against the grid's intrinsic size, which is indefinite in a scroll
   container, and the cards came out 33 million pixels wide. A flex-basis
   percentage resolves against the visible width, which is the thing a card's
   share has to be measured from.

   How many cards show at once is the smaller of what the shortcode asked for
   (--almanac-slider-set, written inline by columns="") and what the width
   allows (--almanac-slider-cap, stepped down by the breakpoints below).

   The two cannot be one variable. An inline style declaration outranks every
   author rule including those inside @media, so columns="4" pinned four cards
   across a 375px phone at roughly 69px each — the opposite of what the
   breakpoints exist for. min() lets the cap win without needing to. */
.almanac-slider {
	--almanac-slider-cap: 4;
	--almanac-slider-columns: min(var(--almanac-slider-set, 4), var(--almanac-slider-cap));
	--almanac-slider-gap: 20px;

	display: flex;
	gap: var(--almanac-slider-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Room for a focus ring and any card shadow, which overflow would clip. */
	padding: 4px;
	margin: -4px;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}

/* The gaps have to come out of each card's share, or the last card in a row is
   pushed out of view by their accumulated width. */
.almanac-slider > .almanac-card,
.almanac-slider > .almanac-show {
	flex: 0 0 calc(
		(100% - (var(--almanac-slider-columns) - 1) * var(--almanac-slider-gap))
		/ var(--almanac-slider-columns)
	);
	scroll-snap-align: start;
	/* .almanac-card carries a list-view bottom margin that the grid resets and
	   this has to as well, or every slider ends with 16px of dead space inside
	   its own scroll container. */
	margin-bottom: 0;
}

.almanac-slider:focus-visible,
.almanac-slider-row:focus-visible {
	outline: 2px solid var(--almanac-accent);
	outline-offset: 2px;
}

@media screen and (max-width: 1100px) {
	.almanac-slider {
		--almanac-slider-cap: 3;
	}
}

@media screen and (max-width: 860px) {
	.almanac-slider {
		--almanac-slider-cap: 2;
	}
}

@media screen and (max-width: 600px) {
	.almanac-slider {
		--almanac-slider-cap: 1;
	}
}

/* Beats this rule's own display:flex, which otherwise overrides the browser's
   [hidden] and left two dead arrows on a page with JavaScript off. */
.almanac-slider-nav[hidden] {
	display: none;
}

/* A block with inline-block buttons rather than a flex row, so the Style tab's
   Text Align moves the arrows left or centre. A flex container ignores
   text-align entirely, which would have made that control a no-op on the one
   element people most want to reposition. */
.almanac-slider-nav {
	display: block;
	text-align: right;
	margin: 0 0 12px;
}

.almanac-slider-nav .almanac-slider-arrow + .almanac-slider-arrow {
	margin-left: 8px;
}

.almanac-slider-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: var(--almanac-card-bg);
	border: 1px solid var(--almanac-border);
	border-radius: 50%;
	color: var(--almanac-text);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	/* Keeps the buttons off the text baseline, which would otherwise leave
	   descender space under the row. */
	vertical-align: middle;
	/* Matches the pill and the Today button, which have always had one. */
	transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.almanac-slider-arrow:focus-visible {
	outline: 2px solid var(--almanac-accent);
	outline-offset: 2px;
}

.almanac-slider-arrow:hover:not([aria-disabled="true"]) {
	border-color: var(--almanac-accent);
	color: var(--almanac-accent);
}

/* Dimmed rather than hidden at the ends, so the control does not move about
   under the pointer as somebody pages through — and aria-disabled rather than
   the disabled attribute, because disabling a button that currently has focus
   drops focus to <body>, so a keyboard user paging to the last screen loses
   their place in the document. */
.almanac-slider-arrow[aria-disabled="true"] {
	opacity: .35;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.almanac-slider {
		scroll-behavior: auto;
	}
}

/* ── Pinned events ───────────────────────────────────────────── */

/* The small label on a pinned card. Text is Settings → Pinned Label;
   blank turns it off entirely. */
.almanac-pin-label {
	display: inline-block;
	/* The card body is a flex column, which would stretch it full width. */
	align-self: flex-start;
	margin: 0 0 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--almanac-accent);
	color: var(--almanac-accent-contrast, #262626);
	font-family: var(--almanac-body-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
	text-transform: uppercase;
}

/* The Events card's eyebrow carries the label instead of a date count, so it
   must not inherit the eyebrow's own text treatment twice. */
.almanac-show-eyebrow .almanac-pin-label {
	margin: 0;
}

.almanac-card-run {
	margin: 0 0 6px;
	color: var(--almanac-text);
	font-family: var(--almanac-body-font);
	font-size: var(--almanac-body-size);
	font-weight: 600;
}

/* Pinned slider: the pinned cards hold the left-hand slots and the track
   scrolls beside them. Every share is measured against the whole row, so a
   pinned card is exactly as wide as a scrolling one:

     card  = (row - (C - 1) * gap) / C        C = columns across the row
     track = what is left, showing C - pins cards

   --almanac-slider-set (columns="") is written on the row and inherited by
   the track; the cap steps down with the width exactly as the plain slider's
   does. */
.almanac-slider-row {
	--almanac-slider-cap: 4;
	--almanac-slider-gap: 20px;
	/* Never fewer than the pins plus one, or a narrow cap squeezes the pinned
	   cards into slivers and the track out of existence. */
	--almanac-row-columns: max(var(--almanac-pin-count, 1) + 1, min(var(--almanac-slider-set, 4), var(--almanac-slider-cap)));
	--almanac-row-card: calc((100% - (var(--almanac-row-columns) - 1) * var(--almanac-slider-gap)) / var(--almanac-row-columns));

	display: flex;
	gap: var(--almanac-slider-gap);
	align-items: stretch;
}

.almanac-slider-pinned {
	display: flex;
	gap: var(--almanac-slider-gap);
	flex: 0 0 min(
		calc(var(--almanac-pin-count, 1) * var(--almanac-row-card) + (var(--almanac-pin-count, 1) - 1) * var(--almanac-slider-gap)),
		calc(100% - var(--almanac-row-card) - var(--almanac-slider-gap))
	);
	min-width: 0;
}

.almanac-slider-pinned > .almanac-card,
.almanac-slider-pinned > .almanac-show {
	flex: 1 1 0;
	min-width: 0;
	margin-bottom: 0;
}

.almanac-slider-row > .almanac-slider {
	--almanac-slider-columns: max(1, var(--almanac-row-columns) - var(--almanac-pin-count, 1));
	flex: 1 1 0;
	min-width: 0;
}

@media screen and (max-width: 1100px) {
	.almanac-slider-row {
		--almanac-slider-cap: 3;
	}
}

@media screen and (max-width: 860px) {
	.almanac-slider-row {
		--almanac-slider-cap: 2;
	}
}

/* One card at a time: the two parts dissolve into the row, the row becomes
   the scroller, and the pin is simply the first card. frontend.js notices
   the track has no box of its own and pages the row instead. */
@media screen and (max-width: 600px) {
	.almanac-slider-row {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		padding: 4px;
		margin: -4px;
		scrollbar-width: thin;
		overscroll-behavior-x: contain;
	}

	.almanac-slider-row > .almanac-slider-pinned,
	.almanac-slider-row > .almanac-slider {
		display: contents;
	}

	.almanac-slider-row .almanac-card,
	.almanac-slider-row .almanac-show {
		flex: 0 0 100%;
		scroll-snap-align: start;
		margin-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.almanac-slider-row {
		scroll-behavior: auto;
	}
}

/* ── Calendar Month: a month of text ─────────────────────────── */

.almanac-month-pinned {
	margin: 0 0 12px;
	padding: 10px 14px;
	list-style: none;
	border: 1px solid var(--almanac-border);
	border-left: 4px solid var(--almanac-accent);
	border-radius: var(--almanac-radius, 10px);
	background: var(--almanac-accent-tint);
	color: var(--almanac-text);
	font-family: var(--almanac-body-font);
}

.almanac-month-pinned-item {
	margin: 0;
}

.almanac-month-pinned-item + .almanac-month-pinned-item {
	margin-top: 4px;
}

.almanac-month-pinned-title {
	color: var(--almanac-text);
	font-family: var(--almanac-heading-font);
	font-weight: 700;
	text-decoration: none;
}

.almanac-month-pinned-title:hover {
	color: var(--almanac-accent-text);
	text-decoration: underline;
}

/* Text colour, not muted: this sits on the accent tint, and a palette whose
   muted colour is close to its tint made the line vanish. */
.almanac-month-pinned-run {
	margin-left: 6px;
	color: var(--almanac-text);
}

.almanac-month-pinned-run::before {
	content: "· ";
}

.almanac-month-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1px;
	background: var(--almanac-border);
	border: 1px solid var(--almanac-border);
	border-radius: var(--almanac-radius, 10px);
	overflow: hidden;
	margin-bottom: 24px;
}

.almanac-month-day {
	position: relative;
	min-width: 0;
	min-height: 110px;
	padding: 6px 8px 8px;
	background: var(--almanac-card-bg);
	color: var(--almanac-text);
	font-family: var(--almanac-body-font);
}

.almanac-month-day.is-outside-month {
	background: var(--almanac-outside-bg, #fafafa);
}

.almanac-month-day-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	margin-bottom: 4px;
	color: var(--almanac-text);
	font-size: var(--almanac-day-number-size, 13px);
	font-weight: var(--almanac-day-number-weight, 600);
}

.almanac-month-day.is-outside-month .almanac-month-day-number,
.almanac-month-day.is-past .almanac-month-day-number {
	color: var(--almanac-muted);
}

.almanac-month-day.is-today .almanac-month-day-number {
	border-radius: 50%;
	background: var(--almanac-accent);
	color: var(--almanac-accent-contrast, #262626);
	font-weight: 700;
}

/* Spoken on a wide screen (the number is aria-hidden), shown on a phone,
   where the grid becomes a list and the number alone would be no date. */
.almanac-month-day-date {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.almanac-month-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.almanac-month-item {
	margin: 0 0 4px;
	color: var(--almanac-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	/* break-word, not anywhere: "anywhere" also lowers the cell's minimum
	   width, so ordinary words split mid-word ("Farmer / s") in a narrow
	   column. This only breaks a word longer than the whole cell. */
	overflow-wrap: break-word;
}

.almanac-month-item a {
	/* Inherited from the line, so the Style tab's Event Line colour reaches the
	   title rather than stopping at a link colour set here. */
	color: inherit;
	text-decoration: none;
}

.almanac-month-item a:hover {
	color: var(--almanac-accent-text);
}

.almanac-month-item a:hover .almanac-month-item-title {
	text-decoration: underline;
}

.almanac-month-item-time {
	display: block;
	color: var(--almanac-muted);
	font-size: 11px;
	font-weight: 600;
}


.almanac-month-item.is-cancelled .almanac-month-item-title {
	text-decoration: line-through;
	color: var(--almanac-muted);
}

.almanac-month-item .almanac-status {
	margin-left: 4px;
	font-size: 10px;
}

.almanac-month-day.is-past .almanac-month-item,
.almanac-month-day.is-outside-month .almanac-month-item {
	opacity: .6;
}

.almanac-month-more summary {
	color: var(--almanac-accent-text);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.almanac-month-more summary::-webkit-details-marker {
	display: none;
}

.almanac-month-more[open] summary {
	margin-bottom: 4px;
}

.almanac-month-more summary:focus-visible {
	outline: 2px solid var(--almanac-accent);
	outline-offset: 2px;
}

@media screen and (max-width: 860px) {
	.almanac-month-day {
		min-height: 90px;
		padding: 4px 5px 6px;
	}

	.almanac-month-item {
		font-size: 12px;
	}
}

/* A phone: the days that have something on, as a list. */
@media screen and (max-width: 600px) {
	.almanac-month-grid {
		display: block;
		background: var(--almanac-card-bg);
	}

	.almanac-month-grid > .almanac-calendar-weekday,
	.almanac-month-day:not(.has-events),
	.almanac-month-day.is-outside-month {
		display: none;
	}

	.almanac-month-day {
		min-height: 0;
		padding: 10px 14px;
		border-top: 1px solid var(--almanac-border);
	}

	.almanac-month-day-number {
		display: none;
	}

	.almanac-month-day-date {
		position: static;
		display: block;
		width: auto;
		height: auto;
		margin-bottom: 6px;
		overflow: visible;
		clip: auto;
		font-family: var(--almanac-heading-font);
		font-weight: 700;
	}

	.almanac-month-day.is-today .almanac-month-day-date {
		color: var(--almanac-accent-text);
	}

	.almanac-month-item {
		font-size: 14px;
	}

	.almanac-month-item-time {
		display: inline;
		margin-right: 6px;
	}
}