/**
 * Category archive styles.
 *
 * Only what the archive layout needs on top of the design system: the head
 * block, the two-column card grid inside the main column, and pagination.
 * Cards, media, typography and metadata all come from existing primitives.
 *
 * The right sidebar is deliberately left alone, so it keeps GeneratePress's
 * own widget styling.
 *
 * Loaded on category archives only, enqueued by inc/archive.php.
 *
 * @package GeneratePress_Child
 */

/* GeneratePress boxes the main column when separate-containers is active, and
   its own margin is what normally supplies the mobile gutters and the gap
   beside the sidebar. Dropping the box means supplying that spacing here, using
   the same gutter token the homepage container uses so both match. */
/* The horizontal gutter token lives in homepage.css, which archives do not
   load, so it is declared here for the archive scope. Same value, so the two
   templates keep identical edge spacing. */
.ha-archive {
	--ha-gutter: clamp(1rem, 4vw, 2.5rem);
	--ha-section: clamp(2rem, 5vw, 3.5rem);
}

.ha-archive .site-main {
	margin: 0;
	padding: var(--ha-section) var(--ha-gutter);
	background: none;
}

.ha-archive__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ha-gap-lg);
}

/* --------------------------------------------------------------------------
   Head
   -------------------------------------------------------------------------- */

.ha-archive__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding-bottom: 0.9rem;
	border-bottom: var(--ha-border-width) solid var(--ha-rule-strong);
}

.ha-archive__intro {
	margin: 0;
}

.ha-archive__count {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Listing
   -------------------------------------------------------------------------- */

/* Narrower track floor than the homepage default: this grid lives inside the
   main column beside the sidebar, so 20rem lands two cards per row on desktop
   and one on mobile. */
.ha-archive__grid {
	--ha-grid-min: 20rem;
	align-items: start;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

/* GeneratePress filters navigation_markup_template and removes the <nav>
   wrapper WordPress would normally emit, so the links arrive as a bare
   .nav-links div. That is what these rules target. */
.ha-archive__inner .nav-links {
	margin: 0;
	padding-top: var(--ha-gap);
	border-top: var(--ha-border-width) solid var(--ha-rule);
}

.ha-archive__inner .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.ha-archive__inner .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	font-family: var(--ha-font-body);
	font-size: var(--ha-size-small);
	font-weight: 600;
	line-height: 1;
	color: var(--ha-ink);
	text-decoration: none;
	background-color: transparent;
	border: var(--ha-border-width) solid var(--ha-rule-strong);
	border-radius: var(--ha-radius);
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.ha-archive__inner .nav-links a.page-numbers:hover,
.ha-archive__inner .nav-links a.page-numbers:focus-visible {
	color: var(--ha-accent-deep);
	border-color: var(--ha-accent-mid);
}

.ha-archive__inner .nav-links .page-numbers.current {
	color: var(--ha-bg);
	background-color: var(--ha-ink);
	border-color: var(--ha-ink);
}

.ha-archive__inner .nav-links .page-numbers.dots {
	border-color: transparent;
	color: var(--ha-ink-soft);
}