/* ==========================================================================
   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);
}


/* Buttons
   ========================================================================== */

/* Every button centers its icon and text, whether it's a <button> or an <a>.
   Porto's .btn is inline-block, so wherever a page gives buttons a taller
   min-height (44px tap targets), the <a> ones kept their text at the top
   while <button>s centered it. One rule here instead of one per page.
   Keep button content to an icon plus text: in a flex box, the space
   beside an inline tag like <strong> collapses. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	vertical-align: middle;
}

.btn[hidden] {
	display: none;
}


/* 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;
	left: -220px; /* the left side, behind the headline (owner, 2026-10-21), to balance the signup card */
	width: 680px;
	height: 680px;
	background: url("../img/brand/hubfount-icon-primary.svg") no-repeat center / contain;
	opacity: 0.07;
	pointer-events: none;
}

/* Really wide screens (owner, 2026-10-19; moved left 2026-10-21): the ring
   grows and moves in so it sits centred behind the headline column and
   spreads out around it. That column is the left half of Bootstrap's 1320px
   container, so its middle is 330px left of the page's centre. */
@media (min-width: 1400px) {
	.hf-cs-hero::before {
		--hf-ring: 980px;
		top: 50%;
		left: calc(50% - 330px - var(--hf-ring) / 2);
		width: var(--hf-ring);
		height: var(--hf-ring);
		transform: translateY(-50%);
	}
}

@media (min-width: 1800px) {
	.hf-cs-hero::before {
		--hf-ring: 1180px;
	}
}

.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);
}

/* Lightest band (the recipe showcase): a whisper of the brand blue, a step
   lighter than mist, so it reads as its own section between mist and the
   promises band. #222 on it is 15.3:1. */
.hf-bg-lightest {
	background: #F8FBFE;
}

/* What's coming cards - after Porto's elements-cards.html (card-border-top,
   card-border-hover, box-shadow-hover, anim-hover-translate-top-10px) with
   its icon-featured badge. White on mist, a soft blue shadow; on hover the
   card lifts and a brand-blue edge grows across the top. */
.hf-coming-card {
	position: relative;
	height: 100%;
	padding: 26px 22px 22px;
	overflow: hidden;
	border: 1px solid rgba(0, 89, 173, 0.08);
	border-radius: 14px;
	background: #FFFFFF;
	box-shadow: 0 6px 18px rgba(0, 45, 90, 0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hf-coming-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 4px;
	border-radius: 0 0 4px 0;
	background: linear-gradient(90deg, var(--primary), var(--secondary));
	transition: width 0.4s ease;
}

.hf-coming-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(0, 45, 90, 0.12);
}

.hf-coming-card:hover::before {
	width: 100%;
}

/* The badge: white icon on the brand gradient (decorative, aria-hidden). */
.hf-coming-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
	box-shadow: 0 8px 16px rgba(0, 89, 173, 0.25);
	color: #FFFFFF;
	font-size: 1.35rem;
	transition: transform 0.3s ease;
}

.hf-coming-card:hover .hf-coming-icon {
	transform: rotate(-6deg) scale(1.06);
}

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

.hf-coming-card p {
	margin: 0;
	color: #4A4A4A; /* 8.9:1 on white */
	font-size: 0.95rem;
	line-height: 1.5;
}

/* The card that's a link (Recipes worth sharing -> /recipes): the whole card
   is the target; the "View all recipes" line says so. */
.hf-coming-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.hf-coming-card-link:hover,
.hf-coming-card-link:focus-visible {
	color: inherit;
}

.hf-coming-go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin-top: 4px;
	color: #0059AD; /* 6.93:1 on white */
	font-weight: 700;
}

.hf-coming-card-link:hover .hf-coming-go,
.hf-coming-card-link:focus-visible .hf-coming-go {
	text-decoration: underline;
}

.hf-coming-go i {
	font-size: 0.85em;
	transition: transform 0.2s ease;
}

.hf-coming-card-link:hover .hf-coming-go i {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.hf-coming-go i {
		transition: none;
	}

	.hf-coming-card-link:hover .hf-coming-go i {
		transform: none;
	}

	.hf-coming-card,
	.hf-coming-card::before,
	.hf-coming-icon {
		transition: none;
	}

	.hf-coming-card:hover,
	.hf-coming-card:hover .hf-coming-icon {
		transform: none;
	}
}

/* Recipe showcase (ComingSoon): one recipe at a time in Porto's Owl carousel,
   photo (or the HubFount tile) with its name on a dark fade at the foot. */
.hf-showcase {
	position: relative;
}

.hf-showcase-link {
	position: relative; /* the caption sits on it, clipped to its corners */
	display: block;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 14px 34px rgba(0, 45, 90, 0.16);
	color: #FFFFFF;
	text-decoration: none;
}

.hf-showcase-img {
	position: relative;
	aspect-ratio: 4 / 3; /* reserves the space: no layout shift */
	background: var(--hf-mist);
}

.hf-showcase-img > img,
.hf-showcase-img .hf-recipe-card-nophoto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.hf-showcase .hf-recipe-card-nophoto img {
	width: 46%;
	max-width: 280px;
	height: auto;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.hf-showcase-link:hover .hf-showcase-img > img {
	transform: scale(1.04);
}

/* White on a fade that reaches near-black behind the text: 15:1 or better. */
.hf-showcase-caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 56px 24px 20px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 55%, rgba(0, 0, 0, 0.88) 100%);
}

.hf-showcase-caption h3 {
	margin: 0;
	color: #FFFFFF;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.25;
}

.hf-showcase-caption p {
	margin: 4px 0 0;
	color: #FFFFFF;
	font-size: 0.95rem;
}

.hf-showcase-link:hover h3,
.hf-showcase-link:focus-visible h3 {
	text-decoration: underline;
}

.hf-showcase .owl-dots {
	margin-top: 14px !important;
}

.hf-showcase-controls {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
}

.hf-showcase-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(0, 89, 173, 0.25);
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--primary);
}

.hf-showcase-btn:hover {
	background: var(--primary);
	color: #FFFFFF;
}

.hf-showcase-cta h2 {
	margin: 12px 0 12px;
	color: var(--dark);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.hf-showcase-cta .lead {
	margin-bottom: 24px;
	color: #333333;
}

@media (prefers-reduced-motion: reduce) {
	.hf-showcase-img > img {
		transition: none;
	}

	.hf-showcase-link:hover .hf-showcase-img > img {
		transform: none;
	}
}

/* Big call-to-action buttons: the showcase's and "Join as a business". */
.hf-btn-xl {
	min-height: 56px;
	padding: 14px 34px;
	font-size: 1.125rem;
	font-weight: 700;
}

/* Three promises, on the same mist as "What's coming" (owner, 2026-10-19),
   with the recipe showcase's lighter band between them. #222 body text is
   14.5:1 on mist; the #0059AD headings 6.3:1. */
.hf-promises {
	background: var(--hf-mist);
}

.hf-promises .hf-promise p {
	color: #222222;
}

.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 (_SiteFooter.cshtml) - Porto's "Modern - Useful links" layout on
   charcoal, where the inverse logo looks best (brand/README.md). Porto's own
   footer greys (#777 on near black) fall under AA, so the colours are ours:
   #C8C8C8 body text is 9.5:1 on #222, white links 15.9:1. */
.hf-footer {
	background: var(--quaternary);
	color: #C8C8C8;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Porto colors every <p> itself (theme-elements.css: p { color: var(--default) }),
   so paragraphs don't inherit the footer's color and come out #444 on #222.
   #C8C8C8 on #222 is 9.5:1. */
.hf-footer p {
	color: #C8C8C8;
}

.hf-footer .hf-footer-main {
	padding: 56px 0 40px;
}

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

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

.hf-footer .hf-footer-tagline {
	margin-bottom: 4px;
	color: #FFFFFF;
	font-size: 1.15rem;
	font-weight: 600;
}

.hf-footer .hf-footer-heading {
	margin: 0 0 12px;
	color: #FFFFFF;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

/* Porto's list-icons look: an angle before each link. */
.hf-footer .hf-footer-list {
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
}

.hf-footer .hf-footer-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	transition: transform 0.1s ease-in-out;
}

.hf-footer .hf-footer-list a i {
	color: var(--secondary);
	font-size: 0.8em;
}

.hf-footer .hf-footer-list a:hover {
	transform: translateX(3px);
}

/* Brand rule: on a #2295F2 fill, #222 text (5.04:1). */
.hf-footer .hf-footer-cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--secondary);
	color: #222222;
	font-weight: 600;
	text-decoration: none;
}

.hf-footer .hf-footer-cta:hover,
.hf-footer .hf-footer-cta:focus-visible {
	background: var(--secondary--200);
	color: #222222;
}

/* The copyright bar (Porto's footer-copyright-style-2: a rule, not a band). */
.hf-footer .hf-footer-copyright {
	padding: 12px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.9rem;
}

.hf-footer .hf-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 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;
}

@media (prefers-reduced-motion: reduce) {
	.hf-footer .hf-footer-list a {
		transition: none;
	}

	.hf-footer .hf-footer-list a:hover {
		transform: none;
	}
}

/* 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);
}

@media (max-width: 575.98px) {
	.hf-site-nav a {
		padding: 0 8px;
	}
}

.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 list filters (Recipes/Index, Filter()): on wider screens the
   buttons stretch to fill each row; on a phone each row is a dropdown of the
   same links (details/summary, no script). */
.hf-chips-fill .hf-chip {
	flex: 1 1 auto;
	justify-content: center;
	text-align: center;
}

.hf-filter-menu {
	display: none;
}

@media (max-width: 767.98px) {
	.hf-filter .hf-chips-fill {
		display: none;
	}

	.hf-filter-menu {
		display: block;
		position: relative;
	}

	.hf-filter-menu > summary {
		display: flex;
		align-items: center;
		gap: 6px;
		min-height: 48px;
		padding: 0 44px 0 16px;
		border: 1px solid var(--grey-300);
		border-radius: 12px;
		background: #FFFFFF;
		color: var(--dark);
		list-style: none;
		cursor: pointer;
	}

	.hf-filter-menu > summary::-webkit-details-marker {
		display: none;
	}

	/* The chevron, turned up while open. */
	.hf-filter-menu > summary::after {
		content: "";
		position: absolute;
		top: 18px;
		right: 18px;
		width: 9px;
		height: 9px;
		border-right: 2px solid var(--primary);
		border-bottom: 2px solid var(--primary);
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}

	.hf-filter-menu[open] > summary::after {
		top: 22px;
		transform: rotate(-135deg);
	}

	.hf-filter-word {
		color: #555555; /* 7.5:1 on white */
	}

	.hf-filter-menu > ul {
		margin: 6px 0 0;
		padding: 6px;
		border: 1px solid var(--grey-300);
		border-radius: 12px;
		background: #FFFFFF;
		box-shadow: 0 12px 28px rgba(0, 45, 90, 0.12);
		list-style: none;
	}

	.hf-filter-menu > ul a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 12px;
		border-radius: 8px;
		color: var(--primary);
		font-weight: 600;
		text-decoration: none;
	}

	.hf-filter-menu > ul a:hover,
	.hf-filter-menu > ul a.active {
		background: var(--primary);
		color: #FFFFFF;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hf-filter-menu > summary::after {
		transition: none;
	}
}

/* Recipe search box (_RecipeSearch.cshtml). */
.hf-recipe-search {
	max-width: 640px;
}

.hf-recipe-search .form-control,
.hf-recipe-search .btn {
	min-height: 48px;
}

/* 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;
}

/* No photo: a HubFount tile (_RecipeCard.cshtml). Charcoal, because the
   inverse logo files are drawn for #222 (brand/README.md); a glow in the two
   brand blues; the home page's motif, the logomark ring, big, faint and
   cropped by the card; the white wordmark in the middle. hf-nophoto-0..3
   move the ring and glow to a different corner per recipe. */
.hf-recipe-card-nophoto {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background:
		radial-gradient(circle at var(--hf-glow-x, 100%) var(--hf-glow-y, 100%), rgba(34, 149, 242, 0.45) 0%, rgba(34, 149, 242, 0) 60%),
		radial-gradient(circle at var(--hf-glow2-x, 0%) var(--hf-glow2-y, 0%), rgba(0, 89, 173, 0.55) 0%, rgba(0, 89, 173, 0) 55%),
		#222222;
}

.hf-recipe-card-nophoto::before {
	content: "";
	position: absolute;
	width: 115%;
	aspect-ratio: 1;
	right: -48%;
	bottom: -62%;
	background: url("../img/brand/hubfount-icon-inverse.svg") no-repeat center / contain;
	opacity: 0.18;
	transform: rotate(var(--hf-ring-turn, 0deg));
	transition: transform 0.6s ease-in-out;
	pointer-events: none;
}

.hf-nophoto-1 {
	--hf-glow-x: 0%;
	--hf-glow-y: 100%;
	--hf-glow2-x: 100%;
	--hf-glow2-y: 0%;
}

.hf-nophoto-1::before {
	right: auto;
	left: -48%;
	--hf-ring-turn: 90deg;
}

.hf-nophoto-2 {
	--hf-glow-x: 100%;
	--hf-glow-y: 0%;
	--hf-glow2-x: 0%;
	--hf-glow2-y: 100%;
}

.hf-nophoto-2::before {
	bottom: auto;
	top: -62%;
	--hf-ring-turn: 180deg;
}

.hf-nophoto-3 {
	--hf-glow-x: 0%;
	--hf-glow-y: 0%;
	--hf-glow2-x: 100%;
	--hf-glow2-y: 100%;
}

.hf-nophoto-3::before {
	right: auto;
	bottom: auto;
	left: -48%;
	top: -62%;
	--hf-ring-turn: 270deg;
}

.hf-recipe-card-img .hf-recipe-card-nophoto img {
	position: relative; /* above the ring */
	width: 56%;
	max-width: 220px;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.hf-recipe-card-link:hover .hf-recipe-card-nophoto::before {
	transform: rotate(calc(var(--hf-ring-turn, 0deg) + 25deg));
}

@media (prefers-reduced-motion: reduce) {
	.hf-recipe-card-nophoto::before {
		transition: none;
	}
}

.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;
}

/* Ingredient scaler: "Make  ½ ×1 ×2 ×3 ×4" (recipe.js unhides it). Segmented buttons,
   44px each; the pressed one is filled. Fits beside or under "Ingredients" at 375px. */
.hf-scaler {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hf-scaler[hidden] {
	display: none;
}

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

.hf-scaler-group {
	display: inline-flex;
}

.hf-scaler-btn {
	position: relative;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 8px;
	border: 1px solid var(--grey-300);
	border-radius: 0;
	background: #FFF;
	color: var(--primary);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.hf-scaler-btn + .hf-scaler-btn {
	margin-left: -1px;
}

.hf-scaler-btn:first-child {
	border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.hf-scaler-btn:last-child {
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.hf-scaler-btn:hover {
	background: var(--primary-rgba-10);
}

.hf-scaler-btn[aria-pressed="true"] {
	z-index: 1;
	border-color: var(--primary);
	background: var(--primary);
	color: #FFF;
}

.hf-scaler-btn:focus-visible {
	z-index: 2;
}

/* "These amounts make twice the recipe. ..." Prints. Empty at x1, and takes no room;
   it stays displayed so screen readers announce it (aria-live) when it fills. */
.hf-scale-note {
	margin: 0 0 8px;
	color: var(--dark);
	font-weight: 600;
}

.hf-scale-note:empty {
	margin: 0;
}

.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;
	line-height: 1.2;
}

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

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

/* "Have a family recipe worth keeping?" at the end of every recipe. */
.hf-share-ask {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 40px;
	padding: 20px 24px;
	border-radius: 12px;
	background: var(--primary-rgba-10);
	color: var(--dark);
}

.hf-share-ask .btn {
	min-height: 44px;
	background: #FFFFFF;
}

.hf-share-ask .btn:hover {
	background: var(--primary);
}

/* Page title with an action beside it (Recipes: "Share a recipe"). */
.hf-title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 12px;
}

.hf-title-row .hf-page-title {
	margin-bottom: 0;
}

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

/* 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;
}

/* Recipes: step headings, sub-recipes shown in place, "more like this" tags. */
.hf-step-groups {
	counter-reset: step;
}

.hf-step-groups .hf-step-list {
	counter-reset: none;
}

.hf-step-group {
	margin: 16px 0 8px;
	color: var(--dark);
	font-size: 1.0625rem;
	font-weight: 700;
}

.hf-component-link {
	color: #0059AD;
	font-weight: 700;
	text-decoration: underline;
}

.hf-component-note {
	color: #595959;
	font-size: 0.9375rem;
}

.hf-recipe-component {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--grey-300);
	scroll-margin-top: 96px;
}

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

.hf-recipe-component .hf-recipe-body h3 {
	margin: 0 0 8px;
	color: var(--dark);
	font-size: 1.25rem;
	font-weight: 800;
}

/* A sub-recipe placed in the steps ("[[address]]" on a step line): shown
   whole at that point, in a tinted box so the main steps clearly carry on
   after it. Recipe.cshtml, Placed(). */
.hf-step-component {
	margin: 12px 0 20px;
	padding: 18px 20px;
	border-left: 4px solid var(--primary);
	border-radius: 0 12px 12px 0;
	background: var(--hf-mist);
	scroll-margin-top: 96px;
}

.hf-step-component .hf-step-component-title {
	margin: 0 0 12px;
	color: var(--dark);
	font-size: 1.25rem;
	font-weight: 800;
}

.hf-step-component .hf-step-component-sub {
	margin: 0 0 6px;
	color: var(--dark);
	font-size: 1rem;
	font-weight: 700;
}

.hf-component-own {
	margin-top: 8px;
}

.hf-component-own a {
	color: #0059AD;
}

.hf-recipe-tags {
	margin-top: 32px;
}

.hf-recipe-tags-title {
	margin-bottom: 12px;
	color: var(--dark);
	font-size: 1.125rem;
	font-weight: 800;
}

@media print {
	.hf-recipe-component {
		break-before: auto;
		border-top: 1px solid #000;
	}

	.hf-component-note {
		display: none;
	}
}

/* Share a recipe (/share-recipe): one readable column. */
.hf-share-form {
	max-width: 44rem;
}

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

/* Coming-soon card: "Claim a free page" or "Just tell me when HubFount opens",
   as two big tiles that fill blue when picked (owner, 2026-10-20). */
.hf-cs-choices {
	display: grid;
	gap: 10px;
}

.hf-cs-choice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border: 2px solid #C9D1DA;
	border-radius: 12px;
	background: #FFF;
	color: #222;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

.hf-cs-choice:hover {
	border-color: #0059AD;
}

.hf-cs-choice:has(input:checked) {
	border-color: #0059AD;
	background: #EAF3FC;
	box-shadow: inset 0 0 0 1px #0059AD;
}

.hf-cs-choice:has(input:focus-visible) {
	outline: 3px solid #2295F2;
	outline-offset: 2px;
}

.hf-cs-choice .form-check-input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	border: 2px solid #4B5563;
}

.hf-cs-choice .form-check-input:checked {
	background-color: #0059AD;
	border-color: #0059AD;
}

.hf-cs-choice strong {
	display: block;
	font-size: 1.0625rem;
	color: #111;
}

.hf-cs-choice small {
	display: block;
	font-size: 0.9375rem;
	color: #3D4752;
	line-height: 1.4;
}

/* ==========================================================================
   Directory pages (Pages/Directory/Index.cshtml): hubs, lists, a location.
   Text links use #0059AD; #2295F2 only for fills and outlines (rule 8).
   ========================================================================== */
.hf-dir-preview,
.hf-dir-pending {
	padding: 12px 16px;
	border-left: 4px solid #B45309;
	border-radius: 6px;
	background: #FEF3C7;
	color: #1F2328;
	font-weight: 600;
}

.hf-dir-heading {
	margin: 32px 0 12px;
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--dark);
}

.hf-dir-count,
.hf-dir-chip-count {
	display: inline-block;
	min-width: 2em;
	padding: 2px 8px;
	border-radius: 999px;
	background: #EEF4FB;
	color: #1F2328;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
}

.hf-chip.active .hf-dir-chip-count,
.hf-chip:hover .hf-dir-chip-count {
	background: #FFF;
	color: #0059AD;
}

.hf-dir-sections,
.hf-dir-places,
.hf-dir-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-dir-sections {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.hf-dir-sections a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 12px 16px;
	border: 1px solid #D0D7DE;
	border-radius: 10px;
	color: #0059AD;
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
}

.hf-dir-sections a:hover,
.hf-dir-sections a:focus-visible {
	border-color: #2295F2;
	background: #F5FAFF;
}

/* Places as buttons (owner, 2026-10-21). The page sets --cols-sm/-md/-lg
   (ButtonGrid) so rows come out even; every button is one column wide, and
   the last row's leftovers sit centred at the same width. */
.hf-dir-places {
	--cols: var(--cols-sm, 2);
	--gap: 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gap);
}

@media (min-width: 576px) {
	.hf-dir-places {
		--cols: var(--cols-md, 3);
	}
}

@media (min-width: 992px) {
	.hf-dir-places {
		--cols: var(--cols-lg, 4);
	}
}

.hf-dir-places li {
	/* A hair under the exact share, so rounding never pushes a full row onto two. */
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - 0.5px);
	min-width: 0;
}

.hf-dir-places a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 8px;
	height: 100%;
	min-height: 56px;
	padding: 10px 14px;
	border: 1px solid #D0D7DE;
	border-radius: 10px;
	background: #FFF;
	box-shadow: 0 1px 2px rgba(31, 35, 40, 0.06);
	color: #0059AD;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.hf-dir-places a:hover,
.hf-dir-places a:focus-visible {
	border-color: #2295F2;
	background: #F5FAFF;
	box-shadow: 0 2px 6px rgba(0, 89, 173, 0.12);
}

.hf-dir-list {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.hf-dir-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	border: 1px solid #D0D7DE;
	border-radius: 10px;
	background: #FFF;
}

/* Logos: every one is stored at the same width (ImageProcessor.LogoSizes) and shown
   whole in a 5:2 band, full width on a phone and one column of 3 or 4 on a desktop. */
.hf-dir-logo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 2;
	margin-bottom: 8px;
	object-fit: contain;
}

.hf-dir-logo-page {
	margin-bottom: 16px;
}

/* The storefront photo: the column's width, its own shape. */
.hf-dir-storefront {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 24px;
	border-radius: 10px;
}

@media (min-width: 768px) {
	.hf-dir-logo-page {
		max-width: 360px;
	}
}

.hf-dir-card-name {
	color: #0059AD;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

.hf-dir-card-meta {
	color: #3D4752;
	font-size: 0.9375rem;
}

.hf-dir-card-line {
	color: #1F2328;
}

.hf-dir-card-phone {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	color: #0059AD;
	font-weight: 700;
	text-decoration: none;
}

.hf-dir-total {
	margin-bottom: 12px;
	color: #3D4752;
	font-weight: 600;
}

/* A location */
.hf-dir-place {
	margin-bottom: 12px;
	color: #3D4752;
	font-size: 1.125rem;
}

.hf-dir-open {
	display: inline-block;
	margin-bottom: 16px;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 700;
}

.hf-dir-open.hf-is-open {
	background: #DCFCE7;
	color: #14532D;
}

.hf-dir-open.hf-is-closed {
	background: #F3F4F6;
	color: #1F2328;
}

.hf-dir-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}

.hf-dir-actions .btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
}

@media (max-width: 575.98px) {
	.hf-dir-actions .btn {
		flex: 1 1 calc(50% - 8px);
		justify-content: center;
	}
}

.hf-dir-block {
	margin-bottom: 24px;
	padding: 20px;
	border: 1px solid #D0D7DE;
	border-radius: 10px;
	background: #FFF;
}

.hf-dir-block h2 {
	margin-bottom: 12px;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--dark);
}

.hf-dir-block p {
	color: #1F2328;
}

.hf-dir-hours {
	width: 100%;
}

.hf-dir-hours th,
.hf-dir-hours td {
	padding: 8px 0;
	border-bottom: 1px solid #EAEEF2;
	color: #1F2328;
}

.hf-dir-hours th {
	width: 40%;
	font-weight: 600;
}

.hf-dir-hours tr.hf-today th,
.hf-dir-hours tr.hf-today td {
	font-weight: 800;
}

.hf-dir-contact dt {
	color: #3D4752;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hf-dir-contact dd {
	margin-bottom: 12px;
	color: #1F2328;
	overflow-wrap: anywhere;
}

.hf-dir-contact a {
	color: #0059AD;
	font-weight: 600;
}

.hf-dir-checked p {
	margin-bottom: 8px;
}

.hf-dir-checked a {
	color: #0059AD;
	font-weight: 600;
}

.hf-dir-claim {
	border-color: #2295F2;
	background: #F5FAFF;
}

/* Coming-soon "Now open", in the hero under the lead: the launched states and their counties. */
.hf-cs-open {
	margin-top: 28px;
}

.hf-cs-open > h2 {
	margin-bottom: 4px;
	font-size: 1.375rem;
	font-weight: 800;
}

.hf-open-state + .hf-open-state {
	margin-top: 16px;
}

.hf-open-state h3 {
	margin-bottom: 8px;
	font-size: 1.0625rem;
	font-weight: 800;
}

.hf-open-state h3 a {
	color: #0059AD;
}

.hf-open-places {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}