/**
 * The single job page.
 *
 * Four arrangements over one set of markup. Colours come from the theme rather
 * than from us — currentColor mixed down for rules and muted text — so the page
 * belongs to the site it is on. Override the --airec-job-* properties to take
 * control, or turn this stylesheet off entirely under Settings → Job page.
 *
 * Copyright (c) 2026 AtoZ INFOWAY INC. All rights reserved. Proprietary.
 */

.airec-job {
	--airec-job-line: rgba(128,128,128,.24);
	--airec-job-muted: rgba(128,128,128,1);
	--airec-job-tint: rgba(128,128,128,.08);
	--airec-job-accent: currentColor;
	--airec-job-radius: 14px;
	--airec-job-gap: 3rem;
}
@supports (color: color-mix(in srgb, currentColor 10%, transparent)) {
	.airec-job {
		--airec-job-line: color-mix(in srgb, currentColor 13%, transparent);
		--airec-job-muted: color-mix(in srgb, currentColor 62%, transparent);
		--airec-job-tint: color-mix(in srgb, currentColor 5%, transparent);
	}
}

/* ── How much of the page the job may use ──────────────────────────────── */

/*
 * Most themes give a post a reading measure of about 40rem. That is right for
 * prose and hopeless for a description beside a details column — split in two
 * it leaves forty characters a line. So the page steps out of the measure and
 * sets its own, unless it is told to follow the theme.
 */
/*
 * The !important is deliberate and narrow. WordPress's own constrained-layout
 * CSS sets max-width and the inline margins with !important, so a plugin that
 * wants out of the measure has no other way to say so. The calc resolves to
 * zero once the element is already viewport-wide, so on a theme that honours
 * alignfull this changes nothing.
 */
.airec-job.airec-job--w-wide,
.airec-job.airec-job--w-full {
	width: auto !important;
	max-width: none !important;
	margin-inline: calc(50% - var(--airec-vw, 100vw) / 2) !important;
}
.airec-job--w-wide .airec-job__inner {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.airec-job--w-full .airec-job__inner { padding-inline: clamp(1rem, 4vw, 3rem); }

/*
 * The arrangements measure themselves against this element rather than the
 * window, so a narrow theme gets a clean single column instead of a squeezed
 * pair of them.
 */
.airec-job__inner { container-type: inline-size; container-name: airecjob; }

/* ── The line above everything ─────────────────────────────────────────── */

.airec-job__meta {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 1rem;
	margin: 0 0 .75rem;
}
.airec-job__meta-left { display: inline-flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.airec-job__eyebrow {
	font-size: .75em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--airec-job-accent);
}
.airec-job__status {
	font-size: .7em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	padding: .35em 1em; border-radius: 999px;
	border: 1px solid var(--airec-job-line); color: var(--airec-job-muted);
	white-space: nowrap;
}
.airec-job__back {
	display: inline-block; padding: .5em 1.4em;
	border: 1px solid var(--airec-job-line); border-radius: 999px;
	text-decoration: none; font-size: .9em;
}
.airec-job__summary {
	max-width: 46rem; margin: 0 0 2rem;
	color: var(--airec-job-muted); font-size: 1.05em; line-height: 1.6;
}

/* ── The body and the cards ────────────────────────────────────────────── */

.airec-job__grid { display: grid; gap: var(--airec-job-gap); }
.airec-job__body > :first-child { margin-top: 0; }
.airec-job__aside { display: flex; flex-direction: column; gap: 1.25rem; }

.airec-job__card {
	padding: 1.5rem;
	border: 1px solid var(--airec-job-line);
	border-radius: var(--airec-job-radius);
}
.airec-job__card--benefits, .airec-job__card--contact { border: 0; background: var(--airec-job-tint); }
.airec-job__card-title {
	margin: 0 0 1rem; font-size: .75em; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--airec-job-accent);
}
.airec-job__card--contact .airec-job__card-title,
.airec-job__card--benefits .airec-job__card-title { color: inherit; letter-spacing: 0; text-transform: none; font-size: 1em; }

.airec-job__facts { margin: 0; }
.airec-job__fact {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding: .6rem 0; border-bottom: 1px solid var(--airec-job-line);
}
.airec-job__fact:last-child { border-bottom: 0; }
.airec-job__fact dt { margin: 0; color: var(--airec-job-muted); font-size: .9em; }
.airec-job__fact dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.airec-job__perks { margin: 0; padding: 0; list-style: none; }
.airec-job__perks li { padding: .45rem 0; }
.airec-job__perks li + li { border-top: 1px solid var(--airec-job-line); }

.airec-job__contact p { margin: 0; color: var(--airec-job-muted); font-size: .95em; line-height: 1.6; }
.airec-job__contact p + p { margin-top: .5rem; }

.airec-job__cta { margin: 1.25rem 0 0; }
.airec-job__cta a {
	display: block; padding: .9em 1.5em; text-align: center;
	border-radius: 999px; text-decoration: none; font-weight: 600;
	border: 1px solid var(--airec-job-accent);
	background: var(--airec-job-accent);
	color: var(--airec-job-on-accent, #fff);
	transition: opacity .15s;
}
.airec-job__cta a:hover { opacity: .85; }

/* Without an accent set there is no colour to put white text on, so the button
 * falls back to an outline rather than printing white on white. */
.airec-job:not([style*="--airec-job-accent"]) .airec-job__cta a {
	background: transparent; color: inherit; border-color: currentColor;
}

/* ── The description itself ────────────────────────────────────────────── */

.airec-job .airec-jd__h { margin: 2.25rem 0 .75rem; }
.airec-job .airec-jd > .airec-jd__h:first-child { margin-top: 0; }
.airec-job .airec-jd__b ul { padding-left: 1.15em; }
.airec-job .airec-jd__b li { margin: .35em 0; }

/* ── The application ───────────────────────────────────────────────────── */

/*
 * A band rather than another block in the column. It is the moment the page
 * turns from reading to doing, and a change of ground says so more clearly
 * than a rule does.
 */
.airec-job__apply {
	margin: 4.5rem calc(50% - var(--airec-vw, 100vw) / 2) 0;
	padding: 3.5rem clamp(1rem, 4vw, 2.5rem);
	background: var(--airec-job-tint);
}
.airec-job__apply > * { max-width: 720px; margin-inline: auto; }
.airec-job__apply .airec-apply {
	max-width: 720px; margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--airec-job-card, #fff);
	border-radius: var(--airec-job-radius);
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06);
}
.airec-job__apply .airec-apply__title { margin: 0; text-align: center; }
.airec-job__apply .airec-apply__which {
	margin: .4rem 0 2rem; text-align: center;
	color: var(--airec-job-muted); font-size: .95em;
}

/*
 * The form fills the card it is in. public.css caps fields at 480px, which is
 * right in a page column and leaves a third of this card empty.
 */
.airec-job__apply .airec-form input[type="text"],
.airec-job__apply .airec-form input[type="email"],
.airec-job__apply .airec-form input[type="tel"],
.airec-job__apply .airec-form input[type="date"],
.airec-job__apply .airec-form input[type="number"],
.airec-job__apply .airec-form select,
.airec-job__apply .airec-form textarea {
	max-width: none;
	width: 100%;
	padding: .7em .9em;
	border: 1px solid var(--airec-job-line);
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font: inherit;
}
.airec-job__apply .airec-form textarea { min-height: 8rem; }
.airec-job__apply .airec-form .airec-field { margin-bottom: 1.1rem; }
.airec-job__apply .airec-form label { margin-bottom: .35rem; font-size: .95em; }
.airec-job__apply .airec-form input[type="file"] {
	max-width: none; width: 100%;
	padding: .8em; border: 1px dashed var(--airec-job-line); border-radius: 10px;
}
.airec-job__apply .airec-form button[type="submit"],
.airec-job__apply .airec-form input[type="submit"] {
	width: 100%; padding: .9em 1.5em;
	border: 1px solid var(--airec-job-accent); border-radius: 999px;
	background: var(--airec-job-accent); color: var(--airec-job-on-accent, #fff);
	font: inherit; font-weight: 600; cursor: pointer;
}
.airec-job:not([style*="--airec-job-accent"]) .airec-job__apply .airec-form button[type="submit"],
.airec-job:not([style*="--airec-job-accent"]) .airec-job__apply .airec-form input[type="submit"] {
	background: transparent; color: inherit; border-color: currentColor;
}

/* The page is already at the width it wants, so the band must not break out
 * of it a second time. */
.airec-job--w-theme .airec-job__apply { margin-inline: 0; border-radius: var(--airec-job-radius); }

/* ── Other open roles ──────────────────────────────────────────────────── */

.airec-job__related { margin: 4rem 0 0; padding: 0; }
.airec-job__related-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 1rem; margin: 0 0 1.5rem;
}
.airec-job__related-head h2 { margin: 0; }
.airec-job__related-head a { text-decoration: none; font-size: .95em; }

/* ══ The four arrangements ═════════════════════════════════════════════ */

/* Details beside — the description leads, the facts ride alongside. */
@container airecjob (min-width: 860px) {
	.airec-job--sidebar .airec-job__grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
	.airec-job--sidebar.airec-job--sticky .airec-job__aside { position: sticky; top: 2rem; }
}

/* Details first — the same, mirrored, and the facts read as the lead. */
@container airecjob (min-width: 860px) {
	.airec-job--rail .airec-job__grid { grid-template-columns: 19rem minmax(0, 1fr); align-items: start; }
	.airec-job--rail .airec-job__aside { grid-column: 1; grid-row: 1; }
	.airec-job--rail .airec-job__body { grid-column: 2; grid-row: 1; }
	.airec-job--rail.airec-job--sticky .airec-job__aside { position: sticky; top: 2rem; }
}

/* A browser without container queries falls back to the window, which is the
 * behaviour this had before — right most of the time, and never worse. */
@supports not (container-type: inline-size) {
	@media (min-width: 1100px) {
		.airec-job--sidebar .airec-job__grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
		.airec-job--sidebar.airec-job--sticky .airec-job__aside { position: sticky; top: 2rem; }
		.airec-job--rail .airec-job__grid { grid-template-columns: 19rem minmax(0, 1fr); align-items: start; }
		.airec-job--rail .airec-job__aside { grid-column: 1; grid-row: 1; }
		.airec-job--rail .airec-job__body { grid-column: 2; grid-row: 1; }
		.airec-job--rail.airec-job--sticky .airec-job__aside { position: sticky; top: 2rem; }
	}
}

/*
 * Banner first — the cards become a band across the top. The details card
 * spreads its rows into columns there, because a tall list of pairs in a wide
 * band is mostly empty space.
 */
.airec-job--hero .airec-job__aside {
	/* The band leads the page, so it comes first however the markup is ordered. */
	order: -1;
	flex-direction: row; flex-wrap: wrap; align-items: stretch;
	padding: 1.75rem; margin: 0;
	background: var(--airec-job-tint); border-radius: var(--airec-job-radius);
}
.airec-job--hero .airec-job__card { flex: 1 1 16rem; border: 0; background: none; padding: 0; }
.airec-job--hero .airec-job__card + .airec-job__card { padding-left: 1.75rem; border-left: 1px solid var(--airec-job-line); }
.airec-job--hero .airec-job__card--details { flex: 2 1 24rem; }
/* Label above value in a band: a wide row of pairs breaks its own values. */
.airec-job--hero .airec-job__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .25rem 1.5rem; }
.airec-job--hero .airec-job__fact { display: block; border-bottom: 0; padding: .35rem 0; }
.airec-job--hero .airec-job__fact dd { text-align: left; }
.airec-job--hero .airec-job__card--details .airec-job__cta { grid-column: 1 / -1; }
.airec-job--hero .airec-job__body { max-width: 46rem; }
@container airecjob (max-width: 780px) {
	.airec-job--hero .airec-job__aside { flex-direction: column; }
	.airec-job--hero .airec-job__card + .airec-job__card { padding-left: 0; border-left: 0; padding-top: 1.25rem; border-top: 1px solid var(--airec-job-line); }
}

/* One column — everything down the middle, facts as a strip of chips. */
.airec-job--stacked .airec-job__body,
.airec-job--stacked .airec-job__summary,
.airec-job--stacked .airec-job__aside { max-width: 46rem; }
.airec-job--stacked .airec-job__aside { order: -1; }
.airec-job--stacked .airec-job__grid { display: flex; flex-direction: column; gap: 2rem; }
.airec-job--stacked .airec-job__card--details { border: 0; background: var(--airec-job-tint); padding: 1.25rem 1.5rem; }
.airec-job--stacked .airec-job__facts { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.airec-job--stacked .airec-job__fact { border-bottom: 0; padding: .25rem 0; gap: .5rem; }
.airec-job--stacked .airec-job__fact dd { text-align: left; }
.airec-job--stacked .airec-job__cta a { display: inline-block; }