/* ==========================================================================
   rw-a11y — "Load more" control
   --------------------------------------------------------------------------
   Deliberately mirrors the site's existing pill button (Breakdance's
   `button-atom--custom`) so the archives gain no new visual language. The
   palette custom properties are referenced directly rather than hard-coded,
   so the control follows the brand if those tokens are ever retuned; the hex
   values are only fallbacks for when the variables aren't defined.
   ========================================================================== */

.rw-loadmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	margin: 2rem 0 0;
	text-align: center;

	/*
	 * Post loops are frequently wrapped in a Breakdance entrance animation,
	 * which holds the whole block at `visibility: hidden` until it is scrolled
	 * into view. Anything inside an invisible subtree cannot take focus, which
	 * would leave this control inoperable by keyboard (SC 2.1.1) at exactly
	 * the moment it matters. `visibility` is inherited, so re-asserting it
	 * here exempts the control — and only the control — from that.
	 */
	visibility: visible !important;

	/*
	 * Suppress browser scroll anchoring around the control. When a batch is
	 * appended, the browser picks an anchor node — almost always this button,
	 * being the nearest stable box to the viewport — and scrolls the document
	 * to keep it visually still. Inserting ~2,400px of cards therefore scrolls
	 * the page down by ~2,400px, landing the entire new batch above the fold.
	 * Measured on /?s=changed at 1280x900: scrollY 1973 -> 4808 (+2835), with
	 * the first new card sitting at -1333px.
	 *
	 * The script pins scrollY too; this is the half that stops the adjustment
	 * being generated at all, rather than correcting it afterwards.
	 */
	overflow-anchor: none;
}

/*
 * The anchor node can equally be chosen from inside the grid, so the whole
 * enhanced loop opts out — not just the button.
 */
[data-rw-loadmore],
[data-rw-loadmore] .bde-loop {
	overflow-anchor: none;
}

/*
 * Retire the numbered pagination once the button has taken over.
 *
 * The `hidden` attribute alone is not enough: Breakdance's posts.css declares
 * `.bde-posts-pagination { display: flex }`, which has the same specificity as
 * normalize's `[hidden] { display: none }` but loads later and therefore wins.
 * Without this the archive renders both controls at once.
 */
.bde-posts-pagination[hidden] {
	display: none !important;
}

.rw-loadmore__btn {
	/* WCAG 2.2 SC 2.5.8 — comfortably past the 24x24 minimum this replaces. */
	min-height: 44px;
	padding: 12px 28px;

	border: 1px solid var(--bde-palette-color-1-7bd7acce-43b5-4c09-a96d-8558f5df4e5d, #83a8bc);
	border-radius: 100px;

	background-color: var(--bde-palette-color-1-840758d1-d57f-4d57-8528-c7c4268637f4, #141a1d);
	color: var(--bde-palette-color-1-e2ecb920-285e-4c2d-a19c-dcbf442731a5, #faf7f3);

	font-family: Montserrat, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1.25px;
	text-transform: uppercase;
	line-height: 1;

	cursor: pointer;
	transition: opacity 0.15s ease;
}

.rw-loadmore__btn:hover {
	opacity: 0.85;
}

/* Busy state. `aria-disabled` rather than `disabled` so focus survives the
   round trip — see the note in loadmore.js. */
.rw-loadmore__btn[aria-disabled="true"] {
	cursor: default;
	opacity: 0.65;
}

/* The focus ring comes from a11y.css (currentColor). Against the dark button
   that resolves to the light label colour, so it stays clearly visible. */

.rw-loadmore__status {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-size: 13px;

	/* Warm Ink — 8.88:1 on Parchment, comfortably past 4.5:1. */
	color: var(--bde-palette-color-1-40e890b3-75da-4bf0-965e-6a442d00fb00, #4a453f);
}

/* Focus lands here only when the button is removed at the end of the archive;
   it is not a tab stop, so a ring would be misleading. */
.rw-loadmore__status:focus {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.rw-loadmore__btn {
		transition: none;
	}
}