/* Flush spacing: when main's first (or last) rendered block is a full-width
   section (alignfull), sit it directly under the header (or on the footer)
   with a 0px gap. Pages whose content does not start/end with a full-width
   section keep WP's default block-gap. Uses :has() (Baseline). */
.wp-site-blocks > main:has(> .alignfull:first-child),
.wp-site-blocks > main:has(> .wp-block-post-content:first-child > .alignfull:first-child) {
	margin-block-start: 0 !important;
}
.wp-site-blocks > main:has(> .alignfull:last-child) + footer,
.wp-site-blocks > main:has(> .wp-block-post-content:last-child > .alignfull:last-child) + footer {
	margin-block-start: 0 !important;
}

/* Post-content block-gap sits between successive top-level blocks: at the
 * 112.5% root that's an 18px gap between each Section, which Astro does not
 * have (its .section elements are back-to-back). Collapse the gap for
 * sections and the divider block so section-to-section rhythm matches the
 * Astro landing page exactly. */
.wp-block-post-content > .wp-block-bozzies-section,
.wp-block-post-content > .wp-block-bozzies-divider {
	margin-block: 0;
}

/* Sticky footer: on short pages the footer sits at the bottom of the viewport;
   on long pages it follows content as usual. Uses flex on the site-blocks wrapper
   so main grows to fill available space. Does not affect the sticky header. */
html, body { min-height: 100%; }
.wp-site-blocks {
	min-height: 100vh;              /* fallback */
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
.wp-site-blocks > main,
.wp-site-blocks > main.wp-block-group,
.wp-site-blocks > .wp-block-template-part[data-type="core/template-part"]:not(header):not(footer),
.wp-site-blocks > main.wp-block-template-part {
	flex: 1 0 auto;
}
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part {
	flex: 0 0 auto;
}
/* Admin bar: subtract its height from the viewport so no extra scrollbar appears
   on short pages when logged in. */
body.admin-bar .wp-site-blocks {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
	body.admin-bar .wp-site-blocks {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}

/* Prose in page/post content OUTSIDE sections: reproduce Astro's
   .container-narrow border-box math (max-width 42rem, padding-inline inside).
   Direct children of post-content only — content inside section-style groups
   uses the rules above. */
.wp-block-post-content > .wp-block-paragraph,
.wp-block-post-content > p,
.wp-block-post-content > .wp-block-list,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > .wp-block-quote,
.wp-block-post-content > blockquote,
.wp-block-post-content > h1,
.wp-block-post-content > h2,
.wp-block-post-content > h3,
.wp-block-post-content > h4,
.wp-block-post-content > h5,
.wp-block-post-content > h6 {
	max-width: var(--wp--style--global--content-size, 42rem);
	padding-inline: clamp(var(--wp--preset--spacing--l), 4vw, var(--wp--custom--space--8));
	box-sizing: border-box;
}

/* --- WP core skip link — re-styled with Astro's treatment --- */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--wp--custom--letter-spacing--caps);
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--wp--custom--color--yellow-soft);
	padding: 0.75rem 1rem;
	left: var(--wp--preset--spacing--s);
	top: var(--wp--preset--spacing--s);
}

/* --- Site-wide :focus-visible --- */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--brass);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Cookie settings button on the purple footer — theme plumbing that
 * Astro doesn't have (no cookie consent flow on the Astro site). Rendered
 * inside .site-footer__meta by the bozzies/site-footer block. Renders
 * unconditionally — a11y branch removed the `hidden` attribute so the
 * button is visible + focusable from first paint. assets/js/consent.js
 * attaches the click handler that opens the consent banner. */
.site-footer__meta .bozzies-cookie-settings {
	display: inline-block;
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	margin-top: var(--wp--preset--spacing--s);
	font: inherit;
	color: var(--wp--custom--color--text-on-purple);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.site-footer__meta .bozzies-cookie-settings:hover {
	color: var(--wp--custom--color--yellow-soft);
}
/* Yellow-soft on purple = ~6.6:1 (easily past WCAG 1.4.11's 3:1 for a
 * UI indicator). The ring offsets 2 px from the text so it stays on
 * purple ground rather than hugging the glyphs. (WCAG 2.4.7.) */
.site-footer__meta .bozzies-cookie-settings:focus-visible {
	outline: 2px solid var(--wp--custom--color--yellow-soft);
	outline-offset: 2px;
	color: var(--wp--custom--color--yellow-soft);
}

/* ============================================================================
 * .is-style-eyebrow — Astro's `.eyebrow` is display: inline-block, which makes
 * the element sit on a line-box baseline inside its centered parent, adding
 * a small (~3px) leading gap above the eyebrow that a plain block-level
 * paragraph doesn't have. Mirror that here so eyebrow-topped sections start
 * their content at the same y-offset as Astro. Applied via a paragraph block
 * style variation (see functions.php).
 * ========================================================================= */
.is-style-eyebrow {
	display: inline-block;
}
.is-style-eyebrow.has-text-align-center {
	display: block;
	width: fit-content;
	margin-inline: auto;
	text-align: center;
}

/* Buttons block in a horizontal row — force equal height across the row by
 * stretching button children and using consistent padding on the button links.
 * Used by /sisters/bio-resources/ (contact/donate CTA row); every other button
 * row on the site is emitted by a dedicated block (about-cta, donate-teaser,
 * sample-section) that owns its own button treatment. */
.wp-block-buttons.is-content-justification-center,
.wp-block-buttons.is-layout-flex {
	align-items: stretch;
}
.wp-block-buttons > .wp-block-button {
	display: flex;
	align-items: stretch;
}
.wp-block-buttons > .wp-block-button > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
}

/* "Large" button style adds extra padding — used on /sisters/bio-resources/. */
.wp-block-button.is-style-large .wp-block-button__link {
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--xl);
}

/* ============================================================================
 * YouTube embeds — WordPress's core Embed block for YouTube renders as
 * <figure class="wp-block-embed is-type-video is-provider-youtube ..."> with
 * a .wp-block-embed__wrapper > iframe inside. Match Astro's .video-embed:
 *   16:9 aspect ratio (padding-bottom trick, works everywhere without JS),
 *   1rem top / 2rem bottom margin, and --ink placeholder background.
 * ========================================================================= */
.wp-block-embed.is-provider-youtube,
.wp-block-embed.is-type-video.is-provider-youtube {
	margin-top: var(--wp--preset--spacing--m);
	margin-bottom: var(--wp--preset--spacing--xl);
}
.wp-block-embed.is-provider-youtube .wp-block-embed__wrapper,
.wp-block-embed.is-type-video.is-provider-youtube .wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	background: var(--wp--preset--color--ink);
	overflow: hidden;
}
.wp-block-embed.is-provider-youtube .wp-block-embed__wrapper iframe,
.wp-block-embed.is-type-video.is-provider-youtube .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* Core wraps the iframe in a responsive-embed div on some builds; support both. */
.wp-block-embed.is-provider-youtube .wp-block-embed__wrapper > *,
.wp-block-embed.is-type-video.is-provider-youtube .wp-block-embed__wrapper > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ============================================================================
 * Article meta (author · publication · publicationDate). Bound to the
 * bozzies/article-meta binding source. Astro drops the whole paragraph when
 * every part is empty; we mirror that with `:empty { display: none }`.
 * ========================================================================= */
.bozzies-article-meta:empty,
.bozzies-article-row__meta:empty {
	display: none;
}

/* ============================================================================
 * Article row numbering — CSS counters on the Query Loop's post-template list.
 * WP core renders <ul class="wp-block-post-template bozzies-article-list"> with
 * an <li> per post. Astro's `article-row` DOM (link + num span + body + arrow
 * svg) is assembled server-side by `bozzies_astro_article_rows()` in
 * functions.php. The hairlines + hover wash below are WP-specific — Astro
 * puts them on the row itself; WP puts them on the <li> because the ported
 * article.css `.article-row` selector matches <a> not <li>.
 * ========================================================================= */
.wp-block-post-template.bozzies-article-list {
	list-style: none;
	padding: 0;
	/* `margin: 0 auto` so lists.css's cap at var(--measure-wide) actually
	 * centers in the browser window. The list sits inside
	 * .wp-block-bozzies-section__inner (max-width 1512px, 57.6px side
	 * padding → inner width 1325px at 1440 viewport) which is wider than
	 * our 60rem = 1080px cap, so without auto side-margins the list
	 * hangs left-aligned by ~245px. */
	margin: 0 auto;
	border-top: 1px solid var(--wp--custom--color--paper-hairline);
}
.wp-block-post-template.bozzies-article-list > li {
	border-bottom: 1px solid var(--wp--custom--color--paper-hairline);
}
.wp-block-post-template.bozzies-article-list > li:hover,
.wp-block-post-template.bozzies-article-list > li:focus-within {
	background: color-mix(in oklab, var(--wp--preset--color--purple) 5%, transparent);
}

/* ============================================================================
 * Paragraph-width utilities — match Astro's --measure-* tokens so section
 * prose caps at the same character count regardless of the section width.
 * Used on the /press/ hub blurbs and /media/ hub blurb.
 * ========================================================================= */
.wp-block-bozzies-section p.bozzies-para-body,
.wp-block-bozzies-section .wp-block-paragraph.bozzies-para-body {
	max-width: var(--wp--custom--measure--prose, 58ch);
}