/**
 * SNYCF — Article typography
 *
 * Styles standard WordPress editor output inside `.snycf-article`, so an
 * editor writing in the block editor gets the approved editorial treatment
 * without touching HTML.
 *
 * Derived from Story Page.dc.html, Content Page.dc.html and
 * Policy Page.dc.html. Note the design's deliberate inversion: an in-article
 * H2 is Archivo tracked caps on a 3px rule, not a serif headline.
 *
 * @package snycf
 */

.snycf-article {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: var( --snycf-size-prose );
	line-height: var( --snycf-leading-prose );
	color: var( --snycf-text-prose );
	max-width: var( --snycf-measure );
	min-width: 0;
}

/* Consistent flow spacing. Owl selector so the first child never adds a gap. */
.snycf-article > * + * {
	margin-block-start: var( --snycf-space-lg );
}

.snycf-article p {
	margin: 0;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

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

.snycf-article h2 {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-label );
	font-weight: var( --snycf-weight-black );
	letter-spacing: var( --snycf-tracking-label );
	text-transform: uppercase;
	line-height: 1.3;
	color: var( --snycf-text );
	border-top: var( --snycf-border-width-rule ) solid var( --snycf-ink );
	padding-top: var( --snycf-rule-gap );
	text-wrap: balance;
}

.snycf-article > h2 {
	margin-block-start: var( --snycf-space-2xl );
}

.snycf-article h3 {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 1.375rem;
	font-weight: var( --snycf-weight-bold );
	line-height: 1.25;
	color: var( --snycf-text );
	text-wrap: balance;
}

.snycf-article h4,
.snycf-article h5,
.snycf-article h6 {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.8125rem;
	font-weight: var( --snycf-weight-black );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --snycf-text );
}

/* Heading immediately followed by prose tightens up. */
.snycf-article h2 + *,
.snycf-article h3 + *,
.snycf-article h4 + * {
	margin-block-start: var( --snycf-space-sm );
}

/* ---------------------------------------------------------------------
 * Lists
 * ------------------------------------------------------------------ */

.snycf-article ul,
.snycf-article ol {
	margin-block: 0;
	padding-inline-start: var( --snycf-space-lg );
	color: var( --snycf-ink-2 );
}

.snycf-article li + li {
	margin-block-start: var( --snycf-space-2xs );
}

.snycf-article li::marker {
	color: var( --snycf-accent );
}

.snycf-article li > ul,
.snycf-article li > ol {
	margin-block-start: var( --snycf-space-2xs );
}

/* ---------------------------------------------------------------------
 * Quotes
 * ------------------------------------------------------------------ */

.snycf-article blockquote {
	margin-inline: 0;
	padding-inline-start: var( --snycf-space-lg );
	border-inline-start: var( --snycf-border-width-rule ) solid var( --snycf-accent );
	font-style: italic;
	color: var( --snycf-ink-2 );
}

.snycf-article blockquote p {
	font-size: 1.0625rem;
	line-height: 1.6;
}

.snycf-article blockquote cite {
	display: block;
	margin-block-start: var( --snycf-space-2xs );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-style: normal;
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: var( --snycf-tracking-meta );
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

/*
 * Pull quote — the large accent-ruled quote from the story design. Applied
 * via the core pullquote block or a block style on core/quote.
 */
.snycf-article .wp-block-pullquote,
.snycf-article .is-style-snycf-pull {
	border-inline-start: var( --snycf-border-width-rule ) solid var( --snycf-accent );
	padding: var( --snycf-space-3xs ) 0 var( --snycf-space-3xs ) var( --snycf-space-xl );
	margin-block: var( --snycf-space-2xl );
	font-style: normal;
}

.snycf-article .wp-block-pullquote p,
.snycf-article .is-style-snycf-pull p {
	font-size: clamp( 1.25rem, 1rem + 1.1vw, 1.625rem );
	font-weight: var( --snycf-weight-semibold );
	line-height: 1.35;
	color: var( --snycf-text );
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------
 * Links
 * ------------------------------------------------------------------ */

/*
 * A pasted court-system URL is one unbreakable token roughly 90 characters
 * long. overflow-wrap:break-word on the paragraph is not enough — it only
 * breaks a word that would otherwise overflow its *line*, and a link is an
 * inline box that pushes the page instead. `anywhere` lets the break happen
 * inside the link, which is what keeps a policy page from scrolling sideways
 * on a phone.
 */
.snycf-article a {
	overflow-wrap: anywhere;

	color: var( --snycf-text );
	text-decoration: underline;
	text-decoration-color: var( --snycf-accent );
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.snycf-article a:hover {
	color: var( --snycf-accent );
}

/* ---------------------------------------------------------------------
 * Figures and images
 * ------------------------------------------------------------------ */

.snycf-article figure {
	margin: 0;
}

.snycf-article img {
	width: 100%;
	height: auto;
}

.snycf-article figcaption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --snycf-space-sm );
	border-bottom: var( --snycf-divider );
	padding: var( --snycf-space-2xs ) 2px var( --snycf-space-xs );
	margin-block-start: 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: var( --snycf-size-meta );
	font-style: italic;
	line-height: 1.5;
	color: var( --snycf-text-meta );
}

/* Wide alignment breaks the reading measure on desktop only. */
@media ( min-width: 64rem ) {

	.snycf-article .alignwide {
		width: min( var( --snycf-container-article ), 100vw - ( 2 * var( --snycf-gutter ) ) );
		margin-inline: calc( 50% - min( var( --snycf-container-article ), 100vw - ( 2 * var( --snycf-gutter ) ) ) / 2 );
		max-width: none;
	}
}

/* ---------------------------------------------------------------------
 * Drop cap
 * ------------------------------------------------------------------ */

.snycf-article .has-drop-cap:first-letter {
	float: left;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: 4rem;
	line-height: 0.8;
	padding: 0.375rem 0.625rem 0 0;
}

/* ---------------------------------------------------------------------
 * Tables
 *
 * Scroll inside their own container so the page body never scrolls
 * sideways, which is the rule everywhere in this theme.
 * ------------------------------------------------------------------ */

.snycf-article .wp-block-table,
.snycf-article figure.wp-block-table {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.snycf-article table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.875rem;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.snycf-article th {
	text-align: start;
	padding: var( --snycf-space-2xs ) var( --snycf-space-xs ) var( --snycf-space-2xs ) 0;
	border-bottom: var( --snycf-border-width-hair ) solid var( --snycf-ink );
	font-size: 0.625rem;
	font-weight: var( --snycf-weight-black );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --snycf-text-meta );
	vertical-align: bottom;
}

.snycf-article td {
	padding: var( --snycf-space-2xs ) var( --snycf-space-xs ) var( --snycf-space-2xs ) 0;
	border-bottom: var( --snycf-divider );
	vertical-align: top;
}

/* ---------------------------------------------------------------------
 * Rules and code
 * ------------------------------------------------------------------ */

.snycf-article hr,
.snycf-article .wp-block-separator {
	border: 0;
	border-top: var( --snycf-border-width-rule ) solid var( --snycf-ink );
	margin-block: var( --snycf-space-2xl );
	max-width: none;
}

.snycf-article code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	background-color: var( --snycf-stock );
	padding: 0.1em 0.3em;
}

.snycf-article pre {
	overflow-x: auto;
	padding: var( --snycf-space-sm );
	background-color: var( --snycf-stock );
	border-inline-start: var( --snycf-border-width-rule ) solid var( --snycf-ink );
	font-size: 0.8125rem;
	line-height: 1.55;
}

/* ---------------------------------------------------------------------
 * Editorial callouts
 *
 * Editor's Note and Important Notice from the approved designs. Delivered
 * as block styles so an editor applies them from the sidebar rather than
 * writing markup.
 * ------------------------------------------------------------------ */

.snycf-note {
	background-color: var( --snycf-stock );
	border-inline-start: var( --snycf-border-width-rule ) solid var( --snycf-ink );
	padding: var( --snycf-space-sm ) var( --snycf-space-md );

	/* Metadata on the off-white surface uses the darker accessible token. */
	--snycf-text-meta: var( --snycf-meta-on-stock );
}

.snycf-note--accent {
	border-inline-start-color: var( --snycf-accent );
}

.snycf-note__label {
	display: block;
	margin-block-end: var( --snycf-space-2xs );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.65625rem;
	font-weight: var( --snycf-weight-black );
	letter-spacing: var( --snycf-tracking-label );
	text-transform: uppercase;
	color: var( --snycf-text );
}

.snycf-note--accent .snycf-note__label {
	color: var( --snycf-accent );
}

.snycf-note p {
	font-size: 0.96875rem;
	line-height: 1.6;
	color: var( --snycf-ink-2 );
}

/* ---------------------------------------------------------------------
 * Page-level article layout (Content Page / Policy Page)
 * ------------------------------------------------------------------ */

.snycf-article-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --snycf-gap-sidebar );
	align-items: start;
}

@media ( min-width: 64rem ) {

	.snycf-article-layout {
		grid-template-columns: 15rem minmax( 0, 1fr );
	}

	.snycf-article-layout--sidebar-end {
		grid-template-columns: minmax( 0, 1fr ) 21rem;
	}

	.snycf-article-layout--sidebar-end > .snycf-article-layout__aside {
		order: 1;
	}
}