/*
 * Month jump bar for the pregnancy month pages, output by [kd_month_nav].
 * A row of 12 numbered links with a light divider marking each trimester
 * (1-3, 4-6, 7-9, 10-12), plus a highlighted current-month link colored to
 * match that month's own trimester theme.
 *
 * Every link selector below is written as ".kd-month-nav .kd-month-nav__item"
 * rather than just ".kd-month-nav__item" on its own. That's not a style
 * preference, it's load bearing. Elementor's site-wide global colors kit
 * ships its own rule, ".elementor-kit-2271 a", that sets the color and
 * underline on every link on the site, and that selector (one class plus
 * the "a" element itself) is more specific than a single class alone, so
 * a bare ".kd-month-nav__item" rule loses the color and underline fight
 * to it no matter which stylesheet loads first. Nesting under the wrapper
 * class here gives every rule two classes worth of specificity, which
 * beats the kit rule's one class plus one element outright, so the
 * correct colors and no-underline styling apply every time, regardless
 * of load order. Do not simplify these selectors back down.
 */
.kd-month-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin: 0.4em 0 1.4em;
}

.kd-month-nav .kd-month-nav__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	height: 2.2em;
	padding: 0 0.3em;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	color: #45536b;
	background: #f4f6fa;
	border: 1px solid #dbe2ea;
	border-radius: 8px;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.kd-month-nav .kd-month-nav__item:hover,
.kd-month-nav .kd-month-nav__item:focus-visible {
	background: #e9edf5;
	border-color: #b9c4d4;
	color: #1f2937;
	outline: none;
	text-decoration: none;
}

.kd-month-nav .kd-month-nav__item--current,
.kd-month-nav .kd-month-nav__item--current:hover,
.kd-month-nav .kd-month-nav__item--current:focus-visible {
	color: #ffffff;
	border-width: 1px;
	border-style: solid;
	transform: translateY(-1px);
	text-decoration: none;
}

.kd-month-nav .kd-month-nav__divider {
	width: 1px;
	height: 1.4em;
	background: #dbe2ea;
	margin: 0 0.15em;
}

@media (prefers-color-scheme: dark) {
	.kd-month-nav .kd-month-nav__item {
		background: #232c3b;
		border-color: #333c49;
		color: #c7cedb;
	}

	.kd-month-nav .kd-month-nav__item:hover,
	.kd-month-nav .kd-month-nav__item:focus-visible {
		background: #2b3547;
		border-color: #45536b;
		color: #ffffff;
	}

	.kd-month-nav .kd-month-nav__divider {
		background: #333c49;
	}
}