/* Heading scale.
 *
 * These rules author the frontend and let the `.display-N` / `.hero-title`
 * utility classes be applied to any element. They win on the frontend because
 * Ollie's per-heading sizes (theme.json) emit `:where(h1)` (0 specificity).
 *
 * In the block/site editor, though, Ollie's theme.json sizes emit
 * `:where(.editor-styles-wrapper) h1` (specificity 0,0,0,1) — a tie with these
 * (identically transformed) rules, broken by load order in Ollie's favor. So
 * the per-level `fontSize`/`lineHeight`/`letterSpacing` here are MIRRORED in
 * our child `theme.json → styles.elements.h1…h6` (and `fontWeight: 700` on
 * `elements.heading`) so the editor's winning theme.json rule carries OUR
 * values. Keep the two in sync: change a heading size/line-height/letter-spacing
 * here AND in theme.json. (`.hero-title` is a class, not an element, so it has
 * no theme.json counterpart — it wins everywhere on its own.) */
.hero-title,
.is-style-hero-title {
	font-family: var(--wp--preset--font-family--skeena-indigenous);
	font-size: var(--wp--preset--font-size--hero-responsive);
	font-weight: 700;
	line-height: 0.96;
	letter-spacing: 0;
}

h1,
.display-1,
.is-style-display-1 {
	font-family: var(--wp--preset--font-family--skeena-indigenous);
	font-size: var(--wp--preset--font-size--display-1-responsive);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

h2,
.display-2,
.is-style-display-2 {
	font-family: var(--wp--preset--font-family--skeena-indigenous);
	font-size: var(--wp--preset--font-size--display-2-responsive);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1px;
}

h3,
.display-3,
.is-style-display-3 {
	font-family: var(--wp--preset--font-family--skeena-indigenous);
	font-size: var(--wp--preset--font-size--display-3-responsive);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1px;
}

h4,
.display-4,
.is-style-display-4 {
	font-family: var(--wp--preset--font-family--skeena-indigenous);
	font-size: var(--wp--preset--font-size--display-4-responsive);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}

h5,
.display-5,
.is-style-display-5 {
	font-family: var(--wp--preset--font-family--skeena-indigenous);
	font-size: var(--wp--preset--font-size--display-5-responsive);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

h6,
.display-6,
.is-style-display-6 {
	font-family: var(--wp--preset--font-family--skeena-indigenous);
	font-size: var(--wp--preset--font-size--display-6);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

/* "Arrow" heading style — registered for core/heading in inc/patterns.php.
   Inline-flex so the icon sits next to the last line of text and the heading
   shrinks to its content. Icon uses mask + currentColor so it inherits the
   heading's text color. Sizing in em keeps the arrow proportional across
   heading levels. */
.is-style-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.is-style-arrow::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	flex: 0 0 0.7em;
	background-color: currentColor;
	-webkit-mask: url(../images/icons/arrow-right.svg) no-repeat center / contain;
	        mask: url(../images/icons/arrow-right.svg) no-repeat center / contain;
}

/* Hover — turn the heading (and its currentColor arrow) Poppy. Covers both
   a plain hovered heading and one wrapping a link. */
.wp-block-heading.is-style-arrow:hover,
.wp-block-heading.is-style-arrow:hover a {
	color: var(--wp--preset--color--poppy-500) !important;
}

/* The inline-flex above shrinks the heading to its content, which means
   `text-align` on the heading itself can't position it. When the editor
   sets alignment, promote to block-level flex and use justify-content
   to place the text+arrow within the full-width line box. */
.is-style-arrow.has-text-align-center {
	display: flex;
	justify-content: center;
}

.is-style-arrow.has-text-align-right {
	display: flex;
	justify-content: flex-end;
}

/* "Section eyebrow" heading style — registered for core/heading in
   inc/patterns.php. Small uppercase Noto Sans label with an 8px
   nootka-rose left border. Used above sidebar navs and other small
   section breaks. Hardcoded at 16px because this is a UI label, not
   part of the display-scale hierarchy — sized independently of which
   heading level (h2/h3/…) the editor chose for semantics. */
.is-style-section-eyebrow {
	font-family: var(--wp--preset--font-family--noto-sans);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.42;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--soft-black-500);
	border-left: 8px solid var(--wp--preset--color--nootka-rose-900);
	padding: 0 0 0 16px;
}

/* When the eyebrow style is applied to a core/post-terms block (e.g. the
   category label atop single posts), the term text renders as <a> links —
   keep them in the eyebrow's soft-black, no underline. */
.wp-block-post-terms.is-style-section-eyebrow a {
	color: var(--wp--preset--color--soft-black-500);
	text-decoration: none;
}

/* Links inside headings — no underline, Poppy on hover (matches aux nav). */
.wp-block-heading a {
	text-decoration: none;
}

.wp-block-heading a:hover,
.wp-block-heading a:focus {
	color: var(--wp--preset--color--poppy-500) !important;
	text-decoration: none;
}

/* "Arrow link" / "Arrow links" — bold poppy links followed by a small
   right-arrow. Font-size inherits from context so the style adapts to
   wherever it's dropped in; patterns can bump the size locally.

   Three registration points (see inc/patterns.php):
     - .is-style-arrow-link on core/paragraph or core/list-item — single CTA
     - .is-style-arrow-links on core/list — whole vertical stack of links
   Both end up styling each <a> inside the same way. */
.is-style-arrow-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Bump specificity (chain .wp-block-list) so this beats Ollie parent's
   `.wp-block-post-content ul li { margin-bottom: … }` injection — flex gap
   handles inter-item spacing here, so the bottom margin would be additive.
   Last item keeps a margin-bottom so the list has trailing space before
   whatever follows it. */
.wp-block-list.is-style-arrow-links li {
	margin: 0;
}

.wp-block-list.is-style-arrow-links li:last-child {
	margin-bottom: 12px;
}

.is-style-arrow-link a,
.is-style-arrow-links a,
a.is-style-arrow-link,
a.is-style-arrow-link-back {
	font-family: var(--wp--preset--font-family--noto-sans);
	font-weight: 700;
	/* Darker than poppy-900 (#e3264c) for WCAG AA: poppy-900 only hits 4.07:1 on
	   Oatmeal (fails 4.5:1) and 4.52:1 on white (barely passes). #C71A3C reaches
	   5.2:1 on Oatmeal and 5.8:1 on white — passes on every LFBC background while
	   staying recognizably poppy. Scoped to arrow-links only; the poppy accent is
	   unchanged elsewhere. */
	color: #C71A3C;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color 200ms ease-out;
}

/* On backgrounds where the brighter poppy still clears AA — the 50/50 pattern,
   all card variants, and the rich-content patterns (all white/light bg) —
   restore the original poppy-900 so the accent stays vibrant. The darker
   #C71A3C above is only needed on Oatmeal. */
.lfbc-5050 .is-style-arrow-link a,
.lfbc-5050 .is-style-arrow-links a,
.lfbc-5050 a.is-style-arrow-link,
.lfbc-5050 a.is-style-arrow-link-back,
[class*="lfbc-card"] .is-style-arrow-link a,
[class*="lfbc-card"] .is-style-arrow-links a,
[class*="lfbc-card"] a.is-style-arrow-link,
[class*="lfbc-card"] a.is-style-arrow-link-back,
.lfbc-rich-content .is-style-arrow-link a,
.lfbc-rich-content .is-style-arrow-links a,
.lfbc-rich-content a.is-style-arrow-link,
.lfbc-rich-content a.is-style-arrow-link-back {
	color: var(--wp--preset--color--poppy-900);
}

/* Hover — fade the poppy link (and its currentColor arrow) to soft-black. */
.is-style-arrow-link a:hover,
.is-style-arrow-links a:hover,
a.is-style-arrow-link:hover,
a.is-style-arrow-link-back:hover {
	color: var(--wp--preset--color--soft-black-500);
}

.is-style-arrow-link a::after,
.is-style-arrow-links a::after,
a.is-style-arrow-link::after,
a.is-style-arrow-link-back::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url(../images/icons/arrow-right.svg) no-repeat center / contain;
	        mask: url(../images/icons/arrow-right.svg) no-repeat center / contain;
}

/* Back variant — arrow precedes the text and points left (reuses the same
   right-arrow SVG mask, flipped horizontally). Used on query-pagination
   "Previous Page". */
a.is-style-arrow-link-back::before {
	-webkit-transform: scaleX(-1);
	        transform: scaleX(-1);
}

/* Query pagination (search results) — breathing room above the nav and a
   slightly larger, bold Previous/Next label. */
.wp-block-query-pagination {
	margin-top: 2.5rem;
}

.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: 700;
}

.wp-block-query-pagination .wp-block-query-pagination-previous::before,
.wp-block-query-pagination .wp-block-query-pagination-next::after {
	width: 17px;
	height: 15px;
}

/* Global list styling for body content.
 *
 * Targets the WP list block (`ul.wp-block-list`, `ol.wp-block-list`) so menus,
 * search results, and other markup-level lists stay untouched. The arrow-links
 * variant opts back out via its own rules above (list-style: none).
 *
 * Markers use the nootka-rose-900 accent: bullets are bold filled disks,
 * numbers are Skeena Indigenous Bold to match Figma. ::marker font/color is
 * widely supported in modern browsers. */
ul.wp-block-list,
ol.wp-block-list {
	padding-inline-start: 28px;
	margin-block: 16px 0;
}

ul.wp-block-list > li,
ol.wp-block-list > li {
	margin-block-end: 8px;
	color: var(--wp--preset--color--soft-black-500);
	font-family: var(--wp--preset--font-family--noto-sans);
	font-size: 16px;
	line-height: 1.5;
}

ul.wp-block-list > li:last-child,
ol.wp-block-list > li:last-child {
	margin-block-end: 0;
}

ul.wp-block-list > li::marker {
	color: var(--wp--preset--color--nootka-rose-900);
	font-family: "Arial Black", sans-serif;
	font-weight: 900;
	font-size: 1em;
}

ol.wp-block-list > li::marker {
	color: var(--wp--preset--color--nootka-rose-900);
	font-family: var(--wp--preset--font-family--skeena-indigenous);
	font-weight: 700;
	font-size: 1.05em;
}

/* Single post byline (templates/single.html) — Author · Date.
 *
 * The "·" separator is a ::before on the date rather than its own block, so
 * it disappears on its own when the theme's render_block_core/post-author
 * filter hides the author for a post flagged _lfbc_hide_author — no extra
 * logic needed to also strip a separate separator element. */
.lfbc-post-byline .wp-block-post-author ~ .wp-block-post-date::before {
	content: "·";
	margin-right: 10px;
}