/**
 * Horizon Core: THE PAGINATION COMPONENT (HORIZON-20260926-027).
 *
 * Markup comes from src/Content/pagination.php (hp_render_pagination). This file is
 * its structure and rhythm, once, for every roster, episode, news and search
 * listing on the fleet. The SKIN belongs to the site: every colour, font, radius
 * and duration is an --hp-* token with a fallback, so Trashy Imports is neon,
 * FeatureNews is gold (its theme bridges --fnv-* to --hp-*) and a tenant with no
 * tokens at all still gets a legible control.
 *
 * HOW IT WINS: enqueued late (priority 999, no dependencies) and body-prefixed, so
 * a theme's single-class rules cannot outrank it by accident.
 * Phones: every target is 44px tall; nothing is under 12px; the two step controls
 * take one full row each side so the thumb reaches them, numbers sit beneath.
 */

/* ── Row ────────────────────────────────────────────────────────────────── */
body .hp-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 14px;
	margin-top: var(--hp-sp-12, 3rem);
	padding-top: var(--hp-sp-6, 1.5rem);
	border-top: 1px solid var(--hp-border, rgba(128, 128, 128, 0.25));
	font-family: var(--hp-font-display, inherit);
}

/* ── Previous / Next ────────────────────────────────────────────────────── */
body .hp-pagination__step {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 18px;
	border: 1px solid var(--hp-border-strong, rgba(128, 128, 128, 0.45));
	border-radius: var(--hp-r-sm, 2px);
	background: transparent;
	color: var(--hp-text, #f3f3f3);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	transition: border-color var(--hp-dur, 150ms) var(--hp-ease, ease),
	            color var(--hp-dur, 150ms) var(--hp-ease, ease),
	            box-shadow var(--hp-dur, 150ms) var(--hp-ease, ease),
	            transform var(--hp-dur, 150ms) var(--hp-ease, ease);
}
body .hp-pagination__step .hp-pagination__icon {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform var(--hp-dur, 150ms) var(--hp-ease, ease);
}
body a.hp-pagination__step:hover,
body a.hp-pagination__step:focus-visible {
	border-color: var(--hp-gold, #c9a84c);
	color: var(--hp-gold, #c9a84c);
	box-shadow: 0 0 0 3px var(--hp-gold-muted, transparent);
}
body a.hp-pagination__step--prev:hover .hp-pagination__icon { transform: translateX(-3px); }
body a.hp-pagination__step--next:hover .hp-pagination__icon { transform: translateX(3px); }
body .hp-pagination__step.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* ── Numbers ────────────────────────────────────────────────────────────── */
body .hp-pagination__pages {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
body .hp-pagination__pages li {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* The whole visible defect on an unstyled theme is the bullet. Kill both forms. */
body .hp-pagination__pages li::before,
body .hp-pagination__pages li::marker {
	display: none;
	content: none;
}
body .hp-pagination__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--hp-border, rgba(128, 128, 128, 0.25));
	border-radius: var(--hp-r-sm, 2px);
	background: transparent;
	color: var(--hp-text-muted, #a0a0a0);
	font-size: 0.875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	text-decoration: none;
	line-height: 1;
	transition: border-color var(--hp-dur, 150ms) var(--hp-ease, ease),
	            color var(--hp-dur, 150ms) var(--hp-ease, ease),
	            box-shadow var(--hp-dur, 150ms) var(--hp-ease, ease);
}
body a.hp-pagination__page:hover,
body a.hp-pagination__page:focus-visible {
	border-color: var(--hp-gold, #c9a84c);
	color: var(--hp-text, #f3f3f3);
	box-shadow: 0 0 0 3px var(--hp-gold-muted, transparent);
}
body .hp-pagination__page.is-current {
	background: var(--hp-gold, #c9a84c);
	border-color: var(--hp-gold, #c9a84c);
	color: var(--hp-bg, #0a0a0a);
	box-shadow: 0 0 0 4px var(--hp-gold-muted, transparent);
	cursor: default;
}
body .hp-pagination__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 44px;
	color: var(--hp-text-muted, #a0a0a0);
	letter-spacing: 0.1em;
}

/* ── Summary line ───────────────────────────────────────────────────────── */
body .hp-pagination__summary {
	flex-basis: 100%;
	margin: 4px 0 0;
	text-align: center;
	font-family: var(--hp-font-display, inherit);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hp-text-muted, #a0a0a0);
}

/* ── Focus ──────────────────────────────────────────────────────────────── */
body .hp-pagination a:focus-visible {
	outline: 2px solid var(--hp-gold, #c9a84c);
	outline-offset: 3px;
}

/* ── Phones and portrait tablets: steps on the first row, numbers beneath,
   summary last. Up to 767px, not 599px: measured at ~700px the desktop row
   wrapped and stranded "Next" alone on a second line, which is the one
   arrangement this layout must never produce. ─────────────────────────── */
@media (max-width: 767px) {
	body .hp-pagination { gap: 12px; }
	body .hp-pagination__step { flex: 1 1 0; justify-content: center; padding: 0 12px; }
	body .hp-pagination__step--prev { order: 1; }
	body .hp-pagination__step--next { order: 2; }
	body .hp-pagination__pages { order: 3; flex-basis: 100%; justify-content: center; }
	body .hp-pagination__summary { order: 4; }
}

@media (prefers-reduced-motion: reduce) {
	body .hp-pagination__step,
	body .hp-pagination__step .hp-pagination__icon,
	body .hp-pagination__page { transition: none; }
	body a.hp-pagination__step:hover .hp-pagination__icon { transform: none; }
}