/**
 * Careers section + dark-theme Gravity Forms.
 *
 * Brand tokens come from the Kadence global palette:
 *   --global-palette1  #1d1b1b  near-black page background
 *   --global-palette2  #d44527  brand orange
 *   --global-palette9  #ffffff  body text
 *   --global-palette7  #e7eaeb  light grey
 *
 * Everything is scoped to .hb-careers (the page wrapper) or .gform_wrapper so
 * nothing here can leak into the rest of the site.
 */

:root {
	--hb-ink: var(--global-palette9, #fff);
	--hb-muted: rgba(255, 255, 255, 0.72);
	--hb-faint: rgba(255, 255, 255, 0.14);
	--hb-accent: var(--global-palette2, #d44527);
	--hb-surface: #262323;
}

/* ------------------------------------------------------------------ hero */

.hb-hero {
	/* Break out of the theme's content container without needing alignfull,
	   which wp:html blocks cannot carry. */
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(260px, 34vw, 420px);
	padding: clamp(3rem, 7vw, 6rem) 1.25rem;
	text-align: center;
	background-color: #1d1b1b;
	background-size: cover;
	background-position: center;
}

.hb-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(29, 27, 27, 0.62) 0%, rgba(29, 27, 27, 0.82) 100%);
}

.hb-hero > * {
	position: relative;
	z-index: 1;
	max-width: 56rem;
	margin-inline: auto;
}

.hb-hero h1 {
	margin: 0 0 0.5rem;
	color: #fff;
	font-size: clamp(2rem, 5.2vw, 3.4rem);
	line-height: 1.08;
}

.hb-hero .hb-hero__sub {
	margin: 0;
	color: var(--hb-muted);
	font-size: clamp(1rem, 1.6vw, 1.15rem);
}

/* A thin brand rule under the hero, echoing the application PDF's header. */
.hb-hero__rule {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	height: 5px;
	background: var(--hb-accent);
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------- layout */

.hb-careers .hb-wrap {
	max-width: 62rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Prose keeps a readable measure inside the wider shell, so section left
   edges stay aligned while lines never run to 990px. */
.hb-careers .hb-wrap > p,
.hb-careers .hb-wrap > ul,
.hb-careers .hb-wrap > h2,
.hb-careers .hb-wrap > h3 {
	max-width: 46rem;
}

.hb-careers .hb-section {
	padding-block: clamp(2.25rem, 5vw, 3.75rem);
}

.hb-careers .hb-section + .hb-section {
	border-top: 1px solid var(--hb-faint);
}

.hb-careers h2 {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	line-height: 1.15;
	margin-block: 0 0.75rem;
}

.hb-careers h3 {
	font-size: clamp(1.15rem, 2.2vw, 1.4rem);
	margin-block: 1.75rem 0.5rem;
}

.hb-careers p,
.hb-careers li {
	line-height: 1.65;
}

.hb-careers ul {
	padding-left: 1.15rem;
}

.hb-careers li {
	margin-block: 0.4rem;
}

.hb-careers li::marker {
	color: var(--hb-accent);
}

/* ---------------------------------------------------------- job cards */

.hb-job-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
	margin-top: 1.75rem;
}

.hb-job-card {
	display: flex;
	flex-direction: column;
	padding: 1.4rem 1.4rem 1.25rem;
	background: var(--hb-surface);
	border: 1px solid var(--hb-faint);
	border-radius: 10px;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.hb-job-card:hover,
.hb-job-card:focus-within {
	border-color: var(--hb-accent);
	transform: translateY(-2px);
}

.hb-job-card h3 {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
}

.hb-job-card p {
	margin: 0 0 1.1rem;
	color: var(--hb-muted);
	font-size: 0.95rem;
	flex: 1 1 auto;
}

.hb-careers .hb-job-card__meta,
.hb-job-card__meta {
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.hb-job-card__meta li {
	margin: 0;
	padding: 0.2rem 0.6rem;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hb-muted);
	border: 1px solid var(--hb-faint);
	border-radius: 999px;
}

.hb-job-card__meta li::marker {
	content: none;
}

.hb-job-card a.hb-link {
	align-self: flex-start;
	color: var(--hb-accent);
	font-weight: 700;
	text-decoration: none;
}

.hb-job-card a.hb-link:hover,
.hb-job-card a.hb-link:focus {
	text-decoration: underline;
}

/* --------------------------------------------------------------- CTA */

.hb-cta {
	margin-top: 2rem;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: var(--hb-surface);
	border: 1px solid var(--hb-faint);
	border-left: 4px solid var(--hb-accent);
	border-radius: 10px;
}

.hb-cta h2 {
	margin-top: 0;
}

.hb-btn,
.hb-careers .wp-block-button__link {
	display: inline-block;
	padding: 0.85rem 1.6rem;
	background: var(--hb-accent);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.01em;
	border: 0;
	border-radius: 6px;
	text-decoration: none;
}

.hb-btn:hover,
.hb-btn:focus,
.hb-careers .wp-block-button__link:hover,
.hb-careers .wp-block-button__link:focus {
	background: #b8371d;
	color: #fff;
}

.hb-fineprint {
	color: var(--hb-muted);
	font-size: 0.88rem;
}

/* ============================================================
   Gravity Forms — dark theme
   GF's defaults put #112337 labels on this site's #1d1b1b page,
   which is about 1.1:1 contrast. Everything below is a contrast
   fix first and a styling pass second.
   ============================================================ */

/* Colour, label/description colour, input colour and control size are set on
   the form itself (see tools/careers/001-application-form.php). GF emits those
   as an inline block at `#gform_wrapper_N[...].gform-theme` — specificity
   (1,2,0) — which no external selector can outrank, so they are deliberately
   NOT duplicated here. What remains below is only what GF's style settings
   cannot express on a dark background.
*/

/* Match the surrounding prose measure and left edge. Centring the form at a
   different width than the page text is what made the footer look misaligned. */
.gform_wrapper {
	max-width: 46rem;
	margin-inline: 0;
}

/* Required marker: GF has no setting for this one. */
.gform_wrapper .gfield_required {
	color: var(--hb-accent) !important;
}

/* Section headers inside the form. */
.gform_wrapper .gsection {
	border-bottom: 1px solid var(--hb-faint);
	margin-top: 2.25rem;
}

.gform_wrapper .gsection .gsection_title {
	color: var(--hb-ink) !important;
	font-size: 1.35rem;
}

.gform_wrapper .gsection .gsection_description {
	color: var(--hb-muted) !important;
}

/*
 * Input text colour MUST be set here, not via the form's `inputColor` style.
 * Kadence's global.min.css has
 *     input[type="text"], ..., textarea { color: var(--global-palette5) }
 * and palette5 on this site is #ffffff. Against GF's white input background
 * that is white-on-white — including the caret, so you cannot see where you
 * are typing. An attribute selector is (0,1,1); scoping to .gform_wrapper
 * makes these (0,2,1) and wins without !important.
 */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="date"],
.gform_wrapper textarea,
.gform_wrapper select {
	background-color: #fff;
	color: #1d1b1b;
	-webkit-text-fill-color: #1d1b1b;
	caret-color: #1d1b1b;
	border: 1px solid #8d9498;
	border-radius: 6px;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: #6b7177;
	opacity: 1;
}

/* Autofill: Chrome repaints its own background and text colour. */
.gform_wrapper input:-webkit-autofill,
.gform_wrapper input:-webkit-autofill:focus {
	-webkit-text-fill-color: #1d1b1b;
	box-shadow: 0 0 0 1000px #fff inset;
}

/*
 * Focus state. Kadence also has
 *     input[type="text"]:focus, ... { color: var(--global-palette3) }   /* #fff *\/
 * at (0,2,1) — exactly tied with the rule above, and its stylesheet loads
 * later, so it won the tie and text went white *while typing* and corrected
 * on blur. Adding :focus here makes these (0,3,1).
 * -webkit-text-fill-color is set too: it defaults to currentColor and is what
 * actually paints the glyphs in WebKit/Blink.
 */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="date"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	background-color: #fff;
	color: #1d1b1b;
	-webkit-text-fill-color: #1d1b1b;
	caret-color: #1d1b1b;
	outline: 3px solid var(--hb-accent);
	outline-offset: 1px;
}

/* Radios and checkboxes: the control itself plus its text. */
.gform_wrapper .gfield_radio .gchoice,
.gform_wrapper .gfield_checkbox .gchoice {
	margin-block: 0.35rem;
}

/* GF renders these with appearance:none and draws them itself, so accent-color
   and explicit sizing do nothing except fight --gf-ctrl-size. Only the
   unchecked state needs help: a white disc on near-black reads as "already
   selected". :not(:checked) leaves GF's orange checked state intact. */
.gform_wrapper input[type="radio"],
.gform_wrapper input[type="checkbox"] {
	/* GF's 'lg' input size renders these at 13px, too small to tap reliably. */
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

/* A white disc on near-black reads as "already selected". :not(:checked)
   leaves GF's orange checked state untouched. */
.gform_wrapper input[type="radio"]:not(:checked),
.gform_wrapper input[type="checkbox"]:not(:checked) {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.45);
}

/* One choice per row. A wrapping inline layout put long options like
   "Front of House (Cashier / Server / Drive-thru)" on two lines next to short
   ones, which made the set hard to scan. */
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
	display: flex;
	align-items: flex-start;   /* keeps the box on line 1 of a wrapping label */
	gap: 0.6rem;
	min-width: 0;
}

.gform_wrapper .gfield_checkbox .gchoice label,
.gform_wrapper .gfield_radio .gchoice label {
	margin: 0;
	line-height: 1.4;
}

.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .gfield_radio input[type="radio"] {
	margin-top: 0.1rem;
}

/* The multi-column List field (previous jobs). */
.gform_wrapper table.gfield_list th,
.gform_wrapper table.gfield_list td {
	color: var(--hb-ink) !important;
	border-color: var(--hb-faint) !important;
}

.gform_wrapper table.gfield_list th {
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hb-muted) !important;
}

.gform_wrapper .gfield_list_icons button,
.gform_wrapper .add_list_item,
.gform_wrapper .delete_list_item {
	filter: invert(1) brightness(1.6);
}

/* Step indicator. */
.gform_wrapper .gf_page_steps {
	border-bottom: 1px solid var(--hb-faint);
	margin-bottom: 1.75rem;
	padding-bottom: 0.75rem;
}

.gform_wrapper .gf_step {
	color: var(--hb-muted) !important;
	opacity: 1;
}

.gform_wrapper .gf_step_label {
	color: var(--hb-muted) !important;
}

.gform_wrapper .gf_step_number {
	color: var(--hb-ink) !important;
	border-color: var(--hb-faint) !important;
	background: transparent;
}

.gform_wrapper .gf_step.gf_step_active .gf_step_label {
	color: var(--hb-ink) !important;
	font-weight: 700;
}

.gform_wrapper .gf_step.gf_step_active .gf_step_number {
	background: var(--hb-accent);
	border-color: var(--hb-accent) !important;
	color: #fff !important;
}

.gform_wrapper .gf_step.gf_step_completed .gf_step_number {
	border-color: var(--hb-accent) !important;
	color: var(--hb-accent) !important;
}

/* Progress bar variant, if the pagination style is ever switched. */
.gform_wrapper .gf_progressbar_wrapper .gf_progressbar_title {
	color: var(--hb-ink) !important;
}

.gform_wrapper .gf_progressbar {
	background: rgba(255, 255, 255, 0.12);
}

.gform_wrapper .gf_progressbar_percentage {
	background: var(--hb-accent);
}

/* Buttons. */
/* Colour comes from --gf-color-primary above; this is weight and spacing only. */
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button,
.gform_wrapper .gform_save_link {
	padding-inline: 1.7rem;
	font-weight: 700;
	cursor: pointer;
}

/* Secondary action reads as an outline so "Next" stays the obvious one. */
.gform_wrapper .gform_previous_button.gform-theme-button,
.gform_wrapper .gform_previous_button {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--hb-ink);
}

.gform_wrapper .gform_previous_button:hover {
	border-color: var(--hb-ink);
	background: rgba(255, 255, 255, 0.06);
}

.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	border-top: 1px solid var(--hb-faint);
	padding-top: 1.5rem;
	margin-top: 2rem;
	margin-bottom: 2.5rem;
}

/* Fine print after the form needs separating from the buttons. */
.hb-careers .gform_wrapper + p {
	margin-top: 2.5rem;
}

/* Validation — GF's error red on near-black is also too dark. */
.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper .validation_message,
.gform_wrapper .gform_validation_errors h2 {
	color: #ff8a6b !important;
}

.gform_wrapper .gform_validation_errors {
	background: rgba(212, 69, 39, 0.12);
	border: 1px solid var(--hb-accent);
	border-radius: 8px;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: #ff8a6b;
}

/* Confirmation message after submitting. */
.gform_confirmation_message {
	padding: 1.5rem;
	background: var(--hb-surface);
	border: 1px solid var(--hb-faint);
	border-left: 4px solid var(--hb-accent);
	border-radius: 10px;
}

/* The certification paragraph on the last step. */
.hb-certification {
	padding: 1.1rem 1.25rem;
	background: var(--hb-surface);
	border: 1px solid var(--hb-faint);
	border-radius: 8px;
	max-height: 15rem;
	overflow-y: auto;
}

.hb-certification p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--hb-muted);
}

.hb-form-note {
	color: var(--hb-muted);
	font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
	.hb-job-card {
		transition: none;
	}
}

/* The theme pins a 35px order bar (Uber Eats / DoorDash) to the bottom of the
   viewport on mobile. Without clearance it sits over the last thing on the
   page — which on the apply page is the Submit button. */
@media (max-width: 1024px) {
	.hb-careers .hb-section:last-child,
	.gform_wrapper .gform_footer,
	.gform_wrapper .gform_page_footer {
		padding-bottom: 5rem;
	}
}

/* ------------------------------------------------- pay / age / locations */

/* Mirrors the three-column table at the top of each job description PDF. */
.hb-factbar {
	max-width: 46rem;   /* align the right edge with the prose below it */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1px;
	margin: 0 0 2.25rem;
	background: var(--hb-faint);
	border: 1px solid var(--hb-faint);
	border-radius: 10px;
	overflow: hidden;
}

.hb-factbar > div {
	padding: 0.95rem 1.2rem;
	background: var(--hb-surface);
}

.hb-factbar dt {
	margin: 0 0 0.3rem;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hb-muted);
}

.hb-factbar dd {
	margin: 0;
	font-weight: 700;
	line-height: 1.35;
}

/* Two merged job descriptions rather than five roles: give them room. */
.hb-job-grid--two {
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.hb-job-card__roles {
	margin: 0 0 0.9rem;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--hb-muted);
}