/**
 * wildlife-calendar.css — the "What to look for this month" page ([wildlife_this_month], Spec D §8.3).
 * Enqueued only where the shortcode renders, after wildlife-list.css (the cards' own styles; its card rules also name
 * .riew-calendar). Values come from the theme's --ric-* tokens (00-tokens.css), each with a fallback. Breakpoints are
 * Elementor's: phones ≤ 767px, tablets ≤ 1024px. Every selector is scoped to .riew-calendar. No JavaScript: the month
 * navigation and the "On this page" jump list are links; on phones the twelve months are a 4 × 3 grid and each
 * highlight card is a compact row (the same card markup, restyled here).
 */

.riew-calendar {
	margin-block-end: var(--ric-space-7, 48px);
}

.riew-calendar .riew-calendar__title {
	margin: var(--ric-space-5, 24px) 0 var(--ric-space-3, 12px);
}

.riew-calendar .riew-calendar__intro {
	max-width: 70ch;
	margin: 0 0 var(--ric-space-5, 24px);
	font-size: var(--ric-text-lg, 1.125rem);
}

/* ---- Month navigation: previous / next, then the twelve months ---- */
.riew-calendar .riew-calendar__nav {
	margin-block-end: var(--ric-space-6, 32px);
}

.riew-calendar .riew-calendar__step {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--ric-space-3, 12px);
	margin-block-end: var(--ric-space-3, 12px);
}

.riew-calendar .riew-calendar__step a,
.riew-calendar .riew-calendar__month {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ric-space-2, 8px);
	min-width: var(--ric-tap-min, 44px);
	min-height: var(--ric-tap-min, 44px);
	padding-inline: var(--ric-space-3, 12px);
	border: 1px solid var(--ric-color-border, #69727D);
	border-radius: var(--ric-radius-md, 6px);
	background: var(--ric-color-bg, #FFFFFF);
	color: var(--ric-color-primary, #2C5F2D);
	font-weight: 600;
	text-decoration: none;
}

.riew-calendar .riew-calendar__step a:hover,
.riew-calendar .riew-calendar__month:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The month shown: the fill, plus a 2px border and an underline, which forced-colors mode keeps (it drops the fill). */
.riew-calendar .riew-calendar__month[aria-current="page"] {
	border: 2px solid var(--ric-color-primary, #2C5F2D);
	background: var(--ric-color-primary, #2C5F2D);
	color: var(--ric-color-on-primary, #FFFFFF);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ≥ 768px: one wrapping row. */
.riew-calendar .riew-calendar__months {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ric-space-2, 8px);
	margin: 0;
	padding: 6px;
	list-style: none;
}

.riew-calendar .riew-calendar__months li {
	flex: 0 0 auto;
	margin: 0;
}

/* Phones: a 4 × 3 grid, so all twelve months (the current one included) are in view without scrolling; at 320px each
   cell is 66px wide (the widest abbreviation needs about 52px). */
@media (max-width: 767px) {
	.riew-calendar .riew-calendar__months {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding: 0;
	}

	.riew-calendar .riew-calendar__month {
		width: 100%;
	}
}

/* ---- "On this page": jump links to the sections, under the month navigation (a month can hold 120+ cards) ---- */
.riew-calendar .riew-calendar__toc {
	margin-block-end: var(--ric-space-6, 32px);
}

/* An H2 in the outline, small on the page. */
.riew-calendar .riew-calendar__toc-heading {
	margin: 0 0 var(--ric-space-2, 8px);
	font-size: var(--ric-text-base, 1rem);
	line-height: var(--ric-leading-normal, 1.5);
}

.riew-calendar .riew-calendar__toc-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ric-space-2, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.riew-calendar .riew-calendar__toc-list li {
	margin: 0;
}

/* 44px targets; the theme's focus ring (10-base.css: 2px outline + halo) shows on keyboard focus. Underlined, so the
   links are not told apart by colour alone, also in forced-colors mode. */
.riew-calendar .riew-calendar__toc-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--ric-tap-min, 44px);
	padding-inline: var(--ric-space-3, 12px);
	border: 1px solid transparent;
	border-radius: var(--ric-radius-md, 6px);
	background: var(--ric-color-bg-accent, #F0F4F0);
	color: var(--ric-color-primary, #2C5F2D);
	font-size: var(--ric-text-base, 1rem);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.riew-calendar .riew-calendar__toc-link:hover {
	color: var(--ric-color-link-hover, #1B3B1A);
	text-decoration-thickness: 2px;
}

/* ---- Highlight sections: card grids, 3 / 2 columns; on phones one column of compact rows (below) ---- */
.riew-calendar .riew-calendar__section,
.riew-calendar .riew-calendar__also {
	margin-block-start: var(--ric-space-7, 48px);
}

.riew-calendar .riew-calendar__heading {
	margin: 0 0 var(--ric-space-4, 16px);
	scroll-margin-block-start: var(--ric-space-4, 16px); /* a jump link leaves room above the heading */
}

.riew-calendar .riew-wildlife-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.riew-calendar .riew-wildlife-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.riew-calendar .riew-wildlife-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The highlight note ($card_note): plain text under the name, not a link. */
.riew-calendar .riew-wildlife-card__note {
	margin: 0 0 var(--ric-space-2, 8px);
	color: var(--ric-color-text, #1A1A1A);
	font-weight: 600;
}

/* Phones: each highlight card is a compact row, so a month of 129 cards stays scannable (April at 375px: 81,344px as
   full cards, 22,365px as rows). The card markup is unchanged; only these rules restyle it. A 64px thumbnail (the
   card's own image, lazy like the cards except the page's first, which loads eagerly; the calendar's sizes attribute
   says 64px here), then the name (the card's one link, stretched over the row by its ::after, so the whole row is the
   target), the scientific name under it, and the note in full: it is why the species is listed this month, so it is
   never clamped. Left out at this width: the kingdom badge, habitats, description, "View Details" and the "Least
   Concern" chip (123 of April's 129); the Dangerous / Endangered / Invasive flags and any other conservation status
   stay as small badges under the note. A hairline divides the rows instead of the card shadow. ≥ 768px: the full
   cards, unchanged. */
@media (max-width: 767px) {
	.riew-calendar .riew-wildlife-grid {
		gap: 0;
		border-block-start: 1px solid var(--riew-border, #E0E0E0);
	}

	.riew-calendar .riew-wildlife-card {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: var(--ric-space-3, 12px);
		align-items: start;
		padding: var(--ric-space-2, 8px) var(--ric-space-1, 4px);
		border-block-end: 1px solid var(--riew-border, #E0E0E0);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.riew-calendar .riew-wildlife-card:hover {
		background: var(--ric-color-bg-accent, #F0F4F0);
		box-shadow: none;
		transform: none;
	}

	.riew-calendar .riew-wildlife-grid .riew-wildlife-card__image {
		grid-area: 1 / 1;
		width: 64px;
		height: 64px;
		border-radius: var(--ric-radius-md, 6px);
	}

	.riew-calendar .riew-wildlife-card:hover .riew-wildlife-card__image img {
		transform: none;
	}

	.riew-calendar .riew-kingdom-badge,
	.riew-calendar .riew-wildlife-card__habitat-icons,
	.riew-calendar .riew-wildlife-card__description,
	.riew-calendar .riew-wildlife-card__footer,
	.riew-calendar .riew-conservation-badge.status-lc {
		display: none;
	}

	/* The text column shows name, scientific name, note, badges in that order (the markup has the badges first and the
	   note before the scientific name; the name is the only focusable element, so the focus order is unchanged). */
	.riew-calendar .riew-wildlife-card__content {
		grid-area: 1 / 2;
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	.riew-calendar .riew-wildlife-card__title {
		order: 1;
		margin: 0;
		font-size: var(--ric-text-base, 1rem);
		font-weight: 600;
		line-height: 1.25;
	}

	.riew-calendar .riew-wildlife-card__title a {
		display: block;
		min-height: 0; /* the target is the whole row, at least 80px tall (its ::after) */
	}

	/* One focus ring, the row's (drawn by ::after), as on the "Also around" rows: no theme halo around the name. */
	.riew-calendar .riew-wildlife-card__title a:focus-visible {
		box-shadow: none;
	}

	.riew-calendar .riew-wildlife-card__scientific-name {
		order: 2;
		margin: 0;
		line-height: 1.375;
	}

	.riew-calendar .riew-wildlife-card__note {
		order: 3;
		margin: 0;
		font-weight: 400;
		line-height: var(--ric-leading-normal, 1.5);
	}

	.riew-calendar .riew-wildlife-card__badges {
		order: 4;
		margin: 0;
	}

	.riew-calendar .riew-wildlife-card__badges > * {
		margin-block-start: var(--ric-space-1, 4px);
	}
}

/* ---- "Also around": compact rows, as many columns as fit ---- */
.riew-calendar .riew-calendar__group-heading {
	margin: var(--ric-space-5, 24px) 0 var(--ric-space-3, 12px);
}

.riew-calendar .riew-calendar__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--ric-space-2, 8px) var(--ric-space-5, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The name link covers the whole row (thumbnail included), as a card's title covers its card. */
.riew-calendar .riew-calendar__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ric-space-3, 12px);
	margin: 0;
	padding: var(--ric-space-1, 4px);
	border-radius: var(--ric-radius-md, 6px);
}

.riew-calendar .riew-calendar__item:hover {
	background: var(--ric-color-bg-accent, #F0F4F0);
}

.riew-calendar .riew-calendar__thumb {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: var(--ric-radius-sm, 3px);
	background: var(--ric-color-bg-accent, #F0F4F0);
	object-fit: cover;
}

.riew-calendar .riew-calendar__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.riew-calendar .riew-calendar__link {
	display: flex;
	align-items: center;
	min-height: var(--ric-tap-min, 44px);
	color: var(--ric-color-text, #1A1A1A);
	font-weight: 600;
}

.riew-calendar .riew-calendar__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.riew-calendar .riew-calendar__link:focus-visible {
	outline: none; /* the ring is drawn by ::after around the whole row */
	box-shadow: none;
}

.riew-calendar .riew-calendar__link:focus-visible::after {
	outline: var(--ric-focus-ring, 2px solid #1B3B1A);
	outline-offset: 2px;
}

.riew-calendar .riew-calendar__sci {
	color: var(--ric-color-muted, #5B6670);
	font-size: var(--ric-text-sm, 0.875rem);
}

/* The dangerous marker: the card badge's colour (W-18, 6.3:1 on white), in sentence case for a list row. */
.riew-calendar .riew-calendar__danger {
	display: inline-flex;
	align-items: center;
	gap: var(--ric-space-1, 4px);
	color: #9A4A00;
	font-size: var(--ric-text-sm, 0.875rem);
	font-weight: 600;
}

.riew-calendar .riew-calendar__danger svg {
	fill: currentColor;
}

.riew-calendar .riew-calendar__empty,
.riew-calendar .riew-calendar__more {
	margin-block-start: var(--ric-space-6, 32px);
}

/* Phones: no text in a paragraph or list item under 16px (Spec A §4). */
@media (max-width: 767px) {
	.riew-calendar .riew-wildlife-card__scientific-name,
	.riew-calendar .riew-wildlife-card__note,
	.riew-calendar .riew-calendar__sci,
	.riew-calendar .riew-calendar__danger {
		font-size: var(--ric-text-base, 1rem);
	}
}