/* -------------------------------------------------------------------------
 * Main stylesheet — RecipoHub (theme v2).
 *
 * Palette & type scale are documented in docs/style-guide.md.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Design tokens
 * ---------------------------------------------------------------------- */
:root {
	/* Backgrounds */
	--rh-cream: #f7f5ef;          /* base */
	--rh-sand: #edeee3;           /* alt / section */
	--rh-white: #ffffff;          /* card surface */

	/* Text */
	--rh-ink: #1f2a1d;            /* headings */
	--rh-ink-soft: #4a4f42;       /* body */
	--rh-muted: #7c8570;          /* meta / labels */

	/* Brand — 100% green monochromatic palette. Tonal variation only:
	   no orange, purple, teal, or black anywhere in icons/badges/buttons. */
	--rh-primary: #4a7a4c;        /* primary / CTA */
	--rh-primary-hover: #3b6440;  /* primary hover */

	/* Category accents (exact per-category greens from the spec) */
	--rh-cat-guides: #8fa888;
	--rh-cat-savory: #5e8c5a;
	--rh-cat-sweet: #a3b98f;
	--rh-cat-healthy: #3f6b44;
	--rh-cat-world: #6e9b72;
	--rh-cat-drinks: #2f5233;

	/* Structure */
	--rh-border: #d9dcc8;
	--rh-star: #4a7a4c;           /* stars use the green primary — never orange */
	--rh-scrim: linear-gradient(to top, rgba(20, 30, 15, 0.75) 0%, rgba(0, 0, 0, 0) 55%);

	/* Type */
	--rh-font-display: "Lora", Georgia, "Times New Roman", serif;
	--rh-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--rh-label: 0.8125rem;        /* 13px meta/labels */
	--rh-label-ls: 0.05em;

	/* Radius / shadow (8px base unit scale) */
	--rh-radius: 12px;
	--rh-radius-sm: 8px;
	--rh-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	--rh-shadow-lg: 0 8px 30px rgba(31, 42, 29, 0.12);

	/* Spacing (base 8px) */
	--rh-space-1: 8px;
	--rh-space-2: 16px;
	--rh-space-3: 24px;
	--rh-space-4: 32px;
	--rh-space-5: 40px;
	--rh-space-6: 48px;
	--rh-space-8: 64px;
	--rh-space-10: 80px;
	--rh-section-py: 72px;
	--rh-gap-card: 24px;
	--rh-card-pad: 16px;

	--rh-container: 1140px;
	--rh-content: 760px;
}

/* -------------------------------------------------------------------------
 * Reset / base
 * ---------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Keep [hidden] authoritative: author `display` rules (grid, inline-block,
   flex) otherwise win over the UA sheet's `[hidden] { display: none }`,
   which would leave every tab panel and utility promo visible at once. */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--rh-cream);
	color: var(--rh-ink-soft);
	font-family: var(--rh-font-body);
	font-size: 1rem;          /* 16px body */
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--rh-primary-hover);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--rh-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--rh-font-display);
	font-weight: 600;
	line-height: 1.25;
	color: var(--rh-ink);
	margin: 1.6em 0 0.6em;
}

h1 { font-size: clamp(2.5rem, 4.5vw, 3rem); }  /* 40–48px */
h2 { font-size: clamp(1.75rem, 3.2vw, 2rem); } /* 28–32px */
h3 { font-size: 1.25rem; }                     /* 20px */

p { margin: 0 0 1.25em; }

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--rh-primary);
	color: #fff;
	padding: 0.6rem 1.2rem;
	z-index: 1000;
	border-radius: 0 0 var(--rh-radius-sm) 0;
}

.skip-link:focus {
	left: 0;
	color: #fff;
}

.rh-container {
	max-width: var(--rh-container);
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */
.rh-btn,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
	display: inline-block;
	background: var(--rh-primary);
	color: #fff !important;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 12px 24px;
	border: none;
	border-radius: var(--rh-radius-sm);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.rh-btn:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--rh-primary-hover);
	transform: translateY(-1px);
}

.rh-btn--outline {
	background: transparent;
	color: var(--rh-primary) !important;
	border: 1.5px solid var(--rh-primary);
}

.rh-btn--outline:hover {
	background: var(--rh-primary);
	color: #fff !important;
}

/* -------------------------------------------------------------------------
 * Header — sticky nav with search + category dropdown
 * ---------------------------------------------------------------------- */
.rh-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(247, 245, 239, 0.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--rh-border);
	box-shadow: none;
	transition: box-shadow 0.2s ease;
}

/* Subtle shadow once the page is scrolled (main.js toggles the class). */
.rh-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(31, 42, 29, 0.08);
}

.rh-header__inner {
	display: flex;
	align-items: center;
	flex-wrap: nowrap; /* one row, always */
	gap: 0.6rem 1rem;
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
	min-width: 0;
}

.rh-site-branding {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
}

.rh-site-branding .custom-logo {
	max-height: 48px;
	width: auto;
}

.rh-site-title {
	font-family: var(--rh-font-display);
	font-size: 1.55rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.1;
}

.rh-site-title a {
	color: var(--rh-ink);
}

.rh-site-title a span {
	color: var(--rh-primary);
}

.rh-nav {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0.25rem;
	min-width: 0;
}

/* Right cluster: expanding search + saved + hamburger. */
.rh-header-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: auto;
	flex-shrink: 0;
}

.rh-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.rh-nav a {
	display: block;
	padding: 0.55rem 0.7rem;
	color: var(--rh-ink);
	font-weight: 500;
	font-size: 0.95rem;
	border-radius: var(--rh-radius-sm);
	white-space: nowrap;
}

.rh-nav a:hover,
.rh-nav .current-menu-item > a {
	color: var(--rh-primary);
	background: var(--rh-sand);
}

/* Dropdown (categories) */
.rh-nav .menu-item-has-children {
	position: relative;
}

.rh-nav .menu-item-has-children > a::after {
	content: "\25BE";
	margin-left: 0.35rem;
	font-size: 0.75em;
}

.rh-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius-sm);
	box-shadow: var(--rh-shadow-lg);
	padding: 0.4rem;
	display: none;
	flex-direction: column;
	gap: 0;
}

.rh-nav .menu-item-has-children:hover > .sub-menu,
.rh-nav .menu-item-has-children:focus-within > .sub-menu {
	display: flex;
}

.rh-nav .sub-menu a {
	padding: 0.5rem 0.8rem;
	white-space: nowrap;
}

/* Header search */
.rh-header-search {
	flex-shrink: 1;
	min-width: 0;
}

.rh-header-search form {
	display: flex;
	align-items: center;
	max-width: 100%;
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: 999px;
	overflow: visible;
}

.rh-header-search input[type="search"] {
	border: none;
	background: transparent;
	padding: 0.45rem 0.9rem;
	width: 150px;
	max-width: 100%;
	outline: none;
	font-size: 0.9rem;
}

/* Expanding search: collapsed = icon only; open = input slides out. */
.rh-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	color: var(--rh-ink);
	cursor: pointer;
	border-radius: 999px;
}

.rh-search-toggle:hover {
	color: var(--rh-primary);
	background: var(--rh-sand);
}

.rh-header-search {
	position: relative;
	display: flex;
	align-items: center;
}

.rh-header-search__panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 400;
}

.rh-header-search__panel .rh-search {
	display: flex;
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: 999px;
	box-shadow: var(--rh-shadow-lg);
	overflow: visible;
}

.rh-header-search__panel input[type="search"] {
	border: none;
	background: transparent;
	padding: 0.6rem 0.35rem 0.6rem 1rem;
	width: min(72vw, 320px);
	outline: none;
	font-size: 0.95rem;
}

/* When open, the panel replaces the icon visually: keep the toggle on top
   so it can close it, and highlight it while active. */
.rh-search-toggle[aria-expanded="true"] {
	color: var(--rh-primary);
	background: var(--rh-sand);
}

@media (min-width: 901px) {
	/* Desktop: open search floats right under the icon; on wide screens let
	   it expand inline instead so the dropdown arrow of "Recipes" keeps its
	   anchor point. */
	.rh-header-search__panel {
		top: 50%;
		transform: translateY(-50%);
		right: 50px;
	}

	.rh-header-search__panel input[type="search"] {
		width: min(30vw, 280px);
	}
}

/* Mobile hamburger menu (search inside) */
.rh-mobile-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--rh-white);
	border-bottom: 1px solid var(--rh-border);
	box-shadow: var(--rh-shadow-lg);
	padding: 1rem 1.25rem 1.25rem;
}

.rh-mobile-menu.is-open {
	display: block;
}

.rh-mobile-menu__search input[type="search"] {
	width: 100%;
	min-height: 44px;
}

.rh-mobile-menu__search .rh-search {
	display: flex;
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: 999px;
	overflow: visible;
}

.rh-mobile-menu__nav ul {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.rh-mobile-menu__nav a {
	display: block;
	padding: 0.7rem 0.25rem;
	min-height: 44px;
	color: var(--rh-ink);
	font-weight: 500;
	font-size: 1rem;
	border-bottom: 1px solid var(--rh-border);
}

.rh-mobile-menu__nav .sub-menu {
	padding-left: 1rem;
}

.rh-mobile-menu__nav .sub-menu a {
	border-bottom: none;
	padding: 0.55rem 0.25rem;
	font-size: 0.95rem;
	color: var(--rh-ink-soft);
}

.rh-nav a:focus-visible,
.rh-search-toggle:focus-visible,
.rh-saved-link:focus-visible,
.rh-nav-toggle:focus-visible {
	outline: 2px solid var(--rh-primary);
	outline-offset: 2px;
}

/* Mobile nav toggle */
.rh-nav-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 1.5rem;
	color: var(--rh-ink);
	cursor: pointer;
	padding: 0.3rem 0.5rem;
}

/* -------------------------------------------------------------------------
 * Hero (front page) — two columns: copy + real photography
 * ---------------------------------------------------------------------- */
.rh-hero {
	background: linear-gradient(135deg, var(--rh-sand) 0%, var(--rh-cream) 65%);
	border-bottom: 1px solid var(--rh-border);
	padding: var(--rh-space-8) 0;
}

.rh-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: center;
	gap: var(--rh-space-8);
}

.rh-hero__copy h1 {
	margin: 0 0 0.5rem;
	font-size: clamp(40px, 5vw, 48px);
	font-weight: 700;
	color: var(--rh-ink);
}

.rh-hero__copy > p {
	max-width: 560px;
	margin: 0 0 var(--rh-space-3);
	color: var(--rh-ink-soft);
	font-size: 1.0625rem;
}

.rh-hero__media {
	margin: 0;
	border-radius: var(--rh-radius);
	overflow: hidden;
	box-shadow: var(--rh-shadow-lg);
	aspect-ratio: 4 / 3;
	background: var(--rh-sand);
}

.rh-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.rh-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--rh-space-4);
	}
	.rh-hero__media {
		order: -1;
		max-width: 560px;
	}
	.rh-hero {
		padding: var(--rh-space-5) 0;
	}
}

/* -------------------------------------------------------------------------
 * Section headings + alternating section backgrounds
 * ---------------------------------------------------------------------- */
.rh-section {
	padding: calc(var(--rh-section-py) / 2) 0 var(--rh-space-2);
}

/* Full-height sections (the 10-section homepage) breathe in both axes. */
.rh-section--alt,
.rh-section--featured,
.rh-section--quick,
.rh-section--guides,
.rh-section--collections,
.rh-section--about,
.rh-section--newsletter,
.rh-section--recent {
	padding: var(--rh-space-8) 0;
}

/* Alternating backgrounds: cream #F7F5EF (default) ↔ sand #EDEEE3. */
.rh-section--alt {
	background: var(--rh-sand);
	border-top: 1px solid var(--rh-border);
	border-bottom: 1px solid var(--rh-border);
}

/* Hero stat line under the CTAs. */
.rh-hero__stats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--rh-space-3) 0 0;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--rh-muted);
	letter-spacing: 0.02em;
}

.rh-hero__stats span[aria-hidden] {
	color: var(--rh-primary);
}

.rh-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: var(--rh-space-3);
}

.rh-section__head h2 {
	margin: 0;
	font-size: clamp(28px, 3vw, 32px);
}

.rh-section__head .rh-view-all {
	font-weight: 600;
	font-size: 0.92rem;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Recipe card grid
 * ---------------------------------------------------------------------- */
.rh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--rh-gap-card);
}

.rh-card {
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius);
	overflow: hidden;
	box-shadow: var(--rh-shadow);
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rh-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--rh-shadow-lg);
}

.rh-card__img {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--rh-sand);
}

.rh-card__img a {
	display: block;
	width: 100%;
	height: 100%;
}

.rh-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.rh-card:hover .rh-card__img img {
	transform: scale(1.04);
}

/* Scrim gradient (rgba(0,0,0,0) → rgba(20,30,15,0.75)) applied to every
   image that carries text, so badges stay readable on any photo. */
.rh-card__scrim {
	position: absolute;
	inset: 0;
	background: var(--rh-scrim);
	pointer-events: none;
}

/* ONE title only, in the card body below the image — never overlaid. */
.rh-card__title {
	margin: 0 0 0.5rem;
	font-family: var(--rh-font-display);
	font-size: 1.25rem; /* 20px */
	line-height: 1.3;
	font-weight: 600;
	color: var(--rh-ink);
}

.rh-card__title a {
	color: inherit;
}

.rh-card__title a:hover {
	color: var(--rh-primary);
	text-decoration: underline;
}

/* ONE category badge, top-left on the image, colored per palette. */
.rh-card__cat {
	display: inline-block;
	background: var(--rh-cat-bg, var(--rh-primary));
	color: #fff;
	font-size: 0.75rem; /* 12px */
	font-weight: 600;
	letter-spacing: var(--rh-label-ls);
	text-transform: uppercase;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
}

.rh-card__img .rh-card__cat {
	position: absolute;
	top: var(--rh-space-1);
	left: var(--rh-space-1);
	z-index: 3;
	color: #fff !important;
}

/* At most ONE status badge per card, bottom-left so it never stacks on the
   category badge (top-left) or the save button (top-right). */
.rh-card__badge {
	position: absolute;
	bottom: var(--rh-space-1);
	left: var(--rh-space-1);
	z-index: 3;
	color: #fff;
	font-family: var(--rh-font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: var(--rh-label-ls);
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: var(--rh-radius-sm);
}

.rh-card__badge--new { background: var(--rh-cat-healthy); }
.rh-card__badge--trending { background: var(--rh-cat-drinks); }
.rh-card__badge--pick { background: var(--rh-primary-hover); }

.rh-card__body {
	padding: var(--rh-card-pad) var(--rh-card-pad) var(--rh-space-2);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.rh-card__excerpt {
	font-size: 0.92rem;
	color: var(--rh-ink-soft);
	margin: 0 0 0.9rem;
	flex: 1;
}

.rh-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.9rem;
	font-size: var(--rh-label);
	letter-spacing: 0.02em;
	color: var(--rh-muted);
	border-top: 1px solid var(--rh-border);
	padding-top: 0.75rem;
}

.rh-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

/* Monochrome inline icons inherit currentColor (no color-emoji glyphs). */
.rh-card__timeicon {
	flex-shrink: 0;
}

.rh-search button svg,
.rh-print-btn svg,
.rh-card__timeicon {
	display: inline-block;
	vertical-align: middle;
}

/* -------------------------------------------------------------------------
 * Archive filters
 * ---------------------------------------------------------------------- */
.rh-filters {
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius);
	padding: 1.25rem 1.5rem;
	margin: 1.75rem 0 2.25rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	align-items: end;
}

.rh-filters label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rh-ink-soft);
	margin-bottom: 0.35rem;
}

.rh-filters select {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius-sm);
	background: var(--rh-cream);
	color: var(--rh-ink);
}

/* -------------------------------------------------------------------------
 * Single post / recipe
 * ---------------------------------------------------------------------- */
.rh-single {
	max-width: var(--rh-content);
	margin: 0 auto;
	padding: 2.5rem 1.25rem 3rem;
}

.rh-single__header {
	text-align: center;
	margin-bottom: 1.75rem;
}

.rh-single__header .rh-card__cat {
	position: static;
	display: inline-block;
	margin-bottom: 0.9rem;
}

.rh-single__meta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.2rem;
	font-size: 0.88rem;
	color: var(--rh-ink-soft);
	margin-top: 0.75rem;
}

.rh-single__hero {
	border-radius: var(--rh-radius);
	overflow: hidden;
	box-shadow: var(--rh-shadow-lg);
	margin-bottom: 2rem;
}

.rh-single .entry-content > p {
	font-size: 1.08rem;
}

.rh-jump-wrap {
	text-align: center;
	margin: 1.5rem 0;
}

.rh-jump-btn {
	display: inline-block;
	background: var(--rh-white);
	border: 2px solid var(--rh-primary);
	color: var(--rh-primary) !important;
	font-weight: 600;
	padding: 0.65rem 1.6rem;
	border-radius: 999px;
}

.rh-jump-btn:hover {
	background: var(--rh-primary);
	color: #fff !important;
}

/* Tags */
.rh-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 2rem 0;
}

.rh-tag-list a {
	background: var(--rh-sand);
	color: var(--rh-ink);
	font-size: 0.82rem;
	font-weight: 500;
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
}

.rh-tag-list a:hover {
	background: var(--rh-primary);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Sidebar / widgets
 * ---------------------------------------------------------------------- */
.rh-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 2.5rem;
	max-width: var(--rh-container);
	margin: 0 auto;
	padding: 2.5rem 1.25rem;
}

.widget {
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius);
	padding: 1.4rem;
	margin-bottom: 1.5rem;
}

.widget-title {
	margin-top: 0;
	font-size: 1.15rem;
}

/* -------------------------------------------------------------------------
 * Comments
 * ---------------------------------------------------------------------- */
.rh-comments {
	max-width: var(--rh-content);
	margin: 0 auto;
	padding: 0 1.25rem 3rem;
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-body {
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius);
	padding: 1.1rem 1.3rem;
	margin-bottom: 1rem;
}

.comment-reply-link,
.comment-edit-link {
	font-size: 0.85rem;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.rh-footer {
	background: var(--rh-cat-drinks); /* deepest green — no black anywhere */
	color: #d9dcc8;
	margin-top: 3rem;
}

.rh-footer a {
	color: #ffffff;
}

.rh-footer a:hover {
	color: var(--rh-cat-sweet);
}

.rh-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem;
	padding: 3rem 0 1.5rem;
}

.rh-footer .widget {
	background: transparent;
	border: none;
	padding: 0;
}

.rh-footer .widget-title {
	color: #fff;
}

.rh-footer__nav {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 1.25rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.88rem;
}

.rh-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */
.rh-pagination {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	padding: 2.5rem 0 1rem;
}

.rh-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--rh-radius-sm);
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	color: var(--rh-ink);
	font-weight: 500;
}

.rh-pagination .page-numbers.current {
	background: var(--rh-primary);
	border-color: var(--rh-primary);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Search results / misc
 * ---------------------------------------------------------------------- */
.rh-page-head {
	text-align: center;
	padding: 2.5rem 0 0.5rem;
}

.rh-page-head p {
	color: var(--rh-ink-soft);
}

.rh-no-results {
	text-align: center;
	padding: 3rem 0;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
	.rh-layout {
		grid-template-columns: 1fr;
	}

	/* Desktop nav row leaves; hamburger + saved stay in the actions cluster. */
	.rh-nav {
		display: none;
	}

	.rh-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-left: 0;
	}

	.rh-saved-link__label {
		display: none; /* icon + count only on small screens */
	}

	.rh-site-title {
		font-size: 1.35rem;
	}

	.rh-mobile-menu .rh-header-search,
	.rh-mobile-menu .rh-header-search form {
		width: 100%;
	}
}

@media (max-width: 560px) {
	.rh-grid {
		grid-template-columns: 1fr;
	}

	.rh-filters {
		grid-template-columns: 1fr 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Print — keep it clean; the recipe card plugin adds its own print rules.
 * ---------------------------------------------------------------------- */
@media print {
	.rh-header,
	.rh-footer,
	.rh-sidebar,
	.rh-comments,
	.rh-jump-wrap,
	.rh-related,
	.rh-pagination {
		display: none !important;
	}

	body {
		background: #fff;
	}
}

/* -------------------------------------------------------------------------
 * Brand mark — fork & spoon
 * ---------------------------------------------------------------------- */
.rh-brand-mark {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rh-sand);
	border-radius: 14px;
	color: var(--rh-primary);
}

.rh-brand-mark svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* -------------------------------------------------------------------------
 * Front page — hero copy bits
 * ---------------------------------------------------------------------- */
.rh-hero__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rh-primary);
}

.rh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* -------------------------------------------------------------------------
 * Front page — circular category strip
 * ---------------------------------------------------------------------- */
.rh-cat-circles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rh-space-4) var(--rh-space-5);
}

.rh-circles__title {
	text-align: center;
	font-size: clamp(28px, 3vw, 32px);
	margin: 0 0 var(--rh-space-4);
}

.rh-cat-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: 104px;
	text-align: center;
}

.rh-cat-circle__badge {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--rh-cat-color, var(--rh-primary));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rh-cat-circle__badge svg {
	width: 30px;
	height: 30px;
}

.rh-cat-circle:hover .rh-cat-circle__badge,
.rh-cat-circle:focus-visible .rh-cat-circle__badge {
	transform: translateY(-3px);
	box-shadow: var(--rh-shadow-lg);
}

.rh-cat-circle__label {
	font-family: var(--rh-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--rh-ink);
	line-height: 1.2;
}

.rh-cat-circle__count {
	font-size: var(--rh-label);
	letter-spacing: var(--rh-label-ls);
	text-transform: uppercase;
	color: var(--rh-muted);
}

/* -------------------------------------------------------------------------
 * Tabs (Popular Recipes filter)
 * ---------------------------------------------------------------------- */
.rh-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rh-space-1);
	border-bottom: 1px solid var(--rh-border);
	margin-bottom: var(--rh-space-3);
}

.rh-tab {
	appearance: none;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	color: var(--rh-muted);
	font-weight: 500;
	font-size: 0.95rem;
	padding: 0.6rem 0.9rem;
	min-height: 44px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.rh-tab:hover {
	color: var(--rh-ink);
}

.rh-tab.is-active {
	color: var(--rh-primary);
	font-weight: 600;
	border-bottom-color: var(--rh-primary);
}

.rh-tabs__empty {
	color: var(--rh-ink-soft);
	font-size: 0.95rem;
	margin: 0 0 1rem;
}

/* -------------------------------------------------------------------------
 * Front page — compact rows
 * ---------------------------------------------------------------------- */
.rh-grid--four {
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--rh-gap-card);
}

.rh-grid--guides {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--rh-gap-card);
}

.rh-home__main {
	min-width: 0;
}

/* Featured Recipe — one large horizontal card. */
.rh-featured {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius);
	overflow: hidden;
	box-shadow: var(--rh-shadow);
}

.rh-featured__media {
	position: relative;
	display: block;
	min-height: 320px;
	background: var(--rh-sand);
}

.rh-featured__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rh-featured__scrim {
	position: absolute;
	inset: 0;
	background: var(--rh-scrim);
	pointer-events: none;
}

.rh-featured__cat {
	position: absolute;
	top: var(--rh-space-2);
	left: var(--rh-space-2);
	z-index: 3;
	background: var(--rh-cat-bg, var(--rh-primary));
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--rh-label-ls);
	text-transform: uppercase;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
}

.rh-featured__body {
	padding: var(--rh-space-6);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rh-space-2);
}

.rh-featured__title {
	margin: 0;
	font-family: var(--rh-font-display);
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 700;
	line-height: 1.25;
}

.rh-featured__title a {
	color: var(--rh-ink);
}

.rh-featured__title a:hover {
	color: var(--rh-primary);
}

.rh-featured__excerpt {
	margin: 0;
	color: var(--rh-ink-soft);
	font-size: 1rem;
}

.rh-featured__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.1rem;
	font-size: var(--rh-label);
	letter-spacing: 0.02em;
	color: var(--rh-muted);
	border-top: 1px solid var(--rh-border);
	padding-top: var(--rh-space-2);
}

.rh-featured__meta strong {
	color: var(--rh-ink);
}

.rh-featured__cta {
	margin-top: auto;
}

@media (max-width: 860px) {
	.rh-featured {
		grid-template-columns: 1fr;
	}

	.rh-featured__media {
		min-height: 240px;
		aspect-ratio: 16 / 9;
	}
}

/* Collections — 3 image tiles. */
.rh-collections {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--rh-gap-card);
}

.rh-collection {
	display: flex;
	flex-direction: column;
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius);
	overflow: hidden;
	box-shadow: var(--rh-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rh-collection:hover {
	transform: translateY(-4px);
	box-shadow: var(--rh-shadow-lg);
}

.rh-collection__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--rh-sand);
}

.rh-collection__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rh-collection__scrim {
	position: absolute;
	inset: 0;
	background: var(--rh-scrim);
	pointer-events: none;
}

.rh-collection__label {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: var(--rh-card-pad);
	border-top: 3px solid var(--rh-collection-tint, var(--rh-primary));
}

.rh-collection__label strong {
	font-family: var(--rh-font-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--rh-ink);
}

.rh-collection__label em {
	font-style: normal;
	font-size: 0.9rem;
	color: var(--rh-ink-soft);
}

/* About teaser. */
.rh-about__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--rh-space-8);
	align-items: center;
}

.rh-about__media {
	margin: 0;
	border-radius: var(--rh-radius);
	overflow: hidden;
	box-shadow: var(--rh-shadow-lg);
	aspect-ratio: 4 / 3;
	background: var(--rh-sand);
}

.rh-about__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rh-about__copy h2 {
	margin: 0 0 var(--rh-space-2);
	font-size: clamp(28px, 3vw, 32px);
}

.rh-about__copy p {
	margin: 0 0 var(--rh-space-3);
	color: var(--rh-ink-soft);
	max-width: 560px;
}

@media (max-width: 860px) {
	.rh-about__inner {
		grid-template-columns: 1fr;
		gap: var(--rh-space-4);
	}
}

/* -------------------------------------------------------------------------
 * Sidebar widget lists (Popular Recipes, Latest Comments)
 * ---------------------------------------------------------------------- */
.rh-widget-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rh-widget-list li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.6rem 0;
	border-bottom: 1px dashed var(--rh-border);
}

.rh-widget-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.rh-widget-list img {
	width: 56px;
	height: 56px;
	border-radius: var(--rh-radius-sm);
	object-fit: cover;
	flex-shrink: 0;
}

.rh-widget-list a {
	color: var(--rh-ink);
	font-weight: 500;
	font-size: 0.93rem;
	line-height: 1.35;
}

.rh-widget-list a:hover {
	color: var(--rh-primary);
}

.rh-widget-list .rh-widget-meta {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--rh-ink-soft);
}

.widget .rh-widget-more {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.85rem;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Single recipe — intro lede + at-a-glance meta
 * ---------------------------------------------------------------------- */
.rh-single__lede {
	max-width: 620px;
	margin: -0.5rem auto 1.5rem;
	text-align: center;
	font-size: 1.12rem;
	color: var(--rh-ink-soft);
}

.rh-recipe-glance {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 2rem;
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius);
	padding: 0.9rem 1.25rem;
	margin: 0 0 1.75rem;
	font-size: 0.88rem;
	color: var(--rh-ink-soft);
}

.rh-recipe-glance strong {
	color: var(--rh-ink);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Contact form + notices
 * ---------------------------------------------------------------------- */
.rh-contact-form {
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius);
	padding: 1.75rem;
	margin: 2rem 0 1rem;
}

.rh-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.rh-contact-form label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rh-ink-soft);
	margin-bottom: 0.35rem;
}

.rh-contact-form input[type="text"],
.rh-contact-form input[type="email"],
.rh-contact-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius-sm);
	background: var(--rh-cream);
	color: var(--rh-ink);
}

.rh-contact-form input:focus,
.rh-contact-form textarea:focus {
	outline: 2px solid var(--rh-primary);
	outline-offset: 1px;
}

.rh-contact-form__hp {
	position: absolute !important;
	left: -9999px !important;
}

.rh-form-note {
	font-size: 0.85rem;
	color: var(--rh-ink-soft);
}

.rh-notice {
	border-radius: var(--rh-radius-sm);
	padding: 0.9rem 1.15rem;
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
}

/* Green-only palette: success and error share the palette and are told
   apart by border weight + a prefix glyph rather than a red/orange hue. */
.rh-notice--success {
	background: #edeee3;
	border: 1px solid #8fa888;
	color: #2f5233;
}

.rh-notice--error {
	background: #f7f5ef;
	border: 1px solid #3b6440;
	border-left-width: 4px;
	color: #1f2a1d;
}

.rh-notice--error::before {
	content: "! ";
	font-weight: 700;
	color: var(--rh-primary);
}

/* -------------------------------------------------------------------------
 * Responsive — circles strip
 * ---------------------------------------------------------------------- */
@media (max-width: 700px) {
	/* One compact row that scrolls sideways — never a tall wrapped block. */
	.rh-cat-circles {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: var(--rh-space-2);
		overflow-x: auto;
		padding-bottom: var(--rh-space-1);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.rh-cat-circles::-webkit-scrollbar {
		display: none;
	}
	.rh-cat-circle {
		width: 76px;
		flex: 0 0 auto;
	}
	.rh-cat-circle__badge {
		width: 64px; /* stays inside the 64–72px spec */
		height: 64px;
	}
}

/* -------------------------------------------------------------------------
 * Two-column layouts (homepage + single recipe)
 * ---------------------------------------------------------------------- */
.rh-layout .rh-single,
.rh-layout .rh-comments {
	max-width: none;
	padding: 0 0 2rem;
}

.rh-layout .rh-related {
	padding-top: 0;
}

.rh-home__main > .rh-section:first-child {
	padding-top: 0;
}

/* =========================================================================
 * v2.1 — UX pass: filters, save, breadcrumbs, subnav, newsletter, a11y
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * Focus visibility (keyboard)
 * ---------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
.rh-tab:focus-visible {
	outline: 3px solid var(--rh-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * Utility bar — rotating promo + newsletter link + socials, above header
 * ---------------------------------------------------------------------- */
.rh-utility {
	background: var(--rh-cat-drinks); /* deepest green — no black anywhere */
	color: #ffffff;
	font-size: 0.82rem;
}

.rh-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 36px;
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
}

.rh-utility__rotator {
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 1 1 auto;
}

.rh-utility__promo {
	display: inline-block;
}

.rh-utility__promo::before {
	content: "✦";
	margin-right: 0.5rem;
	color: var(--rh-cat-sweet);
}

.rh-utility__right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.rh-utility__link {
	color: #ffffff;
	font-weight: 600;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0 0.35rem;
	white-space: nowrap;
	flex-shrink: 0;
}

.rh-utility__link:hover {
	color: #fff;
	text-decoration: underline;
}

.rh-utility__social {
	display: inline-flex;
	gap: 0.15rem;
}

.rh-utility__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #d9dcc8;
	border-radius: var(--rh-radius-sm);
}

.rh-utility__social a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}

.rh-utility__social svg {
	width: 16px;
	height: 16px;
	display: block;
}

@media (max-width: 700px) {
	/* Keep the newsletter link's visible text; the promo rotator shrinks
	   (min-width:0 + ellipsis) instead of crushing the link. */
	.rh-utility__link {
		padding: 0 0.5rem;
	}
	.rh-utility__right {
		gap: 0.25rem;
	}
}

/* -------------------------------------------------------------------------
 * Closing CTA banner
 * ---------------------------------------------------------------------- */
.rh-cta {
	background: var(--rh-sand);
	border-top: 1px solid var(--rh-border);
	padding: var(--rh-space-8) 0;
	margin-top: var(--rh-space-8);
}

.rh-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rh-space-3);
	flex-wrap: wrap;
}

.rh-cta h2 {
	margin: 0;
	font-size: clamp(28px, 3vw, 32px);
}

@media (max-width: 700px) {
	.rh-cta {
		padding: var(--rh-space-6) 0;
	}
	.rh-cta__inner {
		flex-direction: column;
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
 * Breadcrumbs
 * ---------------------------------------------------------------------- */
.rh-breadcrumbs {
	padding: 1.5rem 0 0;
	font-size: 0.85rem;
}

.rh-layout .rh-breadcrumbs {
	padding-top: 0;
}

.rh-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	color: var(--rh-ink-soft);
}

.rh-breadcrumbs a {
	color: var(--rh-ink-soft);
	padding: 0.35rem 0.15rem;
}

.rh-breadcrumbs a:hover {
	color: var(--rh-primary);
}

.rh-breadcrumbs li:last-child span {
	color: var(--rh-ink);
	font-weight: 600;
}

.rh-breadcrumbs__sep {
	margin: 0 0.15rem;
}

/* -------------------------------------------------------------------------
 * Anchor scroll offset (Explore Categories jump)
 * ---------------------------------------------------------------------- */
html {
	scroll-padding-top: calc(var(--rh-header-h, 57px) + 24px);
}

.rh-section[id] {
	scroll-margin-top: calc(var(--rh-header-h, 57px) + 24px);
}

/* -------------------------------------------------------------------------
 * Save / favorite buttons — 44px touch target
 * ---------------------------------------------------------------------- */
.rh-save-btn {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 5;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--rh-border);
	border-radius: 50%;
	cursor: pointer;
	color: var(--rh-ink-soft);
	box-shadow: var(--rh-shadow);
	transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;
	padding: 0;
}

.rh-save-btn:hover {
	color: var(--rh-primary);
}

.rh-save-btn.is-saved {
	color: var(--rh-primary);
	background: #fff;
}

.rh-save-btn.is-saved svg {
	fill: currentColor;
}

.rh-save-btn svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

.rh-save-btn__label {
	display: none;
	font-weight: 600;
	font-size: 0.9rem;
}

.rh-save-btn__label-on {
	display: none;
}

.rh-save-btn.is-saved .rh-save-btn__label-off {
	display: none;
}

.rh-save-btn.is-saved .rh-save-btn__label-on {
	display: inline;
}

.rh-save-btn.is-pop {
	animation: rh-pop 0.26s ease;
}

@keyframes rh-pop {
	40% { transform: scale(1.25); }
}

.rh-card {
	position: relative;
}

.rh-card .rh-save-btn {
	top: 0.6rem;
	right: 0.6rem;
}

/* Save button inside single-post action row */
.rh-single__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0 0 1.75rem;
}

.rh-single__actions .rh-save-btn {
	position: static;
	width: auto;
	height: 44px;
	min-width: 44px;
	border-radius: 999px;
	padding: 0 1.2rem;
	gap: 0.45rem;
}

.rh-single__actions .rh-save-btn .rh-save-btn__label {
	display: inline;
}

.rh-print-btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	background: var(--rh-white);
	border: 2px solid var(--rh-primary);
	color: var(--rh-primary);
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.4rem 1.2rem;
	border-radius: 999px;
}

.rh-print-btn:hover {
	background: var(--rh-primary);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Header "Saved" link with count badge
 * ---------------------------------------------------------------------- */
.rh-saved-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 44px;
	min-width: 44px;
	padding: 0.4rem 0.7rem;
	color: var(--rh-ink);
	font-weight: 600;
	font-size: 0.92rem;
	border-radius: var(--rh-radius-sm);
}

.rh-saved-link:hover {
	color: var(--rh-primary);
	background: var(--rh-sand);
}

.rh-saved-link__icon svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	display: block;
}

.rh-saved-link:hover .rh-saved-link__icon svg,
.rh-saved-link__icon svg.is-filled {
	fill: var(--rh-primary);
	stroke: var(--rh-primary);
}

.rh-saved-link__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 0.35rem;
	background: var(--rh-primary);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 999px;
}

/* -------------------------------------------------------------------------
 * Search autocomplete dropdown
 * ---------------------------------------------------------------------- */
.rh-search {
	position: relative;
}

.rh-suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	min-width: 260px;
	list-style: none;
	margin: 0;
	padding: 0.4rem;
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius-sm);
	box-shadow: var(--rh-shadow-lg);
	z-index: 300;
}

.rh-suggest li a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.4rem 0.7rem;
	color: var(--rh-ink);
	font-size: 0.92rem;
	border-radius: 6px;
}

.rh-suggest li.is-active a,
.rh-suggest li a:hover {
	background: var(--rh-sand);
	color: var(--rh-primary);
}

.rh-suggest__kind {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rh-ink-soft);
	background: var(--rh-cream);
	border: 1px solid var(--rh-border);
	border-radius: 999px;
	padding: 0.1rem 0.5rem;
	flex-shrink: 0;
}

/* Larger, tappable header search controls */
.rh-header-search input[type="search"] {
	min-height: 44px;
}

.rh-header-search button {
	min-width: 44px;
	min-height: 44px;
}

/* -------------------------------------------------------------------------
 * Filter bar additions (category archives)
 * ---------------------------------------------------------------------- */
.rh-filters select {
	min-height: 44px;
}

.rh-filters .rh-btn {
	min-height: 44px;
}

.rh-filters__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.rh-filters__clear {
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.5rem 0.25rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.rh-archive-count {
	color: var(--rh-ink-soft);
	font-size: 0.9rem;
	margin: 0 0 1rem;
}

/* -------------------------------------------------------------------------
 * Newsletter
 * ---------------------------------------------------------------------- */
.rh-newsletter {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 1.5rem 2.5rem;
	align-items: center;
	background: linear-gradient(135deg, var(--rh-sand), var(--rh-border));
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius);
	padding: 2rem 2.25rem;
	margin: 2.5rem 0 1rem;
}

.rh-newsletter h2 {
	margin: 0 0 0.4rem;
	font-size: 1.5rem;
}

.rh-newsletter p {
	margin: 0;
	color: var(--rh-ink-soft);
	font-size: 0.98rem;
}

.rh-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.rh-newsletter__form input[type="email"] {
	flex: 1 1 220px;
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--rh-border);
	border-radius: 999px;
	background: var(--rh-white);
	color: var(--rh-ink);
}

.rh-newsletter__form .rh-btn {
	min-height: 44px;
}

.rh-newsletter__form .rh-notice {
	flex-basis: 100%;
	margin: 0;
}

.rh-newsletter__form .rh-form-note {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.8rem;
}

.rh-newsletter--banner {
	position: sticky;
	bottom: 0;
	z-index: 120;
	border-radius: 0;
	margin: 0;
	padding: 0.9rem 0;
}

/* -------------------------------------------------------------------------
 * Touch ergonomics for nav
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
	.rh-nav a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.rh-nav-toggle {
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

@media (max-width: 782px) {
	.rh-newsletter {
		grid-template-columns: 1fr;
		padding: 1.5rem 1.25rem;
	}
}

@media (max-width: 560px) {
	.rh-filters {
		grid-template-columns: 1fr;
	}

	.rh-single__actions {
		flex-wrap: wrap;
	}
}

/* =========================================================================
 * Design-system brief — mobile / accessibility hardening
 * ====================================================================== */

/* Tabs: one compact scrollable row; horizontal swipes change tab (JS). */
@media (max-width: 700px) {
	.rh-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}
	.rh-tabs::-webkit-scrollbar {
		display: none;
	}
	.rh-tab {
		flex: 0 0 auto;
	}
}

/* Every interactive control clears the 44x44px minimum tap target. */
.rh-btn,
.rh-btn--outline,
button[type="submit"],
input[type="submit"],
.rh-tab,
.rh-save-btn,
.rh-print-btn,
.rh-saved-link,
.rh-nav a,
.rh-footer__nav a,
.rh-breadcrumbs a,
.rh-tag-list a,
.rh-utility__link,
.rh-utility__social a,
.rh-suggest li a,
select,
input[type="text"],
input[type="email"],
input[type="search"] {
	min-height: 44px;
}

/* Homepage scroll budget: keep every grid compact on small screens so the
   page stays short instead of turning into one endless column. */
@media (max-width: 560px) {
	.rh-section {
		padding: var(--rh-space-8) 0;
	}
	.rh-grid {
		gap: var(--rh-space-2);
	}
	.rh-card__img {
		aspect-ratio: 16 / 10;
	}
}

/* Invisible hit-area expansion for small inline text links: keeps layout
   intact while lifting the touch target to ~44px (WCAG 2.5.5). */
.rh-site-title a,
.rh-view-all,
.rh-card__title a,
.rh-footer__nav a,
.rh-breadcrumbs a {
	position: relative;
}

.rh-site-title a::before,
.rh-view-all::before,
.rh-card__title a::before,
.rh-footer__nav a::before,
.rh-breadcrumbs a::before {
	content: "";
	position: absolute;
	inset: -14px -6px;
}

/* -------------------------------------------------------------------------
 * Social share row (under the post title / meta)
 * ---------------------------------------------------------------------- */
.rh-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.rh-share__label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rh-muted);
	margin-right: 0.15rem;
}

.rh-share__btn {
	position: relative;
	width: 44px;
	height: 44px;
	min-width: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rh-white);
	border: 1.5px solid var(--rh-border);
	border-radius: 50%;
	color: var(--rh-ink-soft);
	cursor: pointer;
	padding: 0;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.rh-share__btn:hover {
	color: var(--rh-primary);
	border-color: var(--rh-primary);
	background: var(--rh-cream);
}

.rh-share__btn.is-copied {
	color: #fff;
	background: var(--rh-primary);
	border-color: var(--rh-primary);
}

/* "Copied!" bubble above the copy-link button. */
.rh-share__copied {
	position: absolute;
	bottom: calc(100% + 0.4rem);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--rh-heading);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	white-space: nowrap;
	padding: 0.25rem 0.55rem;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.rh-share__copied:empty {
	display: none;
}

.rh-share__btn.is-copied .rh-share__copied {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* -------------------------------------------------------------------------
 * Comment form — comment first, then Name / Email / Website, each labelled
 * directly above its field.
 * ---------------------------------------------------------------------- */
.rh-comments .comment-form {
	display: block;
}

.rh-comments .comment-form p {
	margin: 0 0 1rem;
}

.rh-comments .comment-form label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 600;
	font-size: 0.92rem;
}

.rh-comments .comment-form input[type="text"],
.rh-comments .comment-form input[type="email"],
.rh-comments .comment-form input[type="url"],
.rh-comments .comment-form textarea {
	width: 100%;
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius-sm);
	padding: 0.6rem 0.8rem;
}

.rh-comments .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}

/* -------------------------------------------------------------------------
 * Sticky Save/Print bar (a second access point, not a second button pair)
 * ---------------------------------------------------------------------- */
.rh-action-bar {
	position: fixed;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%) translateY(150%);
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.55rem;
	background: var(--rh-white);
	border: 1px solid var(--rh-border);
	border-radius: 999px;
	box-shadow: var(--rh-shadow-lg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.rh-action-bar.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* The card save button is absolutely positioned; neutralise it in the bar. */
.rh-action-bar .rh-save-btn {
	position: static;
	width: auto;
	height: 44px;
	min-width: 44px;
	border-radius: 999px;
	padding: 0 1rem;
	gap: 0.45rem;
	box-shadow: none;
}

.rh-action-bar .rh-save-btn .rh-save-btn__label {
	display: inline;
}

.rh-print-btn--compact {
	padding: 0.4rem 1rem;
}

/* -------------------------------------------------------------------------
 * Floating back-to-top button
 * ---------------------------------------------------------------------- */
.rh-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 61;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rh-primary);
	border: 1px solid var(--rh-primary);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}

.rh-to-top:hover {
	background: var(--rh-primary-hover);
}

.rh-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* The recipe card is the anchor target for "Jump to Recipe". */
#rh-recipe-card {
	scroll-margin-top: calc(var(--rh-header-h, 57px) + 24px);
}

/* Slow down / disable the decorative motion for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
	.rh-qty.is-changed,
	.rh-action-bar,
	.rh-to-top {
		transition: none;
		animation: none;
	}
}

@media (max-width: 560px) {
	.rh-action-bar {
		left: 50%;
		right: auto;
		bottom: 0.85rem;
	}
	.rh-to-top {
		right: 0.85rem;
		bottom: 0.85rem;
	}
}

/* -------------------------------------------------------------------------
 * Empty states
 * ---------------------------------------------------------------------- */
.rh-no-results__action {
	margin-top: 1.5rem;
}

.rh-archive__description {
	max-width: 640px;
	color: var(--rh-body);
}

/* -------------------------------------------------------------------------
 * Print: hide interactive chrome, keep content readable
 * ---------------------------------------------------------------------- */
@media print {
	.rh-save-btn,
	.rh-single__actions,
	.rh-utility,
	.rh-tabs,
	.rh-newsletter,
	.rh-cta,
	.rh-breadcrumbs,
	.rh-share,
	.rh-action-bar,
	.rh-to-top {
		display: none !important;
	}
}