/**
 * Vakanssi careers front-end design system.
 *
 * Conventions:
 * - Every color, size, and radius flows through the `--vakanssi-*` custom
 *   properties below so a future dark scheme (or the Custom CSS setting) only
 *   has to override tokens, never component rules.
 * - Each `var()` declaration is preceded by a static fallback, and each logical
 *   property by its physical equivalent, so browsers without custom-property or
 *   logical-property support still render a sane layout.
 * - Typography inherits from the active theme; sizes are em-based so the
 *   components scale with whatever context they are embedded in.
 */

:root {
	/* Ink (text). */
	--vakanssi-ink: #1e2936;
	--vakanssi-text: #3a4552;
	--vakanssi-muted: #5f6b7a;
	--vakanssi-faint: #98a2b0;

	/* Surfaces and lines. */
	--vakanssi-surface: #ffffff;
	--vakanssi-surface-subtle: #f6f8fa;
	--vakanssi-border: #e2e6eb;
	--vakanssi-border-strong: #c9d1da;

	/* Accent — the brand teal by default. Overridden at runtime from the one
	   brand accent (Settings -> Emails -> Branding) via wp_add_inline_style, so
	   every candidate-facing surface, the emails, and the admin's chosen color
	   all agree. These values are the default that shows before that override
	   (and the fallback if inline styles are removed). */
	--vakanssi-accent: #0f766e;
	--vakanssi-accent-strong: #0c615a;
	--vakanssi-accent-contrast: #ffffff;
	--vakanssi-accent-tint: #e7f1f1;
	--vakanssi-accent-tint-border: #bcd9d6;
	--vakanssi-focus-ring: rgba(15, 118, 110, 0.28);

	/* Feedback. */
	--vakanssi-success-text: #1d5a34;
	--vakanssi-success-bg: #f2f8f4;
	--vakanssi-success-border: #b9dcc6;
	--vakanssi-danger-text: #9f3a38;
	--vakanssi-danger-bg: #fbf4f4;
	--vakanssi-danger-border: #e7c6c5;

	/* Shape and elevation. */
	--vakanssi-radius-sm: 4px;
	--vakanssi-radius: 6px;
	--vakanssi-radius-lg: 10px;
	--vakanssi-shadow-sm: 0 1px 2px rgba(20, 30, 45, 0.05);
	--vakanssi-shadow-md: 0 4px 14px rgba(20, 30, 45, 0.07);

	/* Type scale (relative to the surrounding theme size). */
	--vakanssi-text-2xs: 0.75em;
	--vakanssi-text-xs: 0.8125em;
	--vakanssi-text-sm: 0.875em;
	--vakanssi-text-md: 0.9375em;
	--vakanssi-text-lg: 1.0625em;
}

/* ------------------------------------------------------------------ *
 *  Careers archive wrapper (templates/archive-jobs.php)
 * ------------------------------------------------------------------ */

/* The `:where(:not(.wp-block-group))` guard makes this the CLASSIC-theme rule
   only, and costs nothing: :where() contributes zero specificity, so the weight
   is still (0,1,0), well under the (0,5,0) Custom CSS boost.

   On a block theme the same class rides on the constrained-layout `wp:group`
   that CareersArchive::register_block_template() emits. That group already caps
   its children at the content size and carries the theme's root padding, so
   applying the box below there would cap inside a cap and pad twice: a visibly
   narrower, double-padded column. There, the class is purely a Custom CSS hook
   and the theme owns the column, which is the right answer on a block theme. */
.vakanssi-careers-archive:where(:not(.wp-block-group)) {
	/* Match the theme's own content column when it publishes one (theme.json
	   contentSize -> --wp--style--global--content-size; Astra, Kadence, Hello,
	   GeneratePress with global styles). 46rem is the fallback for themes that
	   publish nothing, never a cap on top of a narrower theme column. */
	max-width: 46rem;
	max-inline-size: 46rem;
	max-width: var(--wp--style--global--content-size, 46rem);
	max-inline-size: var(--wp--style--global--content-size, 46rem);
	margin: 2.5rem auto 3.5rem;
	margin-block: 2.5rem 3.5rem;
	margin-inline: auto;
	padding: 0 1.25rem;
	padding-block: 0;
	padding-inline: 1.25rem;
}

/* The jobs list below provides its own top rule, so the header stays quiet.

   Guarded like the wrapper above, and for the same reason stated once here for
   every remaining wrapper rule: on a block theme these classes ride on core
   blocks (wp:group, wp:post-title, wp:post-featured-image) whose spacing and
   presentation the THEME already owns through theme.json. Leaving our
   declarations to fight that produced exactly one real difference in testing,
   a 10px border-radius appearing on featured images that had none, which is a
   visual change no one asked for on upgrade. So on block themes these are pure
   Custom CSS hooks and nothing else, which is also what the docs promise. */
.vakanssi-careers-header:where(:not(.wp-block-group)) {
	margin-bottom: 1.75rem;
	margin-block-end: 1.75rem;
}

.vakanssi-careers-header:where(:not(.wp-block-group)) h1 {
	margin: 0;
}

/* ------------------------------------------------------------------ *
 *  Single job page (templates/single-jobs.php)
 *  Owns the content column only; the details block, apply CTA, related
 *  roles, and back link are appended by JobDetails and bring their own
 *  (archive-shared) styles.
 * ------------------------------------------------------------------ */

/* Classic-theme only, for the same reason as .vakanssi-careers-archive above:
   on a block theme this class sits on a constrained-layout group that already
   owns the column, and re-applying the box would double-constrain it. */
.vakanssi-single-job:where(:not(.wp-block-group)) {
	/* Same rule as the archive above: the job page shares the careers page's
	   column instead of a second, plugin-imposed width. */
	max-width: 46rem;
	max-inline-size: 46rem;
	max-width: var(--wp--style--global--content-size, 46rem);
	max-inline-size: var(--wp--style--global--content-size, 46rem);
	margin: 2.5rem auto 3.5rem;
	margin-block: 2.5rem 3.5rem;
	margin-inline: auto;
	padding: 0 1.25rem;
	padding-block: 0;
	padding-inline: 1.25rem;
}

.vakanssi-single-job__title:where(:not(.wp-block-post-title)) {
	margin: 0 0 1rem;
	margin-block: 0 1rem;
}

/* The job description's own rhythm, classic themes only.

   A classic theme spaces post prose through its content wrapper, almost always
   `.entry-content > *`, and resets the elements themselves to zero: Twenty
   Twenty-One ships `p, ul, ol, h1-h6 { margin: 0 }`. This template owns the
   content column and prints the body in `.vakanssi-single-job__body`, not in
   the theme's wrapper, so that reset was all that applied and the description
   rendered as one wall of text. Hello Elementor left lists with no space below.

   (0,1,0) clears the element resets (0,0,1). `:where()` keeps it there, and the
   `:not([class*="vakanssi-"])` filter leaves the blocks this plugin appends to
   the same column (details, apply CTA, back link) to their own rules. On a
   block theme the class rides on core's post-content block, whose flow layout
   already applies the theme's block gap, so these stay out of its way. */
.vakanssi-single-job__body:where(:not(.wp-block-post-content)) > :where(p, ul, ol, dl, blockquote, figure, pre, table, h2, h3, h4, h5, h6):where(:not([class*="vakanssi-"])) {
	margin: 0 0 1em;
	margin-block: 0 1em;
}

.vakanssi-single-job__body:where(:not(.wp-block-post-content)) > :where(h2, h3, h4, h5, h6):where(:not([class*="vakanssi-"])) {
	margin: 1.25em 0 0.5em;
	margin-block: 1.25em 0.5em;
}

.vakanssi-single-job__body:where(:not(.wp-block-post-content)) > :where(:first-child) {
	margin-top: 0;
	margin-block-start: 0;
}

.vakanssi-single-job__body:where(:not(.wp-block-post-content)) > :where(ul, ol):where(:not([class*="vakanssi-"])) {
	padding: 0 0 0 1.5em;
	padding-block: 0;
	padding-inline: 1.5em 0;
}

.vakanssi-single-job__body:where(:not(.wp-block-post-content)) > :where(ul, ol):where(:not([class*="vakanssi-"])) > :where(li + li) {
	margin-top: 0.35em;
	margin-block-start: 0.35em;
}

/* ------------------------------------------------------------------ *
 *  Jobs listing — [vakanssi_jobs]
 * ------------------------------------------------------------------ */

/* Reserve the scrollbar gutter on the listing page only, so filtering to a
   shorter result set can't toggle the scrollbar and shift the centred content
   sideways. Scoped via :has() so other pages are untouched. */
html:has(.vakanssi-jobs-board) {
	scrollbar-gutter: stable;
}

/* Decorative inline SVGs carry their size as width/height attributes. A theme
   reset of `svg { width: 100%; height: auto }` — Tailwind preflight and every
   theme built on it ships one — overrides those attributes and blows the icon
   up to its container's width; the sort chevron became a 91px arrow across the
   control. `auto` restores the attribute-declared intrinsic size. Icons that
   must not move are additionally pinned in px where they are defined. */
[class*="vakanssi-"] svg {
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
}

/* <bdi> is only worth shipping while it still isolates. Its whole behaviour is
   one UA declaration (`unicode-bidi: isolate`), which any theme reset that
   touches generic inline elements can flatten, and the failure is invisible in
   LTR: a page-range readout that quietly reads "20-1" under he_IL. Declared on
   our own markup so nothing outside it is affected. */
[class*="vakanssi-"] bdi {
	unicode-bidi: isolate;
}

/* Command bar (search / team / remote / sort). Progressive enhancement, but
   the bar renders visible unconditionally; nothing reveals or hides it.

   It used to be hidden here and revealed when careers.js added
   `.vakanssi-enhanced`. That reveal landed after first paint, so the bar pushed
   the meta line and the whole results list down about 59px roughly a second in:
   a measured 0.034 CLS on every careers page. A <noscript> hide for the (rare)
   no-JS visitor followed, and was dropped in turn because the wordpress.org
   enqueue policy cannot express it (see Shortcodes::render_jobs). With
   scripting off the controls simply do nothing. */
.vakanssi-jobs-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-block-end: 0.9rem;
}

/* Search grows to own the row; the controls after it keep their own width.
   The label — not the input — carries the field chrome, and the icon is a real
   flex item rather than an absolutely-positioned overlay. That is deliberate:
   the overlay reserved room for the icon with padding on the input, so any
   theme whose reset restyles `input[type="search"]` padding (Hello Elementor
   and every other normalize/preflight descendant does) dropped the gutter and
   ran the placeholder underneath the icon. With the icon in flow there is no
   padding contract left for a theme to break. */
.vakanssi-jobs-search {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	flex: 1 1 12rem;
	min-inline-size: 8rem;
	padding-block: 0.5em;
	padding-inline: 0.7em;
	background: #ffffff;
	background: var(--vakanssi-surface, #ffffff);
	border: 1px solid #c9d1da;
	border: 1px solid var(--vakanssi-border-strong, #c9d1da);
	border-radius: 6px;
	border-radius: var(--vakanssi-radius, 6px);
}

.vakanssi-jobs-search:focus-within {
	border-color: #0f766e;
	border-color: var(--vakanssi-accent, #0f766e);
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);
	box-shadow: 0 0 0 3px var(--vakanssi-focus-ring, rgba(15, 118, 110, 0.22));
}

/* Explicit box: themes shipping `svg { width: 100%; height: auto }` would
   otherwise stretch the icon and squeeze the input out of the row. */
.vakanssi-jobs-search .vakanssi-jobs-searchicon {
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	color: #98a2b0;
	color: var(--vakanssi-faint, #98a2b0);
	pointer-events: none;
}

/* The input is chrome-less — the label above draws the field. Every property a
   theme reset is likely to touch is restated so the control renders the same
   under any theme. Scoped to clear the specificity floor enforced by
   bin/check-frontend-css.php.

   `appearance: auto` rather than `none`: the search box is the one control here
   whose native widget earns its keep, because it carries the browser's clear
   button and nothing else on the board clears the query (the active-filter
   chips only cover team and remote). Themes toggle that button on and off at
   random — Hello Elementor's `[type="search"] { appearance: textfield }` hides
   it — so pinning it to `auto` is what makes the affordance consistent. Author
   border/background still win over the native paint on a text control, so the
   field stays flat. */
.vakanssi-jobs-bar .vakanssi-jobs-searchinput {
	flex: 1 1 auto;
	box-sizing: border-box;
	inline-size: 100%;
	min-inline-size: 0;
	max-inline-size: 100%;
	min-block-size: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	font-size: 0.875em;
	font-size: var(--vakanssi-text-sm, 0.875em);
	line-height: 1.4;
	color: #1e2936;
	color: var(--vakanssi-ink, #1e2936);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	appearance: auto;
}

/* Focus is drawn on the wrapper, so the input must stay quiet — and must not
   re-acquire the theme's own focus border. */
.vakanssi-jobs-bar .vakanssi-jobs-searchinput:focus {
	border: 0;
	box-shadow: none;
	outline: none;
}

/* Styled native selects (team + sort) — the native arrow is replaced by our
   own chevron so both controls match the search field. */
.vakanssi-jobs-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.vakanssi-jobs-bar .vakanssi-jobs-select-input {
	box-sizing: border-box;
	margin: 0;
	font: inherit;
	font-size: 0.875em;
	font-size: var(--vakanssi-text-sm, 0.875em);
	line-height: 1.4;
	color: #1e2936;
	color: var(--vakanssi-ink, #1e2936);
	background: #ffffff;
	background: var(--vakanssi-surface, #ffffff);
	border: 1px solid #c9d1da;
	border: 1px solid var(--vakanssi-border-strong, #c9d1da);
	border-radius: 6px;
	border-radius: var(--vakanssi-radius, 6px);
	padding-block: 0.5em;
	padding-inline: 0.7em 1.9em;
	/* `inline-size: auto` is load-bearing: theme resets routinely set
	   `select { width: 100% }`, which would stretch the control past the
	   shrink-to-fit wrapper the chevron is positioned against. */
	inline-size: auto;
	max-inline-size: 100%;
	min-block-size: 0;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.vakanssi-jobs-bar .vakanssi-jobs-select-input:focus {
	outline: none;
	border-color: #0f766e;
	border-color: var(--vakanssi-accent, #0f766e);
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);
	box-shadow: 0 0 0 3px var(--vakanssi-focus-ring, rgba(15, 118, 110, 0.22));
}

.vakanssi-jobs-select .vakanssi-jobs-select-chevron {
	position: absolute;
	inline-size: 15px;
	block-size: 15px;
	inset-inline-end: 0.6rem;
	color: #98a2b0;
	color: var(--vakanssi-faint, #98a2b0);
	pointer-events: none;
}

/* Remote — an accessible toggle switch. The checkbox is visually hidden but
   stays focusable and drives the state; the track/thumb are the visual. */
.vakanssi-jobs-remote {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.8125em;
	font-size: var(--vakanssi-text-xs, 0.8125em);
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

/* Kept 1px and transparent rather than `display: none` so it stays focusable.
   `appearance: none` and the explicit box matter here: several popular themes
   restyle `input[type="checkbox"]` with a custom box at a fixed em size, which
   out-specifies a bare class and would surface a stray square beside the
   toggle track. */
.vakanssi-jobs-bar .vakanssi-jobs-switch-input {
	position: absolute;
	box-sizing: border-box;
	inline-size: 1px;
	block-size: 1px;
	min-inline-size: 0;
	min-block-size: 0;
	margin: 0;
	padding: 0;
	font-size: 1em;
	line-height: 1;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
}

.vakanssi-jobs-switch {
	position: relative;
	display: inline-block;
	flex: none;
	inline-size: 2.1em;
	block-size: 1.2em;
	background: #c9d1da;
	background: var(--vakanssi-border-strong, #c9d1da);
	border-radius: 999px;
	transition: background 0.16s ease;
}

.vakanssi-jobs-switch-thumb {
	position: absolute;
	inset-block-start: 0.15em;
	inset-inline-start: 0.15em;
	inline-size: 0.9em;
	block-size: 0.9em;
	background: #ffffff;
	background: var(--vakanssi-surface, #ffffff);
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(20, 30, 45, 0.35);
	transition: inset-inline-start 0.16s ease;
}

.vakanssi-jobs-switch-input:checked + .vakanssi-jobs-switch {
	background: #0f766e;
	background: var(--vakanssi-accent, #0f766e);
}

.vakanssi-jobs-switch-input:checked + .vakanssi-jobs-switch .vakanssi-jobs-switch-thumb {
	inset-inline-start: 1.05em;
}

.vakanssi-jobs-switch-input:focus-visible + .vakanssi-jobs-switch {
	outline: 2px solid #0f766e;
	outline: 2px solid var(--vakanssi-accent, #0f766e);
	outline-offset: 2px;
}

/* Meta line — the live open-role count plus removable active-filter chips.
   Always visible (the count works with no JS); chips are added by careers.js. */
.vakanssi-jobs-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.85rem;
	/* Reserve the active-filter chip's height so selecting a team or toggling
	   remote surfaces a chip without growing the row (and shifting the list).
	   The chip pins its own line-height below, so its height is known here
	   (~1.55em) whatever line-height the theme gives inline text; 1.75em
	   leaves a little to spare. Content-box on purpose: under a theme's `* { box-sizing:
	   border-box }` (Tailwind preflight, every normalize descendant) the
	   reservation would have to cover the row's own top padding and border
	   too, and the chip outgrew what was left. */
	box-sizing: content-box;
	min-height: 1.75em;
	min-block-size: 1.75em;
	margin-block-end: 1.1rem;
}

.vakanssi-jobs-count {
	margin: 0;
	font-size: 0.875em;
	font-size: var(--vakanssi-text-sm, 0.875em);
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
}

/* Listing pagination (the built-in archive, and paginated Pages): a range
   readout on the left ("Showing 21–40 of 112 roles"), "Page 2 of 6" and two
   round arrow buttons on the right. Says where the reader is in the roles,
   not in the pages, and closes the loop with the count line above the list.
   Every reset-prone property is declared and every selector sits at
   (0,2,0)+ so a theme's `a`, `p` and button rules cannot restyle it. */
.vakanssi-jobs-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 2.5rem 0 0;
	margin-block: 2.5rem 0;
	margin-inline: 0;
	padding: 0;
	font-size: 0.9375em;
	font-size: var(--vakanssi-text-md, 0.9375em);
	line-height: 1.4;
}

/* The gap above the nav, restated at (0,2,0): themes space content
   children with an equal-specificity "owl" rule (`.entry-content > * + *`,
   block themes' `.is-layout-flow > *`) that loads after this sheet and won
   the tie, leaving the nav 1.1rem under the last row. */
.vakanssi-jobs-board + .vakanssi-jobs-pagination,
.vakanssi-jobs-board .vakanssi-jobs-pagination {
	margin-block-start: 2.5rem;
	margin-top: 2.5rem;
}

.vakanssi-jobs-pagination .vakanssi-jobs-pagination__range {
	margin: 0;
	padding: 0;
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
	font-size: inherit;
	font-variant-numeric: tabular-nums;
}

.vakanssi-jobs-pagination .vakanssi-jobs-pagination__range strong {
	color: #1e2936;
	color: var(--vakanssi-ink, #1e2936);
	font-weight: 600;
}

.vakanssi-jobs-pagination .vakanssi-jobs-pagination__controls {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-inline-start: auto;
}

.vakanssi-jobs-pagination .vakanssi-jobs-pagination__page {
	margin-inline-end: 0.35rem;
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The two round arrow buttons. */
.vakanssi-jobs-pagination .vakanssi-jobs-pagination__arrow {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Whole pixels on purpose (not em): with a 16px icon inside, an em-sized
	   button lands on half pixels at most theme sizes (2.5em = 37.5px) and
	   the chevron cannot centre exactly. 36px also matches the Apply
	   button's height on the rows above. */
	inline-size: 36px;
	block-size: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid #c9d1da;
	border: 1px solid var(--vakanssi-border-strong, #c9d1da);
	border-radius: 999px;
	background: #ffffff;
	background: var(--vakanssi-surface, #ffffff);
	color: #3a4552;
	color: var(--vakanssi-text, #3a4552);
	box-shadow: 0 1px 2px rgba(20, 30, 45, 0.05);
	box-shadow: var(--vakanssi-shadow-sm, 0 1px 2px rgba(20, 30, 45, 0.05));
	text-decoration: none;
	line-height: 1;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vakanssi-jobs-pagination .vakanssi-jobs-pagination__arrow > svg {
	display: block;
	inline-size: 16px;
	block-size: 16px;
}

.vakanssi-jobs-pagination a.vakanssi-jobs-pagination__arrow:hover,
.vakanssi-jobs-pagination a.vakanssi-jobs-pagination__arrow:focus-visible {
	border-color: #0f766e;
	border-color: var(--vakanssi-accent, #0f766e);
	background: #e7f1f1;
	background: var(--vakanssi-accent-tint, #e7f1f1);
	color: #0c615a;
	color: var(--vakanssi-accent-strong, #0c615a);
	text-decoration: none;
}

.vakanssi-jobs-pagination a.vakanssi-jobs-pagination__arrow:focus-visible {
	outline: 2px solid #0f766e;
	outline: 2px solid var(--vakanssi-accent, #0f766e);
	outline-offset: 2px;
}

/* First / last page: the button stays so the row keeps its shape, but reads
   as off. */
.vakanssi-jobs-pagination .vakanssi-jobs-pagination__arrow.is-disabled {
	color: #98a2b0;
	color: var(--vakanssi-faint, #98a2b0);
	border-color: #e2e6eb;
	border-color: var(--vakanssi-border, #e2e6eb);
	box-shadow: none;
	opacity: 0.7;
	cursor: default;
}

/* RTL: the chevrons point the way the reader travels. */
[dir="rtl"] .vakanssi-jobs-pagination .vakanssi-jobs-pagination__arrow > svg {
	transform: scaleX(-1);
}

/* Narrow screens: the readout takes its own line, the controls keep the end. */
@media (max-width: 30em) {
	.vakanssi-jobs-pagination .vakanssi-jobs-pagination__range {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vakanssi-jobs-pagination .vakanssi-jobs-pagination__arrow {
		transition: none;
	}
}

/* A hairline separates the bar from the results meta. Applied unconditionally
   for the same reason the bar is: adding it later moved the list down. */
.vakanssi-jobs-bar + .vakanssi-jobs-meta {
	/* Same distance from the hairline above as to the list's top rule below,
	   so the count line sits centred between the two (it used to be 0.85rem
	   above and 1.1rem below, and read as sitting high). */
	padding-block-start: 1rem;
	margin-block-end: 1rem;
	border-block-start: 1px solid #e2e6eb;
	border-block-start: 1px solid var(--vakanssi-border, #e2e6eb);
}

.vakanssi-jobs-activefilters {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.vakanssi-jobs-activefilter {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	font-size: 0.8125em;
	font-size: var(--vakanssi-text-xs, 0.8125em);
	color: #0c615a;
	color: var(--vakanssi-accent-strong, #0c615a);
	background: #e7f1f1;
	background: var(--vakanssi-accent-tint, #e7f1f1);
	border: 1px solid #bcd9d6;
	border: 1px solid var(--vakanssi-accent-tint-border, #bcd9d6);
	border-radius: 999px;
	/* Pinned: a theme's body line-height (1.6, 1.7…) would otherwise set the
	   chip's height and outgrow the room .vakanssi-jobs-meta reserves for it. */
	line-height: 1.25;
	padding-block: 0.25em;
	padding-inline: 0.7em 0.35em;
	/* Pin the line so the chip's total height stays within the row's reserved
	   min-height regardless of the theme's inherited line-height. */
	line-height: 1.4;
}

.vakanssi-jobs-activefilter-text {
	white-space: nowrap;
}

/* Scoped past the theme's `button` / `[type="button"]` reset, which otherwise
   paints the chip's ✕ with the theme's own outline-button border and radius. */
.vakanssi-jobs-activefilter .vakanssi-jobs-activefilter-x {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.2em;
	block-size: 1.2em;
	min-inline-size: 0;
	min-block-size: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	transition: background 0.14s ease;
	-webkit-appearance: none;
	appearance: none;
}

.vakanssi-jobs-activefilter .vakanssi-jobs-activefilter-x > svg {
	inline-size: 12px;
	block-size: 12px;
}

.vakanssi-jobs-activefilter .vakanssi-jobs-activefilter-x:hover {
	background: #bcd9d6;
	background: var(--vakanssi-accent-tint-border, #bcd9d6);
}

.vakanssi-jobs-activefilter .vakanssi-jobs-activefilter-x:focus-visible {
	outline: 2px solid #0f766e;
	outline: 2px solid var(--vakanssi-accent, #0f766e);
	outline-offset: 1px;
}

/* The list */
.vakanssi-jobs {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #e2e6eb;
	border-block-start: 1px solid var(--vakanssi-border, #e2e6eb);
}

.vakanssi-job {
	border-bottom: 1px solid #e2e6eb;
	border-block-end: 1px solid var(--vakanssi-border, #e2e6eb);
}

/* careers.js hides rows (filtering, rows adopted from other pages) and the
   page nav (while a filter spans every page) with the `hidden` attribute.
   The UA's [hidden]{display:none} loses to ANY author display rule — the
   nav's own display:flex below, a theme's `li { display: block }` — so the
   attribute is honoured explicitly here, at a specificity a theme reset
   cannot beat. Same lesson as .hp-set-card[hidden] in settings.css. */
.vakanssi-jobs-board .vakanssi-job[hidden],
.vakanssi-jobs-pagination[hidden] {
	display: none;
}

/* Theme-proofing for the list box model, at (0,2,0) on purpose. Themes
   routinely indent every list in the content column and space its items
   (`.entry-content ul { padding-left: 1.3rem }`, `li + li { margin-top }`),
   which out-specified the (0,1,0) resets above: the rows sat ~20px right of
   the search bar and count line they hang under, and gaps opened between
   them. Every reset-prone property is spelled out here so no theme rule has
   anything left to win. */
.vakanssi-jobs-board .vakanssi-jobs,
.vakanssi-jobs-board .vakanssi-job {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vakanssi-job-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1rem;
	padding-block: 1.1rem;
	/* Flush with the column: the title shares its left edge with the heading,
	   the search field and the count line above, and the chevron shares its
	   right edge with the sort control (and with the Apply button on rows
	   that carry one). The hover band spans the same width as the rules
	   between rows. */
	padding-inline: 0;
	text-decoration: none;
	color: inherit;
}

/* The row content must not move on hover; the tint lives on the row's
   hover band below, not on the link. */
.vakanssi-job-link:focus-visible {
	outline: none;
}

/* Hover band. Painted by a pseudo-element behind the row so it can be wider
   than the row itself: the title and the chevron (or the Apply button) stay
   on the column edges, aligned with the heading and the sort control above,
   while the band bleeds past them so a filled button never sits on its edge.
   Rounded and inset from the hairlines so it reads as a highlight, not a
   stripe. Flush on phones (a bleed could overflow a zero-padding section);
   grid cards keep their own border-and-shadow hover instead. */
.vakanssi-jobs-board .vakanssi-jobs:not(.vakanssi-jobs--grid) .vakanssi-job {
	position: relative;
	isolation: isolate;
}

.vakanssi-jobs-board .vakanssi-jobs:not(.vakanssi-jobs--grid) .vakanssi-job::before {
	content: "";
	position: absolute;
	inset-block: 0.25rem;
	inset-inline: 0;
	z-index: -1;
	border-radius: 6px;
	border-radius: var(--vakanssi-radius, 6px);
	background: #f6f8fa;
	background: var(--vakanssi-surface-subtle, #f6f8fa);
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

/* No `.vakanssi-jobs-board` ancestor here on purpose: with it these land on
   (0,5,1), which ties the Custom CSS boost and would let a hover state beat a
   site owner's branding (bin/check-frontend-css.php gates this). The row above
   is the only rule that gives this pseudo-element `content`, so outside the
   board there is nothing for the raised opacity to reveal. */
.vakanssi-jobs:not(.vakanssi-jobs--grid) .vakanssi-job:hover::before,
.vakanssi-jobs:not(.vakanssi-jobs--grid) .vakanssi-job:focus-within::before {
	opacity: 1;
}

@media (min-width: 37.5em) {
	.vakanssi-jobs-board .vakanssi-jobs:not(.vakanssi-jobs--grid) .vakanssi-job::before {
		inset-inline: -0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vakanssi-jobs-board .vakanssi-jobs:not(.vakanssi-jobs--grid) .vakanssi-job::before {
		transition: none;
	}
}

.vakanssi-job-main {
	min-inline-size: 0;
}

.vakanssi-job-dept {
	display: block;
	font-size: 0.75em;
	font-size: var(--vakanssi-text-2xs, 0.75em);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #0f766e;
	color: var(--vakanssi-accent, #0f766e);
	margin-block-end: 0.2rem;
}

.vakanssi-job-title {
	display: block;
	font-size: 1.0625em;
	font-size: var(--vakanssi-text-lg, 1.0625em);
	font-weight: 600;
	line-height: 1.3;
	color: #1e2936;
	color: var(--vakanssi-ink, #1e2936);
}

.vakanssi-job-link:hover .vakanssi-job-title,
.vakanssi-job-link:focus-visible .vakanssi-job-title {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Meta: one quiet line beneath the title — no pills. Salary carries weight,
   "Remote" a subtle accent; middot separators are added in CSS (RTL-safe). */
.vakanssi-job-meta {
	display: block;
	margin-block-start: 0.4rem;
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
	font-size: 0.875em;
	font-size: var(--vakanssi-text-sm, 0.875em);
	line-height: 1.5;
}

.vakanssi-job-fact + .vakanssi-job-fact::before {
	content: "\00B7";
	margin-inline: 0.5em;
	color: #98a2b0;
	color: var(--vakanssi-faint, #98a2b0);
}

.vakanssi-job-fact--remote,
.vakanssi-job-fact--workplace {
	color: #0c615a;
	color: var(--vakanssi-accent-strong, #0c615a);
	font-weight: 600;
}

.vakanssi-job-fact--salary {
	color: #1e2936;
	color: var(--vakanssi-ink, #1e2936);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.vakanssi-job-go {
	display: inline-flex;
	color: #98a2b0;
	color: var(--vakanssi-faint, #98a2b0);
	transition: color 0.15s ease, transform 0.15s ease;
}

.vakanssi-job-link .vakanssi-job-go > svg {
	inline-size: 16px;
	block-size: 16px;
}

.vakanssi-job-link:hover .vakanssi-job-go,
.vakanssi-job-link:focus-visible .vakanssi-job-go {
	color: #0f766e;
	color: var(--vakanssi-accent, #0f766e);
	transform: translateX(3px);
}

/* RTL: the "go" chevron points toward the reading direction. Mirror the
   right-pointing glyph to point left, and slide it left (not right) on hover. */
[dir="rtl"] .vakanssi-job-go > svg {
	transform: scaleX(-1);
}
[dir="rtl"] .vakanssi-job-link:hover .vakanssi-job-go,
[dir="rtl"] .vakanssi-job-link:focus-visible .vakanssi-job-go {
	transform: translateX(-3px);
}

/* ---- Optional per-row Apply control (apply_button="true") ----------------
   The control is a sibling of the row link, never a child: an <a> inside an <a>
   is invalid and breaks keyboard navigation. So the <li> takes over the
   two-column job, and the link's stretched ::after keeps the whole row
   clickable underneath while the control sits above it on its own z-index.
   Rules are scoped under .vakanssi-jobs (0,2,0) so they out-specify the
   unscoped anchor/button resets themes ship. */
.vakanssi-jobs .vakanssi-job--apply {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1rem;
}

.vakanssi-jobs .vakanssi-job--apply .vakanssi-job-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vakanssi-jobs .vakanssi-job-apply {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	box-sizing: border-box;
	margin: 0;
	padding-block: 0.6rem;
	padding-inline: 0.95rem;
	border: 1px solid #0f766e;
	border: 1px solid var(--vakanssi-accent, #0f766e);
	border-radius: 7px;
	background: transparent;
	color: #0f766e;
	color: var(--vakanssi-accent, #0f766e);
	font-family: inherit;
	font-size: 0.8125em;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Filling on row hover keeps the whole row reading as one target. */
.vakanssi-jobs .vakanssi-job--apply:hover .vakanssi-job-apply,
.vakanssi-jobs .vakanssi-job-apply:hover,
.vakanssi-jobs .vakanssi-job-apply:focus-visible {
	background: #0f766e;
	background: var(--vakanssi-accent, #0f766e);
	border-color: #0f766e;
	border-color: var(--vakanssi-accent, #0f766e);
	color: #ffffff;
	color: var(--vakanssi-accent-contrast, #ffffff);
}

.vakanssi-jobs .vakanssi-job-apply:focus-visible {
	outline: 2px solid #0f766e;
	outline: 2px solid var(--vakanssi-accent, #0f766e);
	outline-offset: 2px;
}

.vakanssi-jobs .vakanssi-job-apply-ext {
	flex: 0 0 auto;
}

/* RTL: the outbound arrow mirrors, like the row chevron above. */
[dir="rtl"] .vakanssi-jobs .vakanssi-job-apply-ext {
	transform: scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
	.vakanssi-jobs .vakanssi-job-apply {
		transition: none;
	}
}

.vakanssi-jobs-noresults {
	margin-block: 1.25rem 0;
	padding-block: 2rem;
	padding-inline: 1.5rem;
	text-align: center;
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
	font-size: 0.9375em;
	font-size: var(--vakanssi-text-md, 0.9375em);
	background: #f6f8fa;
	background: var(--vakanssi-surface-subtle, #f6f8fa);
	border: 1px dashed #c9d1da;
	border: 1px dashed var(--vakanssi-border-strong, #c9d1da);
	border-radius: 10px;
	border-radius: var(--vakanssi-radius-lg, 10px);
}

/* [vakanssi_jobs layout="grid"] — a responsive card grid. */
.vakanssi-jobs--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem;
	border-top: 0;
	border-block-start: 0;
}

.vakanssi-jobs--grid .vakanssi-job {
	border-bottom: 0;
	border-block-end: 0;
	background: #ffffff;
	background: var(--vakanssi-surface, #ffffff);
	border: 1px solid #e2e6eb;
	border: 1px solid var(--vakanssi-border, #e2e6eb);
	border-radius: 10px;
	border-radius: var(--vakanssi-radius-lg, 10px);
	box-shadow: 0 1px 2px rgba(20, 30, 45, 0.05);
	box-shadow: var(--vakanssi-shadow-sm, 0 1px 2px rgba(20, 30, 45, 0.05));
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vakanssi-jobs--grid .vakanssi-job:hover,
.vakanssi-jobs--grid .vakanssi-job:focus-within {
	border-color: #c9d1da;
	border-color: var(--vakanssi-border-strong, #c9d1da);
	box-shadow: 0 4px 14px rgba(20, 30, 45, 0.07);
	box-shadow: var(--vakanssi-shadow-md, 0 4px 14px rgba(20, 30, 45, 0.07));
}

.vakanssi-jobs--grid .vakanssi-job-link {
	grid-template-columns: 1fr;
	padding-block: 1.25rem;
	padding-inline: 1.25rem;
}

.vakanssi-jobs--grid .vakanssi-job-link:hover,
.vakanssi-jobs--grid .vakanssi-job-link:focus-visible {
	background: transparent;
}

.vakanssi-jobs--grid .vakanssi-job-go {
	display: none;
}

/* Empty state. */
.vakanssi-jobs-empty {
	margin: 1.5rem 0;
	margin-block: 1.5rem;
	margin-inline: 0;
	padding: 2.5rem 1.5rem;
	padding-block: 2.5rem;
	padding-inline: 1.5rem;
	text-align: center;
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
	font-size: 0.9375em;
	font-size: var(--vakanssi-text-md, 0.9375em);
	background: #f6f8fa;
	background: var(--vakanssi-surface-subtle, #f6f8fa);
	border: 1px dashed #c9d1da;
	border: 1px dashed var(--vakanssi-border-strong, #c9d1da);
	border-radius: 10px;
	border-radius: var(--vakanssi-radius-lg, 10px);
}

/* ------------------------------------------------------------------ *
 *  Single-job details block
 * ------------------------------------------------------------------ */

.vakanssi-job-details {
	margin: 1.75rem 0;
	margin-block: 1.75rem;
	margin-inline: 0;
	padding: 0.6rem 1.35rem;
	padding-block: 0.6rem;
	padding-inline: 1.35rem;
	background: #f6f8fa;
	background: var(--vakanssi-surface-subtle, #f6f8fa);
	border: 1px solid #e2e6eb;
	border: 1px solid var(--vakanssi-border, #e2e6eb);
	border-radius: 10px;
	border-radius: var(--vakanssi-radius-lg, 10px);
}

.vakanssi-job-details .vakanssi-detail {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1.25rem;
	padding: 0.65rem 0;
	padding-block: 0.65rem;
	padding-inline: 0;
}

.vakanssi-job-details .vakanssi-detail + .vakanssi-detail {
	border-top: 1px solid #e2e6eb;
	border-block-start: 1px solid var(--vakanssi-border, #e2e6eb);
}

.vakanssi-job-details dt {
	flex: 0 0 9.5em;
	margin: 0;
	padding: 0;
	font-size: 0.75em;
	font-size: var(--vakanssi-text-2xs, 0.75em);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
}

/* `padding: 0` too: Twenty Twenty-One indents every dd with
   `padding-left: calc(2 * var(--global--spacing-horizontal))`, which pushed
   each value 40px off its label. */
.vakanssi-job-details dd {
	margin: 0;
	padding: 0;
	font-size: 0.9375em;
	font-size: var(--vakanssi-text-md, 0.9375em);
	color: #1e2936;
	color: var(--vakanssi-ink, #1e2936);
}

/* ------------------------------------------------------------------ *
 *  Other open roles + back-to-listing (single job)
 * ------------------------------------------------------------------ */

.vakanssi-related {
	margin-block: 2rem 1.25rem;
}

.vakanssi-related-heading {
	margin: 0 0 0.75rem;
	margin-block: 0 0.75rem;
	font-size: 0.75em;
	font-size: var(--vakanssi-text-2xs, 0.75em);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
}

/* Theme-proofing for the list box model, at (0,2,0) on purpose, exactly as the
   listing does above. "Other open roles" sits INSIDE the job's content column,
   so it meets `.entry-content ul { padding-left }` and `.entry-content li +
   li { margin-top }` (0,1,1) head on: at (0,1,0) the cards sat indented from
   the body copy above them and grew a second gap on top of the grid's own.
   `.vakanssi-related-item` had no rule at all, so every list reset a theme
   ships landed on it unopposed. Every reset-prone property is spelled out;
   winning the cascade only wins the properties actually declared. */
.vakanssi-related .vakanssi-related-list,
.vakanssi-related .vakanssi-related-item {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vakanssi-related .vakanssi-related-list {
	display: grid;
	gap: 0.5rem;
}

.vakanssi-related-item a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding-block: 0.85rem;
	padding-inline: 1rem;
	text-decoration: none;
	color: inherit;
	background: #ffffff;
	background: var(--vakanssi-surface, #ffffff);
	border: 1px solid #e2e6eb;
	border: 1px solid var(--vakanssi-border, #e2e6eb);
	border-radius: 6px;
	border-radius: var(--vakanssi-radius, 6px);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.vakanssi-related-item a:hover,
.vakanssi-related-item a:focus-visible {
	border-color: #0f766e;
	border-color: var(--vakanssi-accent, #0f766e);
	background: #f6f8fa;
	background: var(--vakanssi-surface-subtle, #f6f8fa);
	outline: none;
}

.vakanssi-related-role {
	font-weight: 600;
	color: #1e2936;
	color: var(--vakanssi-ink, #1e2936);
}

.vakanssi-related-meta {
	font-size: 0.8125em;
	font-size: var(--vakanssi-text-xs, 0.8125em);
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
}

.vakanssi-single-back {
	margin-block: 1.5rem 0;
	font-size: 0.875em;
	font-size: var(--vakanssi-text-sm, 0.875em);
}

.vakanssi-single-back a {
	color: #0f766e;
	color: var(--vakanssi-accent, #0f766e);
	text-decoration: none;
}

.vakanssi-single-back a:hover,
.vakanssi-single-back a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 *  Apply call-to-action
 * ------------------------------------------------------------------ */

.vakanssi-apply {
	margin: 1.75rem 0;
	margin-block: 1.75rem;
	margin-inline: 0;
}

/* The primary CTA renders as an <a> on the job detail page (.vakanssi-apply)
   and as a <button type="submit"> in the form (.vakanssi-apply-form). Both
   scopes are listed rather than relying on the bare class, because every theme
   reset descended from normalize styles `[type="submit"], button` — at equal
   weight to a single class, so source order alone decided whether the brand
   button or the theme's outline button won. Hello Elementor lost us this one:
   the Apply CTA rendered transparent with the theme's link-coloured border. */
.vakanssi-apply .vakanssi-apply-button,
.vakanssi-apply-form .vakanssi-apply-button {
	box-sizing: border-box;
	display: inline-block;
	inline-size: auto;
	min-block-size: 0;
	margin: 0;
	padding: 0.65em 1.4em;
	border: 1px solid transparent;
	border-radius: 6px;
	border-radius: var(--vakanssi-radius, 6px);
	background: #0f766e;
	background: var(--vakanssi-accent, #0f766e);
	color: #ffffff;
	color: var(--vakanssi-accent-contrast, #ffffff);
	font-family: inherit;
	font-size: 0.9375em;
	font-size: var(--vakanssi-text-md, 0.9375em);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(20, 30, 45, 0.05);
	box-shadow: var(--vakanssi-shadow-sm, 0 1px 2px rgba(20, 30, 45, 0.05));
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.vakanssi-apply .vakanssi-apply-button:hover,
.vakanssi-apply .vakanssi-apply-button:focus,
.vakanssi-apply .vakanssi-apply-button:active,
.vakanssi-apply-form .vakanssi-apply-button:hover,
.vakanssi-apply-form .vakanssi-apply-button:focus,
.vakanssi-apply-form .vakanssi-apply-button:active {
	background: #0c615a;
	background: var(--vakanssi-accent-strong, #0c615a);
	color: #ffffff;
	color: var(--vakanssi-accent-contrast, #ffffff);
	border-color: transparent;
	text-decoration: none;
}

.vakanssi-apply .vakanssi-apply-button:focus,
.vakanssi-apply-form .vakanssi-apply-button:focus {
	outline: 2px solid transparent; /* Kept transparent so forced-colors mode still draws it. */
	outline-offset: 2px;
	box-shadow: 0 1px 2px rgba(20, 30, 45, 0.05), 0 0 0 3px rgba(15, 118, 110, 0.22);
	box-shadow: var(--vakanssi-shadow-sm, 0 1px 2px rgba(20, 30, 45, 0.05)), 0 0 0 3px var(--vakanssi-focus-ring, rgba(15, 118, 110, 0.22));
}

.vakanssi-apply .vakanssi-apply-button:focus:not(:focus-visible),
.vakanssi-apply-form .vakanssi-apply-button:focus:not(:focus-visible) {
	box-shadow: 0 1px 2px rgba(20, 30, 45, 0.05);
	box-shadow: var(--vakanssi-shadow-sm, 0 1px 2px rgba(20, 30, 45, 0.05));
}

.vakanssi-apply--soon {
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
	font-style: italic;
}

.vakanssi-apply--closed {
	color: #9f3a38;
	color: var(--vakanssi-danger-text, #9f3a38);
	font-weight: 600;
}

/* ------------------------------------------------------------------ *
 *  Application form
 * ------------------------------------------------------------------ */

.vakanssi-apply-form {
	margin: 2rem 0;
	margin-block: 2rem;
	margin-inline: 0;
	padding: 1.5rem;
	padding-block: 1.5rem;
	padding-inline: 1.5rem;
	background: #ffffff;
	background: var(--vakanssi-surface, #ffffff);
	border: 1px solid #e2e6eb;
	border: 1px solid var(--vakanssi-border, #e2e6eb);
	border-radius: 10px;
	border-radius: var(--vakanssi-radius-lg, 10px);
	box-shadow: 0 1px 2px rgba(20, 30, 45, 0.05);
	box-shadow: var(--vakanssi-shadow-sm, 0 1px 2px rgba(20, 30, 45, 0.05));
	color: #3a4552;
	color: var(--vakanssi-text, #3a4552);
}

.vakanssi-apply-form h3 {
	margin: 0 0 1.25rem;
	margin-block: 0 1.25rem;
	margin-inline: 0;
	font-size: 1.25em;
	color: #1e2936;
	color: var(--vakanssi-ink, #1e2936);
}

.vakanssi-field {
	margin: 0 0 1.1rem;
	margin-block: 0 1.1rem;
	margin-inline: 0;
}

.vakanssi-field > label {
	display: block;
	margin-bottom: 0.4em;
	margin-block-end: 0.4em;
	font-size: 0.875em;
	font-size: var(--vakanssi-text-sm, 0.875em);
	font-weight: 600;
	color: #1e2936;
	color: var(--vakanssi-ink, #1e2936);
}

.vakanssi-field label span[aria-hidden="true"] {
	color: #9f3a38;
	color: var(--vakanssi-danger-text, #9f3a38);
}

.vakanssi-apply-form .vakanssi-field input[type="text"],
.vakanssi-apply-form .vakanssi-field input[type="email"],
.vakanssi-apply-form .vakanssi-field input[type="tel"],
.vakanssi-apply-form .vakanssi-field input[type="url"],
.vakanssi-apply-form .vakanssi-field select,
.vakanssi-apply-form .vakanssi-field textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	inline-size: 100%;
	min-block-size: 0;
	margin: 0;
	padding: 0.55em 0.8em;
	background: #ffffff;
	background: var(--vakanssi-surface, #ffffff);
	border: 1px solid #c9d1da;
	border: 1px solid var(--vakanssi-border-strong, #c9d1da);
	border-radius: 6px;
	border-radius: var(--vakanssi-radius, 6px);
	box-shadow: none;
	color: #1e2936;
	color: var(--vakanssi-ink, #1e2936);
	font: inherit;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Text controls drop native chrome. The select deliberately keeps its platform
   arrow: themes that null a select's appearance substitute their own arrow as
   a background image, which the background we set above would paint over. */
.vakanssi-apply-form .vakanssi-field input[type="text"],
.vakanssi-apply-form .vakanssi-field input[type="email"],
.vakanssi-apply-form .vakanssi-field input[type="tel"],
.vakanssi-apply-form .vakanssi-field input[type="url"],
.vakanssi-apply-form .vakanssi-field textarea {
	-webkit-appearance: none;
	appearance: none;
}

.vakanssi-apply-form .vakanssi-field select {
	appearance: auto;
}

.vakanssi-apply-form .vakanssi-field textarea {
	resize: vertical;
}

.vakanssi-apply-form .vakanssi-field input:focus,
.vakanssi-apply-form .vakanssi-field select:focus,
.vakanssi-apply-form .vakanssi-field textarea:focus {
	outline: 2px solid transparent;
	outline-offset: 1px;
	border-color: #0f766e;
	border-color: var(--vakanssi-accent, #0f766e);
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.22);
	box-shadow: 0 0 0 3px var(--vakanssi-focus-ring, rgba(15, 118, 110, 0.22));
}

.vakanssi-field ::placeholder {
	color: #98a2b0;
	color: var(--vakanssi-faint, #98a2b0);
	opacity: 1;
}

/* File input: same field chrome, with a quiet secondary chooser button. */
.vakanssi-apply-form .vakanssi-field input[type="file"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	inline-size: 100%;
	min-block-size: 0;
	margin: 0;
	box-shadow: none;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	padding: 0.45em 0.5em;
	background: #f6f8fa;
	background: var(--vakanssi-surface-subtle, #f6f8fa);
	border: 1px solid #c9d1da;
	border: 1px solid var(--vakanssi-border-strong, #c9d1da);
	border-radius: 6px;
	border-radius: var(--vakanssi-radius, 6px);
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
	font-family: inherit;
	font-size: 0.875em;
	font-size: var(--vakanssi-text-sm, 0.875em);
}

.vakanssi-apply-form .vakanssi-field input[type="file"]:focus {
	outline: 2px solid transparent;
	outline-offset: 1px;
	border-color: #0f766e;
	border-color: var(--vakanssi-accent, #0f766e);
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.22);
	box-shadow: 0 0 0 3px var(--vakanssi-focus-ring, rgba(15, 118, 110, 0.22));
}

.vakanssi-apply-form .vakanssi-field input[type="file"]::file-selector-button {
	margin-inline-end: 0.75em;
	padding: 0.35em 0.9em;
	background: #ffffff;
	background: var(--vakanssi-surface, #ffffff);
	border: 1px solid #c9d1da;
	border: 1px solid var(--vakanssi-border-strong, #c9d1da);
	border-radius: 4px;
	border-radius: var(--vakanssi-radius-sm, 4px);
	color: #3a4552;
	color: var(--vakanssi-text, #3a4552);
	font-family: inherit;
	font-size: 1em;
	font-weight: 500;
	cursor: pointer;
}

/* Checkboxes and radios keep the platform widget on purpose — `accent-color`
   brands it and it stays legible in forced-colors mode. The work here is only
   undoing what theme resets do to it: several popular themes null the
   appearance and paint a custom box at a fixed em size with its own border and
   background, which on our form reads as a second, mismatched control. */
.vakanssi-apply-form .vakanssi-field input[type="checkbox"],
.vakanssi-apply-form .vakanssi-field input[type="radio"] {
	box-sizing: border-box;
	inline-size: auto;
	block-size: auto;
	min-block-size: 0;
	margin: 0;
	background: none;
	border: 0;
	box-shadow: none;
	appearance: auto;
	accent-color: #0f766e;
	accent-color: var(--vakanssi-accent, #0f766e);
}

/* Consent checkbox row: exactly two flex items — the checkbox and one text
   span — so the privacy-policy link flows inline with the sentence and wraps
   like text (never as its own far-side column). The checkbox centers on the
   FIRST text line whatever font/line-height the host theme brings: 1lh is
   the label's line box (line-height: inherit guards against theme input
   resets like normalize's 1.15); the static 0.25em stays as the fallback
   for browsers without the lh unit. */
.vakanssi-consent label {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
	font-size: 0.875em;
	font-size: var(--vakanssi-text-sm, 0.875em);
	font-weight: 400;
	color: #3a4552;
	color: var(--vakanssi-text, #3a4552);
}

.vakanssi-apply-form .vakanssi-consent input[type="checkbox"] {
	flex: 0 0 auto;
	inline-size: 1em;
	block-size: 1em;
	line-height: inherit;
	margin: 0.25em 0 0;
	margin-block: 0.25em 0;
	margin-inline: 0;
	margin-block-start: calc( ( 1lh - 1em ) / 2 );
}

.vakanssi-consent-text {
	/* Let the span shrink (flex min-size:auto would pin it at the longest
	   word) and break pathological words in narrow theme containers. */
	min-inline-size: 0;
	overflow-wrap: break-word;
}

/* Consent row: a little space above it (so it clears the questions/fields), and
   it sits close to the submit button below — the final acknowledgement before it. */
.vakanssi-consent {
	margin: 1.25rem 0 0;
	margin-block: 1.25rem 0;
	margin-inline: 0;
}

/* Field notes: the eligibility hint under the country select and the optional
   retention disclosure under the submit button. A footnote to the thing above
   it, never a second label: one step smaller, muted, on its own line.
   Theme-proofed like every other candidate rule (specificity 0,2,0 and every
   reset-prone property declared), because a bare span inherits the theme's
   body size and reads as a stray paragraph. */
.vakanssi-apply-form .vakanssi-field-note {
	display: block;
	margin: 0.4em 0 0;
	margin-block: 0.4em 0;
	margin-inline: 0;
	font-size: 0.8125em;
	font-size: var(--vakanssi-text-xs, 0.8125em);
	font-weight: 400;
	line-height: 1.5;
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
}

/* The retention note is fine print beneath the button, the way sign-up and
   checkout forms carry their "by continuing" line: a little more air above it
   than a field note gets, capped at a readable measure so it never runs the
   full width of a wide theme column. Muted (not faint): it is candidate-facing
   text and still has to clear 4.5:1 on white; the size and position are what
   keep it out of the way. */
.vakanssi-apply-form .vakanssi-retention-note {
	margin: 0.75em 0 0;
	margin-block: 0.75em 0;
	margin-inline: 0;
	max-width: 34em;
	max-inline-size: 34em;
}

.vakanssi-submit {
	margin: 1.25rem 0 0;
	margin-block: 1.25rem 0;
	margin-inline: 0;
}

/* Two-column name/contact rows on wider screens; single column elsewhere. */
@supports (display: grid) {
	@media (min-width: 37.5em) {
		.vakanssi-form {
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 1rem;
		}

		.vakanssi-form > * {
			grid-column: 1 / -1;
		}

		.vakanssi-form > .vakanssi-field--half {
			grid-column: auto / span 1;
		}

		.vakanssi-apply-form {
			padding: 2rem;
			padding-block: 2rem;
			padding-inline: 2rem;
		}
	}
}

/* ------------------------------------------------------------------ *
 *  Application sent (replaces the form after a successful submission)
 *  ApplicationForm::sent_panel(). Sits inside the same .vakanssi-apply-form
 *  card, so the page keeps its shape and #vakanssi-apply still lands here.
 * ------------------------------------------------------------------ */

.vakanssi-apply-form .vakanssi-apply-sent {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.9rem;
	align-items: center;
}

/* Focus arrives here from careers.js, never from the keyboard: the panel is not
   a control, so it draws no ring. */
.vakanssi-apply-form .vakanssi-apply-sent:focus {
	outline: none;
}

.vakanssi-apply-sent .vakanssi-apply-sent__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	background: #e7f1f1;
	background: var(--vakanssi-accent-tint, #e7f1f1);
	color: #0c615a;
	color: var(--vakanssi-accent-strong, #0c615a);
}

.vakanssi-apply-sent .vakanssi-apply-sent__icon > svg {
	inline-size: 20px;
	block-size: 20px;
}

/* (0,2,0) to clear `.vakanssi-apply-form h3` (0,1,1), which spaces the form's
   own heading, as well as any theme heading rule. */
.vakanssi-apply-sent .vakanssi-apply-sent__title {
	margin: 0;
	padding: 0;
	font-size: 1.25em;
	line-height: 1.3;
	color: #1e2936;
	color: var(--vakanssi-ink, #1e2936);
}

.vakanssi-apply-sent .vakanssi-apply-sent__lead,
.vakanssi-apply-sent .vakanssi-apply-sent__next,
.vakanssi-apply-sent .vakanssi-apply-sent__steps {
	grid-column: 2;
}

.vakanssi-apply-sent .vakanssi-apply-sent__lead {
	margin: 0.2rem 0 0;
	margin-block: 0.2rem 0;
	padding: 0;
	color: #3a4552;
	color: var(--vakanssi-text, #3a4552);
}

.vakanssi-apply-sent .vakanssi-apply-sent__next {
	margin: 1.25rem 0 0.6rem;
	margin-block: 1.25rem 0.6rem;
	padding: 1.1rem 0 0;
	padding-block: 1.1rem 0;
	border-top: 1px solid #e2e6eb;
	border-block-start: 1px solid var(--vakanssi-border, #e2e6eb);
	font-size: 0.75em;
	font-size: var(--vakanssi-text-2xs, 0.75em);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #5f6b7a;
	color: var(--vakanssi-muted, #5f6b7a);
}

/* A real sequence, so a numbered list, drawn with our own counters: themes
   reset ol padding and list-style in every direction. */
.vakanssi-apply-sent .vakanssi-apply-sent__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: vakanssi-step;
}

/* The number is a grid cell on the item's first baseline, so it lines up with
   the first line of text whatever line height the theme sets. */
.vakanssi-apply-sent .vakanssi-apply-sent__steps > li {
	display: grid;
	grid-template-columns: 1.4rem minmax(0, 1fr);
	column-gap: 0.6rem;
	align-items: baseline;
	margin: 0;
	padding: 0;
	color: #3a4552;
	color: var(--vakanssi-text, #3a4552);
	counter-increment: vakanssi-step;
}

.vakanssi-apply-sent .vakanssi-apply-sent__steps > li + li {
	margin-top: 0.6rem;
	margin-block-start: 0.6rem;
}

.vakanssi-apply-sent .vakanssi-apply-sent__steps > li::before {
	content: counter(vakanssi-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.4rem;
	block-size: 1.4rem;
	border-radius: 50%;
	background: #e7f1f1;
	background: var(--vakanssi-accent-tint, #e7f1f1);
	color: #0c615a;
	color: var(--vakanssi-accent-strong, #0c615a);
	font-size: 0.75em;
	font-size: var(--vakanssi-text-2xs, 0.75em);
	font-weight: 600;
	line-height: 1;
}

/* Narrow screens: the text takes the full card width instead of keeping the
   icon's column as an empty gutter all the way down. */
@media (max-width: 30em) {
	.vakanssi-apply-sent .vakanssi-apply-sent__lead,
	.vakanssi-apply-sent .vakanssi-apply-sent__next,
	.vakanssi-apply-sent .vakanssi-apply-sent__steps {
		grid-column: 1 / -1;
	}

	.vakanssi-apply-sent .vakanssi-apply-sent__lead {
		margin-top: 0.75rem;
		margin-block-start: 0.75rem;
	}
}

/* ------------------------------------------------------------------ *
 *  Notices (post-submission success / error)
 * ------------------------------------------------------------------ */

.vakanssi-apply-result {
	position: fixed;
	z-index: 100000;
	top: 1rem;
	inset-inline: 1rem;
	max-width: 40rem;
	margin-inline: auto;
	box-sizing: border-box;
}

.vakanssi-notice {
	margin: 0 0 1.25rem;
	margin-block: 0 1.25rem;
	margin-inline: 0;
	padding: 0.75rem 1rem;
	padding-block: 0.75rem;
	padding-inline: 1rem;
	border: 1px solid #e2e6eb;
	border: 1px solid var(--vakanssi-border, #e2e6eb);
	border-inline-start-width: 3px;
	border-radius: 6px;
	border-radius: var(--vakanssi-radius, 6px);
	font-size: 0.9375em;
	font-size: var(--vakanssi-text-md, 0.9375em);
	line-height: 1.5;
}

.vakanssi-notice--success {
	background: #f2f8f4;
	background: var(--vakanssi-success-bg, #f2f8f4);
	border-color: #b9dcc6;
	border-color: var(--vakanssi-success-border, #b9dcc6);
	border-inline-start-color: var(--vakanssi-success-text, #1d5a34);
	color: #1d5a34;
	color: var(--vakanssi-success-text, #1d5a34);
}

.vakanssi-notice--error {
	background: #fbf4f4;
	background: var(--vakanssi-danger-bg, #fbf4f4);
	border-color: #e7c6c5;
	border-color: var(--vakanssi-danger-border, #e7c6c5);
	border-inline-start-color: var(--vakanssi-danger-text, #9f3a38);
	color: #9f3a38;
	color: var(--vakanssi-danger-text, #9f3a38);
}

/* ------------------------------------------------------------------ *
 *  Utilities
 * ------------------------------------------------------------------ */

/* Fallback for themes that don't define WordPress's screen-reader class. */
.vakanssi-apply .screen-reader-text,
.vakanssi-apply-form .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Narrow screens: stack detail labels above values. */
@media (max-width: 30em) {
	.vakanssi-job-details .vakanssi-detail {
		display: block;
	}

	.vakanssi-job-details dt {
		margin-bottom: 0.15em;
		margin-block-end: 0.15em;
	}

	.vakanssi-job {
		padding: 0.9rem 0.125rem;
		padding-block: 0.9rem;
		padding-inline: 0.125rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vakanssi-jobs--grid .vakanssi-job,
	.vakanssi-jobs-switch,
	.vakanssi-jobs-switch-thumb,
	.vakanssi-jobs-activefilter .vakanssi-jobs-activefilter-x,
	.vakanssi-apply .vakanssi-apply-button,
	.vakanssi-apply-form .vakanssi-apply-button,
	.vakanssi-apply-form .vakanssi-field input,
	.vakanssi-apply-form .vakanssi-field select,
	.vakanssi-apply-form .vakanssi-field textarea {
		transition: none;
	}
}