/**
 * Recipe listings: /recipes/, cuisine and recipe-category archives.
 * Same tokens as recipe.css (Elementor globals with fallbacks); every rule is
 * scoped under .hc-archive so Elementor kit and Hello reset styles don't win.
 */

.hc-archive {
	--hc-red: var(--e-global-color-primary, #ED2226);
	--hc-text: var(--e-global-color-text, #202020);
	--hc-font: var(--e-global-typography-text-font-family, "canada-type-gibson"), "Helvetica Neue", Arial, sans-serif;
	--hc-gutter: 24px;
	--hc-container: 1200px;
	--hc-small: 15px;
	--hc-title-size: 30px;
	--hc-title-lh: 33px;
	--hc-section-size: 26px;

	color: var(--hc-text);
	font-family: var(--hc-font);
	font-weight: 300;
	padding-bottom: 80px;
}

@media (min-width: 768px) {
	.hc-archive { --hc-gutter: 40px; --hc-section-size: 35px; }
}

@media (min-width: 1025px) {
	.hc-archive {
		--hc-small: 18px;
		--hc-title-size: var(--e-global-typography-secondary-font-size, 70px);
		--hc-title-lh: var(--e-global-typography-secondary-line-height, 80px);
		padding-bottom: 120px;
	}
}

@media (min-width: 1920px) {
	.hc-archive { --hc-container: 1640px; }
}

.hc-archive .hc-archive__hero {
	margin: 0;
	height: clamp(200px, 31vw, 500px);
	overflow: hidden;
}

.hc-archive .hc-archive__hero-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.hc-archive .hc-archive__inner {
	box-sizing: content-box;
	max-width: var(--hc-container);
	margin-inline: auto;
	padding-inline: var(--hc-gutter);
}

/* ---------- Header ---------- */

.hc-archive .hc-archive__header {
	max-width: 810px;
	padding-top: clamp(40px, 6vw, 100px);
}

.hc-archive .hc-archive__eyebrow {
	margin: 0 0 12px;
	color: var(--hc-red);
	font-size: var(--hc-small);
	font-weight: 500;
}

.hc-archive .hc-archive__eyebrow a { color: inherit; text-decoration: none; }
.hc-archive .hc-archive__eyebrow a:hover { text-decoration: underline; }

.hc-archive .hc-archive__title {
	margin: 0 0 32px;
	color: var(--hc-text);
	font-family: var(--hc-font);
	font-size: var(--hc-title-size);
	font-weight: 700;
	line-height: var(--hc-title-lh);
}

.hc-archive .hc-archive__intro {
	margin-bottom: 32px;
	font-size: var(--hc-small);
	line-height: 1.5;
}

.hc-archive .hc-archive__intro p { margin: 0 0 12px; }
.hc-archive .hc-archive__intro p:last-child { margin-bottom: 0; }

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

.hc-archive .hc-recipe-search {
	display: flex;
	gap: 12px;
	max-width: 560px;
}

.hc-archive .hc-recipe-search__input {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid var(--hc-text);
	border-radius: 999px;
	font-family: var(--hc-font);
	font-size: 16px;
}

.hc-archive .hc-recipe-search__submit,
.hc-archive .hc-load-more {
	padding: 12px 24px;
	border: 1px solid var(--hc-red);
	border-radius: 999px;
	background: var(--hc-red);
	color: #fff;
	font-family: var(--hc-font);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}

.hc-archive .hc-recipe-search__submit:hover,
.hc-archive .hc-load-more:hover { background: #fff; color: var(--hc-red); }

/* ---------- Cuisine / category links ---------- */

.hc-archive .hc-cuisine-nav { margin: 40px 0 0; }

.hc-archive .hc-cuisine-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hc-archive .hc-cuisine-nav a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--hc-text);
	border-radius: 999px;
	color: var(--hc-text);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.hc-archive .hc-cuisine-nav a:hover,
.hc-archive .hc-cuisine-nav a[aria-current="page"] {
	border-color: var(--hc-red);
	background: var(--hc-red);
	color: #fff;
}

/* ---------- Sections and grid ---------- */

.hc-archive .hc-favourites,
.hc-archive .hc-listing,
.hc-archive .hc-from-blog { margin-top: clamp(56px, 7vw, 96px); }

.hc-archive .hc-section-title {
	margin: 0 0 40px;
	color: var(--hc-text);
	font-family: var(--hc-font);
	font-size: var(--hc-section-size);
	font-weight: 600;
	line-height: 1.15;
}

.hc-archive .hc-grid {
	display: grid;
	gap: 48px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.hc-archive .hc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
	.hc-archive .hc-grid { grid-template-columns: repeat(3, 1fr); }
}

.hc-archive .hc-card__link,
.hc-archive .hc-card__link:hover,
.hc-archive .hc-card__link:focus {
	display: block;
	color: var(--hc-text);
	text-decoration: none;
}

.hc-archive .hc-card__link:focus-visible {
	outline: 2px solid var(--hc-red);
	outline-offset: 4px;
	border-radius: 20px;
}

.hc-archive .hc-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 20px;
}

.hc-archive .hc-card__eyebrow {
	display: block;
	margin: 24px 0 10px;
	color: var(--hc-red);
	font-size: var(--e-global-typography-accent-font-size, 18px);
	font-weight: 500;
	line-height: 1.3;
}

.hc-archive h3.hc-card__title {
	margin: 0;
	color: var(--hc-text);
	font-family: var(--hc-font);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
}

@media (min-width: 1025px) {
	.hc-archive h3.hc-card__title { font-size: 30px; }
}

/* Fact card */
.hc-archive .hc-card__fyi {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	min-height: 260px;
	box-sizing: border-box;
	padding: 32px;
	border-radius: 20px;
	background: var(--e-global-color-accent, #81EAE7);
}

.hc-archive .hc-card--fyi .hc-card__eyebrow { margin-top: 0; }

.hc-archive .hc-card__fact {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
}

.hc-archive .hc-card__more { color: var(--hc-text); font-weight: 500; }

/* ---------- Pagination / load more ---------- */

.hc-archive .hc-pagination { margin-top: 56px; text-align: center; }

.hc-archive .hc-pagination__status { margin: 0 0 16px; font-size: 15px; }

.hc-archive .hc-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hc-archive .hc-pagination .page-numbers a,
.hc-archive .hc-pagination .page-numbers span {
	display: inline-block;
	min-width: 44px;
	padding: 10px 14px;
	box-sizing: border-box;
	border: 1px solid var(--hc-text);
	border-radius: 999px;
	color: var(--hc-text);
	text-decoration: none;
}

.hc-archive .hc-pagination .page-numbers .current {
	border-color: var(--hc-red);
	background: var(--hc-red);
	color: #fff;
}

.hc-archive .hc-load-more-wrap { margin-top: 56px; text-align: center; }

.hc-archive .hc-listing__empty { font-size: var(--hc-small); }

/* ---------- Breadcrumbs (Rank Math) ---------- */

.hc-archive .rank-math-breadcrumb {
	padding-top: 24px;
	font-size: 14px;
	line-height: 1.4;
}

.hc-archive .rank-math-breadcrumb p { margin: 0; }

.hc-archive .rank-math-breadcrumb a {
	color: var(--hc-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hc-archive .rank-math-breadcrumb .separator { margin: 0 6px; opacity: .6; }

.hc-archive .rank-math-breadcrumb .last { opacity: .75; }