/**
 * JSD Deal Archive
 *
 * The chrome around an archive: the meta line above the grid, pagination, and
 * the empty state. The grid itself is the shared compact grid, and the cards
 * style themselves — nothing here reaches into either.
 *
 * Section padding, the 1280px measure and the white ground all come from
 * section.css. This file only adds what an archive needs and a homepage row
 * does not.
 */

/*
 * Kadence gives the content area an 80px vertical margin on archives, which is
 * the theme's own answer to a boxed post list. A JSD archive is full-bleed and
 * every section carries its own padding, so that margin only opens a gap
 * between the site header and the masthead. Written at three classes to beat
 * the theme's two-class rule regardless of stylesheet order.
 */
.jsd-archive-area.jsd-archive-area.jsd-archive-area {
	margin-top: 0;
	margin-bottom: 0;
}

/*
 * Archive sections start tighter than homepage sections: the masthead directly
 * above already carries its own bottom padding and a hairline, so the usual
 * 40px would read as a gap rather than as spacing.
 */
.jsd-section--archive {
	padding-top: 32px;
}

/* Meta line -------------------------------------------------------------- */

.jsd-archive__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 24px;
	margin: 0 0 16px;
}

.jsd-archive .jsd-archive__count {
	margin: 0;
	color: #767676;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

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

.jsd-archive-pagination {
	margin: 48px 0 0;
	padding-top: 28px;
	border-top: 1px solid #e5e5e5;
}

.jsd-archive-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jsd-archive-pagination__item {
	margin: 0;
}

/*
 * Every control is the same 44px square whether it is a link, the current page
 * or an ellipsis, so the row keeps its rhythm and every target is comfortably
 * tappable.
 */
.jsd-archive-pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #e5e5e5;
	border-radius: 2px;
	background: #ffffff;
	color: #111111;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.jsd-archive-pagination__item a.page-numbers:hover {
	border-color: #111111;
	color: #000000;
}

/*
 * The current page is filled black rather than merely tinted: it has to be
 * distinguishable without relying on colour perception, and a solid block
 * reads at any contrast setting.
 */
.jsd-archive-pagination__item .page-numbers.current {
	border-color: #000000;
	background: #000000;
	color: #ffffff;
}

.jsd-archive-pagination__item .page-numbers.dots {
	border-color: transparent;
	color: #a8a8a8;
}

.jsd-archive-pagination__item .page-numbers.prev,
.jsd-archive-pagination__item .page-numbers.next {
	padding: 0 18px;
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

.jsd-archive-pagination__item a.page-numbers:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

/* Empty state ------------------------------------------------------------ */

/*
 * An empty archive is a real destination, not an error. It says what is true —
 * nothing qualifies right now — and hands the reader somewhere to go. It never
 * implies that JSD has just checked every retailer.
 */
.jsd-archive-empty {
	max-width: 640px;
	margin: 8px 0 24px;
	padding: 40px 0 0;
	border-top: 1px solid #e5e5e5;
}

.jsd-archive .jsd-archive-empty__title {
	margin: 0;
	color: #000000;
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-transform: uppercase;
}

.jsd-archive .jsd-archive-empty__text {
	margin: 14px 0 0;
	color: #333333;
	font-size: 1rem;
	line-height: 1.7;
}

.jsd-archive .jsd-archive-empty__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.jsd-archive .jsd-archive-empty__links li {
	margin: 0;
}

.jsd-archive .jsd-archive-empty__link {
	color: #111111;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px solid #111111;
	padding-bottom: 3px;
}

.jsd-archive .jsd-archive-empty__link:hover {
	color: #000000;
	border-bottom-color: #000000;
}

.jsd-archive .jsd-archive-empty__link:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 3px;
}

/* Search ----------------------------------------------------------------- */

.jsd-archive-empty__search {
	margin: 36px 0 0;
}

.jsd-archive .jsd-archive-empty__label {
	display: block;
	margin: 0 0 8px;
	color: #111111;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.jsd-archive-empty__row {
	display: flex;
	gap: 10px;
	max-width: 480px;
}

.jsd-archive .jsd-archive-empty__input {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	height: 51px;
	padding: 0 16px;
	border: 1px solid #e5e5e5;
	border-radius: 2px;
	background: #ffffff;
	color: #111111;
	/* 16px keeps iOS from zooming the page on focus. */
	font-size: 16px;
}

.jsd-archive .jsd-archive-empty__input::placeholder {
	color: #767676;
	opacity: 1;
}

/*
 * Focus is drawn with `outline` rather than `border-color` or `box-shadow`:
 * both of those are set on inputs elsewhere in the stack at a specificity this
 * file cannot beat, and an inset outline shifts nothing when it appears.
 */
.jsd-archive .jsd-archive-empty__input:focus {
	outline: 2px solid #111111;
	outline-offset: -2px;
}

.jsd-archive .jsd-archive-empty__submit {
	box-sizing: border-box;
	flex: 0 0 auto;
	height: 51px;
	padding: 0 26px;
	border: 1px solid #000000;
	border-radius: 2px;
	background: #000000;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.jsd-archive .jsd-archive-empty__submit:hover {
	border-color: #333333;
	background: #333333;
}

.jsd-archive .jsd-archive-empty__submit:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 782px) {
	.jsd-section--archive {
		padding-top: 24px;
	}

	.jsd-archive-pagination {
		margin-top: 36px;
	}

	.jsd-archive-empty {
		padding-top: 32px;
	}

	.jsd-archive-empty__row {
		flex-direction: column;
		max-width: none;
	}

	.jsd-archive .jsd-archive-empty__submit {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jsd-archive-pagination__item .page-numbers,
	.jsd-archive .jsd-archive-empty__submit {
		transition: none;
	}
}