/* =========================================================================
   Aplify Apply Flow — page shell
   =========================================================================
   Only loaded on plugin-owned flow routes. Nothing here targets shortcode
   internals: component styling stays in apply_form.css / job_description.css
   so bespoke Elementor pages keep looking exactly as they do today.

   Colours come from the shell custom properties set inline by
   flow/layout.php (--flow-bg, --flow-card-bg, ...) and from the existing
   design-token system for typography and controls.
   ========================================================================= */

.aplify-flow {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: var(--flow-bg, #041324);
	color: var(--flow-on-bg, #fff);
	font-family: var(--font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
}

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

.aplify-flow [x-cloak] {
	display: none !important;
}

/* Accessible skip link ---------------------------------------------------- */

.aplify-flow-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--flow-card-bg, #fff);
	color: var(--flow-bg, #041324);
	padding: 12px 20px;
	border-radius: 0 0 8px 0;
	z-index: 10000;
	text-decoration: none;
	font-weight: var(--weight-strong, 600);
}

.aplify-flow-skip:focus {
	left: 0;
}

/* Header ------------------------------------------------------------------ */

.aplify-flow-header {
	padding: 28px 20px 24px;
}

.aplify-flow-header__inner {
	max-width: var(--flow-card-max, 860px);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.aplify-flow-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex: 0 1 auto;
	min-width: 100px;
}

.aplify-flow-logo img {
	display: block;
	max-height: 56px;
	width: auto;
	max-width: 220px;
	height: auto;
}

.aplify-flow-logo--text {
	color: var(--flow-on-bg, #fff);
	font-size: var(--text-xl, 20px);
	font-weight: var(--display-weight, 550);
	line-height: 1.2;
}

.aplify-flow-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--flow-on-bg, #fff);
	text-decoration: none;
	font-size: var(--text-md, 16px);
	font-weight: var(--label-weight);
	line-height: 1.2;
	white-space: nowrap;
	transition: opacity 0.15s ease;
}

.aplify-flow-back:hover,
.aplify-flow-back:focus {
	color: var(--flow-on-bg, #fff);
	opacity: 0.75;
	text-decoration: none;
}

.aplify-flow-back i {
	font-size: 1.15em;
	line-height: 1;
}

/* Card -------------------------------------------------------------------- */

.aplify-flow-card {
	width: 100%;
	max-width: var(--flow-card-max, 860px);
	margin: 0 auto;
	background: var(--flow-card-bg, #fff);
	border-radius: var(--flow-card-radius, 28px);
	overflow: hidden;
	flex: 1 0 auto;
}

.aplify-flow-body {
	padding: 44px 48px 52px;
	color: var(--fg, #1c2b36);
}

/* Hero -------------------------------------------------------------------- */

.aplify-flow-hero {
	position: relative;
	width: 100%;
	height: var(--flow-hero-height, 260px);
	overflow: hidden;
	background: var(--flow-bg, #041324);
}

.aplify-flow-hero__img {
    width: 100%;
    height: 100%;
    display: block;
}

/* layout.php puts .aplify-flow-hero__img on the <img> itself, so this has
   to target img.aplify-flow-hero__img too: with only the descendant selector
   it never matched, photos stretched to the hero's shape instead of cropping,
   and the focal-point setting (--flow-hero-position) did nothing. */
.aplify-flow-hero__img img,
img.aplify-flow-hero__img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: var(--flow-hero-position, center);
}

.aplify-flow-hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	padding: 32px 48px;
	pointer-events: none;
}

.aplify-flow-hero__content > * {
	pointer-events: auto;
}

/* Bottom-left hero text (job description: title + location; all jobs:
   heading), over two layers of scrim. The lower one is a fixed dark gradient
   that is always there; the client's overlay colour sits on top of it. The
   overlay alone defaulted to 35% and could be lightened or cleared in
   settings, which left white text unreadable on a pale photo — the fixed
   layer means the text holds up whatever image or overlay a client picks. */

.aplify-flow--job .aplify-flow-hero::after,
.aplify-flow--apply .aplify-flow-hero::after,
.aplify-flow--all_jobs .aplify-flow-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to top,
			var(--flow-hero-overlay, rgba(4, 19, 36, 0.35)) 0%,
			rgba(0, 0, 0, 0) 70%
		),
		linear-gradient(
			to top,
			rgba(0, 0, 0, 0.66) 0%,
			rgba(0, 0, 0, 0.38) 40%,
			rgba(0, 0, 0, 0) 80%
		);
	pointer-events: none;
}

.aplify-flow--all_jobs .aplify-flow-hero__content,
.aplify-flow--job .aplify-flow-hero__content,
.aplify-flow--apply .aplify-flow-hero__content {
	align-items: flex-end;
	justify-content: flex-start;
	z-index: 2;
}

/* The job page's hero holds the title, location, salary and a row of chips:
   on a wide title or a long job family that can outgrow the configured hero
   height, so the hero grows with its content rather than clipping it. The
   photo fills whatever height that is. The apply page's hero holds the same
   header. */
.aplify-flow--job .aplify-flow-hero,
.aplify-flow--apply .aplify-flow-hero {
	height: auto;
	min-height: var(--flow-hero-height, 260px);
}

.aplify-flow--job .aplify-flow-hero__img,
.aplify-flow--apply .aplify-flow-hero__img {
	position: absolute;
	inset: 0;
}

.aplify-flow--job .aplify-flow-hero__content,
.aplify-flow--apply .aplify-flow-hero__content {
	position: relative;
	min-height: var(--flow-hero-height, 260px);
	box-sizing: border-box;
}

.aplify-flow-hero-job {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 100%;
}

.aplify-flow-hero-job .aplify-jd-title,
.aplify-flow-hero-job .aplify-job-title-standalone .aplify-jd-title {
	margin: 0;
	color: var(--hero-text-color, #fff);
	font-size: calc(var(--text-3xl, 32px) * 1.125);
	font-weight: var(--display-weight, 550);
	line-height: 1.2;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.aplify-flow-hero-job .aplify-jd-detail {
	margin: 0;
	color: var(--hero-text-color, #fff);
	font-size: var(--text-md, 16px);
	font-weight: var(--label-weight);
	opacity: 0.95;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

/* Below the hero the job page opens straight onto the tab bar. */
.aplify-flow--job .aplify-flow-body {
	padding-top: 20px;
}

/* Outcome pages: heading centred over the image. */

.aplify-flow--thanks .aplify-flow-hero::after,
.aplify-flow--rejection .aplify-flow-hero::after,
.aplify-flow--event_thanks .aplify-flow-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--flow-hero-overlay, rgba(4, 19, 36, 0.35));
	pointer-events: none;
}

.aplify-flow--thanks .aplify-flow-hero__content,
.aplify-flow--rejection .aplify-flow-hero__content,
.aplify-flow--event_thanks .aplify-flow-hero__content {
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 2;
}

.aplify-flow-hero-heading {
	margin: 0;
	color: #fff;
	font-size: var(--text-3xl, 32px);
	font-weight: var(--display-weight, 550);
	line-height: 1.25;
	max-width: 18em;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

/* Bottom-left heading takes the same hero text colour as the job title. */
.aplify-flow--all_jobs .aplify-flow-hero-heading {
	color: var(--hero-text-color, #fff);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* Event page: the shortcode's own details/summary panel is lifted up over
   the bottom edge of the hero. Scoped to the flow shell only — bespoke pages running
   [aplify_events] outside the flow are unaffected. Both .aplify-event-details
   (the initial view) and .aplify-event-summary (shown during pre-qualification
   and the registration form) get the same treatment, so the panel doesn't
   visually jump partway through the flow. */

.aplify-flow--event .aplify-flow-body {
	padding-top: 0;
}

.aplify-flow--event .aplify-flow-body.has-hero .aplify-event-details,
.aplify-flow--event .aplify-flow-body.has-hero .aplify-event-summary {
	position: relative;
	z-index: 3;
	margin-top: -96px;
	margin-right: auto;
	max-width: 520px;
	padding: 28px 32px;
	background: var(--flow-card-bg, #fff);
	border-radius: var(--flow-card-radius, 16px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Tabs (job description) ---------------------------------------------------
   Underlined text tabs on a rule, with Apply now at the right-hand end of the
   same bar. Deliberately unlike the rounded chips above them: these switch
   what's below, the chips are facts. Without an About us tab the bar holds
   only Apply, on the left where the tabs would start. */

.aplify-flow-tabbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 28px;
	border-bottom: var(--panel-border-w, 1px) solid var(--panel-border);
}

.aplify-flow-tabbar .aplify-jd-apply-top {
	margin-bottom: 10px;
}

.aplify-flow-tabbar.is-apply-only {
	justify-content: flex-start;
	padding-top: 4px;
}

.aplify-flow-tablist {
	display: flex;
	gap: 28px;
}

.aplify-flow-tab,
button.aplify-flow-tab {
	appearance: none;
	margin: 0 0 -1px;
	padding: 12px 2px 14px;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--muted);
	font-family: inherit;
	font-size: var(--text-md, 16px);
	font-weight: var(--weight-strong, 600);
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.aplify-flow-tab:hover,
button.aplify-flow-tab:hover {
	background: transparent;
	color: var(--fg, #1c2b36);
}

.aplify-flow-tab.is-active,
button.aplify-flow-tab.is-active {
	background: transparent;
	color: var(--primary);
	border-bottom-color: var(--primary);
}

.aplify-flow-tab:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

.aplify-flow-about {
	color: var(--fg, #1c2b36);
	line-height: 1.65;
}

.aplify-flow-about > *:first-child {
	margin-top: 0;
}

/* Outcome body ------------------------------------------------------------- */

.aplify-flow-heading {
	margin: 0 0 18px;
	color: var(--primary);
	font-size: var(--text-2xl, 24px);
	font-weight: var(--display-weight, 550);
	line-height: 1.3;
	max-width: 22em;
}

.aplify-flow-copy {
	color: var(--fg, #1c2b36);
	font-size: var(--text-md, 16px);
	line-height: 1.65;
	max-width: 42em;
}

.aplify-flow-copy p {
	margin: 0 0 1em;
}

.aplify-flow-copy p:last-child {
	margin-bottom: 0;
}

.aplify-flow-actions {
	margin-top: 30px;
}

.aplify-flow-btn,
a.aplify-flow-btn {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 999px;
	background: var(--highlight, #DC0073);
	color: #fff;
	font-family: inherit;
	font-size: var(--text-md, 16px);
	font-weight: var(--button-weight);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.aplify-flow-btn:hover,
a.aplify-flow-btn:hover,
.aplify-flow-btn:focus,
a.aplify-flow-btn:focus {
	color: #fff;
	text-decoration: none;
	filter: brightness(0.92);
}

/* Footer ------------------------------------------------------------------- */

.aplify-flow-footer {
	flex: 0 0 auto;
	padding: 28px 20px 40px;
}

.aplify-flow-legal {
	max-width: var(--flow-card-max, 860px);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 28px;
}

.aplify-flow-legal a {
	color: var(--flow-on-bg, #fff);
	font-size: var(--text-base, 14px);
	font-weight: var(--label-weight);
	line-height: 1.4;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.aplify-flow-legal a:hover,
.aplify-flow-legal a:focus {
	color: var(--flow-on-bg, #fff);
	opacity: 0.75;
	text-decoration: underline;
}

/* =========================================================================
   Tablet
   ========================================================================= */

@media (max-width: 1024px) {
	.aplify-flow-header,
	.aplify-flow-footer,
	.aplify-flow-card {
		max-width: none;
	}

	.aplify-flow-card {
		margin: 0 24px;
		width: auto;
	}

	.aplify-flow-header__inner,
	.aplify-flow-legal {
		max-width: none;
		padding: 0 4px;
	}

	.aplify-flow-body {
		padding: 36px 36px 44px;
	}

	.aplify-flow-hero__content {
		padding: 28px 36px;
	}

	.aplify-flow--event .aplify-flow-body.has-hero .aplify-event-details,
	.aplify-flow--event .aplify-flow-body.has-hero .aplify-event-summary {
		margin-top: -80px;
		max-width: 100%;
	}
}

/* =========================================================================
   Mobile
   ========================================================================= */

@media (max-width: 768px) {
	.aplify-flow-header {
		padding: 18px 16px 16px;
	}

	.aplify-flow-header__inner {
		gap: 12px;
	}

	.aplify-flow-logo img {
		max-height: 42px;
		max-width: 150px;
	}

	.aplify-flow-back span {
		font-size: var(--text-base, 14px);
	}

	.aplify-flow-card {
		margin: 0 12px;
		border-radius: 18px;
	}

	.aplify-flow-body {
		padding: 26px 20px 32px;
	}

	.aplify-flow-hero {
		height: 190px;
	}

	.aplify-flow-hero__content {
		padding: 20px;
	}

	.aplify-flow-hero-job .aplify-jd-title,
	.aplify-flow-hero-job .aplify-job-title-standalone .aplify-jd-title {
		font-size: calc(var(--text-xl, 20px) * 1.2);
	}

	.aplify-flow--job .aplify-flow-hero,
	.aplify-flow--job .aplify-flow-hero__content,
	.aplify-flow--apply .aplify-flow-hero,
	.aplify-flow--apply .aplify-flow-hero__content {
		min-height: 190px;
	}

	.aplify-flow-hero-job .aplify-jd-detail {
		font-size: var(--text-base, 14px);
	}

	.aplify-flow-hero-heading {
		font-size: var(--text-xl, 20px);
	}

	.aplify-flow-heading {
		font-size: var(--text-xl, 20px);
	}

	/* Tabs split the width; Apply floats at the bottom of the screen here,
	   so a bar holding only Apply has nothing left to show. */
	.aplify-flow-tabbar {
		margin-bottom: 22px;
	}

	.aplify-flow-tabbar.is-apply-only {
		display: none;
	}

	.aplify-flow-tablist {
		flex: 1;
		gap: 0;
	}

	.aplify-flow-tab,
	button.aplify-flow-tab {
		flex: 1;
		text-align: center;
	}

	.aplify-flow--event .aplify-flow-body.has-hero .aplify-event-details,
	.aplify-flow--event .aplify-flow-body.has-hero .aplify-event-summary {
		margin-top: -64px;
		border-radius: var(--flow-card-radius, 12px);
		padding: 22px 20px;
	}

	.aplify-flow-footer {
		padding: 22px 16px 28px;
	}

	.aplify-flow-legal {
		gap: 8px 18px;
	}

	.aplify-flow-legal a {
		font-size: var(--text-sm, 13px);
	}

	/* job_description.css pins the apply button to the bottom of the viewport
	   at this breakpoint. Reserve room underneath the card and the footer so
	   the legal links are never sitting behind it. */
	.aplify-flow--job .aplify-flow-body {
		padding-top: 20px;
		padding-bottom: 24px;
	}

	.aplify-flow--job .aplify-flow-footer {
		padding-bottom: 104px;
	}
}

@media (max-width: 420px) {
	.aplify-flow-header__inner {
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}

	.aplify-flow-card {
		margin: 0 12px;
	}
}

/* Users who prefer reduced motion get no transitions. */
@media (prefers-reduced-motion: reduce) {
	.aplify-flow *,
	.aplify-flow *::before,
	.aplify-flow *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* =========================================================================
   Reference panel on the thank-you page
   =========================================================================
   [aplify_apply_thanks] ships its own heading for use on hand-built pages.
   Inside the flow the editable copy above already provides one, so the
   shortcode is demoted to a quiet reference panel.
   ========================================================================= */

.aplify-flow--thanks .aplify-thanks {
	margin-top: 30px;
	padding: 20px 24px;
	border-radius: var(--field-radius);
	background: #fff;
	border: var(--panel-border-w) solid var(--panel-border);
}

.aplify-flow--thanks .aplify-thanks h2 {
	display: none;
}

.aplify-flow--thanks .aplify-thanks p {
	margin: 0 0 8px;
	color: var(--fg, #1c2b36);
	font-size: var(--text-md, 16px);
	line-height: 1.6;
}

.aplify-flow--thanks .aplify-thanks p:last-child {
	margin-bottom: 0;
}

/* The heading above now carries "Thank you. Your application for X has been
   received." directly (see flow/templates/thanks.php), so the identical
   first line here would just repeat it. Only hidden when a second line
   (the reference number) is also present — the plain single-paragraph
   fallback message, shown when there's no job title on the query string at
   all, is left fully visible. */
.aplify-flow--thanks .aplify-thanks-message p:first-of-type:not(:only-of-type) {
	display: none;
}