/**
 * Careers — the listing page and a single open position.
 *
 * The token block below is the same one projects-map.css opens with. It is repeated rather
 * than shared because the two stylesheets are never both on a page, and lifting it into a
 * third file would mean editing the projects stylesheet to take it away — a change to a
 * working page for no gain here. If a third template ever wants these, that is the moment to
 * extract them.
 */

.doral-careers,
.doral-position {
	/* colour */
	--doral-primary: #005050;
	--doral-primary-light: #007373;
	--doral-primary-800: #002828;
	--doral-tint-50: #e6eded;
	--doral-tint-100: #cddbdb;
	--doral-tint-200: #9bb7b7;
	--doral-ink: #0e1a1a;
	--doral-ink-2: #2a3838;
	--doral-ink-3: #5a6a6a;
	--doral-paper: #fff;

	/* spacing scale */
	--doral-s1: 8px;
	--doral-s2: 16px;
	--doral-s3: 24px;
	--doral-s4: 32px;
	--doral-s8: 64px;
	--doral-s10: 80px;
	--doral-s14: 112px;

	--doral-radius-card: 8px;
	--doral-radius-input: 4px;
	--doral-gutter: 80px;
	--doral-maxw: 1440px;

	--doral-font: "proxima-nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	font-family: var(--doral-font);
	color: var(--doral-ink);
}

.doral-careers *,
.doral-careers *::before,
.doral-careers *::after,
.doral-position *,
.doral-position *::before,
.doral-position *::after {
	box-sizing: border-box;
}

.doral-careers .doral-hero__inner,
.doral-careers .doral-content__inner > *,
.doral-careers .doral-openings__inner,
.doral-position .doral-hero__inner,
.doral-position .doral-content__inner > *,
.doral-position .doral-apply__inner {
	max-width: var(--doral-maxw);
	margin-inline: auto;
	padding-inline: var(--doral-gutter);
}

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

.doral-careers .doral-hero,
.doral-position .doral-hero {
	background: var(--doral-primary-800);
	color: var(--doral-paper);
	padding-block: var(--doral-s14) var(--doral-s10);
}

/*
 * DR-222 — the hero was wearing its own clothes.
 *
 * This eyebrow and heading were styled from scratch when these templates were written, before
 * it was clear the site already had settled forms for both, so /careers/ announced itself in a
 * different voice from every other page: a heavier, tighter-tracked eyebrow with no Doral
 * mark, over a title in the body face rather than the condensed display one.
 *
 * The eyebrow now carries the doral/eyebrow block's own classes and the theme enqueues that
 * block's stylesheet on these two views, so it is not a copy that can drift — change the block
 * and this changes with it. Only the spacing below it belongs to the hero.
 *
 * The heading matches what the rest of the site resolves to: proxima-nova-extra-condensed,
 * 700, uppercase, line-height 1. The size stays fluid rather than the flat 72px used in
 * content, because these two titles are a job title and a page name rather than a set piece of
 * copy — "Manager / Senior Development Manager, WECC" needs room to come down on a laptop.
 * 72px is the ceiling, so at full width it sits at the same size as every other hero.
 */
.doral-hero__eyebrow {
	margin: 0 0 var(--doral-s2);
}

.doral-hero__title {
	margin: 0;
	font-family: "proxima-nova-extra-condensed", "proxima-nova", -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--doral-paper);
}

.doral-hero__back {
	margin: 0 0 var(--doral-s3);
	font-size: 15px;
}

.doral-hero__back a {
	display: inline-flex;
	align-items: center;
	gap: var(--doral-s1);
	color: var(--doral-tint-100);
	text-decoration: none;
}

.doral-hero__back a:hover,
.doral-hero__back a:focus-visible {
	color: var(--doral-paper);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ summary panel */

.doral-summary {
	display: flex;
	flex-wrap: wrap;
	gap: var(--doral-s3) var(--doral-s8);
	margin: var(--doral-s4) 0 0;
	padding-block-start: var(--doral-s4);
	border-block-start: 1px solid rgb(255 255 255 / 0.18);
}

.doral-summary__row {
	min-width: 0;
}

.doral-summary__label {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--doral-tint-200);
}

.doral-summary__value {
	margin: 0;
	font-size: 17px;
	color: var(--doral-paper);
}

/* ------------------------------------------------------------------ buttons and links */

.doral-hero__cta {
	margin: var(--doral-s4) 0 0;
}

.doral-button {
	display: inline-flex;
	align-items: center;
	gap: var(--doral-s1);
	padding: 14px var(--doral-s4);
	border-radius: var(--doral-radius-input);
	background: var(--doral-paper);
	color: var(--doral-primary-800);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.doral-button:hover,
.doral-button:focus-visible {
	background: var(--doral-tint-100);
	color: var(--doral-primary-800);
}

.doral-link {
	display: inline-flex;
	align-items: center;
	gap: var(--doral-s1);
	color: var(--doral-primary);
	font-weight: 700;
	text-decoration: none;
}

.doral-link:hover,
.doral-link:focus-visible {
	color: var(--doral-primary-light);
	text-decoration: underline;
}

.doral-link__arrow {
	transition: transform 0.15s ease;
}

.doral-link:hover .doral-link__arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.doral-link__arrow {
		transition: none;
	}

	.doral-link:hover .doral-link__arrow {
		transform: none;
	}
}

/* ------------------------------------------------------------------ editor content
 *
 * Same treatment page-projects.php gives the page's own blocks: flow children sit in the
 * page column, while Kadence rows and .alignfull blocks carry their own width and are left
 * to run edge to edge rather than being boxed in twice.
 */

.doral-content {
	background: var(--doral-paper);
}

.doral-content__inner > .alignfull,
.doral-content__inner > .wp-block-kadence-rowlayout {
	max-width: none;
	padding-inline: 0;
}

.doral-content__inner > *:first-child {
	margin-block-start: 0;
}

.doral-content__inner > *:last-child {
	margin-block-end: 0;
}

.doral-careers .doral-content {
	padding-block: var(--doral-s8) 0;
}

/*
 * The body of a job description: long prose, so it is set narrower than the page column and
 * given a comfortable measure — about 80 characters at the body size.
 *
 * The measure is set once here on the wrapper rather than per child, because the children do
 * not share a font size. A `ch` unit resolves against the element it is written on, so the
 * same `max-width: 70ch` on a 24px heading and a 17px paragraph produces two different widths
 * and the text starts at two different places down the page.
 */
.doral-content--position {
	padding-block: var(--doral-s10);
}

.doral-content--position .doral-content__inner {
	max-width: calc(680px + 2 * var(--doral-gutter));
	margin-inline: auto;
	padding-inline: var(--doral-gutter);
}

.doral-content--position .doral-content__inner > * {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.doral-content--position .doral-content__inner h2,
.doral-content--position .doral-content__inner h3 {
	margin-block: var(--doral-s8) var(--doral-s2);
	font-size: 24px;
	line-height: 1.25;
	color: var(--doral-primary-800);
}

.doral-content--position .doral-content__inner > *:first-child {
	margin-block-start: 0;
}

.doral-content--position .doral-content__inner p,
.doral-content--position .doral-content__inner li {
	font-size: 17px;
	line-height: 1.6;
	color: var(--doral-ink-2);
}

.doral-content--position .doral-content__inner ul {
	padding-inline-start: var(--doral-s3);
}

.doral-content--position .doral-content__inner li {
	margin-block-end: var(--doral-s1);
}

/* ------------------------------------------------------------------ openings list */

.doral-openings {
	background: var(--doral-paper);
	padding-block: var(--doral-s8) var(--doral-s10);
}

.doral-openings__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--doral-s2);
	margin-block-end: var(--doral-s4);
}

.doral-openings__title {
	margin: 0;
	font-size: 32px;
	line-height: 1.15;
	color: var(--doral-primary-800);
}

.doral-openings__count {
	margin: 0;
	font-size: 15px;
	color: var(--doral-ink-3);
}

.doral-openings__empty {
	margin: 0;
	font-size: 17px;
	color: var(--doral-ink-2);
}

/*
 * DR-175 — a list, not cards.
 *
 * The markup was always a <ul>; it was the styling that made each opening a bordered, rounded
 * panel. The card motif recurs all over this site — projects, press, members — so the client
 * asked for the openings to read as a list instead, and this is that change in full: no
 * border, no radius, no panel background, no shadow. What separates one opening from the next
 * is a single hairline rule, and the list closes with one so it does not trail off.
 *
 * Each row is a two-column grid: everything about the job on the left, the "Read more" link
 * held at the right-hand edge and centred against the block, which gives the column of arrows
 * that makes a list of links scannable. Below 782px the second column would leave the title
 * about ten characters wide, so the row stacks and the link returns to the flow.
 */

.doral-openings__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--doral-tint-100);
}

.doral-job {
	border-top: 1px solid var(--doral-tint-100);
	transition: background-color 0.15s ease;
}

/*
 * The tint is pulled out past the text on both sides so the hover reads as a full-width row
 * rather than a floating rectangle, while the rules above and below stay where they are.
 */
.doral-job:hover,
.doral-job:focus-within {
	background-color: var(--doral-tint-50);
	box-shadow: -12px 0 0 var(--doral-tint-50), 12px 0 0 var(--doral-tint-50);
}

.doral-job__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--doral-s4);
	align-items: center;
	padding-block: var(--doral-s3);
	padding-inline: 0;
}

.doral-job__title {
	grid-column: 1;
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
}

.doral-job__title a {
	color: var(--doral-primary-800);
	text-decoration: none;
}

.doral-job__title a:hover,
.doral-job__title a:focus-visible {
	color: var(--doral-primary);
	text-decoration: underline;
}

.doral-job__meta {
	grid-column: 1;
	margin: var(--doral-s1) 0 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--doral-ink-3);
}

/*
 * Clamped to two lines. The excerpt is the opening of the job description and runs to five or
 * six lines unclamped, which turns each row back into a block of prose and undoes the point of
 * asking for a list. Two lines is enough to tell one opening from another; the full text is a
 * click away on the job's own page. The text stays in the markup rather than being cut short
 * server-side, so it is still there for search engines and for anyone reading with CSS off.
 */
.doral-job__excerpt {
	grid-column: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: var(--doral-s1) 0 0;
	max-width: 70ch;
	font-size: 16px;
	line-height: 1.55;
	color: var(--doral-ink-2);
}

/* Spans whatever rows the left-hand column happens to fill, so it stays centred against it. */
.doral-job__more {
	grid-column: 2;
	grid-row: 1 / -1;
	margin: 0;
	font-size: 16px;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ application form */

.doral-apply {
	background: var(--doral-tint-50);
	padding-block: var(--doral-s10);
}

.doral-apply__title {
	margin: 0 0 var(--doral-s4);
	font-size: 32px;
	line-height: 1.15;
	color: var(--doral-primary-800);
}

/* Same measure as the job description above it, so the two columns line up. */
.doral-apply__form,
.doral-apply__fallback {
	max-width: 680px;
}

.doral-apply__fallback {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--doral-ink-2);
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1200px) {
	.doral-careers,
	.doral-position {
		--doral-gutter: 40px;
	}
}

@media (max-width: 782px) {
	.doral-careers,
	.doral-position {
		--doral-gutter: 20px;
	}

	.doral-careers .doral-hero,
	.doral-position .doral-hero {
		padding-block: var(--doral-s10) var(--doral-s8);
	}

	.doral-summary {
		gap: var(--doral-s3);
	}

	/*
	 * Two columns rather than one: these values are short — "Remote", "Full-time" — and a
	 * single column would push the Apply button below the fold on every job.
	 */
	.doral-summary__row {
		flex: 1 1 calc(50% - var(--doral-s3));
	}

	/*
	 * Stacked: at this width a second column leaves the title too narrow to read. The link
	 * rejoins the flow underneath rather than being held at the right-hand edge.
	 */
	.doral-job__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.doral-job__more {
		grid-column: 1;
		grid-row: auto;
		margin-top: var(--doral-s2);
	}

	.doral-openings__title,
	.doral-apply__title {
		font-size: 26px;
	}
}