/* ==========================================================================
   skin-hubfount.css - HubFount
   *** ALL HubFount theming lives in THIS file. ***

   Porto's theme.css / theme-elements.css are PRECOMPILED VENDOR FILES.
   Never edit them. Porto exposes its palette as CSS custom properties, so
   redefining those properties here re-themes every button, link, hover,
   badge and icon box on the site.

   There is NO Sass build and no Node - see PORTO-NOTES.md section 1.

   MUST be the last stylesheet loaded.

   Palette: the HubFount Brand Identity Guidelines v1.0 - monochrome blue +
   charcoal. Two blues, charcoal, and neutral tints. Nothing else.
   ========================================================================== */


/* --------------------------------------------------------------------------
   /!\ CONTRAST CONTRACT - read before changing any color below.

   Measured against white (#FFF):
     deep blue   #0059AD ->  6.93:1  PASS - text, links, small elements
     bright blue #2295F2 ->  3.16:1  FAIL for body text
     charcoal    #222222 -> 15.91:1  PASS

   Therefore:
     - Text and links on white are #0059AD or charcoal. Never #2295F2.
     - #2295F2 is a FILL: bands, icon accents, large bold headings.
     - On a #2295F2 fill, text is CHARCOAL (5.04:1), never white (3.16:1).
     - On a #0059AD fill, text is WHITE (6.93:1).
   -------------------------------------------------------------------------- */


/* General
   ========================================================================== */
:root {
	--border-radius: 4px;
	--border-radius2x: 8px;

	/* Porto's body-copy color. Porto ships #777 (4.48:1 - fails AA). */
	--default: #444444;

	/* HubFount neutrals (PORTO-NOTES.md section 2) */
	--hf-mist: #EEF5FC;   /* calm section backgrounds: #222 on it 14.5:1, #0059AD 6.3:1 */
	--hf-paper: #F5F8FB;  /* card / alt background */
	--hf-font: "Poppins", Arial, sans-serif;
}


/* Skin Colors
   ========================================================================== */
:root {
	/* Deep blue #0059AD - 6.93:1 on white. Text, links, headers, primary buttons. */
	--primary: #0059AD;
	--primary-100: #004C94;
	--primary-200: #003F7A;
	--primary-300: #003261;
	--primary--100: #0066C6;
	--primary--200: #0073E0;
	--primary--300: #0080FA;
	--primary-rgba-0: rgba(0, 89, 173, 0);
	--primary-rgba-10: rgba(0, 89, 173, 0.1);
	--primary-rgba-20: rgba(0, 89, 173, 0.2);
	--primary-rgba-30: rgba(0, 89, 173, 0.3);
	--primary-rgba-40: rgba(0, 89, 173, 0.4);
	--primary-rgba-50: rgba(0, 89, 173, 0.5);
	--primary-rgba-60: rgba(0, 89, 173, 0.6);
	--primary-rgba-70: rgba(0, 89, 173, 0.7);
	--primary-rgba-80: rgba(0, 89, 173, 0.8);
	--primary-rgba-90: rgba(0, 89, 173, 0.9);

	/* Bright blue #2295F2 - 3.16:1 on white. FILLS, icons, large bold type ONLY. */
	--secondary: #2295F2;
	--secondary-100: #0E89ED;
	--secondary-200: #0D7BD4;
	--secondary-300: #0B6DBC;
	--secondary--100: #3AA1F3;
	--secondary--200: #52ACF5;
	--secondary--300: #6AB8F6;
	--secondary-rgba-0: rgba(34, 149, 242, 0);
	--secondary-rgba-10: rgba(34, 149, 242, 0.1);
	--secondary-rgba-20: rgba(34, 149, 242, 0.2);
	--secondary-rgba-30: rgba(34, 149, 242, 0.3);
	--secondary-rgba-40: rgba(34, 149, 242, 0.4);
	--secondary-rgba-50: rgba(34, 149, 242, 0.5);
	--secondary-rgba-60: rgba(34, 149, 242, 0.6);
	--secondary-rgba-70: rgba(34, 149, 242, 0.7);
	--secondary-rgba-80: rgba(34, 149, 242, 0.8);
	--secondary-rgba-90: rgba(34, 149, 242, 0.9);

	/* Same as primary - Porto uses tertiary in a few components; keep it on-brand. */
	--tertiary: #0059AD;
	--tertiary-100: #004C94;
	--tertiary-200: #003F7A;
	--tertiary-300: #003261;
	--tertiary--100: #0066C6;
	--tertiary--200: #0073E0;
	--tertiary--300: #0080FA;
	--tertiary-rgba-0: rgba(0, 89, 173, 0);
	--tertiary-rgba-10: rgba(0, 89, 173, 0.1);
	--tertiary-rgba-20: rgba(0, 89, 173, 0.2);
	--tertiary-rgba-30: rgba(0, 89, 173, 0.3);
	--tertiary-rgba-40: rgba(0, 89, 173, 0.4);
	--tertiary-rgba-50: rgba(0, 89, 173, 0.5);
	--tertiary-rgba-60: rgba(0, 89, 173, 0.6);
	--tertiary-rgba-70: rgba(0, 89, 173, 0.7);
	--tertiary-rgba-80: rgba(0, 89, 173, 0.8);
	--tertiary-rgba-90: rgba(0, 89, 173, 0.9);

	/* Charcoal #222222 - dark bands, footer. */
	--quaternary: #222222;
	--quaternary-100: #151515;
	--quaternary-200: #090909;
	--quaternary-300: #000000;
	--quaternary--100: #2F2F2F;
	--quaternary--200: #3C3C3C;
	--quaternary--300: #484848;
	--quaternary-rgba-0: rgba(34, 34, 34, 0);
	--quaternary-rgba-10: rgba(34, 34, 34, 0.1);
	--quaternary-rgba-20: rgba(34, 34, 34, 0.2);
	--quaternary-rgba-30: rgba(34, 34, 34, 0.3);
	--quaternary-rgba-40: rgba(34, 34, 34, 0.4);
	--quaternary-rgba-50: rgba(34, 34, 34, 0.5);
	--quaternary-rgba-60: rgba(34, 34, 34, 0.6);
	--quaternary-rgba-70: rgba(34, 34, 34, 0.7);
	--quaternary-rgba-80: rgba(34, 34, 34, 0.8);
	--quaternary-rgba-90: rgba(34, 34, 34, 0.9);

	/* Charcoal #222222 - 15.91:1 on white. */
	--dark: #222222;
	--dark-100: #151515;
	--dark-200: #090909;
	--dark-300: #000000;
	--dark--100: #2F2F2F;
	--dark--200: #3C3C3C;
	--dark--300: #484848;
	--dark-rgba-0: rgba(34, 34, 34, 0);
	--dark-rgba-10: rgba(34, 34, 34, 0.1);
	--dark-rgba-20: rgba(34, 34, 34, 0.2);
	--dark-rgba-30: rgba(34, 34, 34, 0.3);
	--dark-rgba-40: rgba(34, 34, 34, 0.4);
	--dark-rgba-50: rgba(34, 34, 34, 0.5);
	--dark-rgba-60: rgba(34, 34, 34, 0.6);
	--dark-rgba-70: rgba(34, 34, 34, 0.7);
	--dark-rgba-80: rgba(34, 34, 34, 0.8);
	--dark-rgba-90: rgba(34, 34, 34, 0.9);

	/* White. */
	--light: #FFFFFF;
	--light-100: #F2F2F2;
	--light-200: #ECECEC;
	--light-300: #E6E6E6;
	--light--100: #FFFFFF;
	--light--200: #FFFFFF;
	--light--300: #FFFFFF;
	--light-rgba-0: rgba(255, 255, 255, 0);
	--light-rgba-10: rgba(255, 255, 255, 0.1);
	--light-rgba-20: rgba(255, 255, 255, 0.2);
	--light-rgba-30: rgba(255, 255, 255, 0.3);
	--light-rgba-40: rgba(255, 255, 255, 0.4);
	--light-rgba-50: rgba(255, 255, 255, 0.5);
	--light-rgba-60: rgba(255, 255, 255, 0.6);
	--light-rgba-70: rgba(255, 255, 255, 0.7);
	--light-rgba-80: rgba(255, 255, 255, 0.8);
	--light-rgba-90: rgba(255, 255, 255, 0.9);
}


/* Skin Colors - Inverse (the text color that sits ON each fill)
   ========================================================================== */
:root {
	--primary-inverse: #FFFFFF;     /* white on #0059AD  6.93:1 */
	--secondary-inverse: #222222;   /* charcoal on #2295F2  5.04:1 - NOT white */
	--tertiary-inverse: #FFFFFF;
	--quaternary-inverse: #FFFFFF;
	--dark-inverse: #FFFFFF;
	--light-inverse: #555555;       /* Porto ships #777, which fails AA */
}


/* Grey Colors (Porto defaults - neutral, kept as-is)
   ========================================================================== */
:root {
	--grey: #969696;
	--grey-100: #f4f4f4;
	--grey-200: #eaeaea;
	--grey-300: #e5e5e5;
	--grey-400: #e0e0e0;
	--grey-500: #dbdbdb;
	--grey-600: #cecece;
	--grey-700: #c1c1c1;
	--grey-800: #a8a8a8;
	--grey-900: #8e8e8e;
	--grey-1000: #757575;
}


/* Typography - ONE family, site-wide (PORTO-NOTES.md section 3)
   Porto's theme CSS and demo CSS name other families in places (Open Sans
   on an alternative nav, Playfair on testimonials, Shadows Into Light on
   .alternative-font). None of those files are shipped, so every one of
   those rules is pinned back to Poppins here.
   ========================================================================== */
body,
h1, h2, h3, h4, h5, h6,
.btn,
.form-control,
.form-select,
.header-nav,
#header .header-nav-main nav > ul > li > a,
.alternative-font,
.highlighted-word,
.thumb-info-ribbon span,
.testimonial blockquote,
.testimonial blockquote p {
	font-family: var(--hf-font);
}


/* Accessibility
   ========================================================================== */

/* A focus ring you can actually see, on every interactive element. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--primary);
	outline-offset: 2px;
	box-shadow: none;
}

/* Links in running text are underlined: color alone is not a link cue. */
.hf-prose a,
.hf-footer a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Visually hidden but present for screen readers (Bootstrap's own
   .visually-hidden covers this; kept here for the honeypot wrapper, which
   must ALSO be hidden from screen readers - see .hf-hp). */
.hf-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* Coming-soon page (Pages/ComingSoon.cshtml)
   ========================================================================== */
.hf-cs-header {
	padding: 16px 0;
	border-bottom: 1px solid var(--grey-300);
	background: var(--light);
}

/* 48px tall, the same as the admin header's logo (aspect 4.14 : 1). */
.hf-cs-header .hf-logo img {
	display: block;
	width: 199px;
	height: auto;
}

/* Hero: white, with the brand's one decorative motif - a large, faint
   logomark ring. The icon file is used as-is (never recolored); opacity does
   the fading. A pseudo-element, so it is invisible to assistive tech. */
.hf-cs-hero {
	position: relative;
	overflow: hidden;
	padding: 40px 0 48px;
	background: var(--light);
}

.hf-cs-hero::before {
	content: "";
	position: absolute;
	top: -140px;
	right: -220px;
	width: 680px;
	height: 680px;
	background: url("../img/brand/hubfount-icon-primary.svg") no-repeat center / contain;
	opacity: 0.07;
	pointer-events: none;
}

.hf-cs-hero > .container {
	position: relative; /* above the ring */
}

.hf-badge {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--hf-mist);
	color: var(--primary);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: normal;
	text-align: left;
}

.hf-cs-hero h1 {
	margin: 16px 0 12px;
	color: var(--dark);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.hf-cs-hero .lead {
	color: var(--default);
	font-size: 1.05rem;
	line-height: 1.6;
}

@media (min-width: 992px) {
	.hf-cs-hero {
		padding: 72px 0 80px;
	}

	.hf-cs-hero h1 {
		font-size: 3rem;
	}

	.hf-cs-hero .lead {
		font-size: 1.2rem;
	}
}

/* Signup card */
.hf-signup {
	padding: 24px;
	border: 1px solid var(--grey-300);
	border-radius: var(--border-radius2x);
	background: var(--light);
	box-shadow: 0 12px 40px rgba(0, 89, 173, 0.08);
	scroll-margin-top: 16px;
}

.hf-signup h2 {
	margin-bottom: 4px;
	color: var(--dark);
	font-size: 1.25rem;
	font-weight: 700;
}

.hf-signup .form-label {
	margin-bottom: 4px;
	color: var(--dark);
	font-weight: 600;
}

.hf-signup .form-control,
.hf-signup .form-select {
	min-height: 48px;
	font-size: 1rem; /* 16px+ stops iOS zooming into the field */
}

.hf-signup .form-check {
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 0;
}

.hf-signup .form-check-input {
	width: 22px;
	height: 22px;
	margin: 0;
	flex: 0 0 auto;
}

.hf-signup .btn-primary {
	min-height: 52px;
	font-weight: 700;
	font-size: 1rem;
}

.hf-consent {
	color: var(--default);
	font-size: 0.85rem;
	line-height: 1.5;
}

.hf-consent a {
	color: var(--primary);
	text-decoration: underline;
}

.hf-signup .text-danger,
.hf-signup .validation-summary-errors {
	color: #B00020 !important; /* 6.4:1 on white */
	font-size: 0.9rem;
}

.hf-success {
	padding: 8px 0;
}

.hf-success h2 {
	color: var(--primary);
	font-size: 1.5rem;
}

/* Countdown - Porto's component, hidden server-side until a launch date is set */
.hf-countdown {
	margin-top: 24px;
}

.hf-countdown .countdown > span {
	color: var(--dark);
	font-size: 0.75rem;
	font-weight: 600;
}

.hf-countdown .countdown > span > span {
	color: var(--primary);
}

.hf-countdown-done {
	color: var(--primary);
	font-weight: 700;
}

/* "What's coming" */
.hf-section {
	padding: 56px 0;
}

.hf-section-title {
	margin-bottom: 8px;
	color: var(--dark);
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.hf-bg-mist {
	background: var(--hf-mist);
}

.hf-coming-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	height: 100%;
	padding: 18px;
	border-radius: var(--border-radius2x);
	background: var(--light);
}

.hf-coming-item .hf-icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--secondary); /* fill only */
	color: var(--secondary-inverse); /* charcoal on #2295F2 = 5.04:1 */
	font-size: 1.1rem;
}

.hf-coming-item h3 {
	margin: 0 0 2px;
	color: var(--dark);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.hf-coming-item p {
	margin: 0;
	color: var(--default);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Three promises */
.hf-promise h3 {
	margin-bottom: 6px;
	color: var(--primary);
	font-size: 1.25rem;
	font-weight: 800;
}

.hf-promise p {
	color: var(--default);
	font-size: 1rem;
}

/* Business band - #0059AD fill, white text (6.93:1) */
.hf-business-band {
	position: relative;
	overflow: hidden;
	padding: 56px 0;
	background: var(--primary);
	color: var(--primary-inverse);
}

.hf-business-band h2 {
	color: var(--primary-inverse);
	font-size: 1.75rem;
	font-weight: 800;
}

.hf-business-band p {
	color: var(--primary-inverse);
	font-size: 1.05rem;
}

.hf-business-band code {
	padding: 2px 6px;
	border-radius: var(--border-radius);
	background: rgba(255, 255, 255, 0.14);
	color: var(--primary-inverse);
	font-size: 0.95em;
	word-break: break-word;
}

.hf-business-band .btn-light {
	min-height: 48px;
	color: var(--primary);
	font-weight: 700;
}

/* Footer - charcoal, where the inverse logo looks best (brand/README.md) */
.hf-footer {
	padding: 28px 0;
	background: var(--quaternary);
	color: #FFFFFF;
	font-size: 0.9rem;
}

.hf-footer a {
	color: #FFFFFF;
}

.hf-footer a:hover {
	color: var(--secondary--300);
}

.hf-footer .hf-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-footer .hf-footer-links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.hf-footer .social-icons li a {
	width: 44px;
	height: 44px;
	line-height: 44px;
}

/* Plain-text pages: privacy, terms, confirm, unsubscribe */
.hf-prose {
	max-width: 760px;
	padding: 40px 0 56px;
	color: var(--dark);
	font-size: 1rem;
	line-height: 1.7;
}

.hf-prose h1 {
	font-size: 2rem;
	font-weight: 800;
	margin-bottom: 8px;
}

.hf-prose h2 {
	margin-top: 32px;
	font-size: 1.3rem;
	font-weight: 700;
}

.hf-prose a {
	color: var(--primary);
}

.hf-todo {
	padding: 12px 16px;
	border-left: 4px solid var(--secondary);
	background: var(--hf-mist);
	font-size: 0.9rem;
}


/* Public site (Pages/Shared/_Layout.cshtml)
   ========================================================================== */
.hf-site {
	background: #FFF;
}

.hf-skip:focus {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1000;
	padding: 8px 16px;
	background: #FFF;
}

.hf-site-header {
	padding: 12px 0;
	border-bottom: 1px solid var(--grey-300);
}

/* 48px tall, the same as the admin header's logo. */
.hf-site-header .hf-logo img {
	display: block;
	width: auto;
	height: 48px;
}

.hf-site-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	color: var(--primary);
	font-weight: 600;
	text-decoration: none;
}

.hf-site-nav a.active,
.hf-site-nav a:hover {
	color: var(--dark);
}

.hf-breadcrumb {
	margin-bottom: 8px;
	font-size: 0.875rem;
}

.hf-breadcrumb a {
	color: var(--primary);
}

.hf-page-title,
.hf-recipe-title {
	margin-bottom: 12px;
	color: var(--dark);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.hf-lede {
	max-width: 46rem;
	margin-bottom: 24px;
	font-size: 1.125rem;
}

/* Category chips */
.hf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hf-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--grey-300);
	border-radius: 999px;
	color: var(--primary);
	font-weight: 600;
	text-decoration: none;
}

.hf-chip.active,
.hf-chip:hover {
	border-color: var(--primary);
	background: var(--primary);
	color: #FFF;
}

/* Recipe cards */
.hf-recipe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
}

.hf-recipe-card-link {
	color: inherit;
	text-decoration: none;
}

.hf-recipe-card-img {
	aspect-ratio: 4 / 3;  /* reserves the space: no layout shift */
	overflow: hidden;
	border-radius: var(--border-radius);
	background: var(--hf-mist);
}

.hf-recipe-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hf-recipe-card-title {
	margin: 12px 0 4px;
	color: var(--dark);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

.hf-recipe-card-link:hover .hf-recipe-card-title {
	color: var(--primary);
	text-decoration: underline;
}

.hf-recipe-card-meta {
	margin: 0;
	color: #5C5C5C;
	font-size: 0.875rem;
}

/* Recipe page */
.hf-preview-banner {
	padding: 10px 0;
	background: #FFF4CE;
	color: #5C4400;
}

.hf-recipe {
	max-width: 960px;
}

.hf-recipe-hero {
	margin: 0 0 16px;
}

.hf-recipe-hero img {
	width: 100%;
	height: auto;
	border-radius: var(--border-radius);
}

.hf-recipe-hero figcaption {
	margin-top: 4px;
	color: #5C5C5C;
	font-size: 0.8125rem;
}

.hf-recipe-credit {
	margin-bottom: 8px;
	font-size: 1rem;
}

.hf-recipe-credit a {
	color: var(--primary);
	font-weight: 600;
}

.hf-recipe-summary {
	max-width: 46rem;
	font-size: 1.125rem;
}

.hf-recipe-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	margin: 16px 0 24px;
	padding: 16px 0;
	border-top: 1px solid var(--grey-300);
	border-bottom: 1px solid var(--grey-300);
}

.hf-recipe-facts dt {
	color: #5C5C5C;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hf-recipe-facts dd {
	margin: 0;
	color: var(--dark);
	font-weight: 700;
}

.hf-recipe-body {
	display: grid;
	gap: 32px;
}

@media (min-width: 992px) {
	.hf-recipe-body {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}
}

.hf-recipe-body h2 {
	margin: 0;
	color: var(--dark);
	font-size: 1.5rem;
	font-weight: 800;
}

.hf-ingredient-group {
	margin: 16px 0 4px;
	color: var(--dark);
	font-size: 1rem;
	font-weight: 700;
}

.hf-ingredient-list,
.hf-tip-list {
	padding-left: 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.hf-ingredient-list li {
	padding: 4px 0;
}

.hf-qty {
	font-weight: 700;
}

/* Steps: large type, easy to follow from across the kitchen. */
.hf-step-list {
	padding-left: 0;
	list-style: none;
	counter-reset: step;
}

.hf-step-list li {
	position: relative;
	padding: 0 0 20px 48px;
	font-size: 1.1875rem;
	line-height: 1.6;
	counter-increment: step;
}

.hf-step-list li::before {
	content: counter(step);
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--primary);
	color: #FFF;
	font-size: 1rem;
	font-weight: 700;
	line-height: 32px;
	text-align: center;
}

.hf-tips-title {
	margin-top: 24px !important;
}

/* Servings scaler */
.hf-scaler {
	display: flex;
	align-items: center;
	gap: 4px;
}

.hf-scaler-label {
	margin-right: 4px;
	color: #5C5C5C;
	font-size: 0.875rem;
	font-weight: 600;
}

.hf-scaler-btn {
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--grey-300);
	border-radius: var(--border-radius);
	background: #FFF;
	color: var(--primary);
	font-weight: 700;
}

.hf-scaler-btn.active {
	border-color: var(--primary);
	background: var(--primary);
	color: #FFF;
}

.hf-scaler-btn:disabled {
	opacity: 0.4;
}

.hf-scaler-value {
	min-width: 2.5ch;
	font-weight: 700;
	text-align: center;
}

.hf-wake {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-weight: 600;
}

.hf-wake input {
	width: 20px;
	height: 20px;
}

/* Share bar */
.hf-share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 32px 0;
	padding-top: 24px;
	border-top: 1px solid var(--grey-300);
}

.hf-share .btn {
	min-height: 44px;
}

.hf-related {
	margin-top: 16px;
}

.hf-related h2 {
	margin-bottom: 16px;
	color: var(--dark);
	font-weight: 800;
}

/* Print: the recipe and nothing else (BUILD-MAP: ingredients + steps only). */
@media print {
	.hf-site-header,
	.hf-footer,
	.hf-no-print,
	.hf-preview-banner,
	.hf-skip {
		display: none !important;
	}

	.hf-recipe {
		max-width: none;
		padding: 0 !important;
	}

	.hf-recipe-body {
		display: block;
	}

	.hf-recipe-steps {
		margin-top: 16px;
	}

	.hf-step-list li {
		font-size: 12pt;
		break-inside: avoid;
	}

	.hf-step-list li::before {
		border: 1px solid #000;
		background: none;
		color: #000;
	}

	a {
		color: #000 !important;
		text-decoration: none !important;
	}
}

/* Staff bar (Pages/Shared/_StaffBar.cshtml): signed-in staff only, never cached. */
.hf-staff-bar {
	padding: 6px 0;
	background: #222;
	color: #FFF;
	font-size: 0.875rem;
}

.hf-staff-bar a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: #FFF;
	font-weight: 600;
	text-decoration: underline;
}

.hf-staff-bar a:focus-visible {
	outline: 2px solid #FFF;
	outline-offset: 2px;
}