/*
 * Opranic 2027: default content styles.
 * Loaded on every page except the front page. Makes pages that are still built
 * with a page builder look calm until they are rebuilt.
 *
 * Element rules use :where(.o27-content) so they have the same weight as the
 * reset in base.css (later wins) and any class-based rule from a builder or a
 * plugin still takes precedence. Components that carry an o27- or
 * oprbb- class are left alone.
 */

/* Layout */
.o27-content { overflow-x: clip; }
.o27-content__body { padding-bottom: 8px; }
.o27-content--prose .o27-wrap { max-width: calc(760px + 2 * var(--o27-pad)); }

/* Full-width escape: viewport width, whatever the column is. */
.o27-content .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}
/* The page builder script (when it runs) sets its own inline left and width, which win. */
.o27-content .vc_row[data-vc-full-width] {
	position: relative;
	width: 100vw;
	max-width: none;
	left: calc(50% - 50vw);
	box-sizing: border-box;
}
.o27-content .alignwide { max-width: var(--o27-wrap); margin-inline: auto; }

/* Title area */
.o27-titlearea { padding-block: 80px 8px; }
.o27-titlearea + .o27-entry .o27-content__body,
.o27-titlearea + .o27-content__body { padding-top: 32px; }
.o27-pagetitle {
	margin: 0;
	font-family: var(--o27-font-head);
	font-weight: 300;
	font-size: 3rem;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--o27-heading);
	overflow-wrap: anywhere;
}
/* A page whose content starts with its own heading gets the same top space. */
.o27-content > .o27-entry:first-child .o27-content__body { padding-top: 80px; }
.o27-content > .o27-entry:first-child .o27-content__body > :first-child { margin-top: 0; }

/* Headings */
:where(.o27-content) h1,
:where(.o27-content) h2,
:where(.o27-content) h3,
:where(.o27-content) h4 {
	font-family: var(--o27-font-head);
	color: var(--o27-heading);
	margin: 1.6em 0 0.5em;
	overflow-wrap: anywhere;
}
:where(.o27-content) h1 { font-weight: 300; font-size: 3rem; line-height: 1.1; letter-spacing: -0.015em; margin-top: 0; }
:where(.o27-content) h2 { font-weight: 300; font-size: 2.25rem; line-height: 1.15; letter-spacing: -0.01em; }
:where(.o27-content) h3 { font-weight: 400; font-size: 1.625rem; line-height: 1.25; }
:where(.o27-content) h4 { font-weight: 600; font-size: 1.1875rem; line-height: 1.3; }
:where(.o27-content) :is(h1, h2, h3, h4):first-child { margin-top: 0; }

/* Text */
:where(.o27-content) p,
:where(.o27-content) ul,
:where(.o27-content) ol,
:where(.o27-content) dl,
:where(.o27-content) pre,
:where(.o27-content) figure,
:where(.o27-content) table,
:where(.o27-content) blockquote,
:where(.o27-content) form { margin: 0 0 1.25em; }
:where(.o27-content) p,
:where(.o27-content) li,
:where(.o27-content) dd { font-size: 1.0625rem; line-height: 1.7; }
:where(.o27-content) strong,
:where(.o27-content) b { color: var(--o27-heading); font-weight: 700; }
:where(.o27-content) ul { list-style: disc; padding-left: 1.4em; }
:where(.o27-content) ol { list-style: decimal; padding-left: 1.5em; }
:where(.o27-content) li { margin-bottom: 0.4em; }
:where(.o27-content) li::marker { color: var(--o27-orange); }
:where(.o27-content) :is(ul, ol) :is(ul, ol) { margin: 0.4em 0 0; }
:where(.o27-content) code,
:where(.o27-content) pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
:where(.o27-content) pre { overflow-x: auto; padding: 16px 20px; border-radius: 16px; background: var(--o27-grey); }

/* Links in running text: underlined, orange underline. */
:where(.o27-content) :is(p, li, td, th, dd, figcaption, blockquote) a:where(:not(.button, .wp-element-button, [class*="o27-"], [class*="oprbb-"])) {
	text-decoration: underline;
	text-decoration-color: var(--o27-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Images, figures, media */
.o27-content img,
.o27-content svg,
.o27-content video,
.o27-content canvas { max-width: 100%; }
.o27-content img { height: auto; border-radius: 16px; }
.o27-content :is(.custom-logo, [class*="o27-"], [class*="oprbb-"]) img { border-radius: 0; }
.o27-content .alignfull img { border-radius: 0; }
/* Unstyled inline icons must not blow up to the full column width. */
/* Unsized inline icons only. Graphs and figures (role="img" or inside a figure) keep their own size. */
.o27-content svg:not([width]):not([class*="o27-"]):not([role="img"]):not(figure svg) { width: 1em; height: 1em; }
:where(.o27-content) figure { max-width: 100%; }
:where(.o27-content) figcaption,
:where(.o27-content) .wp-caption-text { margin-top: 8px; font-size: 0.875rem; line-height: 1.5; color: var(--o27-muted); }
:where(.o27-content) .wp-caption { max-width: 100%; }
:where(.o27-content) .aligncenter { display: block; margin-inline: auto; }
:where(.o27-content) .alignleft { float: left; margin: 0 24px 16px 0; max-width: 50%; }
:where(.o27-content) .alignright { float: right; margin: 0 0 16px 24px; max-width: 50%; }

/* Embeds */
.o27-content iframe,
.o27-content embed,
.o27-content object { max-width: 100%; border: 0; }
.o27-content :is(.wp-block-embed__wrapper, .wp-has-aspect-ratio, .video-container, .fluid-width-video-wrapper) { position: relative; max-width: 100%; }
.o27-content .wp-block-embed__wrapper iframe,
.o27-content .wp-block-embed.is-type-video iframe,
.o27-content iframe[src*="youtube"],
.o27-content iframe[src*="youtube-nocookie"],
.o27-content iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; }

/* Tables: scroll sideways on small screens. */
.o27-table-wrap,
.o27-content .wp-block-table { max-width: 100%; margin: 0 0 1.25em; overflow-x: auto; }
:where(.o27-content) table { width: 100%; border-collapse: collapse; font-size: 1rem; }
:where(.o27-content) :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--o27-border); text-align: left; vertical-align: top; }
:where(.o27-content) thead th { border-bottom: 2px solid var(--o27-heading); color: var(--o27-heading); font-weight: 700; }
@media (max-width: 767px) {
	.o27-content table:not(.o27-table-wrap table):not(.wp-block-table table) { display: block; max-width: 100%; overflow-x: auto; }
}

/* Quotes and rules */
:where(.o27-content) blockquote { padding: 4px 0 4px 24px; border-left: 3px solid var(--o27-orange); color: var(--o27-heading); }
:where(.o27-content) blockquote p:last-child { margin-bottom: 0; }
:where(.o27-content) hr {
	height: 3px;
	margin: 2.5em 0;
	border: 0;
	background: linear-gradient(90deg, transparent 0%, #EE9305 50%, transparent 100%);
}

/* Buttons: the theme's dark pill. */
body .o27-content :is(.button, .wp-element-button, button[type="submit"], input[type="submit"]):not([class*="o27-"], [class*="oprbb-"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--o27-dark);
	color: #fff;
	font: 600 0.9375rem/1.2 var(--o27-font-body);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--o27-ease);
}
body .o27-content :is(.button, .wp-element-button, button[type="submit"], input[type="submit"]):not([class*="o27-"], [class*="oprbb-"]):hover {
	background: var(--o27-orange);
	color: var(--o27-dark);
}

/* Form fields */
.o27-content :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], input[type="date"], select):not([class*="o27-"], [class*="oprbb-"]) {
	width: 100%;
	max-width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #C9CCD1;
	border-radius: 12px;
	background: #fff;
	color: var(--o27-heading);
	font: 400 1rem/1.2 var(--o27-font-body);
}
.o27-content textarea:not([class*="o27-"], [class*="oprbb-"]) {
	width: 100%;
	max-width: 100%;
	min-height: 140px;
	padding: 12px 16px;
	border: 1px solid #C9CCD1;
	border-radius: 12px;
	background: #fff;
	color: var(--o27-heading);
	font: 400 1rem/1.5 var(--o27-font-body);
}
.o27-content :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"], [class*="o27-"], [class*="oprbb-"]):focus-visible {
	outline: 3px solid var(--o27-focus);
	outline-offset: 2px;
	border-color: var(--o27-dark);
}
:where(.o27-content) label { display: inline-block; margin-bottom: 6px; font-weight: 600; color: var(--o27-heading); }

/* Lists of posts (archives, search) */
.o27-list .o27-entry { margin-bottom: 0; padding-block: 24px; border-bottom: 1px solid var(--o27-border); }
.o27-list .o27-entry:first-child { padding-top: 0; }
.o27-list .o27-entry__body :is(p) { margin-bottom: 0; color: var(--o27-muted); }
.o27-list .navigation { margin-top: 32px; }

@media (max-width: 767px) {
	.o27-titlearea { padding-block: 48px 8px; }
	.o27-pagetitle,
	:where(.o27-content) h1 { font-size: 2rem; }
	:where(.o27-content) h2 { font-size: 1.75rem; }
	:where(.o27-content) h3 { font-size: 1.375rem; }
	:where(.o27-content) :is(.alignleft, .alignright) { float: none; margin: 0 0 16px; max-width: 100%; }
	.o27-content > .o27-entry:first-child .o27-content__body { padding-top: 48px; }
}