/*
 * "When to grow it" on product pages: what to do now in words, a chart, then every window in
 * words. Sized for older eyes; colour is never the only cue (rows are labelled, sowing under
 * cover is an outline, and the words say it all).
 */
.gl-calendar {
	--gl-cal-ink: #1f2a24;
	--gl-cal-muted: #4b5a53;
	--gl-cal-sow: var(--go--color--primary, #165043);
	--gl-cal-indoors: #dcebe6;
	--gl-cal-plant: #3f6b2a;
	--gl-cal-harvest: #8f4a00;
	--gl-cal-flowering: #8e2f63;
	--gl-cal-track: #eef1ef;
	color: var(--gl-cal-ink);
	container-type: inline-size;
	margin: 1.25rem 0 1.75rem;

	/* Go centres the product summary; a chart and its words read better left-aligned. */
	text-align: left;
}

.gl-calendar__title {
	font-size: 1.25rem;
	margin: 0 0 0.6rem;
}

/* What to do this month: the first thing to read. */
.gl-calendar__now {
	background-color: #eef6f4;
	border-left: 6px solid var(--gl-cal-sow);
	border-radius: 6px;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 1rem;
	padding: 0.6rem 0.9rem;
}

.gl-calendar__panel {
	align-items: center;
	display: grid;
	grid-template-columns: max-content repeat(var(--gl-cal-cols), minmax(0, 1fr));
	row-gap: 0.45rem;
}

/* A year in one row where there's room, two half-years where there isn't. */
.gl-calendar__panel.gl-calendar__panel--year {
	display: none;
}

.gl-calendar__halves {
	display: grid;
	gap: 1rem;
}

@container (min-width: 34rem) {

	.gl-calendar__panel.gl-calendar__panel--year {
		display: grid;
	}

	.gl-calendar__halves {
		display: none;
	}
}

.gl-calendar__label {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	padding-right: 0.75rem;
}

.gl-calendar__month {
	border-radius: 999px;
	color: var(--gl-cal-muted);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.7;
	margin: 0 2px;
	text-align: center;
}

.gl-calendar__month.is-now {
	background-color: var(--gl-cal-sow);
	color: #fff;
}

.gl-calendar__track {
	display: grid;
	grid-column: 2 / -1;
	grid-template-columns: repeat(var(--gl-cal-cols), minmax(0, 1fr));
	height: 1.75rem;
}

.gl-calendar__cell,
.gl-calendar__bar {
	grid-row: 1;
}

/* Empty months, with a thin white line between them. */
.gl-calendar__cell {
	background-color: var(--gl-cal-track);
	border-left: 2px solid #fff;
}

.gl-calendar__cell.is-start {
	border-left: 0;
	border-radius: 6px 0 0 6px;
}

.gl-calendar__cell.is-end {
	border-radius: 0 6px 6px 0;
}

/* One continuous bar per window. */
.gl-calendar__bar {
	background-color: var(--gl-cal-sow);
	border-radius: 6px;
	margin: 0 2px;
	z-index: 1;
}

.gl-calendar__track--indoors .gl-calendar__bar {
	background-color: var(--gl-cal-indoors);
	box-shadow: inset 0 0 0 2px var(--gl-cal-sow);
}

.gl-calendar__track--plant .gl-calendar__bar {
	background-color: var(--gl-cal-plant);
}

.gl-calendar__track--harvest .gl-calendar__bar {
	background-color: var(--gl-cal-harvest);
}

.gl-calendar__track--flowering .gl-calendar__bar {
	background-color: var(--gl-cal-flowering);
}

/* Narrow spaces (phones): each row's name above its bar, so the months get the full width. */
@container (max-width: 24rem) {

	.gl-calendar__panel {
		grid-template-columns: repeat(var(--gl-cal-cols), minmax(0, 1fr));
	}

	.gl-calendar__corner {
		display: none;
	}

	.gl-calendar__label {
		grid-column: 1 / -1;
		margin-bottom: -0.15rem;
		padding-top: 0.2rem;
	}

	.gl-calendar__track {
		grid-column: 1 / -1;
	}
}

.gl-calendar__summary {
	font-size: 1rem;
	line-height: 1.6;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.gl-calendar__summary li {
	margin: 0;
}

/* Windows High Contrast: keep the bars visible. */
@media (forced-colors: active) {

	.gl-calendar__bar {
		background: canvastext;
		forced-color-adjust: none;
	}

	.gl-calendar__track--indoors .gl-calendar__bar {
		background: canvas;
		border: 2px solid canvastext;
	}
}