/* =====================================================================
   Hyde Family Jam: site-wide CSS that lives outside Elementor
   (header now; footer and WooCommerce later). Matches comps/locked/.
   Colour names match the Elementor global variables; the fallbacks keep
   pages that don't load Elementor's kit CSS looking right.
   ===================================================================== */
:root {
	--hfj-paper: var(--ink-paper, #F2EAD3);
	--hfj-lemon: var(--ink-lemon, #FDF58E);
	--hfj-forest: var(--ink-forest, #4D6543);
	--hfj-orange: var(--ink-orange, #E36A2B);
	--hfj-teal: var(--ink-teal, #26705C);
	--hfj-black: var(--ink-black, #1F1A20);
	--hfj-voice: "Folker", "Bowlby One", Georgia, serif;
	--hfj-edge: 3px;
	--hfj-gutter: clamp(16px, 4vw, 48px);
	--hfj-header-height: 68px;
}

/* Astra shrinks the base size to ~15px; the design is built on 16px (1rem), so put it back. */
html:root { font-size: 100%; }

html body, html body.ast-plain-container, html body.ast-page-builder-template, html body.ast-separate-container {
	background-color: var(--hfj-paper);
	background-image: url("/wp-content/uploads/hfj-textures/soft-paper.svg");
}

/* ---------- Header */
.hfj-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background: var(--hfj-lemon) url("/wp-content/uploads/hfj-textures/header-lightning.webp") center / auto 100% repeat-x;
	border-bottom: var(--hfj-edge) solid var(--hfj-black);
	color: var(--hfj-black);
}
.hfj-header-inner {
	max-width: 1320px;
	margin: 0 auto;
	height: var(--hfj-header-height);
	padding: 0 var(--hfj-gutter);
	display: flex;
	align-items: center;
	gap: 8px;
}
.hfj-logo-link { flex: 1 0 auto; display: flex; align-items: center; min-height: 44px; }
.hfj-header img.hfj-logo-full { display: none; height: 24px; width: auto; max-width: none; }
.hfj-header img.hfj-logo-short { flex: none; height: 20px; width: auto; max-width: none; }
.hfj-nav { display: none; }
.hfj-nav-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 400 1.25rem/1 var(--hfj-voice);
	color: var(--hfj-black);
	text-decoration: none;
	white-space: nowrap;
}
.hfj-nav-link:hover, .hfj-nav-link[aria-current="page"] {
	color: var(--hfj-black);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* Buttons (same as the Elementor button-ticket classes) */
.hfj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 32px;
	background: var(--hfj-orange);
	color: var(--hfj-black);
	border: var(--hfj-edge) solid var(--hfj-black);
	font: 400 1.375rem/1 var(--hfj-voice);
	text-decoration: none;
	white-space: nowrap;
	transition: transform 150ms ease, background-color 150ms ease;
}
.hfj-btn:hover { background: var(--hfj-lemon); color: var(--hfj-black); transform: rotate(-2deg) scale(1.03); }
.hfj-btn-small { min-height: 44px; font-size: 0.95rem; padding: 0 8px; }
.hfj-btn-quiet { background: var(--hfj-lemon); }
.hfj-btn-quiet:hover { background: var(--hfj-black); color: var(--hfj-lemon); }
.hfj-header a:focus-visible, .hfj-menu-button:focus-visible { outline: 4px solid var(--hfj-teal); outline-offset: 3px; }

/* Menu button and phone menu */
.hfj-menu-button {
	width: 44px;
	height: 44px;
	flex: none;
	border: var(--hfj-edge) solid var(--hfj-black);
	background: var(--hfj-lemon);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	padding: 0;
	border-radius: 0;
	cursor: pointer;
}
.hfj-menu-button:hover, .hfj-menu-button:focus { background: var(--hfj-lemon); }
.hfj-menu-bar { width: 18px; height: 3px; background: var(--hfj-black); transition: transform 150ms ease, opacity 150ms ease; }
.hfj-menu-button[aria-expanded="true"] .hfj-menu-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hfj-menu-button[aria-expanded="true"] .hfj-menu-bar:nth-child(2) { opacity: 0; }
.hfj-menu-button[aria-expanded="true"] .hfj-menu-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.hfj-menu {
	display: flex;
	flex-direction: column;
	padding: 4px var(--hfj-gutter) 20px;
	background: var(--hfj-lemon) url("/wp-content/uploads/hfj-textures/soft-lemon.svg");
	border-top: var(--hfj-edge) solid var(--hfj-black);
}
.hfj-menu[hidden] { display: none; }
.hfj-menu-link {
	display: flex;
	align-items: center;
	min-height: 56px;
	border-bottom: 2px dashed var(--hfj-forest);
	font: 400 1.75rem/1.1 var(--hfj-voice);
	color: var(--hfj-black);
	text-decoration: none;
}
.hfj-menu-link:hover, .hfj-menu-link[aria-current="page"] { color: var(--hfj-black); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---------- Base text (non-Elementor pages: shop, basket, checkout) */
body {
	font-family: "Source Serif 4", Georgia, serif;
	color: var(--hfj-black);
}

/* ---------- Footer: sign-up band */
.hfj-signup {
	background: var(--hfj-lemon) url("/wp-content/uploads/hfj-textures/soft-lemon.svg");
	border-block: var(--hfj-edge) solid var(--hfj-black);
}
.hfj-signup-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: clamp(56px, 7vw, 112px) var(--hfj-gutter);
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.hfj-signup-text { display: flex; flex-direction: column; gap: 12px; }
.hfj-signup-title {
	margin: 0;
	font: 400 clamp(2rem, 1.4rem + 2.6vw, 3.5rem)/0.92 "Bowlby One", "Arial Black", sans-serif;
	text-transform: uppercase;
	color: var(--hfj-forest);
	text-wrap: balance;
}
.hfj-signup-copy { margin: 0; max-width: 42ch; font-size: 1.125rem; line-height: 1.55; }
.hfj-signup-form { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 0; }
.hfj-form-label { font: 400 1.125rem/1.3 var(--hfj-voice); color: var(--hfj-black); }
.hfj-signup-row { display: flex; flex-direction: column; gap: 12px; }
.hfj-footer input.hfj-field,
.hfj-field {
	flex: 1;
	min-width: 0;
	min-height: 56px;
	width: 100%;
	margin: 0;
	padding: 0 12px;
	border: var(--hfj-edge) solid var(--hfj-black);
	border-radius: 0;
	background: var(--ink-well, #FFFBDD);
	color: var(--hfj-black);
	font: 400 1.125rem/1 "Source Serif 4", Georgia, serif;
	box-shadow: none;
}
.hfj-footer input.hfj-field:focus, .hfj-field:focus-visible { outline: 4px solid var(--hfj-teal); outline-offset: 2px; border-color: var(--hfj-black); }
.hfj-footer input.hfj-field.is-error { border-color: var(--ink-oxblood, #7F343D); box-shadow: inset 0 0 0 2px var(--ink-oxblood, #7F343D); }
.hfj-error-text { margin: 0; font: 400 0.9375rem/1.3 "Source Serif 4", Georgia, serif; color: var(--ink-oxblood, #7F343D); }
.hfj-signup-form .hfj-btn { width: 100%; border-radius: 0; cursor: pointer; }
.hfj-signup-form .hfj-btn:focus-visible { outline: 4px solid var(--hfj-teal); outline-offset: 3px; }
.hfj-signup-done { margin: 0; font: 400 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.4 var(--hfj-voice); }
.hfj-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer: links */
.hfj-footer { background: var(--hfj-paper) url("/wp-content/uploads/hfj-textures/soft-paper.svg"); color: var(--hfj-black); }
.hfj-footer-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: clamp(56px, 7vw, 112px) var(--hfj-gutter);
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.hfj-footer img.hfj-footer-logo { height: 24px; width: auto; max-width: 100%; align-self: flex-start; }
.hfj-footer-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.hfj-footer-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 400 1.125rem/1.3 var(--hfj-voice);
	color: var(--hfj-black);
	text-decoration: underline;
	text-underline-offset: 4px;
	overflow-wrap: anywhere;
}
.hfj-footer-link:hover { color: var(--hfj-black); text-decoration-thickness: 2px; }
.hfj-footer-link:focus-visible { outline: 4px solid var(--hfj-teal); outline-offset: 3px; }
.hfj-footer-legal .hfj-footer-link { font: 400 1rem/1.3 "Source Serif 4", Georgia, serif; }
.hfj-footer-small { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--hfj-forest); }

@media (min-width: 600px) {
	.hfj-signup-row { flex-direction: row; }
	.hfj-signup-form .hfj-btn { width: auto; flex: none; }
}
@media (min-width: 1024px) {
	.hfj-signup-inner { flex-direction: row; align-items: center; gap: clamp(56px, 7vw, 112px); }
	.hfj-signup-text { flex: 0 1 44%; }
	.hfj-signup-form, .hfj-signup-done { flex: 1 1 56%; }
}

/* Jump links (#shows, #book, #enquire...) land below the sticky header, not under it */
.elementor [id] { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--hfj-header-height) + 12px); }

/* ---------- Astra tidy-ups on Elementor pages */
/* Astra colours every heading; on our pages headings take their colour from their class or the card they sit on. */
.elementor :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
body .elementor a.button-ticket, body .elementor a.button-ticket:hover { text-decoration: none; }
.page .post-navigation, .page .ast-single-related-posts-container { display: none; }
.page .site-content, .page .ast-container, .page .site-main, .page .entry-content, .page .ast-article-single { background: transparent; }

/* ---------- Homepage hero: the two things Elementor's class editor can't hold.
   1. The layered background (dot texture, ink mottle, green wash, crowd photo).
      To change the photo: replace the hero image file in the media library
      (Enable Media Replace keeps this address), or change the URL below.
   2. The headline: each word is sized to the column width so both lines end
      flush right. The heading's text must stay as nested spans:
      <span><span>Songs you</span> <span>know.</span></span><span><span>P<span>l</span>ayed</span> <span>wild.</span></span> */
.elementor .hero {
	background-image:
		url("/wp-content/uploads/hfj-textures/tex-dots-forest.svg"),
		url("/wp-content/uploads/hfj-textures/soft-forest.svg"),
		linear-gradient(180deg, rgb(47 63 42 / 0.94) 0%, rgb(47 63 42 / 0.8) 50%, rgb(47 63 42 / 0.5) 100%),
		url("/wp-content/uploads/2026/10/hero-crowd-green.webp");
	background-size: auto, auto, auto, cover;
	background-position: 0 0, 0 0, 0 0, center bottom;
	background-repeat: repeat, repeat, no-repeat, no-repeat;
}
.elementor .next-show-body { background-image: url("/wp-content/uploads/hfj-textures/soft-lemon.svg"); }
.elementor .hero-title { --measure: calc(min(100vw, 1320px) - 2 * clamp(16px, 4vw, 48px)); font-size: 1rem; }
.elementor .hero-title > span { display: block; color: var(--hfj-lemon); }
.elementor .hero-title > span:nth-child(2) { color: var(--hfj-orange); }
.elementor .hero-title > span > span { display: block; white-space: nowrap; }
.elementor .hero-title > span:nth-child(1) > span:nth-child(1) { font-size: calc(var(--measure) / 6.5); }
.elementor .hero-title > span:nth-child(1) > span:nth-child(2) { font-size: calc(var(--measure) / 3.79); }
.elementor .hero-title > span:nth-child(2) > span:nth-child(1) { font-size: calc(var(--measure) / 4.25); }
.elementor .hero-title > span:nth-child(2) > span:nth-child(2) { font-size: calc(var(--measure) / 3.79); }
.elementor .hero-title > span:nth-child(2) > span:nth-child(1) > span { letter-spacing: -0.075em; } /* tightens "Pl" */
@media (min-width: 600px) {
	.elementor .hero-title > span > span { display: inline; }
	.elementor .hero-title > span:nth-child(1) { font-size: calc(var(--measure) / 10.62); white-space: nowrap; }
	.elementor .hero-title > span:nth-child(2) { font-size: calc(var(--measure) / 7.72); white-space: nowrap; }
	.elementor .hero-title > span:nth-child(1) > span:nth-child(1),
	.elementor .hero-title > span:nth-child(1) > span:nth-child(2),
	.elementor .hero-title > span:nth-child(2) > span:nth-child(1),
	.elementor .hero-title > span:nth-child(2) > span:nth-child(2) { font-size: inherit; }
}

/* ---------- Ink textures (Elementor's class editor drops layered backgrounds).
   Rule: a box never repeats the texture of the section it sits on. */
.elementor .ink-orange, .elementor .book-bar { background-image: url("/wp-content/uploads/hfj-textures/tex-benday-orange.svg"), url("/wp-content/uploads/hfj-textures/soft-orange.svg"); }
.elementor .ink-teal, .elementor .merch-band { background-image: url("/wp-content/uploads/hfj-textures/tex-benday-teal.svg"), url("/wp-content/uploads/hfj-textures/soft-teal.svg"); }
.elementor .ink-forest { background-image: url("/wp-content/uploads/hfj-textures/tex-dots-forest.svg"), url("/wp-content/uploads/hfj-textures/soft-forest.svg"); }
.elementor .ink-mustard { background-image: url("/wp-content/uploads/hfj-textures/tex-dots-mustard.svg"), url("/wp-content/uploads/hfj-textures/soft-mustard.svg"); }
.elementor .ink-black { background-image: url("/wp-content/uploads/hfj-textures/tex-stars-night.svg"), url("/wp-content/uploads/hfj-textures/ink-night.svg"); }

/* Clear buttons on dark cards take the card's text colour */
.elementor .ink-teal .button-clear, .elementor .ink-forest .button-clear, .elementor .ink-black .button-clear { border-color: currentColor; color: inherit; }
.elementor .ink-teal .button-clear:hover, .elementor .ink-forest .button-clear:hover, .elementor .ink-black .button-clear:hover { color: var(--hfj-black); }

/* Show cards in the phone swipe row: smaller date and sticker, no tilt */
@media (max-width: 767px) {
	.elementor .poster-wall .show-date-day { font-size: 2.75rem; }
	.elementor .poster-wall .show-flag { transform: none; font-size: 0.8125rem; padding: 4px 8px; }
	.elementor .poster-wall { scrollbar-color: var(--hfj-orange) transparent; }
}

/* ---------- Photo band and gallery */
.elementor .photo-band {
	background-image: linear-gradient(180deg, rgb(31 26 32 / 0.92) 0%, rgb(31 26 32 / 0.78) 45%, rgb(31 26 32 / 0.96) 100%), url("/wp-content/uploads/2026/10/crowd-faces.webp");
	background-size: auto, cover;
	background-position: 0 0, center 35%;
	background-repeat: no-repeat;
}
/* Title text: 1<span>,</span>400 of you.<span>One August night.</span> */
.elementor .photo-band-title > span:nth-of-type(1) { margin-left: -0.06em; margin-right: -0.04em; }
.elementor .photo-band-title > span:nth-of-type(2) { display: block; color: var(--hfj-orange); }
.elementor .gallery { scrollbar-color: var(--hfj-orange) transparent; }
@media (min-width: 1024px) {
	.elementor .gallery { padding-left: max(clamp(16px, 4vw, 48px), calc((100vw - 1320px) / 2 + clamp(16px, 4vw, 48px))); }
}
/* Drifts on its own where there's a mouse; pauses on hover or focus. Phones keep swiping.
   site.js copies the photos once so the loop is seamless; just add or swap photos in Elementor. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.elementor .gallery { overflow: hidden; scroll-snap-type: none; }
	.elementor .gallery-track.is-looping { animation: hfj-drift 60s linear infinite; }
	.elementor .gallery:hover .gallery-track, .elementor .gallery:focus-within .gallery-track { animation-play-state: paused; }
}
@keyframes hfj-drift { to { transform: translateX(calc(-50% - 10px)); } }

/* ---------- Book us (textures and text bits Elementor's class editor can't hold) */
.elementor .book { background-image: url("/wp-content/uploads/hfj-textures/tex-benday-orange.svg"), url("/wp-content/uploads/hfj-textures/soft-orange.svg"); }
.elementor .service-card { background-image: url("/wp-content/uploads/hfj-textures/soft-paper.svg"); }
.elementor .enquiry-quote { background-image: url("/wp-content/uploads/hfj-textures/tex-dots-forest.svg"), url("/wp-content/uploads/hfj-textures/soft-forest.svg"); }
.elementor .steps { background-image: url("/wp-content/uploads/hfj-textures/tex-dots-mustard.svg"), url("/wp-content/uploads/hfj-textures/soft-mustard.svg"); }
/* Step text: <span>Bold line</span>Normal line */
.elementor .step-text > span { display: block; margin-bottom: 2px; font: 400 1.125rem/1.45 var(--hfj-voice); }
.elementor a.service-card, .elementor a.service-card:hover { color: var(--hfj-black); text-decoration: none; }
.elementor a.service-card:hover .service-link { background: var(--hfj-black); color: var(--hfj-lemon); }
.elementor a.service-card:focus-visible { outline: 4px solid var(--hfj-teal); outline-offset: 3px; }
@media (min-width: 900px) { .elementor .book .section-title { white-space: nowrap; } }

/* ---------- Word on the street and Where we've played */
.elementor .reviews { background-image: url("/wp-content/uploads/hfj-textures/soft-lemon.svg"); }
.elementor .flyer { background-image: url("/wp-content/uploads/hfj-textures/soft-paper.svg"); }
.elementor .flyer-big { background-image: url("/wp-content/uploads/hfj-textures/tex-dots-forest.svg"), url("/wp-content/uploads/hfj-textures/soft-forest.svg"); }
.elementor .flyer.ink-orange { background-image: url("/wp-content/uploads/hfj-textures/tex-benday-orange.svg"), url("/wp-content/uploads/hfj-textures/soft-orange.svg"); }
.elementor .flyer.ink-teal { background-image: url("/wp-content/uploads/hfj-textures/tex-benday-teal.svg"), url("/wp-content/uploads/hfj-textures/soft-teal.svg"); }
.elementor .flyer.ink-black { background-image: url("/wp-content/uploads/hfj-textures/tex-stars-night.svg"), url("/wp-content/uploads/hfj-textures/ink-night.svg"); }
/* Review credits take a colour that reads on each card */
.elementor .flyer.ink-orange .flyer-credit, .elementor .flyer.ink-mustard .flyer-credit { color: var(--hfj-black); }
.elementor .flyer.ink-teal .flyer-credit, .elementor .flyer-big .flyer-credit { color: var(--hfj-paper); }
.elementor .flyer.ink-black .flyer-credit { color: var(--ink-sage, #B7BF67); }
.elementor a.played-card, .elementor a.played-card:hover { text-decoration: none; }
.elementor a.played-card:focus-visible { outline: 4px solid var(--hfj-teal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .elementor .played-card, .elementor .played-card:hover { transition: none; transform: none; } }

/* ---------- Busking holding page. Title text: HFJ tracker<br><span>coming soon</span> */
.elementor .holding-title > span { color: var(--hfj-orange); }
.elementor .info-box .button-ticket { font-size: 1.25rem; padding: 0 20px; }
@media (max-width: 599px) { .elementor .info-box .button-ticket { font-size: 1.125rem; padding: 0 12px; } }

/* ---------- Merch page (layout from "Merch page layout") */
.elementor .shop-head { background-image: url("/wp-content/uploads/hfj-textures/tex-dots-mustard.svg"), url("/wp-content/uploads/hfj-textures/soft-mustard.svg"); }
.elementor .show-strip .button-ticket { max-width: 100%; padding: 0 20px; }
.elementor .show-strip { background-image: url("/wp-content/uploads/hfj-textures/tex-dots-forest.svg"), url("/wp-content/uploads/hfj-textures/soft-forest.svg"); }
.elementor .faq-question { list-style: none; }
.elementor .faq-question::-webkit-details-marker { display: none; }
.elementor .faq-item[open] > .faq-question { border-bottom: 0; }
.elementor .faq-question { justify-content: space-between; gap: 12px; }
.elementor .faq-question svg { width: 18px; height: 18px; fill: var(--hfj-black); }
.elementor .faq-question > [data-element_type="e-accordion-item-icon"] {
	flex: none; width: 16px; height: 10px; padding: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 L8 8 L14.5 1.5' fill='none' stroke='%231F1A20' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center;
	transition: transform 150ms ease;
}
.elementor .faq-item[open] > .faq-question > [data-element_type="e-accordion-item-icon"] { transform: rotate(180deg); }
.elementor .faq-answer-text a { color: var(--hfj-black); }
.elementor .faq-question:focus-visible { outline: 4px solid var(--hfj-teal); outline-offset: 2px; }

/* ---------- Enquiry form (site code, inserted into the "enquiry-form-slot" container) */
.hfj-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
	margin: 0;
	padding: 20px;
	background: var(--hfj-lemon) url("/wp-content/uploads/hfj-textures/soft-lemon.svg");
	border: var(--hfj-edge) solid var(--hfj-black);
	color: var(--hfj-black);
	min-width: 0;
}
.hfj-form-title, .elementor .hfj-form-title { margin: 0; font: 400 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1 "Bowlby One", "Arial Black", sans-serif; text-transform: uppercase; color: var(--hfj-forest); }
.hfj-form-row { display: flex; flex-direction: column; gap: 20px; }
.hfj-form-field { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.hfj-form > .hfj-form-field { flex: none; }
.hfj-form > .hfj-form-field-grow { flex: 1; }
.hfj-form-label { font: 400 1.125rem/1.3 var(--hfj-voice); color: var(--hfj-black); }
.hfj-form input.hfj-field, .hfj-form select.hfj-field, .hfj-form textarea.hfj-field, .hfj-form summary.hfj-field {
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 0 12px;
	border: var(--hfj-edge) solid var(--hfj-black);
	border-radius: 0;
	background-color: var(--ink-well, #FFFBDD);
	color: var(--hfj-black);
	font: 400 1.0625rem/1 "Source Serif 4", Georgia, serif;
	box-shadow: none;
}
.hfj-form select.hfj-field {
	appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; line-height: 1.2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 L8 8 L14.5 1.5' fill='none' stroke='%231F1A20' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center;
}
.hfj-form textarea.hfj-field-area { flex: 1; min-height: 140px; padding: 12px; line-height: 1.5; resize: vertical; }
.hfj-form-field-grow .hfj-field-area { flex: 1; }
.hfj-form .hfj-field:focus, .hfj-form .hfj-field:focus-visible { outline: 4px solid var(--hfj-teal); outline-offset: 2px; border-color: var(--hfj-black); }
.hfj-form .hfj-btn { width: 100%; border-radius: 0; cursor: pointer; }
.hfj-form .hfj-btn:focus-visible { outline: 4px solid var(--hfj-teal); outline-offset: 3px; }
.hfj-form-done-text { margin: 0; font: 400 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.45 var(--hfj-voice); }

/* "How did you hear about us?": a dropdown list that floats over the fields below */
.hfj-multi { position: relative; min-width: 0; }
.hfj-form summary.hfj-multi-summary {
	display: block; line-height: 50px; list-style: none; cursor: pointer; padding-right: 52px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 L8 8 L14.5 1.5' fill='none' stroke='%231F1A20' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 16px center;
}
.hfj-multi-summary::-webkit-details-marker { display: none; }
.hfj-multi[open] .hfj-multi-summary { outline: 4px solid var(--hfj-teal); outline-offset: 2px; }
.hfj-multi-list {
	position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0;
	display: flex; flex-direction: column;
	border: var(--hfj-edge) solid var(--hfj-black); background: var(--ink-well, #FFFBDD);
	box-shadow: 0 10px 24px rgb(31 26 32 / 0.25);
	max-height: min(60vh, 420px); overflow-y: auto;
}
.hfj-multi-option { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 0 12px; font: 400 1.0625rem/1.2 "Source Serif 4", Georgia, serif; cursor: pointer; }
.hfj-multi-option + .hfj-multi-option { border-top: 1px solid rgb(31 26 32 / 0.15); }
.hfj-multi-check { width: 20px; height: 20px; margin: 0; accent-color: var(--hfj-forest); flex: none; }
.hfj-multi-done {
	position: sticky; bottom: 0; margin: 0; border: 0; border-top: var(--hfj-edge) solid var(--hfj-black); border-radius: 0;
	min-height: 52px; width: 100%; font: 400 1.25rem/1 var(--hfj-voice); background: var(--hfj-forest); color: var(--hfj-lemon); cursor: pointer;
}
.hfj-multi-done:hover, .hfj-multi-done:focus { background: var(--hfj-forest); color: var(--hfj-lemon); }
.hfj-multi-done:focus-visible { outline: 4px solid var(--hfj-teal); outline-offset: -4px; }
@media (max-width: 599px) {
	.hfj-multi-option { min-height: 52px; font-size: 1.125rem; }
	.hfj-multi-check { width: 24px; height: 24px; }
}
@media (min-width: 600px) { .hfj-form-row { flex-direction: row; } }
@media (min-width: 1024px) {
	.hfj-form { padding: 32px; }
	.hfj-form textarea.hfj-field-area { min-height: 100px; }
}

/* Smallest phones (320px) */
@media (max-width: 359px) {
	.hfj-header-inner { gap: 6px; }
	.hfj-btn-small { font-size: 0.875rem; padding: 0 6px; }
	.hfj-logo-link { flex: 1 1 auto; min-width: 0; }
	.hfj-header img.hfj-logo-short { height: 16px; }
}
@media (min-width: 600px) {
	.hfj-header img.hfj-logo-short { height: 26px; }
	.hfj-btn-small { font-size: 1.125rem; padding: 0 12px; }
}
@media (min-width: 1024px) {
	.hfj-header-inner { gap: 20px; }
	.hfj-nav { display: contents; }
	.hfj-menu-button, .hfj-menu { display: none !important; }
}
@media (min-width: 1280px) {
	.hfj-header:not(.is-merch) img.hfj-logo-full { display: block; }
	.hfj-header:not(.is-merch) img.hfj-logo-short { display: none; }
}
/* Merch pages have one more nav link, so the full wordmark waits until 1440px */
@media (min-width: 1440px) {
	.hfj-header.is-merch img.hfj-logo-full { display: block; }
	.hfj-header.is-merch img.hfj-logo-short { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hfj-btn, .hfj-menu-bar { transition: none; }
	.hfj-btn:hover { transform: none; }
}