/* ============================================================================
   DDI 2026 – Single Job Vacancy page styles.
   Enqueued only on single job_vacancy posts (see functions.php).

   Styling principles inherited from the homepage / brand system:
     • Squared edges everywhere – no border-radius on cards, buttons or
       inputs. The `.btn .btn--gold` and `.btn .btn--dark` utilities come
       from global.css for consistency.
     • Fraunces display, DM Sans body, Raleway UI – pulled in via the
       --ddi-font-* CSS variables.
     • Hero layout follows option 1: 45vh, solid deep-navy, content
       bottom-left, Apply CTA bottom-right of the hero band.
   ============================================================================ */

.single-job-vacancy {
	color: var(--ddi-body-text);
	background: var(--ddi-white);
}

/* ---- HERO ---- Title + Apply CTA both left-aligned, stacked inside
 * .single-job__hero-inner. The CTA used to sit on the right of the hero
 * via flex-justify space-between, but Carrie-Ann flagged it dropped
 * below the title line and looked detached. Stacking under the title
 * keeps the left edge clean and the CTA reads as part of the title's
 * cluster. */
.single-job__hero {
	position: relative;
	min-height: 45vh;
	background:
		radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 55%),
		linear-gradient(150deg, var(--ddi-deep-navy) 0%, var(--ddi-navy) 100%);
	/* Bottom padding now matches left/right (clamp 20-60) so the
	 * inner edges of the hero are visually balanced. Top stays
	 * larger to clear the fixed header. */
	padding: clamp(110px, 12vw, 160px) clamp(20px, 5vw, 60px) clamp(20px, 5vw, 60px);
	overflow: hidden;
}
/* Background image layer — sits behind the inner content, full-bleed
 * cover, fades up under the heavy navy overlay (matches the page-hero
 * block treatment). Image picked per-role via ddi_single_job_hero_image_id().
 * Image-fade animation runs once on load — text composition fades in
 * first, image arrives a beat later as atmospheric depth. */
.single-job__hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	animation: ddi-hero-image-in 1.2s ease-out 0.45s backwards;
}
.single-job__hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
}
.single-job__hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(140deg, rgba(26, 39, 68, 0.92) 0%, rgba(15, 23, 42, 0.95) 100%);
}
.single-job__hero-inner {
	position: relative;
	z-index: 1;
	/* No max-width — the 900px constraint was breaking the
	 * title-row layout (CTA pushed off the visual right edge of
	 * the hero into a narrow column instead of out at the
	 * viewport's gutter). Full-width inner now respects the
	 * hero's own clamp padding for the gutter. */
}

/* Text composition fade-in — stagger eyebrow → title → CTA so the
 * page reads as composed, then the image arrives. Skipped under
 * prefers-reduced-motion. */
@keyframes ddi-hero-image-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes ddi-single-job-hero-text-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.single-job__hero-back,
.single-job__hero-eyebrow,
.single-job__hero-title-row {
	animation: ddi-single-job-hero-text-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
.single-job__hero-back     { animation-delay: 0.10s; }
.single-job__hero-eyebrow  { animation-delay: 0.25s; }
.single-job__hero-title-row{ animation-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
	.single-job__hero-bg,
	.single-job__hero-back,
	.single-job__hero-eyebrow,
	.single-job__hero-title-row {
		animation: none;
	}
}
/* Specificity boost – the ddi-block.css "body.ddi-block a:not(.header a, …)"
   reset (specificity 0,0,2,3) otherwise wins and forces this link to body grey
   on the dark hero (1.44:1, invisible). Adding the parent classes lifts us to
   0,0,3,1 and the !important keeps it bulletproof against future overrides. */
body.ddi-block .single-job-vacancy .single-job__hero-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ddi-font-ui);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7) !important;
	margin-bottom: 24px;
	transition: color 0.3s ease;
	text-decoration: none;
}
body.ddi-block .single-job-vacancy .single-job__hero-back:hover {
	color: var(--ddi-white) !important;
}

/* Subtle "copy link" control — top-right of the hero, opposite the back-link,
   so candidates can save the role for later. Reuses the .insight__share-copy
   handler + .insight__share-copied toast (global.css / critical.js). */
.single-job__hero-copy {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: var(--ddi-font-ui);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}
.single-job__hero-copy:hover { color: var(--ddi-white); }
.single-job__hero-copy:focus:not(:focus-visible) { outline: none; }
.single-job__hero-copy svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Toast sits BELOW the control here (plenty of room at the top of the hero). */
.single-job__hero-copy .insight__share-copied {
	bottom: auto;
	top: calc(100% + 8px);
	left: auto;
	right: 0;
	transform: translateY(-4px);
}
.single-job__hero-copy.is-copied .insight__share-copied {
	transform: translateY(0);
}
@media (max-width: 420px) {
	/* Icon only on very narrow phones so it never crowds the back-link. */
	.single-job__hero-copy-label { display: none; }
}

.single-job__hero-eyebrow {
	color: var(--ddi-gold) !important;
	margin-bottom: 26px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
body.ddi-block .single-job-vacancy .single-job__hero-eyebrow-link {
	color: var(--ddi-gold) !important;
	text-decoration: none;
	transition: color 0.25s ease, border-color 0.25s ease;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
}
body.ddi-block .single-job-vacancy .single-job__hero-eyebrow-link:hover {
	color: var(--ddi-white) !important;
	border-bottom-color: rgba(255, 255, 255, 0.4);
}
.single-job__hero-eyebrow-sep {
	color: rgba(209, 180, 133, 0.5);
	font-weight: 300;
}

/* Title + Apply CTA sit on the SAME horizontal line — title flex-grows
 * to fill the row (wrapping its own lines internally if long), Apply
 * stays a fixed-width column on the right anchored to the title's
 * bottom baseline. No flex-wrap on the row — long titles wrap their
 * own text inside the flex item rather than dropping the button to a
 * new row. Stacks on narrow viewports via the 1024px breakpoint
 * further down. */
.single-job__hero-title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
}
.single-job__hero-title {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: clamp(28px, 4.2vw, 52px);
	line-height: 1.1;
	color: var(--ddi-white);
	letter-spacing: -0.015em;
	margin: 0;
	flex: 1 1 0;
	min-width: 0;
}

/* CTA anchors to the top of the title row so it reads as a sibling
 * of the title's first line rather than dropping to the title's
 * bottom (which made it visually detached when the title wrapped
 * across multiple lines). */
.single-job__hero-cta {
	flex-shrink: 0;
	align-self: flex-start;
	margin-top: 6px;
}

/* ---- MAIN CONTENT – TWO COLUMN ---- */
.single-job__content {
	max-width: var(--ddi-container, 1320px);
	margin: 0 auto;
	padding: clamp(60px, 7vw, 100px) clamp(20px, 5vw, 60px);
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 60px;
	align-items: start;
}

.single-job__location-pill {
	display: inline-block;
	font-family: var(--ddi-font-ui);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ddi-navy);
	background: var(--ddi-cool-grey);
	padding: 7px 18px;
	margin-bottom: 36px;
}

.single-job__section {
	margin-bottom: 56px;
}
.single-job__section:last-child { margin-bottom: 0; }
.single-job__section-heading {
	font-family: var(--ddi-font-display) !important;
	font-weight: 400;
	font-size: clamp(22px, 2.2vw, 28px) !important;
	color: var(--ddi-midnight);
	margin: 0 0 12px;
	line-height: 1.2;
	letter-spacing: -0.005em;
}
.single-job__section-rule {
	width: 32px;
	height: 2px;
	background: var(--ddi-gold);
	margin-bottom: 24px;
}
.single-job__section-body {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.8;
	color: var(--ddi-body-text);
}
.single-job__section-body p {
	/* Parent theme screen.css sets a fixed `p { line-height: 21px }` which
	 * otherwise overrides the container's 1.8 on the actual paragraphs,
	 * compressing "The Role" body text. Restore the site body line-height. */
	line-height: 1.8;
	margin: 0 0 20px;
}
.single-job__section-body p:last-child { margin-bottom: 0; }
.single-job__section-body ul,
.single-job__section-body ol {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}
.single-job__section-body ul li,
.single-job__section-body ol li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 12px;
	line-height: 1.7;
}
.single-job__section-body ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ddi-gold);
}
.single-job__section-body ol { counter-reset: ddi-ol; }
.single-job__section-body ol li { counter-increment: ddi-ol; }
.single-job__section-body ol li::before {
	content: counter( ddi-ol ) '.';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ddi-gold-darker);
	font-family: var(--ddi-font-ui);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.05em;
}
.single-job__section-body a,
.single-job__inline-link {
	color: var(--ddi-gold-darker);
	border-bottom: 1px solid var(--ddi-gold);
	padding-bottom: 1px;
	transition: color 0.3s ease;
	text-decoration: none;
}
.single-job__section-body a:hover,
.single-job__inline-link:hover { color: var(--ddi-navy); }
.single-job__section-body strong {
	color: var(--ddi-midnight);
	font-weight: 500;
}

/* ---- SIDEBAR ---- */
.single-job__sidebar {
	position: sticky;
	top: calc(var(--ddi-stack-admin, 0px) + var(--ddi-header-h-scrolled, 72px) + 24px);
	align-self: start;
}
.single-job__sidebar-card {
	background: var(--ddi-off-white);
	padding: 36px 32px;
	margin-bottom: 20px;
	border-top: 2px solid var(--ddi-gold);
}
.single-job__sidebar-heading {
	font-family: var(--ddi-font-display) !important;
	font-weight: 400;
	font-size: 22px !important;
	color: var(--ddi-midnight);
	margin: 0 0 8px;
}
.single-job__sidebar-rule {
	width: 28px;
	height: 2px;
	background: var(--ddi-gold);
	margin-bottom: 24px;
}
.single-job__sidebar-detail {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	font-size: 15px;
}
.single-job__sidebar-detail:last-of-type { border-bottom: none; }
.single-job__sidebar-label {
	font-family: var(--ddi-font-ui);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* Slightly darker than --ddi-mid-grey (#6B7280) so the 11px label clears
	   WCAG AA 4.5:1 against the off-white card background. */
	color: #4B5563;
	flex-shrink: 0;
	white-space: nowrap;
}
.single-job__sidebar-value {
	font-family: var(--ddi-font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--ddi-midnight);
	text-align: right;
	line-height: 1.4;
}

/* Converted-salary sidebar row — sits directly below Listed Salary
 * with tighter top margin so the two read as a paired unit. Same
 * label-left + value-right pattern as the row above, but the label
 * is "Converted to USD" (or EUR/AED/etc – ISO drops in via JS) and
 * the values are muted mid-grey to keep the contractual amount on
 * the row above as the primary read. Initially hidden via [hidden];
 * inline JS removes the attribute when a conversion applies. */
.single-job__sidebar-detail--converted {
	margin-top: -10px; /* pull tight against Listed Salary above */
	padding-top: 4px;
	border-top: 0;
}
.single-job__sidebar-detail--converted .single-job__sidebar-label {
	font-family: var(--ddi-font-ui);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ddi-mid-grey);
}
.single-job__sidebar-detail--converted .single-job__sidebar-value {
	color: var(--ddi-mid-grey);
	font-weight: 400;
	font-size: 13.5px;
}
/* Respect [hidden] over the default sidebar-detail flex display so
 * the row stays gone when there's no conversion to show. */
.single-job__sidebar-detail--converted[hidden] {
	display: none;
}
.single-job__sidebar-link {
	color: var(--ddi-midnight) !important;
	text-decoration: none !important;
	/* Gold underline removed (Phase 1 client request) — Summary row values read as
	   flat text; the gold rule under the "Summary" heading is kept. */
	transition: color 0.25s ease;
}
.single-job__sidebar-link:hover {
	color: var(--ddi-gold-darker) !important;
}
.single-job__sidebar-apply {
	width: 100%;
	margin-top: 28px;
	margin-bottom: 16px;
	justify-content: center;
}
.single-job__sidebar-register {
	display: block;
	text-align: center;
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 13px;
	color: var(--ddi-mid-grey);
	margin: 0;
	line-height: 1.5;
}
.single-job__sidebar-register a {
	color: var(--ddi-navy);
	font-weight: 500;
	border-bottom: 1px solid var(--ddi-gold);
	padding-bottom: 1px;
	text-decoration: none;
	transition: color 0.3s ease, border-color 0.3s ease;
}
.single-job__sidebar-register a:hover {
	color: var(--ddi-gold-darker);
	border-bottom-color: var(--ddi-gold-darker);
}

/* Listed Salary – info-icon tooltip explaining currency conversion.
 * CSS-only: hover or keyboard focus on the icon reveals the tip below.
 * The tip is absolutely positioned so it doesn't push the row out
 * of alignment with adjacent sidebar details. */
.single-job__salary-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 6px;
	color: var(--ddi-mid-grey);
	cursor: help;
	position: relative;
	vertical-align: middle;
	outline: none;
}
.single-job__salary-info:hover,
.single-job__salary-info:focus { color: var(--ddi-gold-darker); }
.single-job__salary-info svg {
	width: 13px;
	height: 13px;
	display: block;
}
/* Tooltip anchors to the RIGHT of the icon and extends leftward — the
 * salary row sits in a ~280px-wide sidebar column so a centred tooltip
 * overflowed off the page. Right-anchored, the tip stays inside the
 * card whatever screen width.
 *
 * Width is fixed (220px) – using `max-content` lets the browser size
 * by single-line content and ignore max-width, so the tip would
 * extend hundreds of pixels off-canvas. Fixed width forces wrapping.
 * `white-space: normal` + `overflow-wrap` defends against any
 * inherited nowrap from sidebar label styles. */
.single-job__salary-info-tip {
	position: absolute;
	top: calc(100% + 8px);
	right: -8px;
	left: auto;
	transform: translateY(-4px);
	width: 220px;
	max-width: calc(100vw - 32px);
	padding: 12px 14px;
	background: var(--ddi-deep-navy);
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--ddi-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.55;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	white-space: normal;
	overflow-wrap: break-word;
	word-wrap: break-word;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 5;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
}
.single-job__salary-info-tip::before {
	content: '';
	position: absolute;
	top: -5px;
	right: 11px;
	left: auto;
	transform: rotate(45deg);
	width: 10px;
	height: 10px;
	background: var(--ddi-deep-navy);
}
.single-job__salary-info:hover .single-job__salary-info-tip,
.single-job__salary-info:focus .single-job__salary-info-tip {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.single-job__sidebar-help {
	background: var(--ddi-off-white);
	padding: 30px 28px;
	text-align: center;
}
.single-job__sidebar-help h3 {
	font-family: var(--ddi-font-display) !important;
	font-weight: 400;
	font-size: 20px !important;
	color: var(--ddi-midnight);
	margin: 0 0 10px;
}
.single-job__sidebar-help p {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	/* Slightly darker than --ddi-mid-grey so 15px copy on off-white card
	   clears WCAG AA 4.5:1 comfortably. */
	color: #4B5563;
	margin: 0 0 22px;
}

/* ---- APPLY BAND ----
 * Split layout: text panel on the left, full-bleed image on the right.
 * Text is capped to a readable measure (~480px) inside a column that
 * occupies the left half of the viewport. Image bleeds to the right edge
 * for a confident editorial feel. */
.single-job__apply-band {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--ddi-off-white);
	min-height: 460px;
	overflow: hidden;
}
.single-job__apply-band-text {
	display: flex;
	align-items: center;
	padding: clamp(60px, 8vw, 100px) clamp(24px, 5vw, 80px);
}
.single-job__apply-band-text-inner {
	max-width: 480px;
	width: 100%;
}
.single-job__apply-band .eyebrow { margin-bottom: 14px; }
.single-job__apply-band-heading {
	font-family: var(--ddi-font-display) !important;
	font-weight: 300;
	font-size: clamp(30px, 3.5vw, 42px) !important;
	color: var(--ddi-midnight);
	letter-spacing: -0.015em;
	margin: 0 0 20px;
	line-height: 1.15;
}
.single-job__apply-band-body {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.8;
	color: #4B5563;
	margin: 0 0 36px;
}
.single-job__apply-band-media {
	position: relative;
	overflow: hidden;
	background: var(--ddi-cool-grey);
	min-height: 360px;
}
.single-job__apply-band-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- RELATED ROLES ---- */
.single-job__related {
	background: var(--ddi-white);
	padding: clamp(80px, 9vw, 110px) clamp(20px, 5vw, 60px);
}
.single-job__related-inner {
	max-width: var(--ddi-container, 1320px);
	margin: 0 auto;
}
.single-job__related-header {
	text-align: center;
	margin-bottom: clamp(40px, 5vw, 60px);
}
.single-job__related-header .eyebrow { margin-bottom: 14px; }
.single-job__related-heading {
	font-family: var(--ddi-font-display) !important;
	font-weight: 300;
	font-size: clamp(28px, 3.4vw, 42px) !important;
	color: var(--ddi-midnight);
	letter-spacing: -0.015em;
	margin: 0;
	line-height: 1.15;
}
.single-job__related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.single-job__related-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-top: clamp(40px, 5vw, 64px);
}
.single-job__related-view-all {
	min-width: 220px;
	justify-content: center;
}
.single-job__related-view-all-link {
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ddi-deep-navy);
	text-decoration: none !important;
	border-bottom: 1px solid var(--ddi-gold);
	padding-bottom: 2px;
	transition: color 0.25s ease, border-color 0.25s ease;
}
.single-job__related-view-all-link:hover {
	color: var(--ddi-gold-darker);
	border-bottom-color: var(--ddi-gold-darker);
}
.single-job__related-card {
	display: block;
	background: var(--ddi-off-white);
	border-left: 3px solid var(--ddi-gold);
	padding: 30px 28px;
	transition: background 0.3s ease, transform 0.3s ease;
	text-decoration: none;
	color: inherit;
}
.single-job__related-card:hover {
	background: var(--ddi-cool-grey);
	transform: translateY(-2px);
}
.single-job__related-card-eyebrow {
	display: block;
	font-family: var(--ddi-font-ui);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ddi-gold-darker);
	margin-bottom: 10px;
}
.single-job__related-card-title {
	font-family: var(--ddi-font-display) !important;
	font-weight: 400;
	font-size: 19px !important;
	line-height: 1.3;
	color: var(--ddi-midnight);
	margin: 0 0 12px;
}
.single-job__related-card-meta {
	display: flex;
	gap: 18px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.single-job__related-card-meta span {
	font-family: var(--ddi-font-ui);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	/* Slightly darker than --ddi-mid-grey so 11px chips clear AA on the
	   off-white card background. */
	color: #4B5563;
}
.single-job__related-card-link {
	display: inline-block;
	font-family: var(--ddi-font-ui);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ddi-navy);
	border-bottom: 1px solid var(--ddi-gold);
	padding-bottom: 2px;
	transition: color 0.3s ease;
}
.single-job__related-card:hover .single-job__related-card-link { color: var(--ddi-gold-darker); }

/* ---- APPLY MODAL (squared, brand-aligned) ---- */
.single-job-apply-modal {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(20px, 4vw, 40px);
}
.single-job-apply-modal[hidden] { display: none; }
.single-job-apply-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.single-job-apply-modal__panel {
	position: relative;
	background: var(--ddi-white);
	width: 100%;
	max-width: 840px;
	max-height: calc(100vh - 48px);
	padding: 0; /* moved to .__body so the sticky header can sit flush */
	overflow-y: auto;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
	border-top: 2px solid var(--ddi-gold);
	display: flex;
	flex-direction: column;
}

/* Sticky compact header — pins to the top of the scrolling panel
 * so the visitor can always see which role they're applying to
 * as they progress through a long form. Was previously a big h2 +
 * subtitle block at the top of the panel; reduced to a thin bar
 * with eyebrow + single-line title (truncated with ellipsis on
 * narrow viewports).
 *
 * The text + collapse-toggle are HIDDEN until the visitor clicks
 * "Yes, I'm registered" on the gate (JS adds .has-context). Before
 * that, the header reads as a thin bar with just the close X
 * right-anchored — the gate is the focus, not the role context
 * (which is irrelevant if they're not registered anyway, and the
 * "Not yet" route surfaces the role context separately via the
 * job-ref card). */
.single-job-apply-modal__header {
	position: sticky;
	top: 0;
	z-index: 5;
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
	padding: 12px clamp(20px, 3vw, 32px);
	display: flex;
	align-items: center;
	gap: 16px;
	/* Border-bottom only when the header carries content — without
	 * it, the close-only state should read as a clean tab, not as a
	 * divider above empty space. */
	border-bottom: 1px solid transparent;
}
.single-job-apply-modal__header.has-context {
	border-bottom-color: var(--ddi-light-grey);
}
.single-job-apply-modal__header-text,
.single-job-apply-modal__header-collapse {
	display: none;
}
.single-job-apply-modal__header.has-context .single-job-apply-modal__header-text {
	display: block;
	flex: 1 1 0;
	min-width: 0;
}
.single-job-apply-modal__header.has-context .single-job-apply-modal__header-collapse {
	display: flex;
}
.single-job-apply-modal__header-eyebrow {
	font-family: var(--ddi-font-ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ddi-gold-darker);
	margin: 0 0 2px;
}
.single-job-apply-modal__header-title {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.3;
	color: var(--ddi-midnight);
	margin: 0;
	letter-spacing: -0.005em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.single-job-apply-modal__header-meta {
	color: var(--ddi-mid-grey);
	font-size: 13px;
	margin-left: 6px;
	font-weight: 300;
}
@media (max-width: 560px) {
	/* Drop the meta line on small viewports — title alone fits cleanly. */
	.single-job-apply-modal__header-meta { display: none; }
}
.single-job-apply-modal__close {
	flex-shrink: 0;
	/* margin-left:auto pins the X to the right edge of the header
	 * whether it's the only visible child (gate stage) or sharing
	 * the bar with the role context + collapse chevron (post-Yes). */
	margin-left: auto;
	width: 34px;
	height: 34px;
	background: transparent;
	border: 1px solid rgba(15, 23, 42, 0.12);
	font-size: 20px;
	line-height: 1;
	color: var(--ddi-midnight);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.single-job-apply-modal__close:hover {
	background: var(--ddi-midnight);
	border-color: var(--ddi-midnight);
	color: var(--ddi-white);
}

/* Collapse-drawer toggle — small chevron next to the close X. Lets
 * the visitor minimise the header to a thin strip so the form gets
 * more vertical real-estate on screen. Chevron rotates 180° when
 * collapsed so it reads as "click me to bring the drawer back down". */
.single-job-apply-modal__header-collapse {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background: transparent;
	border: 0;
	color: var(--ddi-mid-grey);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 0;
	transition: background 0.2s ease, color 0.2s ease;
}
.single-job-apply-modal__header-collapse:hover {
	background: rgba(15, 23, 42, 0.06);
	color: var(--ddi-midnight);
}
.single-job-apply-modal__header-collapse svg {
	width: 14px;
	height: 14px;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Smooth padding + content transition between expanded ↔ collapsed
 * states. Header is the scroll-pinned sticky bar; collapsing it
 * just reduces it to a chevron-only strip. */
.single-job-apply-modal__header {
	transition: padding 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.single-job-apply-modal__header.is-collapsed {
	padding-top: 4px;
	padding-bottom: 4px;
}
.single-job-apply-modal__header.is-collapsed .single-job-apply-modal__header-text {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, max-height 0.25s ease;
}
.single-job-apply-modal__header-text {
	max-height: 60px; /* generous, covers eyebrow + 1 line title */
	transition: opacity 0.25s ease 0.05s, max-height 0.3s ease;
}
.single-job-apply-modal__header.is-collapsed .single-job-apply-modal__header-collapse svg {
	transform: rotate(180deg);
}

/* Body wrapper — owns the padding now that .__panel is padding-less
 * (so the sticky header can sit flush to the panel edges). */
.single-job-apply-modal__body {
	padding: clamp(28px, 3.5vw, 44px) clamp(28px, 3.5vw, 44px) clamp(36px, 4vw, 56px);
}

/* Apply gate (pre-step) — "Are you part of our network?" Yes/No,
 * shown before the form on every open. Centred so it reads as a
 * deliberate single-question pause rather than a left-aligned form
 * header — the visitor's eye lands squarely on the question. Reset
 * to this state every time the modal opens (see single-job.js
 * openModal override). */
.single-job-apply-modal__gate {
	text-align: center;
	padding: clamp(24px, 4vw, 48px) 0 clamp(16px, 3vw, 24px);
	max-width: 520px;
	margin: 0 auto;
}
.single-job-apply-modal__gate-question {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.2;
	color: var(--ddi-midnight);
	margin: 0 0 12px;
	letter-spacing: -0.005em;
}
.single-job-apply-modal__gate-sub {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ddi-mid-grey);
	margin: 0 0 28px;
}
.single-job-apply-modal__gate-buttons {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}
.single-job-apply-modal__gate-buttons .btn { flex: 0 0 auto; }
@media (max-width: 480px) {
	.single-job-apply-modal__gate-buttons { flex-direction: column; align-items: stretch; }
	.single-job-apply-modal__gate-buttons .btn { width: 100%; justify-content: center; }
}

/* Not-registered fallback — shown after No on the gate. Offers a
 * Join-Our-Network CTA + Continue-Browsing close, plus a job-ref
 * card so the visitor can copy the role's link before heading off
 * to register (and come back to apply to the same role later). */
.single-job-apply-modal__not-registered {
	padding: 8px 0 16px;
}
.single-job-apply-modal__not-registered-body {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ddi-body-text);
	margin: 0 0 22px;
}

/* Job-ref card — surfaces the role you were viewing + a copy-link
 * button. Off-white card with a gold left rule, deliberately
 * understated so it reads as helpful context not another CTA. */
.single-job-apply-modal__job-ref {
	background: var(--ddi-off-white);
	border-left: 3px solid var(--ddi-gold);
	padding: 16px 20px;
	margin: 0 0 24px;
}
.single-job-apply-modal__job-ref-label {
	font-family: var(--ddi-font-ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ddi-gold-darker);
	margin: 0 0 6px;
}
.single-job-apply-modal__job-ref-title {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.25;
	color: var(--ddi-midnight);
	margin: 0;
	letter-spacing: -0.005em;
}
.single-job-apply-modal__job-ref-meta {
	font-family: var(--ddi-font-body);
	font-size: 13px;
	color: var(--ddi-mid-grey);
	margin: 4px 0 0;
}
.single-job-apply-modal__copy-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid rgba(15, 23, 42, 0.18);
	font-family: var(--ddi-font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ddi-midnight);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.single-job-apply-modal__copy-btn:hover {
	background: var(--ddi-midnight);
	border-color: var(--ddi-midnight);
	color: var(--ddi-white);
}
.single-job-apply-modal__copy-btn.is-copied {
	background: var(--ddi-gold);
	border-color: var(--ddi-gold);
	color: var(--ddi-midnight);
}
.single-job-apply-modal__copy-icon {
	width: 14px;
	height: 14px;
}

.single-job-apply-modal__not-registered-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
@media (max-width: 480px) {
	.single-job-apply-modal__not-registered-actions { flex-direction: column; align-items: stretch; }
	.single-job-apply-modal__not-registered-actions .btn { width: 100%; justify-content: center; }
}

/* Respect [hidden] over the default `display: block` of these
 * sections — same situation as the converted-salary line further
 * up the stylesheet. Author CSS would otherwise beat the UA's
 * [hidden] rule. */
.single-job-apply-modal__gate[hidden],
.single-job-apply-modal__not-registered[hidden],
.single-job-apply-modal__form-inner[hidden] {
	display: none;
}


/* Gravity Form inside modal – brand-aligned. Form fields run
 * full-width within the modal now (was a 1fr 1fr grid which made
 * fields read cramped + paired neighbours that don't really
 * belong together). Single column gives every field its full
 * breath; visually consistent with the .apply-form-band layout
 * on /register/ and /apply/start/. */
.single-job-apply-modal__form .gform_wrapper { margin: 0; }
.single-job-apply-modal__form .gform_heading { display: none; }
.single-job-apply-modal__form .gform_fields {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 18px;
}
.single-job-apply-modal__form .gfield { grid-column: 1 / -1; }
.single-job-apply-modal__form .gfield_label {
	font-family: var(--ddi-font-ui);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ddi-midnight);
	margin-bottom: 8px;
}
.single-job-apply-modal__form .gfield_required { color: var(--ddi-gold-darker); }
.single-job-apply-modal__form input[type="text"],
.single-job-apply-modal__form input[type="email"],
.single-job-apply-modal__form input[type="tel"],
.single-job-apply-modal__form input[type="url"],
.single-job-apply-modal__form textarea {
	width: 100%;
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 15px;
	color: var(--ddi-midnight);
	background: var(--ddi-white);
	border: 1px solid var(--ddi-light-grey);
	padding: 13px 16px;
	transition: border-color 0.3s ease;
	border-radius: 0;
}
.single-job-apply-modal__form input:focus,
.single-job-apply-modal__form textarea:focus {
	outline: none;
	border-color: var(--ddi-gold);
}
.single-job-apply-modal__form textarea { min-height: 130px; resize: vertical; }
.single-job-apply-modal__form .gfield--type-consent {
	border-bottom: 1px solid var(--ddi-light-grey);
	padding-bottom: 16px;
}
.single-job-apply-modal__form .gfield--type-consent:last-of-type {
	border-bottom: 1px solid var(--ddi-light-grey);
	margin-bottom: 8px;
}
.single-job-apply-modal__form .gfield--type-consent .gfield_label { display: none; }
.single-job-apply-modal__form .gfield_consent_label,
.single-job-apply-modal__form .gfield--type-consent label {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--ddi-body-text);
	line-height: 1.55;
}
.single-job-apply-modal__form input[type="checkbox"] {
	accent-color: var(--ddi-gold);
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: middle;
}
.single-job-apply-modal__form .gform_fileupload_rules,
.single-job-apply-modal__form .gform_fileupload_filename {
	font-family: var(--ddi-font-body);
	font-size: 13px;
	color: var(--ddi-mid-grey);
}
.single-job-apply-modal__form .gform_footer {
	margin: 24px 0 0 !important;
	padding: 0;
	grid-column: 1 / -1;
}
.single-job-apply-modal__form .gform_button {
	width: 100%;
	font-family: var(--ddi-font-ui) !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--ddi-deep-navy) !important;
	background: var(--ddi-gold) !important;
	border: 1px solid var(--ddi-gold) !important;
	border-radius: 0 !important;
	padding: 18px 36px !important;
	cursor: pointer;
	transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.single-job-apply-modal__form .gform_button:hover {
	background: transparent !important;
	color: var(--ddi-gold) !important;
}
.single-job-apply-modal__form .gfield_visibility_hidden { display: none !important; }
.single-job-apply-modal__form .gform_confirmation_wrapper {
	font-family: var(--ddi-font-body);
	font-size: 16px;
	color: var(--ddi-midnight);
	text-align: center;
	padding: 24px 0;
}

body.apply-modal-open { overflow: hidden; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
	/* Title row stacks below 1024px — long titles + CTA in one row get
	 * cramped on tablet widths. Title on top, CTA on its own line below
	 * with the original left edge alignment. */
	.single-job__hero-title-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.single-job__hero-cta { align-self: flex-start; }

	.single-job__content {
		grid-template-columns: 1fr;
		gap: 48px;
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.single-job__sidebar {
		position: static;
		order: -1;
	}
	.single-job__sidebar-card { padding: 28px 24px; }
	.single-job__related-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	/* Apply band stacks below 1024 – image first, text below. */
	.single-job__apply-band {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.single-job__apply-band-media {
		aspect-ratio: 16 / 10;
		min-height: 280px;
	}
	.single-job__apply-band-text {
		padding: clamp(48px, 7vw, 72px) clamp(24px, 5vw, 60px);
	}
}

@media (max-width: 720px) {
	/* Mobile chrome alignment – match the navigation's 24px horizontal
	 * padding so the page content, hero, sidebar, apply band, and
	 * related cards all sit on the same vertical edges as the header
	 * logo + burger. */
	.single-job__hero {
		min-height: 50vh;
		padding-left: 24px;
		padding-right: 24px;
	}
	.single-job__content {
		padding-left: 24px;
		padding-right: 24px;
	}
	.single-job__apply-band-text {
		padding-left: 24px;
		padding-right: 24px;
	}
	.single-job__related {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* Reorder per client direction:
	 *   - Hide the hero "Apply Online" button (the sticky sidebar +
	 *     apply band cover the same intent at the appropriate moment)
	 *   - Show Role Summary first (already handled by order:-1 on the
	 *     sidebar at the 1024 breakpoint)
	 *   - Hide the "Need More Help" card – the team contact route is
	 *     surfaced again at the page footer, no value duplicating it
	 *     on mobile where it pushes the role body further down
	 */
	.single-job__hero-cta { display: none; }
	.single-job__sidebar-help { display: none; }

	/* Salary tooltip – narrow further on mobile so it can never
	 * exceed the card width. */
	.single-job__salary-info-tip { max-width: 220px; }

	.single-job__related-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.single-job__related-card { padding: 26px 22px; }
	.single-job-apply-modal__panel { padding: 28px 22px; }
	.single-job-apply-modal__form .gform_fields { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================================
   ARCHIVED-VACANCY NOTICE
   ----------------------------------------------------------------------------
   Renders between the hero and the main content on listings older than the
   `ddi_job_archived_threshold_months` filter (default 6 months). Per the
   content audit's recommendation, this is deliberately subtle – a quiet
   gold-ruled band rather than a popup/lightbox, which would risk Google
   interstitial penalties and break the premium feel of the page. The
   visitor stays oriented (clear "this is older" signal + link to current
   roles) without the page feeling like it's apologising for itself.

   Visual treatment:
     - Off-white surface so it reads as auxiliary content, not a CTA band
     - Hairline gold rule top + bottom to anchor it visually
     - Clock icon in the darker gold for an "archived / time" cue
     - Inline link styled with the standard underlined gold-darker pattern
     - Mobile: tighter padding + slightly smaller type
   ============================================================================ */
.single-job__archived-notice {
	background: var(--ddi-off-white);
	border-top: 1px solid rgba(209, 180, 133, 0.35);
	border-bottom: 1px solid rgba(209, 180, 133, 0.35);
	/* Horizontal padding intentionally matches .single-job__hero's gutters
	 * (clamp(20px, 5vw, 60px)) so the notice content sits on the same left
	 * edge as the hero title and meta — visually it reads as a continuation
	 * of the hero band rather than a standalone strip. No max-width on the
	 * inner so wide viewports behave the same way the hero does. */
	padding: clamp(16px, 2.2vw, 24px) clamp(20px, 5vw, 60px);
	font-family: var(--ddi-font-body);
}
.single-job__archived-notice-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.single-job__archived-notice-icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: var(--ddi-gold-darker);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.single-job__archived-notice-icon svg {
	width: 100%;
	height: 100%;
}
.single-job__archived-notice-text {
	margin: 0;
	color: var(--ddi-body-text);
	font-size: 16px;
	line-height: 1.55;
	flex: 1 1 auto;
	min-width: 200px;
}
.single-job__archived-notice-link {
	color: var(--ddi-gold-darker);
	border-bottom: 1px solid var(--ddi-gold);
	padding-bottom: 1px;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}
.single-job__archived-notice-link:hover,
.single-job__archived-notice-link:focus {
	color: var(--ddi-deep-navy);
}
@media (max-width: 560px) {
	.single-job__archived-notice {
		padding: 14px 20px;
	}
	.single-job__archived-notice-text {
		font-size: 14px;
	}
	.single-job__archived-notice-icon {
		width: 20px;
		height: 20px;
	}
}

/* ============================================================================
   POSITION FILLED STATE
   ----------------------------------------------------------------------------
   Rendered when the ACF `status` field on a job_vacancy is "Closed". Mirrors
   the existing site's treatment – gold-bordered panel in the sidebar saying
   "Position Filled" plus a link to current vacancies. Also swaps the hero
   apply button for a subtle "Position Filled" tag, and replaces the bottom
   apply band with a closed-state variant.

   1,153 of the 2,175 published vacancies are Closed – this state will be the
   norm on the site, so it has to look intentional and finished, not like a
   missing button. Treatment matches the page's gold/navy palette and lives
   inside the existing sidebar card so the page rhythm is unchanged.
   ============================================================================ */

/* Hero: small gold-outlined tag replacing the Apply button. Lives on the
 * right side of the title row so the layout doesn't shift. */
.single-job__hero-status {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	border: 1px solid var(--ddi-gold);
	color: var(--ddi-gold);
	font-family: var(--ddi-font-ui);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	background: transparent;
	align-self: flex-start;
	white-space: nowrap;
}

/* Sidebar: gold-bordered panel inside the existing sidebar card, replacing
 * the Apply Now button + "Not registered yet?" line. */
.single-job__sidebar-filled {
	border: 1px solid var(--ddi-gold);
	padding: 22px 20px;
	margin-top: 18px;
	background: var(--ddi-off-white);
	text-align: center;
}
.single-job__sidebar-filled-heading {
	margin: 0 0 12px;
	font-family: var(--ddi-font-ui);
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ddi-gold-darker);
	font-weight: 600;
}
.single-job__sidebar-filled-body {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ddi-body-text);
}
.single-job__sidebar-filled-cta {
	width: 100%;
	justify-content: center;
	display: inline-flex;
	align-items: center;
}

/* Apply band, filled variant: keeps the same split layout (text + image)
 * but the eyebrow / heading / body / CTA all switch to the closed state.
 * No structural change – just lets us add a hook for future visual tweaks
 * (e.g. a desaturated image treatment) without touching the template. */
.single-job__apply-band--filled .eyebrow {
	color: var(--ddi-gold-darker);
}