/*
Theme Name:   HealthyLifestyleUS V3
Theme URI:    https://www.healthylifestyleus.com/
Description:  The HealthyLifestyleUS V3 child theme. Implements the frozen V3 Visual Direction (Revision 2). Presentation only: every recipe it renders is gated by the HLS Recipe Engine's deterministic publishability evaluator, and no authoritative recipe state lives here. Astra is the parent; no Astra Pro feature is used, so the site works identically with or without it.
Author:       Home and Kitchen Trading LLC
Template:     astra
Version:      3.0.0
Requires PHP: 8.0
License:      GPL-2.0-or-later
Text Domain:  hls-v3
*/

/* ==========================================================================
   1. TOKENS
   Every value here is from the frozen Foundations sheet. Contrast ratios were
   measured, not estimated, and are recorded beside each pair.
   ========================================================================== */

:root {
	/* Surfaces */
	--hls-surface:        #FFFFFF;
	--hls-surface-soft:   #FAF9F6;
	--hls-surface-warm:   #F4F1EA;
	--hls-rule:           #E4E0D6;

	/* Ink — 15.8:1 and 8.1:1 on surface */
	--hls-ink:            #1F2421;
	--hls-ink-muted:      #4A524D;

	/* Accent — 7.1:1 on surface, and 7.1:1 for white on accent */
	--hls-accent:         #2C6246;
	--hls-accent-dark:    #1F2421;
	--hls-accent-on-dark: #8FB8A3;

	/* Semantic — 5.9:1 and 7.2:1 on surface */
	--hls-sponsored:      #8A5A1A;
	--hls-danger:         #A32B21;

	/* Spacing — 4px base. Nothing off-scale. */
	--hls-s1:  4px;
	--hls-s2:  8px;
	--hls-s3:  12px;
	--hls-s4:  16px;
	--hls-s5:  24px;
	--hls-s6:  32px;
	--hls-s7:  48px;
	--hls-s8:  64px;
	--hls-s9:  96px;

	/* Radii */
	--hls-r1: 4px;
	--hls-r2: 8px;
	--hls-r3: 12px;

	/* One shadow. Everything else is hairlines and whitespace. */
	--hls-shadow: 0 1px 2px rgba(31, 36, 33, 0.04), 0 2px 8px rgba(31, 36, 33, 0.04);

	/* Type */
	--hls-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
	--hls-font-body:    Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Layout */
	--hls-measure:   72ch;
	--hls-container: 1180px;
	--hls-gutter:    var(--hls-s5);
}

/* ==========================================================================
   2. FONTS — self-hosted, two files, no third-party request at runtime.
   ========================================================================== */

@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-var.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("assets/fonts/source-serif-4-var.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   3. RESET AND BASE
   ========================================================================== */

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

body.hls-v3 {
	margin: 0;
	background: var(--hls-surface-soft);
	color: var(--hls-ink);
	font-family: var(--hls-font-body);
	font-size: 18px;              /* Recipes are read at arm's length, often one-handed. */
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.hls-v3 img { max-width: 100%; height: auto; }

.hls-v3 a { color: var(--hls-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.hls-v3 a:hover { color: var(--hls-accent-dark); }

/* The focus ring is never removed. */
.hls-v3 :focus-visible {
	outline: 2px solid var(--hls-accent);
	outline-offset: 2px;
	border-radius: var(--hls-r1);
}

.hls-v3 h1, .hls-v3 h2, .hls-v3 h3, .hls-v3 h4 {
	font-family: var(--hls-font-display);
	color: var(--hls-ink);
	margin: 0 0 var(--hls-s3);
	text-wrap: balance;
}

.hls-v3 h1 { font-size: clamp(32px, 4.4vw, 44px); font-weight: 700; line-height: 1.1;  letter-spacing: -0.015em; }
.hls-v3 h2 { font-size: clamp(24px, 3vw, 30px);   font-weight: 700; line-height: 1.2; }
.hls-v3 h3 { font-size: clamp(20px, 2.2vw, 24px); font-weight: 600; line-height: 1.25; }

.hls-v3 p { margin: 0 0 var(--hls-s4); }

.hls-lead { font-size: 20px; line-height: 1.55; color: var(--hls-ink-muted); }
.hls-meta { font-size: 14px; color: var(--hls-ink-muted); }

/* Accessible-but-invisible. Astra ships .screen-reader-text; this is ours so
   the child theme does not depend on a parent class continuing to exist. */
.hls-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.hls-skip {
	position: absolute; left: -9999px; top: 0;
	z-index: 100;
	padding: var(--hls-s3) var(--hls-s4);
	background: var(--hls-accent); color: #FFFFFF;
	border-radius: 0 0 var(--hls-r2) 0;
	font-weight: 600;
}
.hls-skip:focus { left: 0; color: #FFFFFF; }

.hls-container {
	width: 100%;
	max-width: var(--hls-container);
	margin-inline: auto;
	padding-inline: var(--hls-gutter);
}

/* ==========================================================================
   4. BUTTONS — minimum target 44 x 44.
   ========================================================================== */

.hls-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px;
	padding: var(--hls-s3) var(--hls-s5);
	border: 0; border-radius: var(--hls-r2);
	background: var(--hls-accent); color: #FFFFFF;
	font: inherit; font-size: 16px; font-weight: 600;
	text-decoration: none; cursor: pointer;
}
.hls-btn:hover { background: var(--hls-accent-dark); color: #FFFFFF; }

.hls-btn--secondary {
	background: var(--hls-surface);
	color: var(--hls-accent);
	border: 1px solid var(--hls-accent);
}
.hls-btn--secondary:hover { background: var(--hls-surface-warm); color: var(--hls-accent-dark); }

.hls-btn--quiet { background: transparent; color: var(--hls-accent); padding-inline: var(--hls-s4); }
.hls-btn--quiet:hover { background: var(--hls-surface-warm); color: var(--hls-accent-dark); }

/*
 * PT-160. `.hls-v3 a` is (0,1,1); `.hls-btn` is (0,1,0). The link rule therefore
 * beat the button rule on every anchor styled as a button, and the primary
 * button painted the accent colour on its own accent background: a solid green
 * rectangle with an invisible label, which only appeared on hover, because
 * `.hls-btn:hover` and `.hls-v3 a:hover` tie on specificity and the button rule
 * comes later in the file. Found on the homepage hero's "Get the recipe" CTA at
 * both 1440px and 375px.
 *
 * Matching the ancestor restores the intended cascade without !important and
 * without touching the link colour itself. Order matters below: the variants
 * tie with the base rule and must come after it.
 */
.hls-v3 a.hls-btn { color: #FFFFFF; }
.hls-v3 a.hls-btn:hover { color: #FFFFFF; }
.hls-v3 a.hls-btn--secondary { color: var(--hls-accent); }
.hls-v3 a.hls-btn--quiet { color: var(--hls-accent); }
.hls-v3 a.hls-btn--secondary:hover,
.hls-v3 a.hls-btn--quiet:hover { color: var(--hls-accent-dark); }

/* ==========================================================================
   5. BADGES — objective, calculated figures only.
   ========================================================================== */

.hls-badges { display: flex; flex-wrap: wrap; gap: var(--hls-s2); margin: 0 0 var(--hls-s4); padding: 0; list-style: none; }

.hls-badge {
	display: inline-block;
	padding: var(--hls-s1) var(--hls-s3);
	border: 1px solid var(--hls-rule);
	border-radius: 999px;
	background: var(--hls-surface);
	font-size: 13px; font-weight: 600; line-height: 1.6;
	color: var(--hls-ink-muted);
	white-space: nowrap;
}
.hls-badge--nutrition { border-color: var(--hls-accent); color: var(--hls-accent); }

/* ==========================================================================
   6. HEADER AND NAVIGATION
   ========================================================================== */

.hls-header {
	background: var(--hls-surface);
	border-bottom: 1px solid var(--hls-rule);
	position: sticky; top: 0; z-index: 50;
}

/*
 * PT-168. The sticky header slid underneath the WordPress admin bar as soon as
 * it stuck.
 *
 * WordPress offsets the DOCUMENT with `html { margin-top: 32px }`, which is why
 * the header looks right at the top of the page. But `position: sticky` pins to
 * the VIEWPORT, and the admin bar is `position: fixed` at viewport top — so the
 * moment the header stuck it went to y=0, under the bar, clipping the wordmark.
 * Measured on every page at middle and bottom scroll, at 1280, 1440, 1664 and
 * 1920: `hdrTop` 32 at the top of the page, 0 once stuck.
 *
 * Sticking to the bar's own height fixes it without moving anything else: the
 * stuck position then equals the resting position, so nothing jumps when sticky
 * engages. Measured on this install, the bar is `position: fixed` at BOTH
 * breakpoints — 32px above 782px and 46px at or below — so both are handled
 * rather than one offset being assumed for every viewport.
 *
 * A logged-out visitor has no `.admin-bar` class and keeps `top: 0`, with no
 * blank offset introduced.
 */
.admin-bar .hls-header { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .hls-header { top: 46px; }
}

/*
 * PT-173. The rule above was right about the admin bar's HEIGHT and wrong about
 * whether it is still there. WordPress core, admin-bar.css:
 *
 *     @media screen and (max-width: 600px) { #wpadminbar { position: absolute; } }
 *
 * At phone widths the bar is ABSOLUTE: it scrolls away with the document. The
 * 46px offset then held the sticky header 46px short of the viewport top with
 * nothing filling the gap, so the page scrolled through behind it — the owner
 * photographed the recipe card showing above the logo.
 *
 * Measured before this rule, authenticated, on a recipe page scrolled down, in
 * Chromium, Firefox and WebKit alike: at 320, 360, 375, 390 and 430 the band
 * above the header contained `h2.wprm-recipe-name` or `div.wprm-recipe-summary`
 * — page content, not the bar. At 768 and 782 the same band contained
 * `#wpadminbar`, which is correct, because above 600 the bar really is fixed.
 *
 * PT-168 missed this because it probed at 760px, which is above the 600px
 * threshold, and generalised "fixed" to every width below 783.
 *
 * So the offset now tracks what the bar actually does:
 *   >= 783px   bar fixed, 32px tall  -> top: 32px
 *   601-782px  bar fixed, 46px tall  -> top: 46px
 *   <= 600px   bar absolute, scrolls -> top: 0
 *
 * A logged-out visitor has no `.admin-bar` class at any width and keeps top: 0,
 * which measurement confirms was already the case.
 */
@media screen and (max-width: 600px) {
	.admin-bar .hls-header { top: 0; }
}

.hls-header__inner {
	display: flex; align-items: center; gap: var(--hls-s5);
	min-height: 68px;
	padding-block: var(--hls-s3);
}

.hls-wordmark {
	font-family: var(--hls-font-display);
	font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
	color: var(--hls-ink); text-decoration: none; white-space: nowrap;
}
.hls-wordmark:hover { color: var(--hls-ink); }
.hls-wordmark em { font-style: normal; color: var(--hls-accent); }

.hls-nav { margin-inline-start: auto; }
.hls-nav ul { display: flex; align-items: center; gap: var(--hls-s2); margin: 0; padding: 0; list-style: none; }
.hls-nav a {
	display: inline-flex; align-items: center; min-height: 44px;
	white-space: nowrap;
	padding-inline: var(--hls-s3);
	color: var(--hls-ink); text-decoration: none;
	font-size: 16px; font-weight: 500; border-radius: var(--hls-r2);
}
.hls-nav a:hover { background: var(--hls-surface-warm); color: var(--hls-accent); }
.hls-nav .current-menu-item > a,
.hls-nav [aria-current="page"] { color: var(--hls-accent); }

.hls-search { display: flex; gap: var(--hls-s2); }
.hls-search input[type="search"] {
	min-height: 44px; min-width: 160px; width: 210px;
	padding: var(--hls-s2) var(--hls-s3);
	border: 1px solid var(--hls-rule); border-radius: var(--hls-r2);
	background: var(--hls-surface); color: var(--hls-ink);
	font: inherit; font-size: 15px;
}

.hls-navtoggle {
	display: none;
	min-width: 44px; min-height: 44px;
	align-items: center; justify-content: center; gap: var(--hls-s2);
	margin-inline-start: auto;
	padding-inline: var(--hls-s3);
	border: 1px solid var(--hls-rule); border-radius: var(--hls-r2);
	background: var(--hls-surface); color: var(--hls-ink);
	font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.hls-navtoggle__bars { display: inline-block; width: 18px; height: 2px; background: currentColor; position: relative; }
.hls-navtoggle__bars::before,
.hls-navtoggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.hls-navtoggle__bars::before { top: -6px; }
.hls-navtoggle__bars::after  { top: 6px; }

/* ==========================================================================
   7. SECTIONS
   ========================================================================== */

.hls-section { padding-block: var(--hls-s8); }
.hls-section--tight { padding-block: var(--hls-s7); }
.hls-section + .hls-section { padding-top: 0; }

.hls-section__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--hls-s4); margin-bottom: var(--hls-s5);
}
.hls-section__head h2 { margin: 0; }
.hls-section__more { font-size: 15px; font-weight: 600; white-space: nowrap; }

.hls-eyebrow {
	margin: 0 0 var(--hls-s2);
	font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--hls-ink-muted);
}

/* ==========================================================================
   8. HERO — Recipe of the week
   ========================================================================== */

.hls-hero { background: var(--hls-surface-warm); border-bottom: 1px solid var(--hls-rule); padding-block: var(--hls-s8); }
.hls-hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--hls-s7); align-items: start; }
.hls-hero h1 { margin-block: 0 var(--hls-s4); }
.hls-hero__actions { display: flex; flex-wrap: wrap; gap: var(--hls-s3); margin-top: var(--hls-s5); }

.hls-factbox {
	background: var(--hls-surface);
	border: 1px solid var(--hls-rule); border-radius: var(--hls-r3);
	padding: var(--hls-s5);
}

/* ==========================================================================
   9. NUTRITION FIGURES
   ========================================================================== */

.hls-macros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hls-s3); margin: 0; }
.hls-macros > div { text-align: center; }
.hls-macros dt { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hls-ink-muted); }
.hls-macros dd { margin: var(--hls-s1) 0 0; font-size: 22px; font-weight: 700; font-family: var(--hls-font-display); color: var(--hls-ink); }

.hls-nutrition { background: var(--hls-surface); border: 1px solid var(--hls-rule); border-radius: var(--hls-r3); padding: var(--hls-s5); }
.hls-nutrition__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--hls-s6); }
.hls-nutrition__row { display: flex; justify-content: space-between; gap: var(--hls-s3); padding-block: var(--hls-s2); border-bottom: 1px solid var(--hls-surface-warm); min-width: 0; }
.hls-nutrition__name { color: var(--hls-ink-muted); overflow-wrap: anywhere; min-width: 0; }
.hls-nutrition__value { font-weight: 600; white-space: nowrap; }

/* A qualified figure is marked, and the qualification is stated. It is never
   presented as a bare fact. */
.hls-nutrition__mark { margin-inline-start: 2px; color: var(--hls-ink-muted); }
.hls-qualification {
	margin: var(--hls-s3) 0 0;
	padding-top: var(--hls-s3);
	border-top: 1px solid var(--hls-rule);
	font-size: 14px; line-height: 1.55; color: var(--hls-ink-muted);
}
.hls-disclaimer { margin: var(--hls-s3) 0 0; font-size: 14px; line-height: 1.55; color: var(--hls-ink-muted); }

/* ==========================================================================
   10. RECIPE CARDS — imageless-first.
   A card must look finished with no image. When a genuine image exists the
   same component accepts it without redesign.
   ========================================================================== */

.hls-grid { display: grid; gap: var(--hls-s5); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.hls-card {
	display: flex; flex-direction: column;
	background: var(--hls-surface);
	border: 1px solid var(--hls-rule); border-radius: var(--hls-r3);
	overflow: hidden;
	text-decoration: none; color: inherit;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.hls-card:hover { border-color: var(--hls-accent); box-shadow: var(--hls-shadow); color: inherit; }

/* The image is optional by construction: no fixed-height placeholder, no
   reserved grey box, nothing to fill when absent. */
.hls-card__media { display: block; aspect-ratio: 3 / 2; width: 100%; object-fit: cover; background: var(--hls-surface-warm); }

.hls-card__body { display: flex; flex-direction: column; gap: var(--hls-s2); padding: var(--hls-s5); }
.hls-card__kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hls-accent); }
.hls-card__title { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; font-family: var(--hls-font-display); }
.hls-card__facts { margin-top: auto; padding-top: var(--hls-s2); font-size: 14px; color: var(--hls-ink-muted); }
.hls-card__facts strong { color: var(--hls-ink); font-weight: 600; }

/* ==========================================================================
   11. CATEGORY TILES
   ========================================================================== */

.hls-tiles { display: grid; gap: var(--hls-s3); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.hls-tile {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--hls-s3);
	min-height: 44px;
	padding: var(--hls-s3) var(--hls-s4);
	background: var(--hls-surface);
	border: 1px solid var(--hls-rule); border-radius: var(--hls-r2);
	text-decoration: none; color: var(--hls-ink);
	font-weight: 600;
}
.hls-tile:hover { border-color: var(--hls-accent); color: var(--hls-accent); }
.hls-tile__count { font-size: 14px; font-weight: 400; color: var(--hls-ink-muted); }

/*
 * PT-170. At 320px the category tiles pushed their count past the viewport:
 * two columns of 138px leave 104px of tile content, while a label such as
 * "Seafood" plus the 48px count and the 12px gap need about 122. With
 * `justify-content: space-between` and no shrink allowance the count simply
 * overhung the edge — measured right edge 322 against a 320px viewport in
 * Chromium and Firefox, 321 in WebKit, on the homepage at every scroll
 * position.
 *
 * Two small rules: the row may wrap when a label and its count genuinely do
 * not fit on one line, whatever the width or how long a future category name
 * is; and below 380px the tiles become a single column, which is the width
 * where two of them stopped fitting.
 */
.hls-tile { flex-wrap: wrap; }

@media (max-width: 380px) {
	.hls-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   12. RECIPE PAGE
   ========================================================================== */

.hls-recipe__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--hls-s7); align-items: start; padding-block: var(--hls-s7); }
.hls-recipe__main { min-width: 0; }

.hls-breadcrumb { margin: 0 0 var(--hls-s4); font-size: 14px; color: var(--hls-ink-muted); }
.hls-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--hls-s2); margin: 0; padding: 0; list-style: none; }
.hls-breadcrumb li::after { content: "/"; margin-inline-start: var(--hls-s2); color: var(--hls-rule); }
.hls-breadcrumb li:last-child::after { content: ""; }

.hls-recipe__standfirst { font-family: var(--hls-font-display); font-size: clamp(20px, 2.2vw, 24px); font-weight: 400; line-height: 1.35; color: var(--hls-ink-muted); margin: 0 0 var(--hls-s4); }

.hls-recipecard { background: var(--hls-surface); border: 1px solid var(--hls-rule); border-radius: var(--hls-r3); padding: var(--hls-s6); margin-block: var(--hls-s6); }
.hls-recipecard__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--hls-s4); padding-bottom: var(--hls-s4); border-bottom: 1px solid var(--hls-rule); }
.hls-recipecard__cols { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--hls-s7); margin-top: var(--hls-s5); }

.hls-ingredients { list-style: none; margin: 0; padding: 0; }
.hls-ingredients li { display: flex; gap: var(--hls-s3); padding-block: var(--hls-s2); border-bottom: 1px solid var(--hls-surface-warm); }
.hls-ingredients strong { flex: 0 0 auto; min-width: 72px; font-weight: 600; }

.hls-steps { margin: 0; padding: 0; list-style: none; counter-reset: hls-step; }
.hls-steps li { display: flex; gap: var(--hls-s3); padding-block: var(--hls-s3); border-bottom: 1px solid var(--hls-surface-warm); }
.hls-steps li::before {
	counter-increment: hls-step; content: counter(hls-step);
	flex: 0 0 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--hls-surface-warm); color: var(--hls-accent);
	border-radius: 999px; font-size: 14px; font-weight: 600;
}

.hls-note {
	background: var(--hls-surface-warm);
	border: 1px solid var(--hls-rule); border-radius: var(--hls-r2);
	padding: var(--hls-s4);
	font-size: 15px; line-height: 1.55; color: var(--hls-ink-muted);
	margin-block: var(--hls-s4);
}

/* ==========================================================================
   13. ARTICLE / EDITORIAL
   Kicker, headline, deck, byline — the editorial stack, visibly distinct from
   a recipe so a reader always knows which they are reading.
   ========================================================================== */

.hls-article { padding-block: var(--hls-s7); }
.hls-article__head { max-width: var(--hls-measure); margin-inline: auto; }
.hls-article__body { max-width: var(--hls-measure); margin-inline: auto; font-size: 19px; line-height: 1.7; }
.hls-article__body h2 { margin-top: var(--hls-s7); }
.hls-article__body h3 { margin-top: var(--hls-s6); }
.hls-article__body ul, .hls-article__body ol { padding-inline-start: var(--hls-s5); }
.hls-article__body li { margin-bottom: var(--hls-s2); }
.hls-article__body blockquote {
	margin: var(--hls-s6) 0; padding: var(--hls-s2) 0 var(--hls-s2) var(--hls-s5);
	border-inline-start: 3px solid var(--hls-accent);
	font-family: var(--hls-font-display); font-size: 21px; line-height: 1.5; color: var(--hls-ink-muted);
}
.hls-article__body figure { margin: var(--hls-s6) 0; }
.hls-article__body figcaption { margin-top: var(--hls-s2); font-size: 14px; color: var(--hls-ink-muted); }

.hls-byline { display: flex; flex-wrap: wrap; gap: var(--hls-s3); align-items: center; margin: 0 0 var(--hls-s6); font-size: 14px; color: var(--hls-ink-muted); }

/* ==========================================================================
   14. ADVERTISING — reserved geometry, zero layout shift, labelled.
   Dimensions are reserved at EVERY breakpoint so an unfilled, slow or absent
   slot shifts nothing.
   ========================================================================== */

.hls-ad { margin-block: var(--hls-s6); text-align: center; }
.hls-ad__label {
	display: block; margin: 0 0 var(--hls-s2);
	font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--hls-ink-muted);
}
.hls-ad__label--sponsored { color: var(--hls-sponsored); }
.hls-ad__slot {
	display: flex; align-items: center; justify-content: center;
	margin-inline: auto;
	background: var(--hls-surface-warm);
	border: 1px dashed var(--hls-rule); border-radius: var(--hls-r2);
	color: var(--hls-ink-muted); font-size: 12px;
	/* Height is set per slot below and never depends on the creative. */
}
.hls-ad--leaderboard .hls-ad__slot { width: 100%; max-width: 728px; height: 90px; }
.hls-ad--rectangle  .hls-ad__slot { width: 100%; max-width: 300px; height: 250px; }
.hls-ad--banner     .hls-ad__slot { width: 100%; max-width: 970px; height: 90px; }

@media (max-width: 782px) {
	/* Mobile reserves its own fixed height rather than scaling the desktop one. */
	.hls-ad--leaderboard .hls-ad__slot,
	.hls-ad--banner .hls-ad__slot { max-width: 320px; height: 100px; }
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.hls-footer { background: var(--hls-ink); color: var(--hls-surface-soft); margin-top: var(--hls-s9); padding-block: var(--hls-s8) var(--hls-s5); }
.hls-footer a { color: var(--hls-accent-on-dark); }
.hls-footer a:hover { color: #FFFFFF; }
.hls-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: var(--hls-s7); }
.hls-footer h2 { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hls-surface-soft); font-family: var(--hls-font-body); margin-bottom: var(--hls-s3); }
.hls-footer ul { margin: 0; padding: 0; list-style: none; }
.hls-footer li { margin-bottom: var(--hls-s2); }
.hls-footer__legal { margin-top: var(--hls-s7); padding-top: var(--hls-s4); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; line-height: 1.6; color: #C9CFCA; }
.hls-footer__wordmark { font-family: var(--hls-font-display); font-size: 20px; font-weight: 700; color: #FFFFFF; margin-bottom: var(--hls-s2); }
.hls-footer__wordmark em { font-style: normal; color: var(--hls-accent-on-dark); }

/* ==========================================================================
   16. EMPTY STATES
   An honest empty state, never filler and never a fabricated recipe.
   ========================================================================== */

.hls-empty { background: var(--hls-surface); border: 1px solid var(--hls-rule); border-radius: var(--hls-r3); padding: var(--hls-s7); text-align: center; }
.hls-empty h2 { margin-bottom: var(--hls-s3); }
.hls-empty p { max-width: 52ch; margin-inline: auto; color: var(--hls-ink-muted); }

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
	.hls-recipe__layout { grid-template-columns: minmax(0, 1fr); }
	.hls-recipecard__cols { grid-template-columns: minmax(0, 1fr); gap: var(--hls-s6); }
	.hls-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hls-s6); }
}

@media (max-width: 860px) {
	.hls-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--hls-s5); }
}

/*
 * PT-169. The drawer used to take over at 860px, but the full header does not
 * fit until about 1180px, so between those widths it was neither one thing nor
 * the other. Measured before this change, with the desktop nav showing:
 * 259px of horizontal page overflow at 900, 135px at 1024, 59px at 1100.
 *
 * The arithmetic is fixed rather than fluid, because `.hls-header__inner` is
 * capped at `max-width: 1180px`: content is 1132px, and wordmark 179 + nav 543
 * + search 344 + two 24px gaps needs 1114. Below the cap the content width
 * shrinks with the viewport while those parts do not, and no honest amount of
 * tightening fits them at 900px — the SEARCH button alone is 126px.
 *
 * So the drawer, which already exists and is verified in three engines, now
 * takes over wherever the row cannot fit. The hero grid keeps its own 860px
 * breakpoint above: these were sharing one block for no reason.
 */
@media (max-width: 1179px) {
	.hls-nav, .hls-header .hls-search { display: none; }
	.hls-navtoggle { display: inline-flex; }

	/* The drawer is plain markup revealed by a class: no framework, no overlay,
	   no scroll lock, nothing that can trap focus or block navigation. */
	.hls-header.is-open .hls-nav { display: block; }
	.hls-header.is-open .hls-search { display: flex; }
	.hls-header.is-open .hls-header__inner { flex-wrap: wrap; }
	.hls-header.is-open .hls-nav,
	.hls-header.is-open .hls-search { flex-basis: 100%; margin-inline-start: 0; padding-bottom: var(--hls-s3); }
	.hls-header.is-open .hls-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.hls-header.is-open .hls-nav a { min-height: 48px; padding-inline: var(--hls-s2); border-bottom: 1px solid var(--hls-rule); border-radius: 0; }
	.hls-header.is-open .hls-search input[type="search"] { flex: 1 1 auto; min-width: 0; }

	/*
	 * PT-161. With the drawer open at 375px the search row measured 364px
	 * starting at the 16px gutter, so its right edge sat at 380 against a 375px
	 * viewport: 5px of horizontal page scroll and a visibly clipped SEARCH
	 * button. `flex-basis: 100%` above sets the basis but leaves the row free to
	 * exceed it; an explicit width plus shrinkable children holds it to the
	 * container. Measured after: row 343px, right edge 359px, overflow 0.
	 */
	.hls-header.is-open .hls-search { flex-basis: auto; width: 100%; max-width: 100%; min-width: 0; }
	.hls-header.is-open .hls-search .hls-btn { flex: 0 1 auto; min-width: 0; }
}

@media (max-width: 680px) {
	body.hls-v3 { font-size: 17px; }
	:root { --hls-gutter: var(--hls-s4); }   /* 16px side gutter, no horizontal scroll */
	.hls-section { padding-block: var(--hls-s7); }
	.hls-macros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hls-s4); }
	.hls-nutrition__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.hls-grid { grid-template-columns: minmax(0, 1fr); }
	.hls-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hls-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--hls-s5); }
	.hls-recipecard { padding: var(--hls-s4); }
	.hls-section__head { flex-direction: column; align-items: flex-start; gap: var(--hls-s2); }
}

/* ==========================================================================
   18. MOTION AND PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.hls-v3 *, .hls-v3 *::before, .hls-v3 *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.hls-header, .hls-footer, .hls-ad, .hls-breadcrumb, .hls-section--related { display: none !important; }
	body.hls-v3 { background: #FFFFFF; font-size: 12pt; }
	.hls-recipecard { border: 0; padding: 0; }
	.hls-recipecard__cols { grid-template-columns: minmax(0, 1fr); }
}