/*
 * Page and post content.
 *
 * The imported pages are Elementor's rendered output: real headings and
 * paragraphs, but none of the wrapper classes the rest of the theme styles.
 * Without rules that reach arbitrary HTML they render as a browser default
 * dump inside an otherwise designed site — which is exactly how they looked.
 *
 * Everything here is scoped to the content area and written against plain
 * elements, so it works whether a page is blocks, imported HTML, or something
 * an editor pastes in next year.
 */

.wp-block-post-content,
.entry-content {
	--cong-measure: var(--wp--custom--measure--wide);
}

/* ---------- Rhythm --------------------------------------------------------
 *
 * Spacing is set on the top margin only, so adjacent elements never fight
 * over the gap between them, and the first child never pushes the section
 * away from its heading.
 * ------------------------------------------------------------------------- */

.wp-block-post-content > * {
	margin-block: 0;
}

.wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wp-block-post-content > :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-post-content > :is(h2, h3, h4) + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* ---------- Measure -------------------------------------------------------
 *
 * Prose is held to a readable line length and centered; media is allowed to
 * breathe wider. Without this, imported paragraphs run the full width of the
 * page and become unreadable.
 * ------------------------------------------------------------------------- */

/*
 * Aligned blocks are deliberately wider than the reading measure, so they are
 * excluded. Without this a designed page's full-bleed hero gets squeezed into
 * the prose column along with the paragraphs it was meant to sit outside.
 */
.wp-block-post-content > :is(p, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, table, .wp-block-heading, .wp-block-paragraph, .wp-block-list):not(.alignwide):not(.alignfull) {
	max-width: var(--cong-measure);
	margin-inline: auto;
}

.wp-block-post-content > :is(figure, img, iframe, video, .wp-block-image, .wp-block-embed) {
	max-width: min(100%, 60rem);
	margin-inline: auto;
}

/* ---------- Headings ------------------------------------------------------ */

.wp-block-post-content :where(h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

.wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--xxl);
}

.wp-block-post-content h3 {
	font-size: var(--wp--preset--font-size--xl);
}

.wp-block-post-content h4 {
	font-size: var(--wp--preset--font-size--lg);
}

/* A lime rule under section headings ties imported pages to the rest of the
   site without touching their markup. */
.wp-block-post-content > h2::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: 0.6rem;
	background: var(--wp--preset--color--lime);
	border-radius: 3px;
}

/* ---------- Text ---------------------------------------------------------- */

.wp-block-post-content :where(p) {
	line-height: 1.7;
}

/*
 * Prose lists only, here and below.
 *
 * A component that happens to be built from a list — the slideshow track, a
 * card grid, the steps — carries its own class and lays itself out. This
 * indent landed on the slideshow's <ul> and pushed the whole hero 22px to the
 * right, leaving a white stripe down the left of the front page.
 */
.wp-block-post-content :where(ul, ol):not([class*="cong-"]) {
	padding-inline-start: 1.3em;
}

/*
 * Prose lists only.
 *
 * The component lists — the values row, the card grids, the step lists —
 * are laid out with `gap`, and this flow margin was landing on every item
 * except the first. In a grid that pushes each item down by 0.4em while
 * the first stays put, which is why the rule above "Acceptance" sat
 * higher than the rule above every other value.
 */
.wp-block-post-content :where(ul, ol):not([class*="cong-"]) :where(li + li) {
	margin-block-start: 0.4em;
}

/* Belt and braces: a laid-out list never wants flow margins on its items. */
:where(.cong-values, .cong-grid, .cong-tiles, .cong-steps__list, .cong-order) > li {
	margin-block: 0;
}

.wp-block-post-content :where(a:not(.wp-element-button):not(.wp-block-button__link)) {
	color: var(--wp--preset--color--leaf);
	text-decoration: underline;
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
}

.wp-block-post-content :where(a:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--ink);
}

.wp-block-post-content :where(strong) {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/*
 * Bold inside a button, a link or anything that sets its own colour keeps
 * that colour. Imported buttons often have their words in <strong>, and the
 * dark ink above turned them navy on a navy button: an empty pill until hovered.
 */
.wp-block-post-content :where(a, .wp-element-button, .wp-block-button__link, [class*="has-"][class*="-color"]) :where(strong, b, em) {
	color: inherit;
}

/* ---------- Media --------------------------------------------------------- */

/*
 * :where() rather than :is(), so these carry no specificity of their own.
 * They are defaults for arbitrary imported markup, and any component that
 * styles its own images — a staff portrait, a card's media — has to win
 * without having to fight. With :is() the two matched at equal specificity,
 * load order decided it, and staff photos sat 160px short inside their frames.
 */
/*
 * Core's own components are excluded as well as ours.
 *
 * A cover's background image is absolutely positioned and sized to fill its
 * box; this rule's height:auto beat core's height:100% on load order alone,
 * so the image sized to its own proportions and the cover simply clipped the
 * top of it. That is why the focal-point control appeared to do nothing —
 * object-position can only move a picture inside a box it actually fills.
 */
.wp-block-post-content :where(img, video):not([class*="cong-"], .wp-block-cover__image-background, .wp-block-cover__video-background) {
	display: block;
	height: auto;
	max-width: 100%;
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-post-content figure {
	margin-inline: auto;
}

.wp-block-post-content figcaption {
	margin-top: 0.6rem;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
}

/*
 * Prose embeds only.
 *
 * A video pasted into a page wants 16:9 and an automatic height. A component
 * that owns its own frame — the campus map filling half a wall panel — does
 * not, and this rule beat its `block-size: 100%` on a tie, leaving the map
 * 522px tall inside a 1000px box with the rest white.
 */
.wp-block-post-content :where(iframe):not([class*="cong-"]) {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--wp--custom--radius--md);
}

/*
 * Elementor inlined its icons as raw <svg>. Left alone they have no intrinsic
 * size and expand to fill the column — which is what put a 600px map pin in
 * the middle of Plan Your Visit.
 */
.wp-block-post-content :where(svg) {
	width: 1.1em;
	height: 1.1em;
	vertical-align: -0.15em;
	flex: 0 0 auto;
}

.wp-block-post-content a:has(> svg) {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

/* ---------- Quotes and tables ---------------------------------------------- */

.wp-block-post-content blockquote {
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 3px solid var(--wp--preset--color--lime);
	font-size: var(--wp--preset--font-size--lg);
}

.wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}

.wp-block-post-content :is(th, td) {
	padding: 0.65rem 0.8rem;
	border-bottom: 1px solid var(--wp--preset--color--sky-mid);
	text-align: start;
}

.wp-block-post-content th {
	background: var(--wp--preset--color--sky-soft);
	font-weight: 700;
}

/* ---------- Imported noise -------------------------------------------------
 *
 * The export is full of empty wrappers and stray whitespace-only elements
 * that would otherwise leave unexplained gaps down the page.
 * ------------------------------------------------------------------------- */

/*
 * A component's empty element is not noise.
 *
 * The order-of-service numbers are deliberately empty spans that CSS counters
 * fill through ::before, so that inserting a step renumbers the rest. This
 * rule hid every one of them the moment ministry pages moved into the content
 * area, and an order of worship lost its numbering without anything looking
 * broken enough to notice.
 */
.wp-block-post-content p:empty:not([class*="cong-"]),
.wp-block-post-content div:empty:not([class*="cong-"]),
.wp-block-post-content span:empty:not([class*="cong-"]) {
	display: none;
}

.wp-block-post-content > :first-child {
	margin-block-start: 0;
}

.wp-block-post-content > :last-child {
	margin-block-end: 0;
}

/* Give the whole content area room to sit in — except on a designed page,
   where the bands bring their own padding and the hero must reach the top. */
.wp-block-post-content {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.page-designed .wp-block-post-content {
	padding-block: 0;
}

.page-designed .wp-block-post-content > * + * {
	margin-block-start: 0;
}

/*
 * Except an event's description. The event page is designed — the poster,
 * the facts, "More coming up" are bands — but the description inside it is
 * ordinary reading, written in the event form as paragraphs, and with no
 * space between them it ran together as one block of text.
 */
.page-designed .cong-event-body .wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.page-designed .cong-event-body .wp-block-post-content > :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.page-designed .cong-event-body .wp-block-post-content > :is(h2, h3, h4) + * {
	margin-block-start: var(--wp--preset--spacing--20);
}