/**
 * Janmashtami announcement, the "Serve the Lord this Janmashtami" button,
 * and the daily schedule - all on the home page.
 *
 * Shares the palette used across the site: #ed9321 for the accent, and the
 * deep ink and cream from the temple introduction above.
 */

.janmashtami,
.daily-schedule {
	--jm-accent: #ed9321;
	--jm-ink: #17323f;
	--jm-body: #4d6069;
}

/* ---- the announcement ---- */

/*
 * A warm, light band: the festival should feel bright, and it sits directly
 * above the solid orange seva band, so keeping this one light stops the two
 * from running together.
 *
 * The heading colour is set on a two-class selector because the theme styles
 * .elementor-heading-title and plain h2, which otherwise win and render the
 * title in dark ink on a dark ground - it was invisible before.
 */
.janmashtami {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	position: relative;
	overflow: hidden;
	/* The peacock feather, as on the festival banner. The flat warm gradient
	   this replaced was: linear-gradient(135deg, #fdf4e6 0%, #fbe6c6 100%) */
	background-color: #eef6e4;
	background-image: url("../../wp-content/uploads/2023/07/Feather-scaled.jpg");
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
	font-family: "Montserrat", sans-serif;
}

/* Washes the artwork out under the words, clearing towards the feather. */
.janmashtami::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(238, 246, 228, 0.96) 0%,
		rgba(238, 246, 228, 0.88) 42%,
		rgba(238, 246, 228, 0.45) 70%,
		rgba(238, 246, 228, 0.1) 100%
	);
}

/*
 * Laid out by grid areas rather than source order, because the two layouts
 * want different sequences: on a wide screen the button sits under the
 * heading with the counter beside them both, and on a phone the counter
 * comes between the heading and the button. The markup stays in one sensible
 * order - heading, counter, button - and each layout places it.
 */
.janmashtami__inner {
	position: relative; /* above the wash */
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"text  count"
		"btn   count";
	align-items: center;
	gap: 1.5rem 2rem;
	max-width: 1240px;
	margin: 0 auto;
	padding: 3rem 1.25rem;
}

.janmashtami__text {
	grid-area: text;
}

/*
 * Set in the display serif rather than the small tracked caps it was, so it
 * carries the announcement instead of labelling it. Tracking is pulled in
 * as the size goes up - wide letter-spacing suits small caps, not this.
 */
.janmashtami__eyebrow {
	margin: 0 0 0.5rem;
	color: #b8690f;
	font-family: "Roboto Slab", Georgia, serif;
	font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.85rem);
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

.janmashtami .janmashtami__title {
	margin: 0 0 0.35rem;
	color: var(--jm-ink);
	font-family: "Roboto Slab", Georgia, serif;
	font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem);
	font-weight: 400;
	line-height: 1.15;
}

/*
 * The date and the note. Both carry their colour on a two-class selector,
 * because the theme styles bare h3 and p and would otherwise win - the same
 * thing that left the title unreadable when it was first added.
 */
.janmashtami .janmashtami__date {
	margin: 0 0 0.7rem;
	color: var(--jm-ink);
	font-family: "Roboto Slab", Georgia, serif;
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.3;
}

.janmashtami .janmashtami__note {
	margin: 0;
	max-width: 34rem;
	color: var(--jm-body);
	font-family: "Montserrat", sans-serif;
	font-size: 0.97rem;
	font-weight: 500;
	line-height: 1.65;
}

.janmashtami__countdown {
	grid-area: count;
	justify-self: end;
	display: flex;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One tile now, so it can carry more weight. */
.janmashtami__unit {
	min-width: 6rem;
	padding: 0.9rem 1rem;
	border: 1px solid rgba(23, 50, 63, 0.14);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.75);
	text-align: center;
}

.janmashtami__number {
	display: block;
	color: var(--jm-ink);
	font-family: "Roboto Slab", Georgia, serif;
	font-size: 2.3rem;
	line-height: 1.05;
}

.janmashtami__unit-name {
	display: block;
	margin-top: 0.3rem;
	color: var(--jm-body);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.janmashtami__btn {
	grid-area: btn;
	justify-self: start;
	display: inline-block;
	padding: 0.85rem 1.9rem;
	border: 2px solid var(--jm-accent);
	border-radius: 999px;
	background: var(--jm-accent);
	color: #ffffff;
	font-size: 0.98rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease,
		transform 0.15s ease;
}

.janmashtami__btn:hover,
.janmashtami__btn:focus {
	background: transparent;
	color: #b8690f;
	transform: translateY(-1px);
}

@media (max-width: 620px) {
	/* Stacked at this width, so the words sit over the feather - wash the
	   whole band evenly rather than fading to one side. */
	.janmashtami::before {
		background: linear-gradient(
			to right,
			rgba(238, 246, 228, 0.94) 0%,
			rgba(238, 246, 228, 0.86) 100%
		);
	}

	/*
	 * Heading across the top, then the button and the counter side by side
	 * beneath it - button left, counter right.
	 */
	.janmashtami__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"text text"
			"btn  count";
		align-items: center;
		gap: 1.25rem 0.9rem;
		padding: 2.25rem 1.25rem;
	}

	.janmashtami__countdown {
		justify-self: end;
	}

	.janmashtami__unit {
		min-width: 5rem;
		padding: 0.65rem 0.8rem;
	}

	.janmashtami__number {
		font-size: 1.75rem;
	}

	/*
	 * Sized to its label rather than stretched across the screen - a
	 * full-width pill on a phone reads as a banner, not a button. The label
	 * is allowed to wrap here so that on the narrowest phones it takes two
	 * lines instead of pushing the counter off the edge.
	 */
	.janmashtami__btn {
		padding: 0.7rem 1.25rem;
		font-size: 0.92rem;
		white-space: normal;
		text-align: center;
	}
}

/* ---- "Serve the Lord this Janmashtami" heading strip ---- */

/*
 * This strip carries only the heading, in near-white, so it needs a dark
 * ground. It was the site accent orange, which landed hard directly under
 * the pale green feather band above it.
 *
 * A deep tulsi green continues the green rather than interrupting it, and
 * the orange Donate buttons on the seva cards below still read as the
 * accent because nothing around them is competing for it now.
 *
 * Elementor paints this on the column's > .elementor-widget-wrap child, not
 * on the column itself, so the override has to name the same child - a rule
 * on the column alone is simply covered up by it.
 *
 * This file is linked further down the page than post-34.css, so it wins on
 * order rather than by piling on specificity. Alternatives worth trying:
 * #17323f, the ink used elsewhere on this page, or #3d2b46 for something
 * more festive.
 */
.elementor-34
	.elementor-element.elementor-element-51eb536:not(.elementor-motion-effects-element-type-background)
	> .elementor-widget-wrap {
	background-color: #2c5545;
}

/* ---- daily schedule ---- */

.daily-schedule {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	background: #ffffff;
	font-family: "Montserrat", sans-serif;
}

.daily-schedule__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 4rem 1.25rem;
}

.daily-schedule__eyebrow {
	margin: 0 0 0.6rem;
	color: var(--jm-accent);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.daily-schedule__title {
	margin: 0 0 2.25rem;
	color: var(--jm-ink);
	font-family: "Roboto Slab", Georgia, serif;
	font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
	font-weight: 400;
}

/*
 * One programme per row. This was an auto-fit grid, which packed two or
 * three across on a wide screen and broke the reading order - the eye had to
 * go across and back rather than straight down the times.
 */
.daily-schedule__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	max-width: 46rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(23, 50, 63, 0.12);
}

.daily-schedule__item {
	display: flex;
	align-items: baseline;
	gap: 1.1rem;
	padding: 1.05rem 0.35rem;
	border-bottom: 1px solid rgba(23, 50, 63, 0.12);
}

.daily-schedule__time {
	flex: none;
	min-width: 5.6rem;
	color: var(--jm-accent);
	font-family: "Roboto Slab", Georgia, serif;
	font-size: 1.15rem;
	line-height: 1.2;
}

.daily-schedule__name {
	color: var(--jm-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.daily-schedule__note {
	margin: 1.6rem 0 0;
	color: var(--jm-body);
	font-size: 0.86rem;
}

@media (max-width: 620px) {
	.daily-schedule__inner {
		padding: 2.75rem 1.25rem;
	}

	.daily-schedule__time {
		min-width: 5rem;
		font-size: 1.05rem;
	}
}