/*
 * Prayer Times page (templates/page-prayer-times.html, setup/content/prayer-times.php).
 * Squarespace sizes its sections from the window: the intro is at least 33% of the window height
 * (header included), the table section at least 66%, with padding of 3.3% and 6.6% of the longer window side.
 * The table itself is styled by the Sacred Roots Site plugin (blocks/prayer-times/style.css).
 */

/* Sections sit flush against each other. */
.wp-block-post-content.sr-pt-sections > * + * {
	margin-block-start: 0;
}

/* On this page Squarespace shows the header on the intro's crimson, without the darker band. */
body:has(.sr-pt-hero) .sr-header.has-background {
	background-color: var(--wp--preset--color--accent-1) !important;
}

.sr-pt-hero {
	--sr-pt-header-height: 178px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-height: calc(33vh - var(--sr-pt-header-height));
	margin: 0;
	padding: 3.3vmax 3vw calc(3.3vmax + 64px);
	text-align: center;
}

.sr-pt-hero > .sr-pt-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(21.064px, 19.736px + 0.3406vw, 24.64px);
	font-weight: 400;
	line-height: 1.6;
}

.sr-pt-hero > .sr-pt-hero__note {
	margin: 16px 0 0;
	font-size: 1rem;
	line-height: 1.6;
}

.sr-pt-hero__note a {
	color: var(--wp--preset--color--accent-3);
}

.sr-pt-table {
	box-sizing: border-box;
	min-height: 66vh;
	margin: 0;
	padding: 6.6vmax 3vw;
}

@media (max-width: 781px) {
	.sr-pt-hero {
		--sr-pt-header-height: 107px;
		padding: 3.3vmax 6vw;
	}

	.sr-pt-table {
		padding-right: 6vw;
		padding-left: 6vw;
	}
}