/* ==========================================================================
   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: #40B59A;
	--almanac-accent-tint: #e3f2f1;
	--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-pill.is-active,
.almanac-pill:hover {
	background: var(--almanac-accent-tint);
	border-color: var(--almanac-accent);
	color: var(--almanac-accent);
}

/* ── 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;
}

.almanac-card-body {
	padding: 16px;
}

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

.almanac-card-title a {
	color: var(--almanac-text);
	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;
}

.almanac-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
}

.almanac-card-link,
.almanac-card-ics {
	color: var(--almanac-accent);
	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);
}

/* ── 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-today-button:hover,
.almanac-today-button:focus {
	background: var(--almanac-accent-tint);
	border-color: var(--almanac-accent);
	color: var(--almanac-accent);
	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-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-month-jump select:hover,
.almanac-month-jump select:focus {
	background-color: var(--almanac-accent-tint);
	border-color: var(--almanac-accent);
	color: var(--almanac-accent);
	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 production. Artwork leads, because a venue's product is the
   show rather than the date — which is the whole reason this view exists
   alongside the occurrence-based 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 {
	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;
	font-family: var(--almanac-heading-font);
	font-size: var(--almanac-show-title-size, 22px);
	line-height: 1.2;
}

.almanac-show-title a {
	color: var(--almanac-text);
	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;
	/* 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;
	}
}