/*
 * Office Hours page (templates/page-office-hours.html, setup/content/office-hours.php).
 * Measured on the Squarespace page at 1024, 1440 and 390px wide: one crimson section with a centered
 * column (47% of the window on desktop) holding the heading, intro and the Koalendar booking embed.
 */

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

.wp-block-post-content.sr-oh-sections > * + * {
	margin-block-start: 0;
}

.sr-oh {
	margin: 0;
	padding: 6.6vw calc((100% - 47vw) / 2) calc(6.6vw + 27px);
	line-height: 1.6;
}

.sr-oh > * {
	margin-block: 0;
	text-wrap: wrap;
}

.sr-oh > h2 {
	font-size: clamp(35.44px, 31.11px + 1.111vw, 47.1px);
	font-weight: 400;
	line-height: 1.3;
}

.sr-oh > .sr-oh__intro {
	margin-top: 32px;
	/* Squarespace "large" paragraph text: 24.64px at 1440px wide, 21.4px at 390px. */
	font-size: clamp(21.4px, 20.2px + 0.3086vw, 24.64px);
	line-height: 1.6;
}

.sr-oh > .sr-oh__booking {
	margin-top: 35px;
}

.sr-oh__booking iframe {
	display: block;
}

@media (max-width: 781px) {
	.sr-oh {
		padding: 76px 6vw 86px;
	}

	.sr-oh > .sr-oh__booking {
		margin-top: 34px;
	}
}