/*
 * Breakpoint theme: responsive layout layer.
 *
 * Loaded after main.css (see functions.php). Layout only: container widths,
 * gutters, the article text measure and figure break-outs. Fonts, colours
 * and component styling stay in main.css.
 *
 * Breakpoints
 *   phone         <= 640px   single column, 20px gutters
 *   tablet        641-1024px 32px gutters
 *   desktop       1025-1439px containers to 1200px
 *   wide desktop  >= 1440px  containers to 1400px
 *
 * Tune the widths through the custom properties below.
 */

:root {
	/* Side gutter inside every container. */
	--bp-gutter: 1.25rem;
	/* Widest container: header, footer, blog grid, front-page sections and
	   the article shell (figures break out to this width). */
	--bp-site-max: 100%;
	/* Reading measure for article text (about 75-80 characters at 18px). */
	--bp-text-max: 48.75rem; /* 780px */
	/* Single post cover image: wider than the text, but capped so it does
	   not turn into a full-height banner on very wide screens. */
	--bp-cover-max: 1200px;
	/* Broken-out figures, tables, embeds and alignwide blocks. */
	--bp-figure-max: 100%;
	/* Article body size: 17px on phones, 18px, 19px from 1440px. */
	--bp-body: 1.0625rem;
}

@media (min-width: 641px) {
	:root {
		--bp-gutter: 2rem;
		--bp-body: 1.125rem;
	}
}

@media (min-width: 1025px) {
	:root {
		--bp-gutter: 2.5rem;
		--bp-site-max: 1200px;
		--bp-text-max: 53.75rem;   /* 860px */
		--bp-figure-max: 65rem;    /* 1040px */
		--bp-cover-max: 65rem;
	}
}

@media (min-width: 1440px) {
	:root {
		--bp-site-max: 1400px;
		--bp-text-max: 56.25rem;   /* 900px */
		--bp-figure-max: 70rem;    /* 1120px */
		--bp-cover-max: 70rem;
		--bp-body: 1.1875rem;      /* 19px */
	}
}

/* Allow alignfull elements to reach the viewport edge without a horizontal
   scrollbar. */
body {
	overflow-x: clip;
}

/* ----- Containers ----- */

/* Site-width container. Replaces "mx-auto max-w-7xl px-6" and
   "mx-auto max-w-3xl px-6" in the templates. Note: the max-width includes
   the gutters, so the content box is --bp-site-max minus 2 gutters. */
.bp-container {
	width: 100%;
	max-width: var(--bp-site-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--bp-gutter);
	padding-right: var(--bp-gutter);
}

/* Reading-width block centred inside a container (byline, back link,
   contact card). */
.bp-text {
	max-width: var(--bp-text-max);
	margin-left: auto;
	margin-right: auto;
}

/* ----- Article body ----- */

/* Every direct child of the article body sits in the reading measure;
   figures, images, tables and WordPress wide/full blocks break out. */
.bp-prose > * {
	max-width: var(--bp-text-max);
	margin-left: auto;
	margin-right: auto;
}

/* Base-size prose (privacy, terms, generic pages) reads best a touch
   narrower than the 18px blog body. */
.bp-prose-base {
	--bp-text-max: 46rem; /* 736px */
}

/* Break out to the container width (WordPress "alignwide"). */
.bp-prose > figure,
.bp-prose > img,
.bp-prose > picture,
.bp-prose > video,
.bp-prose > iframe,
.bp-prose > .wp-block-image,
.bp-prose > .wp-block-gallery,
.bp-prose > .wp-block-embed,
.bp-prose > .wp-block-video,
.bp-prose > .wp-block-table,
.bp-prose > .wp-block-columns,
.bp-prose > .wp-block-cover,
.bp-prose > .alignwide,
.bp-prose > blockquote:has(img) {
	max-width: var(--bp-figure-max);
	box-sizing: border-box;
	width: 100%;
}

/* Tables: at least the reading measure, grow to fit their content, never
   wider than the container. Wrapped tables scroll on narrow screens. */
.bp-prose > table,
.bp-prose > .wp-block-table {
	max-width: min(100%, var(--bp-figure-max));
	width: auto;
	min-width: min(100%, var(--bp-text-max));
}

.bp-prose > .wp-block-table {
	overflow-x: auto;
}

.bp-prose > .wp-block-table > table {
	width: 100%;
}

/* Images inside a broken-out figure scale to the container but never past
   their natural size; centre them when they are smaller. */
.bp-prose figure > img,
.bp-prose figure > picture,
.bp-prose figure > a > img,
.bp-prose > img,
.bp-prose blockquote > img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.bp-prose figure > figcaption {
	text-align: center;
}

.bp-prose.prose-lg {
	font-size: var(--bp-body);
}

/* Full-bleed blocks (WordPress "alignfull"): span the viewport. */
.bp-prose > .alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Left/right floated images from the classic editor stay inside the
   measure on phones. */
@media (max-width: 640px) {
	.bp-prose .alignleft,
	.bp-prose .alignright {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Responsive embeds (WordPress adds this wrapper when
   responsive-embeds is supported). */
.wp-has-aspect-ratio iframe {
	width: 100%;
	height: 100%;
}

/* ----- Single post cover ----- */
.bp-cover {
	width: 100%;
	max-width: var(--bp-cover-max);
	margin-left: auto;
	margin-right: auto;
}

/* ----- Email verification utility pages (page-email-link-expired.php) ----- */
.bp-field {
	display: block;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	line-height: 1.5rem;
	color: inherit;
	background: #fff;
	border: 1px solid #d4d4d8;
	box-sizing: border-box;
}
.bp-field:focus {
	outline: 2px solid #0076a9;
	outline-offset: 1px;
	border-color: #0076a9;
}
.bp-form-note {
	color: #b45309;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}