/* ============================================================
   ARK CIC — what only exists once the design is a WordPress site.

   Everything here is either a bridge between a core block's markup
   and a component class, or a piece of page-specific layout the
   component library does not cover.

   Same rule as components.css: no hard-coded colour, font, radius
   or border width. Tokens only.
   ============================================================ */

/* ---------- core block bridges ---------- */

/* WordPress's flow layout puts `margin-block-start` on every child after the
   first. Inside a grid that does not stack anything — it shifts items down
   within their own cell, so a four-across row ends up with the first item 24px
   higher than the other three. Our grids own their spacing through `gap`. */
.steps > *,
.stats > *,
.jobs > *,
.hero__grid > *,
.band__grid > *,
.filters > * { margin-block-start: 0; margin-block-end: 0; }

/* Group blocks add their own margins; the component classes own spacing. */
.header.wp-block-group,
.footer.wp-block-group { margin-block: 0; }

/* wp:site-title renders <h1><a>. The .brand dot is a pseudo-element here
   rather than the design system's <i>, since core controls the markup. */
.brand { margin: 0; font-size: 1.22rem; }
.brand a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.brand a::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--c-accent);
	display: block;
	flex: 0 0 auto;
}

/* wp:navigation emits a <ul>; .menu expects a flex row of links. */
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-6); }
.menu li { margin: 0; }
.menu .wp-block-navigation-item__content { text-decoration: none; }

/* The navigation block ships its own responsive machinery. The design has its
   own mobile pattern (.nav-m), so core's must be kept out of the way entirely —
   left alone it injects a second hamburger alongside ours below 600px. */
.menu.wp-block-navigation { --navigation-layout-justification-setting: flex-start; }
.menu .wp-block-navigation__responsive-container-open,
.menu .wp-block-navigation__responsive-container-close { display: none !important; }
.menu .wp-block-navigation__responsive-container { position: static; background: none; }
.menu .wp-block-navigation__responsive-container.is-menu-open { padding: 0; }

/* Mobile disclosure. components.css owns the visuals and the 900px swap; this
   only fixes what core's link styling would otherwise impose on it. */
.nav-m__panel a { text-decoration: none; }
.nav-m > summary { list-style: none; }
.nav-m > summary::-webkit-details-marker { display: none; }

/* components.css sets `.nav-m__panel a{color:var(--c-ink)}`, which outranks
   `.btn--dark{color:var(--c-accent-ink)}` and left the Request staff button as
   near-black text on forest green — a contrast failure, not just a cosmetic one.
   Restore the button's own colour inside the panel. */
.nav-m__panel a.btn--dark { color: var(--c-accent-ink); }

/* The header's two buttons, mapped onto .btn without touching core markup. */
.header__cta .wp-block-buttons { gap: var(--sp-3); }
.header__cta .wp-block-button__link {
	font-family: var(--f-display);
	font-weight: var(--fw-ui);
	font-size: .95rem;
	padding: 13px 24px;
	border-radius: var(--radius-pill);
	line-height: 1.1;
	text-decoration: none;
}
.header__cta .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--c-ink);
	border: 1px solid var(--c-rule-strong);
}
.header__cta .is-style-outline .wp-block-button__link:hover { background: var(--c-surface-alt); }

/* ---------- footer ---------- */

.footer__in {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
}
.footer__in p { margin: 0; }

/* ---------- single vacancy ---------- */

.job-head { padding-bottom: var(--sp-8); }
.job-head__title { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: var(--sp-4) 0 var(--sp-3); max-width: 18ch; }
.job-head__org { margin: 0 0 var(--sp-8); }

.glance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--sp-6);
	padding: var(--sp-6) 0 0;
	border-top: 1px solid var(--c-rule);
}
.glance__item > * { margin: 0; }
.glance__value { font-family: var(--f-display); font-weight: var(--fw-strong); font-size: var(--ts-md); }

/* An optional field left blank must not leave a labelled empty box behind, which
   reads as a broken page rather than an absent value. Block templates cannot
   render conditionally, so the empty case is handled here. */
.glance__item:has(.glance__value:empty) { display: none; }

.job-apply__ref { margin-top: var(--sp-4); }
.job-apply__ref:not(:empty)::before { content: "Ref "; }

.job-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-16); align-items: start; }
.job-apply { position: sticky; top: var(--sp-6); }
.job-apply .wp-block-buttons { margin-top: var(--sp-4); }

/* ---------- job board ---------- */

.board-head { padding-bottom: var(--sp-8); }
.board-head__title { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 var(--sp-4); max-width: 16ch; }
.board-head .lead { margin: 0 0 var(--sp-6); }

/* Filters are anchors rather than buttons so each is a shareable URL, but they
   must read as the chips the design specifies. */
a.chip-filter { text-decoration: none; display: inline-flex; align-items: center; }

/* The post-template block adds its own list styling; .jobs owns the grid. */
.jobs { list-style: none; margin: 0; padding: 0; }
.jobs > li { margin: 0; }

/* WordPress puts the post type name on each list item, so every <li> in the
   loop picks up `.job` as well as the <article> inside it — and components.css
   styles `.job` as a white card. The result is a card drawn inside a card.
   Strip the list item back and let the article be the card. */
.jobs > li.job {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	transition: none;
}
.jobs > li.job:hover { transform: none; box-shadow: none; }

.job { height: 100%; }
.job__head > * { margin: 0; }
.job__t a { color: inherit; text-decoration: none; }
.job__t a:hover { color: var(--c-accent); }
.job__f > * { margin: 0; }

/* A vacancy with no contract type or phase must not leave a floating coloured
   pill with nothing in it. */
.tags .tag:empty { display: none; }
.tags .tag { margin: 0; }

/* Core's pagination markup, wearing the load-more button. */
.ark-loadmore { justify-content: center; }
.ark-loadmore .wp-block-query-pagination-next {
	font-family: var(--f-display);
	font-weight: var(--fw-ui);
	font-size: 1.02rem;
	padding: 16px 30px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--c-rule-strong);
	color: var(--c-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.ark-loadmore .wp-block-query-pagination-next:hover { background: var(--c-surface-alt); }
/* No next page means no button, rather than an empty band of whitespace. */
.loadmore:not(:has(.wp-block-query-pagination-next)) { display: none; }

.empty .wp-block-buttons { justify-content: center; }

/* ---------- homepage ----------
   Translated from design-system/route-j-openday.html, which was built before the
   component library and never migrated onto it. The shared pieces — slab, quote,
   stats, stat, jobs, job, band, faces, kicker, btn — come from components.css
   untouched. Only the layout that is genuinely unique to this page lives here,
   and every literal has been swapped for a token so a palette change reaches it.
   ------------------------------------------------------------------------- */

/* components.css styles the impact figures as `.stat n` and `.stat small` — a
   custom element and a <small>, neither of which the block editor can produce.
   These mirror those rules exactly onto classes blocks can carry. */
.stat { display: flex; flex-direction: column; justify-content: space-between; }
.stat > * { margin: 0; }
.stat .stat__n {
	font-family: var(--f-display);
	font-weight: var(--fw-display);
	font-size: 2.05rem;
	letter-spacing: -.035em;
	line-height: 1;
}
.stat .stat__l { font-size: .82rem; line-height: 1.35; font-weight: 500; max-width: 22ch; }

.hero { padding: var(--sp-12) 0 var(--sp-16); }
.hero__grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: var(--sp-12);
	align-items: center;
}
.hero .lead { margin: 0 0 var(--sp-6); }

/* Email capture. Sits in the hero because with no live vacancies at launch,
   catching what someone is looking for is the primary conversion. */
.signup { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.signup input {
	font-family: var(--f-body);
	font-size: .98rem;
	padding: 13px 20px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--c-rule-strong);
	background: var(--c-surface);
	min-width: 240px;
	flex: 1;
	color: var(--c-ink);
}
.signup input::placeholder { color: var(--c-muted); }

.hero__meta {
	display: flex;
	gap: var(--sp-5);
	flex-wrap: wrap;
	font-size: .86rem;
	color: var(--c-muted);
	align-items: center;
}
.hero__meta p { margin: 0; }

/* The collage: a photo with pastel shapes behind and two cards over it. The
   shapes are CSS, so the composition still reads as deliberate before the real
   photography arrives. */
.collage {
	position: relative;
	aspect-ratio: 4 / 4.4;
	border-radius: var(--radius-md);
	background: var(--c-surface-alt);
	overflow: visible;
}
.collage__frame {
	position: absolute;
	inset: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--c-surface-alt);
}
.collage__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.collage figure { margin: 0; height: 100%; }

.blob { position: absolute; border-radius: 50%; }
.b1 { width: 150px; height: 150px; background: var(--p-butter); top: -28px; right: -24px; }
.b2 { width: 96px; height: 96px; background: var(--p-blush); bottom: 14%; left: -30px; }
.sq {
	position: absolute;
	width: 78px; height: 78px;
	background: var(--p-lilac);
	border-radius: 16px;
	transform: rotate(-13deg);
	top: 11%; left: 7%;
}
.tagcard {
	position: absolute;
	left: 6%; bottom: 6%; right: 22%;
	background: var(--c-surface);
	border-radius: 12px;
	padding: 12px 14px;
	box-shadow: var(--shadow-md);
}
.tagcard strong { display: block; font-size: .94rem; font-weight: 700; letter-spacing: -.01em; }
.tagcard span, .tagcard p { font-size: .8rem; color: var(--c-muted); margin: 0; }
.chip {
	position: absolute;
	top: 5%; right: 6%;
	background: var(--p-mint);
	color: var(--c-on-pastel);
	font-size: .76rem;
	font-weight: 600;
	padding: 6px 13px;
	border-radius: var(--radius-pill);
	margin: 0;
}

/* The homepage slab meets the hero flush, unlike the rounded one elsewhere. */
.slab--flat { border-radius: 0; margin-top: 0; padding-top: var(--sp-12); }

.how__h { display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-8); }
.how__h h2 {
	font-family: var(--f-display);
	font-weight: var(--fw-display);
	font-size: clamp(1.9rem, 4vw, 2.7rem);
	letter-spacing: var(--ls-display);
	line-height: 1.06;
	margin: 0;
	max-width: 14ch;
}

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.step {
	background: var(--c-surface);
	border-radius: var(--radius-md);
	padding: var(--sp-5);
	box-shadow: var(--shadow-sm);
}
.step > * { margin: 0; }
.step .step__n {
	width: 30px; height: 30px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
	font-size: .84rem;
	margin-bottom: var(--sp-3);
	color: var(--c-on-pastel);
}
.step h3 {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 6px;
	letter-spacing: -.015em;
}
.step p { font-size: .9rem; color: var(--c-muted); line-height: 1.45; }

/* The guarantee band. Its inner card sits on the forest ground, so its surfaces
   are mixed from the accent's ink rather than hard-coded whites — change the
   accent and the card follows. */
.band__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-10); align-items: center; }
.band__grid > div > * { margin: 0; }
.band__grid p { margin-top: var(--sp-4); color: color-mix(in srgb, var(--c-accent-ink) 82%, var(--c-accent)); }
.band__card {
	background: color-mix(in srgb, var(--c-accent-ink) 9%, transparent);
	border: 1px solid color-mix(in srgb, var(--c-accent-ink) 20%, transparent);
	border-radius: var(--radius-md);
	padding: var(--sp-5);
}
.band__card > * { margin: 0; }
.band__card .band__figure {
	font-family: var(--f-display);
	font-weight: var(--fw-display);
	font-size: 1.9rem;
	letter-spacing: -.03em;
	color: var(--p-mint);
	margin-bottom: 6px;
}
.band__card p { font-size: .9rem; color: color-mix(in srgb, var(--c-accent-ink) 78%, var(--c-accent)); line-height: 1.45; }

/* ---------- search block ----------
   Core's search block is its own markup, so .inline-form styles the wrapper
   but reaches nothing inside it. These two rules map its input and button
   onto .input and .btn--dark without a custom block or a filter. */

.wp-block-search .wp-block-search__inside-wrapper { gap: var(--sp-2); }
.wp-block-search .wp-block-search__input {
	font: inherit;
	padding: 13px 18px;
	border: 1px solid var(--c-rule-strong);
	border-radius: var(--radius-pill);
	background: var(--c-surface);
	color: var(--c-ink);
	min-width: 0;
}
.wp-block-search .wp-block-search__input::placeholder { color: var(--c-muted); }
.wp-block-search .wp-block-search__input:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}
.wp-block-search .wp-block-search__button {
	font-family: var(--f-display);
	font-weight: var(--fw-ui);
	font-size: .95rem;
	padding: 13px 24px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-accent);
	color: var(--c-accent-ink);
	cursor: pointer;
}
.wp-block-search .wp-block-search__button:hover { background: var(--c-accent-hover); }

/* Outline buttons everywhere, not only in the header. The header keeps its own
   rule for sizing, and out-specifies this one where they overlap. */
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--c-ink);
	border: 1px solid var(--c-rule-strong);
}
.is-style-outline .wp-block-button__link:hover { background: var(--c-surface-alt); }

/* ---------- 404 ---------- */

.e404 {
	min-height: 52vh;
	display: flex;
	align-items: center;
}
.e404__in { max-width: 620px; }
.e404__in > * { margin-block: 0; }
.e404__title { margin-block: var(--sp-3) var(--sp-5); max-width: 15ch; }
.e404 .lead { margin-bottom: var(--sp-6); }
.e404 .wp-block-search { margin-bottom: var(--sp-6); max-width: 520px; }
.e404__links { gap: var(--sp-2); }
.e404__h { margin-bottom: var(--sp-5); font-size: clamp(1.5rem, 3vw, 2rem); }

/* ---------- search results ---------- */

.search-head { padding-bottom: var(--sp-8); }
.search-head > * { margin-block: 0; }
.search-head__title { margin-bottom: var(--sp-5); max-width: 20ch; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.search-head__form { max-width: 560px; margin-bottom: var(--sp-5); }

/* Results are one per row, unlike the vacancy grid they borrow their card from. */
.results .jobs { grid-template-columns: minmax(0, 1fr); }
.result > * { margin-block: 0; }
.result .job__t { margin-block: var(--sp-2) var(--sp-1); }
.result .job__o { color: var(--c-muted); font-size: .95rem; }

/* The result's type chip is one bound paragraph, so its colour cannot come from
   a class in the markup. WordPress puts the post type name on the list item —
   the same behaviour that caused the card-inside-a-card above — so the type is
   already in the DOM and the colour can key off it. */
.result__type { align-self: flex-start; }
li.job       .result__type { background: var(--p-sky); }
li.guide     .result__type { background: var(--p-lilac); }
li.role_guide .result__type { background: var(--p-lilac); }
li.case_study .result__type { background: var(--p-mint); }
li.destination .result__type { background: var(--p-butter); }
li.service   .result__type { background: var(--p-clay); }
li.page      .result__type { background: var(--p-butter); }
li.post      .result__type { background: var(--p-blush); }

/* ---------- destination guide ---------- */

.dest-head { padding-bottom: var(--sp-8); }
.dest-head > * { margin-block: 0; }
.dest-head__title { margin-block: var(--sp-4) var(--sp-5); max-width: 15ch; }
.dest-head__lead { font-size: 1.16rem; max-width: 56ch; color: var(--c-ink); }

.dest-glance { margin-bottom: var(--sp-12); }

.dest-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--sp-12);
	align-items: start;
}
.dest-grid > * { margin-block: 0; }

.dest-aside {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	position: sticky;
	top: var(--sp-5);
}
.dest-aside > * { margin-block: 0; }
.dest-aside__roles .wp-block-buttons { margin-top: var(--sp-4); }

/* A guide for a country with nothing open should not show an empty card
   promising roles. The count binding returns "" when there are none. */
.dest-aside__roles:has(.kicker:empty) { display: none; }

/* ---------- apply form ---------- */

.apply { max-width: 720px; }
.apply > * { margin-block: 0; }
.apply > h2 { margin-bottom: var(--sp-5); scroll-margin-top: var(--sp-8); }
.apply__error { margin-bottom: var(--sp-5); }
.apply__form { display: flex; flex-direction: column; gap: var(--sp-4); }
.apply__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* The honeypot has to be reachable by a bot parsing the HTML and invisible to
   everyone else, so it is moved off-screen rather than display:none — some bots
   skip hidden fields, which would defeat the point. */
.apply__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.apply .check { display: flex; gap: var(--sp-2); align-items: flex-start; cursor: pointer; }
.apply .check input { margin-top: 4px; flex: none; }
.apply .btn { align-self: flex-start; }

/* ---------- thank you ---------- */

.thanks > *, .thanks__in > * { margin-block: 0; }
.thanks__in { max-width: 640px; }
.thanks__in .tag { display: inline-block; margin-bottom: var(--sp-4); }
.thanks__title { margin-block: var(--sp-3) var(--sp-5); max-width: 17ch; }
.thanks__h { margin-bottom: var(--sp-6); font-size: clamp(1.5rem, 3vw, 2rem); }
.thanks__steps { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.thanks__steps > * { margin-block: 0; }
.thanks__steps .stat p { margin-block: 0; }
.thanks__wait { margin-top: var(--sp-12); max-width: 640px; }
.thanks__wait > * { margin-block: 0; }
.thanks__wait .lead { margin-block: var(--sp-3) var(--sp-5); }

/* ---------- case study and service page ---------- */

.case-head, .service-head { padding-bottom: var(--sp-8); }
.case-head > *, .service-head > * { margin-block: 0; }
.case-head__title { margin-block: var(--sp-4) var(--sp-5); max-width: 19ch; }
.service-head__title { margin-block: var(--sp-4) var(--sp-5); max-width: 17ch; }
.case-head__lead, .service-head__lead { max-width: 52ch; }
.service-head__cta { margin-top: var(--sp-6); gap: var(--sp-2); }

.case-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--sp-10);
	align-items: start;
}
.case-grid > * { margin-block: 0; }
.case-aside {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	position: sticky;
	top: var(--sp-5);
}
.case-aside > * { margin-block: 0; }
.case-aside .wp-block-buttons { margin-top: var(--sp-3); }

.case-cta { margin-top: var(--sp-16); text-align: center; }
.service-cta { margin-top: var(--sp-16); max-width: 640px; }
.service-cta > * { margin-block: 0; }
.service-cta p { margin-block: var(--sp-3) var(--sp-5); }

/* ---------- the two hubs ---------- */

.teach-head, .emp-head { padding-bottom: var(--sp-8); }
.teach-head > *, .emp-head > * { margin-block: 0; }
.teach-head__in, .emp-head__in { max-width: 660px; }
.teach-head__in > *, .emp-head__in > * { margin-block: 0; }
.teach-head__title { margin-block: var(--sp-3) var(--sp-5); max-width: 16ch; }
.emp-head__title { margin-block: var(--sp-3) var(--sp-5); max-width: 17ch; }
.teach-head .lead, .emp-head .lead { margin-bottom: var(--sp-6); }

.teach-h, .emp-h { margin-bottom: var(--sp-6); font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.teach-h--spaced { margin-top: var(--sp-16); }
.teach-promises { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.teach-promises > * { margin-block: 0; }
.teach-promises .stat p { margin-block: 0; }

.emp-band { margin-top: var(--sp-16); }

/* ---------- responsive ----------
   Mirrors the breakpoint in components.css. Must stay at the end of this
   file for the same reason the one in components.css must: .menu ul is
   declared display:flex above, and an earlier rule at equal specificity
   loses the cascade. */
@media (max-width: 900px) {
	/* Re-assert the swap components.css asks for. Its rule is `.menu{display:none}`
	   at one class of specificity, and core's `.wp-block-navigation{display:flex}`
	   matches that and loads later, so the desktop menu and buttons stayed visible
	   alongside the mobile button. Scoping to .header__in wins on specificity
	   rather than relying on load order. */
	.header__in .menu,
	.header__in .header__cta { display: none; }
	.header__in .nav-m { display: block; margin-left: auto; }

	.header__in { gap: var(--sp-4); }
	.footer__in { flex-direction: column; }

	/* Homepage. Matches the breakpoints the original design used. */
	.hero__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
	.steps { grid-template-columns: 1fr 1fr; }
	.band__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
	.b1 { width: 104px; height: 104px; top: -18px; right: -12px; }
	.b2 { width: 68px; height: 68px; left: -16px; }
	.job-body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
	.job-apply { position: static; }

	/* The search block's flex row overflows a narrow viewport before its input
	   reaches a usable width, so it stacks rather than shrinking. */
	.wp-block-search .wp-block-search__inside-wrapper { flex-wrap: wrap; }
	.wp-block-search .wp-block-search__input { flex: 1 1 100%; }
	.e404 { min-height: 0; }

	.dest-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
	.dest-aside { position: static; }

	.case-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
	.case-aside { position: static; }

	.apply__row { grid-template-columns: minmax(0, 1fr); }
}