/*
 * Canvas pages: pages built from WordPress blocks instead of Divi (see ../canvas.php).
 * Values come from tokens.css. One typeface, Avenir Next. Breakpoints match Divi's: 980px (tablet)
 * and 767px (phone).
 *
 * This file is the base every canvas page gets: text, links, lists, images, sections, the content
 * column, buttons and the site's contact form fields. Each reusable section has its own styles next
 * to its markup in ../patterns/ (README.md there), loaded only on pages that use it; a one-off look
 * for a single page goes in pages/<its address>.css.
 *
 * Core blocks are styled directly. Base classes, set on a block under
 * Block → Advanced → "Additional CSS class(es)":
 *
 *   bv-section            full-width Group (<section>) with vertical rhythm; one per band
 *     bv-mist               a quiet, pale blue band
 *     bv-stage              a dark navy band with white type
 *   bv-wrap               Group inside a section: the 1080px content column
 *   bv-lead               larger paragraph; bold words in it turn blue
 *   bv-note               small grey note
 *   bv-btn-text           Button shown as a plain text link
 *
 * Every rule is scoped to the page (.biovid-main) or the block editor (.editor-styles-wrapper),
 * specific enough to win over Divi's base and customizer CSS, which print later.
 */

/* ------------------------------------------------------------------ base */

:is(.biovid-main, .editor-styles-wrapper) {
	font-family: var(--bv-font);
	font-size: var(--bv-text);
	font-weight: var(--bv-regular);
	line-height: 1.6;
	color: var(--bv-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.biovid-main {
	display: block;
	overflow-x: clip; /* decorative light never causes sideways scrolling */
}

:is(.biovid-main, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--bv-font) !important;
	font-weight: var(--bv-bold);
	font-style: normal;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--bv-blue);
	margin: 0 0 0.5em;
	padding: 0;
	text-wrap: balance;
}

/* A page's title (in its hero): the Divi pages' title size. */
:is(.biovid-main, .editor-styles-wrapper) h1 {
	font-size: 38.25px;
	line-height: 1.05;
}

:is(.biovid-main, .editor-styles-wrapper) h2 {
	font-size: var(--bv-h2);
	line-height: 1.08;
}

:is(.biovid-main, .editor-styles-wrapper) h3 {
	font-size: var(--bv-h3);
	line-height: 1.2;
}

:is(.biovid-main, .editor-styles-wrapper) p {
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 1em;
	padding: 0;
}

:is(.biovid-main, .editor-styles-wrapper) :is(strong, b) {
	font-weight: var(--bv-bold);
}

:is(.biovid-main, .editor-styles-wrapper) em {
	font-style: italic;
}

:is(.biovid-main, .editor-styles-wrapper) a {
	color: var(--bv-blue);
	text-underline-offset: 0.18em;
}

:is(.biovid-main, .editor-styles-wrapper) :is(ul, ol) {
	list-style: disc outside;
	margin: 0 0 1em;
	padding: 0 0 0 1.2em;
}

:is(.biovid-main, .editor-styles-wrapper) ol {
	list-style-type: decimal;
}

:is(.biovid-main, .editor-styles-wrapper) figure {
	margin: 0;
}

:is(.biovid-main, .editor-styles-wrapper) img {
	max-width: 100%;
	height: auto;
}

:is(.biovid-main, .editor-styles-wrapper) figcaption {
	font-size: var(--bv-text-sm);
	line-height: 1.5;
	color: var(--bv-muted);
	text-align: left;
	margin: 0.7em 0 0;
}

/* Tables: hairlines between rows, and the header row as small blue capitals. */
:is(.biovid-main, .editor-styles-wrapper) .wp-block-table {
	margin: 0 0 1.5em;
	overflow-x: auto;
}

:is(.biovid-main, .editor-styles-wrapper) .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--bv-text-sm);
	line-height: 1.5;
}

:is(.biovid-main, .editor-styles-wrapper) .wp-block-table :is(thead, tbody, tfoot, tr) {
	border: 0;
}

:is(.biovid-main, .editor-styles-wrapper) .wp-block-table :is(th, td) {
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--bv-rule);
	padding: 0.8em 1.2em 0.8em 0;
}

:is(.biovid-main, .editor-styles-wrapper) .wp-block-table th {
	font-size: var(--bv-label);
	font-weight: var(--bv-bold);
	letter-spacing: var(--bv-tracking-label);
	text-transform: uppercase;
	color: var(--bv-blue);
	border-bottom-color: var(--bv-blue);
}

:is(.biovid-main, .editor-styles-wrapper) hr.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--bv-rule);
	opacity: 1;
	margin: 2.5em 0;
}

/* A question and its answer, opened in place: the question bold, between hairlines. */
:is(.biovid-main, .editor-styles-wrapper) .wp-block-details {
	border-top: 1px solid var(--bv-rule);
	border-bottom: 1px solid var(--bv-rule);
	margin: 0 0 1.5em;
	padding: 0;
}

:is(.biovid-main, .editor-styles-wrapper) .wp-block-details + .wp-block-details {
	margin-top: -1.5em;
	border-top: 0;
}

:is(.biovid-main, .editor-styles-wrapper) .wp-block-details summary {
	font-weight: var(--bv-bold);
	color: var(--bv-stage);
	padding: 0.9em 0;
	cursor: pointer;
}

:is(.biovid-main, .editor-styles-wrapper) .wp-block-details[open] > :not(summary):last-child {
	margin-bottom: 1em;
}

:is(.biovid-main, .editor-styles-wrapper) :focus-visible {
	outline: 3px solid var(--bv-sky);
	outline-offset: 3px;
}

/*
 * Spacing inside sections comes from the rules below, not WordPress's default block gap.
 * :where() keeps this reset weak, so a component's own margin always wins.
 */
:is(.biovid-main, .editor-styles-wrapper) .bv-section :where(p, h1, h2, h3, h4, figure, .wp-block-group, .wp-block-columns, .wp-block-buttons, .wp-block-image) {
	margin-top: 0;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-section :where(p, h2, h3, figure, .wp-block-group):last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.biovid-main) {
		scroll-behavior: smooth;
	}
}

/* ------------------------------------------------------------------ sections */

:is(.biovid-main, .editor-styles-wrapper) .bv-section {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: var(--bv-section-y) 0;
}

/* The content column: Divi's row, so the page's edges line up with the site's header and footer. */
:is(.biovid-main, .editor-styles-wrapper) .bv-wrap {
	box-sizing: border-box;
	width: min(var(--bv-width), 80%);
	max-width: var(--bv-width);
	margin-left: auto;
	margin-right: auto;
}

/* The bands' colours (a section without one is white). */

:is(.biovid-main, .editor-styles-wrapper) .bv-mist {
	background: var(--bv-mist);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-stage {
	color: var(--bv-paper);
	background-color: var(--bv-stage);
	background-image:
		radial-gradient(50% 80% at 0% 0%, rgba(1, 108, 211, 0.45) 0%, rgba(1, 108, 211, 0) 70%),
		radial-gradient(40% 60% at 100% 100%, rgba(60, 179, 227, 0.16) 0%, rgba(60, 179, 227, 0) 70%);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-stage :is(h2, h3) {
	color: var(--bv-paper);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-stage p {
	color: rgba(255, 255, 255, 0.86);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-lead {
	font-size: var(--bv-text-lg);
	line-height: 1.6;
	max-width: 36em;
	text-wrap: pretty;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-lead strong {
	color: var(--bv-blue);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-note {
	font-size: var(--bv-text-sm);
	line-height: 1.5;
	color: var(--bv-muted);
}

/* ------------------------------------------------------------------ buttons (the site's) */

:is(.biovid-main, .editor-styles-wrapper) .wp-block-buttons {
	gap: 14px 32px;
	align-items: center;
}

/* The Divi pages' button, measure for measure: 16px capitals spaced 3px apart in an orange pill. */
:is(.biovid-main, .editor-styles-wrapper) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-family: var(--bv-font) !important;
	font-size: 16px;
	font-weight: var(--bv-bold);
	line-height: 1.7;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--bv-paper);
	background: var(--bv-orange);
	border: 0;
	border-radius: 50px;
	padding: 0.3em 1em;
	transition: opacity 0.4s;
}

:is(.biovid-main, .editor-styles-wrapper) .wp-block-button__link:hover {
	opacity: 0.7;
	color: var(--bv-paper);
}

/* A button that reads as a plain link: same words, no pill (and still a big enough target). */
:is(.biovid-main, .editor-styles-wrapper) .bv-btn-text .wp-block-button__link {
	display: inline-block;
	background: none;
	padding: 10px 0;
	border-radius: 0;
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 9px;
}

/* Blue on light bands; white on dark ones (the stage here, the heroes in their patterns). */
:is(.biovid-main, .editor-styles-wrapper) .bv-btn-text .wp-block-button__link,
:is(.biovid-main, .editor-styles-wrapper) .bv-btn-text .wp-block-button__link:hover {
	color: var(--bv-blue);
}

:is(.biovid-main, .editor-styles-wrapper) .bv-stage .bv-btn-text .wp-block-button__link,
:is(.biovid-main, .editor-styles-wrapper) .bv-stage .bv-btn-text .wp-block-button__link:hover {
	color: var(--bv-paper);
}

/*
 * An inline block, so the underline stops at the words instead of running under the arrow: down to a
 * part of the same page, across to another one.
 */
:is(.biovid-main, .editor-styles-wrapper) .bv-btn-text .wp-block-button__link::after {
	content: "→";
	display: inline-block;
	margin-left: 0.55em;
	letter-spacing: 0;
}

:is(.biovid-main, .editor-styles-wrapper) .bv-btn-text .wp-block-button__link[href^="#"]::after {
	content: "↓";
}

/*
 * The site's contact form (Contact Form 7): its fields' look comes from the site's own CSS; these
 * make them match the canvas type and buttons. (Its layout in a panel is the contact pattern's.)
 */

:is(.biovid-main, .editor-styles-wrapper) .wpcf7 p {
	margin: 0;
}

:is(.biovid-main, .editor-styles-wrapper) .wpcf7-form :is(input, select, textarea) {
	box-sizing: border-box;
	font-family: var(--bv-font) !important;
	font-size: 16px;
	color: var(--bv-ink);
	background-color: var(--bv-paper);
	transition: border-color 0.2s, box-shadow 0.2s;
}

:is(.biovid-main, .editor-styles-wrapper) .wpcf7-form :is(input, select, textarea)::placeholder {
	color: #6b6b6b;
	opacity: 1;
}

:is(.biovid-main, .editor-styles-wrapper) .wpcf7-form .add_border :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--bv-sky) !important;
	box-shadow: 0 0 0 4px rgba(60, 179, 227, 0.22);
}

:is(.biovid-main, .editor-styles-wrapper) .wpcf7-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23595959' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 24px center;
	background-size: 12px 8px;
	padding-right: 52px !important;
	cursor: pointer;
}

:is(.biovid-main, .editor-styles-wrapper) .wpcf7-form textarea {
	display: block;
	width: 100%;
	height: 172px;
	min-height: 120px;
	margin: 0;
	resize: vertical;
}

:is(.biovid-main, .editor-styles-wrapper) .wpcf7-submit {
	float: right;
	font-family: var(--bv-font) !important;
	font-size: 16px !important;
	font-weight: var(--bv-bold);
	line-height: 1.7 !important;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--bv-paper) !important;
	background: var(--bv-orange) !important;
	border: 0 !important;
	border-radius: 50px;
	padding: 0.3em 1em !important;
	cursor: pointer;
	transition: opacity 0.4s;
}

:is(.biovid-main, .editor-styles-wrapper) .wpcf7-submit:hover {
	opacity: 0.7;
}

:is(.biovid-main, .editor-styles-wrapper) .wpcf7-submit::after {
	display: none !important; /* Divi's button arrow */
}

:is(.biovid-main, .editor-styles-wrapper) .wpcf7-response-output {
	clear: both;
	border-radius: 14px;
	margin: 16px 0 0 !important;
	padding: 12px 18px !important;
}

/* ------------------------------------------------------------------ tablet (Divi: ≤980px) */

@media (max-width: 980px) {
	:is(.biovid-main, .editor-styles-wrapper) h1 {
		font-size: 33.75px;
	}
}

/* ------------------------------------------------------------------ phone (Divi: ≤767px) */

@media (max-width: 767px) {
	:is(.biovid-main, .editor-styles-wrapper) h1 {
		font-size: 31.5px;
	}

	:is(.biovid-main, .editor-styles-wrapper) .wp-block-button__link,
	:is(.biovid-main, .editor-styles-wrapper) .wpcf7-submit {
		min-height: 48px;
	}

	/* The text link stays a link: left-aligned, wrapping like a sentence if it has to (in even lines, so the arrow never ends up alone). */
	:is(.biovid-main, .editor-styles-wrapper) .bv-btn-text .wp-block-button__link {
		min-height: 44px;
		font-size: 13px;
		letter-spacing: 2px;
		line-height: 1.7;
		text-align: left;
		text-wrap: balance;
		padding: 11px 0;
	}

	:is(.biovid-main, .editor-styles-wrapper) .wpcf7-form textarea {
		height: 150px;
	}

	:is(.biovid-main, .editor-styles-wrapper) .wpcf7-submit {
		float: none;
	}
}

/* Small phones: Avenir's caps run wide, so buttons tighten a little to stay on one line. */
@media (max-width: 480px) {
	:is(.biovid-main, .editor-styles-wrapper) .wp-block-button:not(.bv-btn-text) .wp-block-button__link,
	:is(.biovid-main, .editor-styles-wrapper) .wpcf7-submit {
		font-size: 14px !important;
		letter-spacing: 2px;
	}
}

/* ------------------------------------------------------------------ block editor only */

.editor-styles-wrapper .bv-section {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.editor-styles-wrapper .bv-wrap {
	max-width: var(--bv-width) !important;
}