/*
 * KidzFeed Core: the homepage's monthly section ("Happening in October").
 *
 * Loaded only when the section renders. Each month sets six colours on a dark
 * ground; the guide cards stay the site's white cards in every month. Night
 * months (January, July, October, November, December) add stars, and four of
 * them a crescent moon.
 */

.kidzfeed-month {
	--kfm-1: #1F1838;
	--kfm-2: #2C2152;
	--kfm-accent: #F2871F;
	--kfm-text: #F6F1FF;
	--kfm-text-2: #C7BCE8;
	--kfm-ink: #A94F0A;
	--kfm-moon: #F6E7C1;
	--kfm-line: color-mix(in srgb, var(--kfm-text-2) 24%, transparent);
	--kfm-soft: color-mix(in srgb, var(--kfm-accent) 20%, transparent);
	position: relative;
	overflow: hidden;
	margin-block: 0;
	padding: clamp(2.5rem, 6vw, 3.5rem) var(--wp--preset--spacing--40, 1.5rem) clamp(2.75rem, 6vw, 3.75rem);
	color: var(--kfm-text);
	background: linear-gradient(180deg, var(--kfm-1) 0%, var(--kfm-2) 100%);
}

.kidzfeed-month--january { --kfm-1: #14213D; --kfm-2: #1E3160; --kfm-accent: #F2C14E; --kfm-text: #F4F6FB; --kfm-text-2: #C3CCE0; --kfm-ink: #8A6200; }
.kidzfeed-month--february { --kfm-1: #3A0F14; --kfm-2: #561A22; --kfm-accent: #F5C451; --kfm-text: #FFF3EE; --kfm-text-2: #EBC3BE; --kfm-ink: #A3211F; }
.kidzfeed-month--march { --kfm-1: #0F2E22; --kfm-2: #184634; --kfm-accent: #86E0A0; --kfm-text: #F0FBF3; --kfm-text-2: #BFE3CB; --kfm-ink: #1E7A3C; }
.kidzfeed-month--april { --kfm-1: #0D2A33; --kfm-2: #134452; --kfm-accent: #6ED8CB; --kfm-text: #EFFBFA; --kfm-text-2: #B8DEDA; --kfm-ink: #0E7268; }
.kidzfeed-month--may { --kfm-1: #2B2010; --kfm-2: #3D2D15; --kfm-accent: #FFC93C; --kfm-text: #FFF8E6; --kfm-text-2: #E8D6AE; --kfm-ink: #8A5A00; }
.kidzfeed-month--june { --kfm-1: #062A4A; --kfm-2: #0B4270; --kfm-accent: #5CCBF8; --kfm-text: #F0F8FF; --kfm-text-2: #B7D6EE; --kfm-ink: #0A4AA6; }
.kidzfeed-month--july { --kfm-1: #0B1026; --kfm-2: #182048; --kfm-accent: #A9BCFF; --kfm-text: #F2F4FF; --kfm-text-2: #C1C8E8; --kfm-ink: #3552C8; }
.kidzfeed-month--august { --kfm-1: #073B40; --kfm-2: #0C545A; --kfm-accent: #FFD84D; --kfm-text: #F0FBFA; --kfm-text-2: #B9DEDB; --kfm-ink: #0E7268; }
.kidzfeed-month--september { --kfm-1: #1B2333; --kfm-2: #28344D; --kfm-accent: #FFCF33; --kfm-text: #F5F7FB; --kfm-text-2: #C4CCDB; --kfm-ink: #7A5B00; }
.kidzfeed-month--october { --kfm-1: #1F1838; --kfm-2: #2C2152; --kfm-accent: #F2871F; --kfm-text: #F6F1FF; --kfm-text-2: #C7BCE8; --kfm-ink: #A94F0A; }
.kidzfeed-month--november { --kfm-1: #2A1A12; --kfm-2: #3D2618; --kfm-accent: #F4B63A; --kfm-text: #FFF4E0; --kfm-text-2: #E6CFAE; --kfm-ink: #9A5B00; }
.kidzfeed-month--december { --kfm-1: #0E2240; --kfm-2: #173564; --kfm-accent: #9FD8FF; --kfm-text: #F2F8FF; --kfm-text-2: #BCD3EE; --kfm-ink: #1D5FA8; }

.kidzfeed-month::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background:
		radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.7), transparent 60%),
		radial-gradient(1px 1px at 27% 9%, rgba(255, 255, 255, 0.55), transparent 60%),
		radial-gradient(1.5px 1.5px at 44% 22%, rgba(255, 255, 255, 0.5), transparent 60%),
		radial-gradient(1px 1px at 63% 7%, rgba(255, 255, 255, 0.6), transparent 60%),
		radial-gradient(1.5px 1.5px at 71% 30%, rgba(255, 255, 255, 0.45), transparent 60%),
		radial-gradient(1px 1px at 91% 38%, rgba(255, 255, 255, 0.5), transparent 60%);
}

.kidzfeed-month:is(.kidzfeed-month--january, .kidzfeed-month--july, .kidzfeed-month--october, .kidzfeed-month--november, .kidzfeed-month--december)::before {
	opacity: 1;
}

.kidzfeed-month__moon {
	display: none;
	position: absolute;
	top: 2.1rem;
	right: max(1.5rem, calc(50% - 560px));
	width: 110px;
	height: 110px;
	border-radius: 50%;
	box-shadow: inset -24px 10px 0 0 var(--kfm-moon);
	transform: rotate(-12deg);
	pointer-events: none;
}

.kidzfeed-month:is(.kidzfeed-month--january, .kidzfeed-month--july, .kidzfeed-month--october, .kidzfeed-month--december) .kidzfeed-month__moon {
	display: block;
}

.kidzfeed-month__inner {
	position: relative;
	display: grid;
	gap: 2.1rem;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

.kidzfeed-month a:focus-visible {
	outline: 3px solid var(--kfm-accent);
	outline-offset: 3px;
}

/* ----- heading ----- */
.kidzfeed-month__head {
	max-width: 640px;
}

.kidzfeed-month__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.9rem;
	padding: 0.3rem 0.75rem 0.3rem 0.6rem;
	border-radius: 999px;
	background: var(--kfm-soft);
	color: var(--kfm-accent);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kidzfeed-month__eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--kfm-accent);
}

.kidzfeed-month h2 {
	margin: 0;
	color: var(--kfm-text);
	font-family: var(--wp--preset--font-family--rounded, ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif);
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.kidzfeed-month h2 em,
.kidzfeed-month__next h3 em {
	color: var(--kfm-accent);
	font-style: normal;
}

.kidzfeed-month__intro {
	max-width: 58ch;
	margin: 1rem 0 0;
	color: var(--kfm-text-2);
	font-size: 1.1rem;
	line-height: 1.6;
}

/* ----- the month as a strip of days ----- */
.kidzfeed-ribbon {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--kfm-days, 31), minmax(0, 1fr));
	row-gap: 0.5rem;
	padding-block: 2rem 1.9rem;
}

.kidzfeed-ribbon__bar,
.kidzfeed-ribbon__dot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	overflow: hidden;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.kidzfeed-ribbon__bar {
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--kfm-line);
	border-radius: 999px;
	background: color-mix(in srgb, var(--kfm-text) 12%, transparent);
	color: var(--kfm-text);
}

.kidzfeed-ribbon__bar.is-month {
	border-style: dashed;
	background: color-mix(in srgb, var(--kfm-text-2) 14%, transparent);
	color: var(--kfm-text-2);
}

.kidzfeed-ribbon__bar.is-now {
	border-color: var(--kfm-accent);
	background: var(--kfm-soft);
}

.kidzfeed-ribbon small,
.kidzfeed-ribbon__dot small {
	font-size: inherit;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

.kidzfeed-ribbon__now,
.kidzfeed-month__now {
	flex: none;
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: var(--kfm-accent);
	color: var(--kfm-1);
	font-size: 0.66rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kidzfeed-ribbon__dot {
	color: var(--kfm-text-2);
}

.kidzfeed-ribbon__dot::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--kfm-text-2);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--kfm-text-2) 22%, transparent);
}

.kidzfeed-ribbon__dot.is-flipped {
	flex-direction: row-reverse;
}

.kidzfeed-ribbon__dot.is-now {
	color: var(--kfm-text);
}

.kidzfeed-ribbon__dot.is-now::before {
	background: var(--kfm-accent);
}

.kidzfeed-ribbon__mark {
	margin: -2rem -2px -0.25rem;
	border: 1px solid color-mix(in srgb, var(--kfm-accent) 55%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--kfm-accent) 18%, transparent);
}

.kidzfeed-ribbon__mark-label {
	align-self: start;
	justify-self: end;
	margin: -1.8rem 0.35rem 0;
	color: var(--kfm-accent);
	font-size: 0.8rem;
	font-weight: 800;
	white-space: nowrap;
}

.kidzfeed-ribbon__mark-label.is-start {
	justify-self: start;
}

/* Behind the event labels, so it never cuts through their text; its tag sits below the days. */
.kidzfeed-ribbon__today {
	position: relative;
	z-index: 0;
	justify-self: center;
	width: 2px;
	margin-block: -2rem -1.6rem;
	background: color-mix(in srgb, var(--kfm-text) 70%, transparent);
}

.kidzfeed-ribbon__today span {
	position: absolute;
	bottom: 0;
	left: 50%;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--kfm-text);
	color: var(--kfm-1);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translate(-50%, 100%);
}

.kidzfeed-ribbon__day {
	padding-top: 0.35rem;
	border-top: 1px solid var(--kfm-line);
	color: color-mix(in srgb, var(--kfm-text-2) 80%, transparent);
	font-size: 0.7rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.kidzfeed-ribbon__day.is-labelled {
	color: var(--kfm-text-2);
}

/* The list is the ribbon's text: read aloud on wide screens, shown on phones. */
.kidzfeed-month__events {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ----- guide cards ----- */
.kidzfeed-month__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

.kidzfeed-month .kidzfeed-guide-card {
	position: relative;
	color: var(--wp--preset--color--ink, #14253F);
	box-shadow: 0 14px 34px rgba(8, 4, 24, 0.35);
}

.kidzfeed-month .kidzfeed-guide-card h3 a {
	color: inherit;
}

.kidzfeed-month .kidzfeed-guide-card__topic {
	color: var(--kfm-ink);
}

.kidzfeed-month__excerpt {
	margin: 0;
	color: var(--wp--preset--color--slate, #526176);
	font-size: 0.95rem;
	line-height: 1.55;
}

.kidzfeed-month .kidzfeed-guide-card__more {
	margin-top: auto;
	padding-top: 0.75rem;
	color: var(--wp--preset--color--ocean, #0A4AA6);
}

.kidzfeed-month__chip {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	max-width: calc(100% - 24px);
	margin: 0;
	padding: 0.2rem 0.65rem;
	overflow: hidden;
	border-radius: 999px;
	background: var(--kfm-1);
	color: var(--kfm-accent);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.kidzfeed-month__card.is-quiet .kidzfeed-month__chip {
	background: #F3F5F8;
	color: #3E4B5E;
}

/* ----- next month ----- */
.kidzfeed-month__next {
	display: grid;
	gap: 1.1rem;
	padding: 1.6rem 1.6rem 1.75rem;
	border: 1px solid color-mix(in srgb, var(--kfm-accent) 35%, transparent);
	border-radius: var(--wp--custom--radius--large, 24px);
	background: linear-gradient(135deg, var(--kfm-1), var(--kfm-2));
	color: var(--kfm-text);
}

.kidzfeed-month__next-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem 1rem;
}

.kidzfeed-month__next h3 {
	margin: 0;
	color: var(--kfm-text);
	font-family: var(--wp--preset--font-family--rounded, ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif);
	font-size: 1.6rem;
	font-weight: 900;
	line-height: 1.1;
}

.kidzfeed-month__next-head p {
	margin: 0;
	color: var(--kfm-text-2);
	font-size: 0.92rem;
}

.kidzfeed-month__next-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.875rem;
}

.kidzfeed-month__mini {
	display: grid;
	grid-template-columns: 64px 1fr;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.625rem;
	border-radius: var(--wp--custom--radius--medium, 16px);
	background: color-mix(in srgb, var(--kfm-text) 7%, transparent);
	color: var(--kfm-text);
	text-decoration: none;
}

.kidzfeed-month__mini:hover strong {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kidzfeed-month__mini img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 12px;
	object-fit: cover;
}

.kidzfeed-month__mini strong {
	display: block;
	font-size: 0.95rem;
	line-height: 1.25;
}

.kidzfeed-month__mini-date {
	display: block;
	color: var(--kfm-accent);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.kidzfeed-month__mini.is-quiet {
	border: 1px solid color-mix(in srgb, var(--kfm-text-2) 18%, transparent);
	background: color-mix(in srgb, var(--kfm-text) 3%, transparent);
}

.kidzfeed-month__mini.is-quiet img {
	filter: saturate(0.55);
}

.kidzfeed-month__mini.is-quiet .kidzfeed-month__mini-date {
	color: var(--kfm-text-2);
}

.kidzfeed-month__note {
	margin: 0;
	color: var(--kfm-text-2);
	font-size: 0.9rem;
}

/* ----- tablets ----- */
@media (min-width: 782px) and (max-width: 1024px) {
	.kidzfeed-month__next-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ----- phones ----- */
@media (max-width: 781px) {
	.kidzfeed-month__moon {
		top: 1.4rem;
		right: 1.1rem;
		width: 70px;
		height: 70px;
		box-shadow: inset -15px 6px 0 0 var(--kfm-moon);
	}

	.kidzfeed-month__inner {
		gap: 1.6rem;
	}

	.kidzfeed-month h2 {
		padding-right: 3.5rem;
		font-size: 2.1rem;
	}

	.kidzfeed-month__intro {
		font-size: 1rem;
	}

	.kidzfeed-ribbon {
		display: none;
	}

	.kidzfeed-month__events {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
		clip-path: none;
		border-top: 1px solid var(--kfm-line);
		list-style: none;
		white-space: normal;
	}

	.kidzfeed-month__events li {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.25rem 0.75rem;
		padding: 0.6rem 0;
		border-bottom: 1px solid var(--kfm-line);
		font-size: 0.95rem;
		font-weight: 700;
	}

	.kidzfeed-month__event-date {
		flex: none;
		width: 5.2rem;
		color: var(--kfm-accent);
		font-size: 0.78rem;
		font-weight: 800;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		font-variant-numeric: tabular-nums;
	}

	.kidzfeed-month__grid {
		grid-template-columns: 1fr;
		gap: 0.875rem;
	}

	.kidzfeed-month .kidzfeed-guide-card {
		flex-direction: row;
		border-radius: var(--wp--custom--radius--medium, 16px);
	}

	.kidzfeed-month .kidzfeed-guide-card__image {
		flex: none;
		width: 112px;
	}

	.kidzfeed-month .kidzfeed-guide-card__image img {
		height: 100%;
		aspect-ratio: auto;
	}

	/* The date is the point of the chip, so on the narrow photo it wraps rather than being cut. */
	.kidzfeed-month__chip {
		top: 6px;
		left: 6px;
		max-width: 100px;
		padding: 0.15rem 0.45rem;
		border-radius: 8px;
		font-size: 0.62rem;
		line-height: 1.25;
		white-space: normal;
	}

	.kidzfeed-month .kidzfeed-guide-card__body {
		padding: 0.75rem 0.9rem;
	}

	.kidzfeed-month .kidzfeed-guide-card__body h3 {
		margin-block: 0.15rem 0;
		font-size: 1.05rem;
	}

	/* Outranks the theme's `.kidzfeed-guide-card__body > p:not(…):not(…)`, which shows every card paragraph. */
	.kidzfeed-month .kidzfeed-month__card .kidzfeed-guide-card__body > p.kidzfeed-month__excerpt,
	.kidzfeed-month .kidzfeed-guide-card__more {
		display: none;
	}

	.kidzfeed-month__next {
		padding: 1.25rem 1rem;
	}

	.kidzfeed-month__next-row {
		grid-template-columns: 1fr;
		gap: 0.625rem;
	}
}

/* ----- guide sidebar: the compact version (the sidebar shows from 1200px) ----- */
.kidzfeed-month-widget {
	--kfm-line: color-mix(in srgb, var(--kfm-text-2) 24%, transparent);
	padding: 1rem 1.05rem 0.75rem;
	border-radius: var(--wp--custom--radius--medium, 16px);
	background: linear-gradient(160deg, var(--kfm-1), var(--kfm-2));
	color: var(--kfm-text);
	box-shadow: var(--kidzfeed-shadow-soft, 0 8px 22px rgba(20, 37, 63, 0.08));
}

.kidzfeed-month-widget__eyebrow {
	margin: 0 0 0.25rem;
	color: var(--kfm-accent);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kidzfeed-sidebar .kidzfeed-month-widget__title {
	margin: 0 0 0.75rem;
	color: var(--kfm-text);
	font-family: var(--wp--preset--font-family--rounded, ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif);
	font-size: 1.3rem;
	font-weight: 900;
	line-height: 1.1;
}

.kidzfeed-month-widget__title em {
	color: var(--kfm-accent);
	font-style: normal;
}

.kidzfeed-month-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kidzfeed-month-widget__dates {
	display: grid;
	gap: 0.25rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--kfm-line);
}

.kidzfeed-month-widget__dates li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.35;
}

.kidzfeed-month-widget__date {
	flex: none;
	width: 4.4rem;
	color: var(--kfm-accent);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.kidzfeed-month-widget__dates li.is-now .kidzfeed-month-widget__date {
	width: auto;
	min-width: 4.4rem;
}

.kidzfeed-month-widget__dates li.is-now .kidzfeed-month-widget__date::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 0.35rem;
	border-radius: 50%;
	background: var(--kfm-accent);
	vertical-align: 0.05em;
}

.kidzfeed-month-widget__guides {
	display: grid;
	gap: 0.2rem;
	margin-top: 0.6rem;
}

.kidzfeed-sidebar .kidzfeed-month-widget__guides a {
	display: grid;
	grid-template-columns: 44px 1fr;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.3rem;
	border-radius: 10px;
	color: var(--kfm-text);
	text-decoration: none;
}

.kidzfeed-sidebar .kidzfeed-month-widget__guides a:not(:has(img)) {
	grid-template-columns: 1fr;
}

.kidzfeed-sidebar .kidzfeed-month-widget__guides a:hover {
	background: color-mix(in srgb, var(--kfm-text) 9%, transparent);
}

.kidzfeed-month-widget__guides img {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
}

.kidzfeed-month-widget__guides strong {
	display: block;
	font-size: 0.88rem;
	line-height: 1.25;
}

.kidzfeed-month-widget__chip {
	display: block;
	color: var(--kfm-accent);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.kidzfeed-month-widget__guides a.is-quiet img {
	filter: saturate(0.55);
}

.kidzfeed-month-widget__guides a.is-quiet .kidzfeed-month-widget__chip {
	color: var(--kfm-text-2);
}

.kidzfeed-sidebar .kidzfeed-month-widget__more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--kfm-accent);
	font-size: 0.88rem;
	font-weight: 800;
	text-decoration: none;
}

.kidzfeed-sidebar .kidzfeed-month-widget__more::after {
	content: "→";
	margin-left: 0.4rem;
}

.kidzfeed-month-widget a:focus-visible {
	outline: 2px solid var(--kfm-accent);
	outline-offset: 2px;
}

@media print {
	.kidzfeed-month,
	.kidzfeed-month-widget {
		display: none;
	}
}