/*
Theme Name: Aruba Jobs
Theme URI: https://aruba-jobs.com
Author: Aruba Jobs
Description: Custom theme for Aruba Jobs — presentation layer for the companion Aruba Jobs Core plugin, which owns the job listing, company, and application data model. Homepage/common-page sections are built as Elementor widgets (see the plugin's includes/elementor/widgets/) so they can be reordered visually; this stylesheet is the shared design system both the theme templates and those widgets render into.
Version: 0.14.0
Requires PHP: 7.4
Text Domain: aruba-jobs
*/

:root {
	--aj-brand: #0070FF;
	--aj-brand-dark: #0057c7;
	--aj-brand-light: #eaf2ff;
	/* Amber "needs attention" pair, used by the draft status badge. These
	   were referenced but never defined, so a draft badge rendered with no
	   colour at all until now. */
	--aj-accent: #8a5200;
	--aj-accent-light: #fdf1dd;
	/* Flat, solid values on purpose — no gradients. These two variables keep
	   their names (used in ~10 places) so call sites didn't need touching,
	   but they now resolve to plain colors instead of a blue→violet blend. */
	--aj-gradient-brand: var(--aj-brand);
	--aj-gradient-soft: var(--aj-brand-light);
	--aj-text: #10141c;
	--aj-text-muted: #616b7a;
	--aj-bg: #ffffff;
	--aj-bg-subtle: #f5f7fb;
	--aj-border: #e6e9f0;
	--aj-radius-sm: 8px;
	--aj-radius: 12px;
	--aj-radius-lg: 16px;
	--aj-shadow-sm: 0 1px 2px rgba(16, 20, 28, 0.06);
	--aj-shadow-md: 0 8px 24px rgba(16, 20, 28, 0.08);
	--aj-shadow-lg: 0 20px 48px rgba(16, 20, 28, 0.12);
	--aj-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--aj-section-padding: 88px;
	--aj-content-max: 1440px;
	--aj-motion-slow: 900ms;
	--aj-motion: 220ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--aj-motion-slow: 0ms;
		--aj-motion: 0ms;
	}
}

@media (max-width: 780px) {
	:root {
		--aj-section-padding: 56px;
	}
}

* {
	box-sizing: border-box;
}

/* The header is sticky (see .aj-site-header), so everything else that sticks
 * — sidebars, the resume preview, in-page anchor jumps — offsets itself by
 * the header's height (~87px) plus the WordPress admin bar when shown. */
:root {
	--aj-sticky-top: calc(var(--wp-admin--admin-bar--height, 0px) + 88px);
}

/* clip, not hidden: overflow-x: hidden on html/body turns them into scroll
 * containers, which silently stops position: sticky from working on the
 * header. hidden stays first as the fallback for browsers without clip. */
html {
	height: 100%;
	overflow-x: hidden;
	overflow-x: clip;
	scroll-padding-top: var(--aj-sticky-top);
}

body {
	margin: 0;
	min-height: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
	display: flex;
	flex-direction: column;
	font-family: var(--aj-font);
	color: var(--aj-text);
	background: var(--aj-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body > main {
	flex: 1 0 auto;
}

.aj-site-header,
.aj-site-footer {
	flex-shrink: 0;
}

h1, h2, h3, h4 {
	line-height: 1.2;
	letter-spacing: -0.02em;
}

a {
	color: var(--aj-brand);
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

.aj-container {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------------------------------------------------------------------
 * Scroll-reveal (progressive enhancement — see assets/js/animations.js).
 * Content is visible by default; JS opts elements INTO the hidden start
 * state right before animating them in, so a JS failure or a scriptless
 * request never hides anything. prefers-reduced-motion disables it the
 * same way, at the CSS level, independent of what the JS does.
 * ------------------------------------------------------------------- */

.aj-reveal-init {
	opacity: 0;
	transform: translateY(18px);
}

.aj-reveal-init.aj-reveal-visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--aj-motion-slow) cubic-bezier(0.22, 1, 0.36, 1),
		transform var(--aj-motion-slow) cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	.aj-reveal-init {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Header / Footer (global chrome — theme templates, not Elementor widgets)
 * ------------------------------------------------------------------- */

.aj-site-header {
	background: var(--aj-bg);
	border-bottom: 1px solid var(--aj-border);
	padding: 18px 0;
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* Below 600px WordPress stops pinning its admin bar and lets it scroll away,
 * so the header should stick to the very top there. */
@media (max-width: 600px) {
	.aj-site-header {
		top: 0;
	}

	:root {
		--aj-sticky-top: 88px;
	}
}

.aj-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.aj-mobile-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	flex-shrink: 0;
}

.aj-mobile-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--aj-text);
	border-radius: 2px;
	transition: transform var(--aj-motion) ease, opacity var(--aj-motion) ease;
}

.aj-mobile-toggle[aria-expanded="true"] .aj-mobile-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.aj-mobile-toggle[aria-expanded="true"] .aj-mobile-toggle__bar:nth-child(2) {
	opacity: 0;
}

.aj-mobile-toggle[aria-expanded="true"] .aj-mobile-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.aj-mobile-toggle__bar {
		transition: none;
	}
}

.aj-logo {
	display: flex;
	flex-direction: column;
	font-weight: 800;
	font-size: 21px;
	color: var(--aj-text);
	letter-spacing: -0.02em;
	flex-shrink: 0;
}

.aj-logo:hover {
	color: var(--aj-text);
	text-decoration: none;
}

.aj-logo span {
	color: var(--aj-brand);
}

.aj-logo--custom {
	display: flex;
	align-items: center;
}

.aj-logo--custom img {
	max-height: 48px;
	width: auto;
}

.aj-tagline {
	color: var(--aj-text-muted);
	font-size: 11px;
	font-weight: 500;
	margin-top: 2px;
}

/* On desktop, .aj-site-header__menu just lays the nav and auth links out
 * inline exactly as before — it only becomes a collapsible panel (see the
 * @media block below) once the hamburger button takes over. */
.aj-site-header__menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1 1 auto;
	gap: 32px;
}

.aj-nav {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aj-nav a {
	color: var(--aj-text);
	font-weight: 600;
	font-size: 14px;
}

.aj-nav a:hover {
	color: var(--aj-brand);
}

.aj-header-auth {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.aj-header-auth a:not(.aj-button) {
	color: var(--aj-text);
	font-weight: 600;
	font-size: 14px;
}

.aj-header-auth a:not(.aj-button):hover {
	color: var(--aj-brand);
}

.aj-button--sm {
	padding: 9px 20px;
	font-size: 14px;
}

@media (max-width: 900px) {
	.aj-site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		/* Reset the desktop flex rule's 32px gap — as a grid gap it would
		 * also insert row-gap between this row and the (collapsed) menu
		 * row below, showing up as dead space even while the menu is
		 * closed. */
		gap: 0;
	}

	.aj-mobile-toggle {
		display: flex;
		grid-column: 1;
		justify-self: start;
	}

	.aj-logo {
		grid-column: 2;
		justify-self: center;
	}

	/* The hamburger button balances the grid so the logo lands dead center
	 * even though nothing occupies column 3 — same trick as a lot of
	 * mobile app headers (icon / centered title / empty). */
	.aj-site-header__menu {
		grid-column: 1 / -1;
		grid-row: 2;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		padding-top: 0;
		margin-top: 0;
		border-top: 0 solid var(--aj-border);
		transition: max-height 320ms ease, opacity 220ms ease;
	}

	/* The header is sticky, so an open menu taller than a small phone's screen
	 * would have its bottom cut off; let it scroll inside itself instead. */
	.aj-site-header__menu.is-open {
		max-height: min(600px, calc(100dvh - 110px));
		overflow-y: auto;
		opacity: 1;
		padding-top: 16px;
		margin-top: 16px;
		border-top-width: 1px;
	}

	@media (prefers-reduced-motion: reduce) {
		.aj-site-header__menu {
			transition: none;
		}
	}

	.aj-nav {
		flex-direction: column;
		gap: 4px;
		margin-bottom: 16px;
	}

	.aj-nav a {
		display: block;
		padding: 10px 4px;
	}

	.aj-header-auth {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.aj-header-auth a:not(.aj-button) {
		padding: 8px 4px;
	}

	.aj-header-auth .aj-button {
		justify-content: center;
	}
}

.aj-site-footer {
	background: var(--aj-brand);
	color: rgba(255, 255, 255, 0.7);
	margin-top: 0;
	padding: 0 0 28px;
	font-size: 14px;
}

/* ---------------------------------------------------------------------
 * Footer: live stats bar — logo + real job/company/candidate counts that
 * count up from 0 the first time they scroll into view
 * (assets/js/footer-counters.js). The numbers themselves are rendered
 * server-side by Aruba_Jobs_Render_Helpers::get_site_stats() so they're
 * correct even with no JS; the script only replaces the static number
 * with an animated count-up to that same value.
 * ------------------------------------------------------------------- */

.aj-footer-stats {
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* space-between keeps the logo pinned to the far left and the stat group
   pinned to the far right, with the empty middle absorbing any extra
   width — neither side stretches to fill it, which is what was pulling
   the stats apart from each other before. */
.aj-footer-stats__inner {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
}

.aj-footer-stats__brand {
	display: flex;
	align-items: center;
	padding: 26px 32px 26px 0;
	border-right: 1px solid rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
}

.aj-footer-stats__brand .aj-logo--footer {
	margin: 0;
}

.aj-footer-stats__items {
	display: flex;
	flex: 0 0 auto;
}

.aj-footer-stat {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 26px 24px;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	flex: 0 0 auto;
}

.aj-footer-stat:first-child {
	border-left: 0;
}

.aj-footer-stat__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
	flex-shrink: 0;
}

.aj-footer-stat__icon svg {
	width: 20px;
	height: 20px;
}

.aj-footer-stat__text {
	display: flex;
	flex-direction: column;
}

.aj-footer-stat__number {
	font-size: 24px;
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.aj-footer-stat__label {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 780px) {
	.aj-footer-stats__inner {
		flex-direction: column;
	}

	.aj-footer-stats__items {
		flex-wrap: wrap;
	}

	.aj-footer-stats__brand {
		padding: 22px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	}

	.aj-footer-stat {
		flex: 1 1 100%;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}

	.aj-footer-stat:first-child {
		border-top: 0;
	}
}

.aj-site-footer a {
	color: rgba(255, 255, 255, 0.75);
}

.aj-site-footer a:hover {
	color: #fff;
}

.aj-site-footer h4 {
	color: #fff;
	font-size: 14px;
	margin: 0 0 16px;
}

.aj-site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aj-site-footer li {
	margin-bottom: 10px;
}

/* Each column keeps only the width its own content needs (not stretched
   full-width the way an even-fr grid would) — space-between then spreads
   the four of them across the full row, flush with the left and right
   edges and evenly gapped in between, rather than either stretching wide
   or bunching up on one side. */
.aj-site-footer__columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px 40px;
	padding-top: 40px;
	margin-bottom: 40px;
}

.aj-site-footer__columns > div {
	flex: 0 1 200px;
}

.aj-site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 20px;
	font-size: 12px;
}

.aj-logo--footer {
	color: #fff;
}

/* The uploaded site logo is colored for use on a light header background;
   forced to white here so it reads against the footer's dark band instead
   of rendering muddy or low-contrast. */
.aj-logo--footer.aj-logo--custom img {
	max-height: 40px;
	filter: brightness(0) invert(1);
}

/* Above 560px, flex-wrap already reflows the columns naturally as the
   container narrows — no fixed column-count breakpoint needed the way the
   old grid-template-columns approach required. */

/* Phone width: one full-width stacked group per section (heading, its
   links, generous space, next heading) rather than a cramped 2-up grid —
   matches the reference mobile footer the site owner supplied. */
@media (max-width: 560px) {
	.aj-site-footer__columns {
		flex-direction: column;
		gap: 28px;
	}

	.aj-site-footer__columns > div {
		flex-basis: auto;
	}
}

.aj-site-footer .aj-container > p {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 24px;
	font-size: 13px;
}

.aj-site-footer__newsletter {
	flex: 0 1 240px;
}

.aj-site-footer__newsletter p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	margin: 0 0 12px;
}

.aj-newsletter-form__row {
	display: flex;
	gap: 8px;
}

.aj-newsletter-form__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--aj-radius-sm);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 13px;
}

.aj-newsletter-form__input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.aj-newsletter-form__input:focus {
	outline: none;
	border-color: rgba(255, 255, 255, 0.6);
}

.aj-newsletter-form__notice {
	margin: 10px 0 0;
	font-size: 12px;
	color: #7ee787;
}

.aj-newsletter-form__notice--error {
	color: #ff8383;
}

.aj-site-footer__social {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.aj-site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.aj-site-footer__social-link:hover {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.aj-site-footer__social-link svg {
	width: 16px;
	height: 16px;
}


/* ---------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------- */

.aj-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--aj-brand);
	color: #fff;
	padding: 13px 26px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	border: 0;
	cursor: pointer;
	transition: background-color var(--aj-motion) ease, transform var(--aj-motion) ease, box-shadow var(--aj-motion) ease;
}

.aj-button:hover {
	background: var(--aj-brand-dark);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--aj-shadow-md);
}

.aj-button--outline {
	background: transparent;
	color: var(--aj-text);
	border: 1.5px solid var(--aj-border);
}

.aj-button--outline:hover {
	background: var(--aj-bg-subtle);
	color: var(--aj-text);
	box-shadow: none;
}

.aj-button--dark {
	background: var(--aj-text);
}

.aj-button--dark:hover {
	background: #000;
}

.aj-button[disabled],
.aj-button--pending,
.aj-button--social {
	background: var(--aj-bg-subtle);
	color: var(--aj-text-muted);
	cursor: not-allowed;
}

.aj-button[disabled]:hover,
.aj-button--pending:hover,
.aj-button--social:hover {
	background: var(--aj-bg-subtle);
	text-decoration: none;
	transform: none;
	box-shadow: none;
}

/* ---------------------------------------------------------------------
 * Section scaffolding (shared by every Elementor homepage widget)
 * ------------------------------------------------------------------- */

.aj-section {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: var(--aj-section-padding) 24px;
}

/* The homepage sections already carry the shared vertical spacing above.
 * Elementor's container gap added another 20px strip between every widget,
 * making the rhythm look uneven where section backgrounds changed. Keep the
 * widgets flush and let their own 88px/56px padding define the spacing. */
body.home.wp-singular .elementor > .e-con {
	--row-gap: 0px;
	row-gap: 0;
}

/* The homepage Blog widget had a one-off 60px Elementor padding while every
 * other content section uses --aj-section-padding. Its internal header,
 * filters and grid already own the standard 24px horizontal gutter. */
body.home.wp-singular .elementor-widget-aj-blog-grid > .elementor-widget-container {
	padding: var(--aj-section-padding) 0;
}

/* Company-owned benefit categories. One restrained list is shared by company
   and job pages; jobs inherit it and store only the categories switched off. */
.aj-benefits {
	margin: 40px 0 32px;
}

.aj-benefits > h2 {
	margin: 0 0 18px;
}

.aj-benefits__list {
	list-style: none;
	margin: 0;
	padding: 2px 20px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg-subtle);
}

.aj-benefits__item {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 16px 0;
}

.aj-benefits__item + .aj-benefits__item {
	border-top: 1px solid var(--aj-border);
}

.aj-benefits__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--aj-brand-light);
	color: var(--aj-brand-dark);
}

.aj-benefits__icon svg {
	width: 20px;
	height: 20px;
}

.aj-benefits__item strong,
.aj-benefits__item small {
	display: block;
}

.aj-benefits__item strong {
	margin-bottom: 3px;
	font-size: 15px;
}

.aj-benefits__item small {
	color: var(--aj-text-muted);
	font-size: 13px;
	line-height: 1.5;
}

.aj-benefits__variations {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.aj-benefits__variations > span {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 4px 9px;
	border: 1px solid #cfe0f8;
	border-radius: 999px;
	background: #fff;
	color: var(--aj-brand-dark);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

.aj-benefit-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.aj-benefit-group {
	min-width: 0;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: #fff;
	overflow: hidden;
}

.aj-benefit-choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.aj-benefit-choice--parent,
.aj-benefit-group__heading {
	display: flex;
	padding: 14px;
}

.aj-benefit-choice--parent {
	background: #fff;
}

.aj-benefit-group__heading {
	background: #fff;
}

.aj-benefit-choice input {
	margin-top: 3px;
}

.aj-benefit-choice strong,
.aj-benefit-choice small {
	display: block;
}

.aj-benefit-choice small {
	margin-top: 3px;
	color: var(--aj-text-muted);
	font-size: 12px;
	line-height: 1.4;
}

.aj-benefit-variations {
	display: grid;
	gap: 0;
	padding: 10px 14px 12px 40px;
	border-top: 1px solid var(--aj-border);
	background: var(--aj-bg-subtle);
}

.aj-benefit-variations__label {
	margin-bottom: 4px;
	color: var(--aj-text-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.aj-benefit-choice--variation {
	padding: 7px 0;
}

.aj-benefit-choice--variation + .aj-benefit-choice--variation {
	border-top: 1px solid var(--aj-border);
}

@media (max-width: 640px) {
	.aj-benefit-choices {
		grid-template-columns: 1fr;
	}

	.aj-benefits__list {
		padding-inline: 18px;
	}

	.aj-benefit-variations {
		padding-left: 36px;
	}
}

.aj-section--muted {
	max-width: none;
	background: var(--aj-bg-subtle);
}

.aj-section--muted > * {
	max-width: var(--aj-content-max);
	margin-left: auto;
	margin-right: auto;
}

.aj-section__header {
	max-width: 640px;
	margin: 0 0 40px;
}

.aj-section--muted .aj-section__header {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.aj-section__heading {
	font-size: 32px;
	font-weight: 800;
	margin: 0 0 10px;
}

.aj-section__subheading {
	color: var(--aj-text-muted);
	font-size: 16px;
	margin: 0;
}

.aj-section__footer {
	text-align: center;
	margin-top: 40px;
}

.aj-section--narrow {
	max-width: 760px;
}

.aj-empty-state {
	color: var(--aj-text-muted);
	background: var(--aj-bg-subtle);
	border-radius: var(--aj-radius);
	padding: 32px;
	text-align: center;
}

/* Shared "please log in / wrong role / not found / no permission" screen —
 * see Aruba_Jobs_Render_Helpers::message_screen(). Replaces what used to be
 * a bare, unstyled <p> returned by every gated shortcode (Candidates, Post
 * a Job, Dashboard, Pipeline, etc.). */
.aj-message-screen {
	max-width: 420px;
	margin: 48px auto;
	padding: 40px 32px;
	background: var(--aj-bg-subtle);
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	text-align: center;
}

.aj-message-screen__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--aj-brand-light);
	color: var(--aj-brand);
}

.aj-message-screen__icon svg {
	width: 26px;
	height: 26px;
}

.aj-message-screen__heading {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	color: var(--aj-text);
}

.aj-message-screen__text {
	margin: 0;
	color: var(--aj-text-muted);
	font-size: 15px;
	line-height: 1.5;
}

.aj-message-screen__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 24px 0 0;
}

.aj-message-screen__cta {
	display: inline-flex;
}

.aj-ad-banner {
	position: relative;
	margin: 0 0 24px;
	text-align: center;
}

.aj-ad-banner img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: var(--aj-radius);
}

/* Homepage banner — rendered by the "AJ: Ad Banner" Elementor widget (or,
 * without that widget, appended under the hero; see class-banners.php).
 * Constrained and centred so a leaderboard image doesn't stretch edge to
 * edge. The widget's Max Width control overrides the width. */
.aj-ad-banner--homepage {
	width: min(760px, 100% - 48px);
	margin: 32px auto 40px;
	border-radius: var(--aj-radius);
	overflow: hidden;
}

/* As its own Elementor widget the banner sits after the container's 20px
 * widget gap, so trim the top margin to keep the same 32px under the hero
 * it had when it was appended inside the hero widget. */
.elementor-widget-aj-ad-banner .aj-ad-banner--homepage {
	margin-top: 12px;
}

/* Editor-only placeholder for an Ad Banner widget with no active banner. */
.aj-ad-banner-placeholder {
	width: min(760px, 100% - 48px);
	margin: 32px auto 40px;
	padding: 28px 20px;
	border: 2px dashed var(--aj-border);
	border-radius: var(--aj-radius);
	color: var(--aj-text-muted);
	font-size: 14px;
	text-align: center;
}

.aj-ad-banner__label {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
	background: rgba(16, 20, 28, 0.6);
	border-radius: var(--aj-radius-sm);
	padding: 2px 8px;
}

/* ---------------------------------------------------------------------
 * Hero + search
 * ------------------------------------------------------------------- */

.aj-hero {
	background: var(--aj-bg-subtle);
	padding: 88px 24px;
	text-align: center;
	color: var(--aj-text);
}

.aj-hero--dark {
	background: #10141c;
	color: #fff;
}

.aj-hero--blue {
	background: var(--aj-brand);
	color: #fff;
}

.aj-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.aj-hero__heading {
	font-size: 44px;
	font-weight: 800;
	margin: 0 0 16px;
}

.aj-hero__subheading {
	font-size: 18px;
	opacity: 0.9;
	margin: 0 0 40px;
}

.aj-hero__typewriter-cursor {
	display: inline-block;
	margin-left: 1px;
}

@media (prefers-reduced-motion: no-preference) {
	.aj-hero__typewriter-cursor {
		animation: aj-cursor-blink 1s step-end infinite;
	}
}

@keyframes aj-cursor-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.aj-hero__heading,
	.aj-hero__subheading,
	.aj-search-form,
	.aj-search-form-classic {
		animation: aj-hero-fade-up 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.aj-hero__subheading {
		animation-delay: 90ms;
	}

	.aj-search-form,
	.aj-search-form-classic {
		animation-delay: 180ms;
	}
}

@keyframes aj-hero-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.aj-search-form {
	background: #fff;
	border-radius: var(--aj-radius-lg);
	box-shadow: var(--aj-shadow-lg);
	padding: 10px;
	display: flex;
	gap: 8px;
	max-width: 680px;
	margin: -64px auto 0;
	position: relative;
}

.aj-search-form__input,
.aj-search-form__select {
	border: 0;
	background: transparent;
	font-size: 15px;
	font-family: inherit;
	color: var(--aj-text);
	padding: 12px 16px;
}

.aj-search-form__input {
	flex: 1 1 auto;
	min-width: 0;
}

.aj-search-form__input + .aj-search-form__input {
	border-left: 1px solid var(--aj-border);
}

.aj-search-form__select {
	border-left: 1px solid var(--aj-border);
	max-width: 220px;
}

.aj-search-form__submit {
	background: var(--aj-brand);
	color: #fff;
	border: 0;
	border-radius: var(--aj-radius);
	padding: 12px 28px;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	flex-shrink: 0;
}

.aj-search-form__submit:hover {
	background: var(--aj-brand-dark);
}

.aj-search-form-classic {
	max-width: 680px;
	margin: 0 auto;
	text-align: left;
}

.aj-search-form-classic__tabs {
	display: flex;
	gap: 16px;
	padding: 0 10px;
}

.aj-search-form-classic__tab {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: var(--aj-radius-sm) var(--aj-radius-sm) 0 0;
}

.aj-search-form-classic__tab:first-child {
	flex: 1 1 auto;
}

.aj-search-form-classic__tab:last-child {
	flex: 0 0 220px;
}

.aj-search-form-classic .aj-search-form {
	margin: 0;
	max-width: none;
}

/*
 * The -64px pull above is for the home page, where the search card is a
 * sibling that floats up over the bottom edge of the hero band. When the
 * search sits *inside* the hero (the Browse Jobs / Companies heroes, right
 * after the subheading), that same pull dragged the card up over the
 * subheading and hid it. Reset it there.
 */
.aj-hero__inner > .aj-search-form,
.aj-hero__inner > .aj-search-form-classic > .aj-search-form {
	margin-top: 0;
}

.aj-hero__refine-link {
	display: inline-block;
	margin-top: 16px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
}

.aj-hero__refine-link:hover {
	color: #fff;
}

@media (max-width: 640px) {
	.aj-hero__heading {
		font-size: 32px;
	}

	.aj-search-form {
		flex-direction: column;
		margin-top: -32px;
	}

	.aj-search-form__select,
	.aj-search-form__input + .aj-search-form__input {
		border-left: 0;
		border-top: 1px solid var(--aj-border);
	}

	/* Stacked here, so the category filter has to drop the 220px cap it
	   carries for the desktop row — otherwise it (and its divider line)
	   stop short of the card edge. */
	.aj-search-form__select {
		max-width: none;
		width: 100%;
	}

	/* Side by side the two tabs label the two fields; stacked they just
	   repeat the placeholders below them, and the card’s -32px pull covered
	   the second one. Drop the strip (and the pull) at this width. */
	.aj-search-form-classic__tabs {
		display: none;
	}

	.aj-search-form-classic .aj-search-form {
		margin-top: 0;
	}
}

/* ---------------------------------------------------------------------
 * Homepage hero — search panel + an animated "browse a job, apply, hear
 * back" illustration cycling through the site's own real job titles (see
 * assets/js/job-demo.js). Flat light-blue panel, no gradients, no stock
 * photography — the illustration is built from the same job-card language
 * used elsewhere on the site.
 * ------------------------------------------------------------------- */

.aj-hero-showcase {
	padding: 64px 24px;
	background: var(--aj-bg);
}

.aj-hero-showcase__inner {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: stretch;
}

.aj-hero-showcase__panel--left {
	background: var(--aj-bg-subtle);
	border-radius: var(--aj-radius-lg);
	padding: 56px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.aj-hero-showcase__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aj-brand);
	margin: 0 0 20px;
}

.aj-hero-showcase__eyebrow::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--aj-brand);
}

.aj-hero-showcase__heading {
	font-size: 50px;
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 20px;
}

.aj-hero-showcase__subheading {
	font-size: 17px;
	color: var(--aj-text-muted);
	margin: 0 0 32px;
	max-width: 460px;
}

.aj-hero-showcase__panel--left .aj-search-form {
	margin: 0;
	max-width: 100%;
}

.aj-hero-showcase__popular {
	margin: 20px 0 0;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-hero-showcase__popular a {
	color: var(--aj-brand);
	font-weight: 600;
}

.aj-hero-showcase__panel--right {
	position: relative;
	display: flex;
}

.aj-hero-showcase__blob {
	position: relative;
	width: 100%;
	min-height: 440px;
	background: var(--aj-brand-light);
	border-radius: var(--aj-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	overflow: visible;
}

.aj-job-demo {
	position: relative;
	width: 100%;
	max-width: 300px;
}

.aj-job-demo__card,
.aj-job-demo__toast {
	background: var(--aj-bg);
	border-radius: var(--aj-radius);
	box-shadow: var(--aj-shadow-lg);
	padding: 28px;
	opacity: 0;
	transform: translateY(14px) scale(0.97);
	transition: opacity 400ms ease, transform 400ms ease;
}

.aj-job-demo__card.is-visible,
.aj-job-demo__toast.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.aj-job-demo__title {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 4px;
}

.aj-job-demo__company {
	color: var(--aj-text-muted);
	font-size: 14px;
	margin: 0 0 20px;
}

.aj-job-demo__apply {
	display: block;
	text-align: center;
	background: var(--aj-brand);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 11px;
	border-radius: 999px;
	transition: transform 150ms ease;
}

.aj-job-demo__apply.is-pressed {
	transform: scale(0.94);
}

.aj-job-demo__toast {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 6px;
}

.aj-job-demo__toast-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--aj-brand-light);
	color: var(--aj-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
}

.aj-job-demo__toast-icon svg {
	width: 24px;
	height: 24px;
}

.aj-job-demo__toast-title {
	font-weight: 700;
	font-size: 15px;
}

.aj-job-demo__toast-text {
	color: var(--aj-text-muted);
	font-size: 13px;
}

.aj-hero-showcase__badge {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--aj-bg);
	border-radius: var(--aj-radius);
	box-shadow: var(--aj-shadow-md);
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--aj-text);
	white-space: nowrap;
}

.aj-hero-showcase__badge span {
	display: block;
	font-weight: 500;
	color: var(--aj-text-muted);
	font-size: 11px;
}

.aj-hero-showcase__badge--jobs {
	top: 28px;
	left: -16px;
}

.aj-hero-showcase__badge--companies {
	bottom: 28px;
	right: -16px;
}

@media (max-width: 960px) {
	.aj-hero-showcase__inner {
		grid-template-columns: 1fr;
	}

	.aj-hero-showcase__panel--left {
		padding: 40px 28px;
		text-align: center;
	}

	.aj-hero-showcase__eyebrow {
		justify-content: center;
	}

	.aj-hero-showcase__heading {
		font-size: 36px;
	}

	.aj-hero-showcase__subheading {
		margin-left: auto;
		margin-right: auto;
	}

	.aj-hero-showcase__blob {
		min-height: 340px;
		margin-top: 16px;
	}

	.aj-hero-showcase__badge {
		display: none;
	}
}


/* ---------------------------------------------------------------------
 * Intro / how-it-works section (AJ: Intro + How It Works widget)
 * Photo or live-stats brand panel on one side; headline, numbered step
 * timeline and CTA on the other.
 * ------------------------------------------------------------------- */

.aj-intro {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: var(--aj-section-padding) 24px;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 72px;
	align-items: center;
}

.aj-intro--no-media {
	grid-template-columns: minmax(0, 1fr);
	max-width: 820px;
}

/* Media column ------------------------------------------------------ */

.aj-intro__media {
	position: relative;
	align-self: stretch;
	min-height: 460px;
}

.aj-intro--has-image {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Photo variant: the frame fills the text column's height so the two
   columns balance. That crops a landscape photo to a portrait slice, so the
   widget's "Image focus" control sets object-position to keep the subject
   in frame. */
.aj-intro__media--image {
	align-self: stretch;
	min-height: 0;
	padding: 0 22px 22px 0;
}

/* Offset brand-tint card behind the photo, so a white-background photo
   still has a visible edge against the white page. */
.aj-intro__media--image::before {
	content: "";
	position: absolute;
	inset: 22px 0 0 22px;
	border-radius: var(--aj-radius-lg);
	background: var(--aj-brand-light);
}

.aj-intro__frame {
	position: relative;
	height: 100%;
	min-height: 420px;
	overflow: hidden;
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg-subtle);
	box-shadow: var(--aj-shadow-md);
}

/* Two classes on purpose: Elementor's ".elementor img" rule (height:auto,
   border-radius:0, box-shadow:none) loads after the theme and would
   otherwise win at equal specificity. */
.aj-intro .aj-intro__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
	box-shadow: none;
}

.aj-intro__media--panel {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 28px;
	padding: 44px;
	border-radius: var(--aj-radius-lg);
	background: var(--aj-brand);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

/* Soft concentric rings — echoes the timeline markers without an image. */
.aj-intro__media--panel::before,
.aj-intro__media--panel::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.16);
	pointer-events: none;
}

.aj-intro__media--panel::before {
	width: 420px;
	height: 420px;
	top: -170px;
	right: -150px;
}

.aj-intro__media--panel::after {
	width: 260px;
	height: 260px;
	top: -90px;
	right: -70px;
	border-color: rgba(255, 255, 255, 0.24);
}

.aj-intro__panel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: auto;
	border-radius: var(--aj-radius);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.aj-intro__panel-icon svg {
	width: 28px;
	height: 28px;
}

.aj-intro__panel-title {
	max-width: 280px;
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
}

.aj-intro__stats {
	display: flex;
	margin: 0;
}

.aj-intro__stat {
	display: flex;
	flex-direction: column-reverse;
}

.aj-intro__stat-number {
	margin: 0;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.aj-intro__stat-label {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
}

.aj-intro__stats--panel {
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	padding-top: 24px;
}

.aj-intro__stats--panel .aj-intro__stat {
	flex: 1;
}

.aj-intro__stats--panel .aj-intro__stat + .aj-intro__stat {
	padding-left: 24px;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.aj-intro__stats--panel .aj-intro__stat-number {
	font-size: 44px;
}

.aj-intro__stats--panel .aj-intro__stat-label {
	color: rgba(255, 255, 255, 0.82);
}

/* Sits high, where photos tend to have background, overhanging the frame's
   edge so it reads as attached rather than covering the subject. */
.aj-intro__stats--floating {
	position: absolute;
	z-index: 1;
	top: 40px;
	left: -14px;
	gap: 22px;
	padding: 16px 22px;
	border-radius: var(--aj-radius);
	background: #fff;
	box-shadow: var(--aj-shadow-lg);
}

.aj-intro__stats--floating .aj-intro__stat-number {
	color: var(--aj-brand);
}

.aj-intro__stats--floating .aj-intro__stat-label {
	color: var(--aj-text-muted);
}

/* Content column ---------------------------------------------------- */

.aj-intro__eyebrow {
	margin: 0 0 14px;
	color: var(--aj-brand);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.aj-intro__heading {
	margin: 0 0 18px;
	font-size: 42px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.aj-intro__highlight {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	color: var(--aj-brand);
	padding-bottom: 6px;
}

.aj-intro__underline {
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 12px;
	overflow: visible;
}

.aj-intro__underline path {
	stroke-dasharray: 310;
	stroke-dashoffset: 0;
}

/* animations.js opts the existing SVG into a draw-on-scroll effect. Keep the
   swoosh fully visible when JavaScript is unavailable. */
.aj-intro__underline.aj-reveal-init {
	opacity: 1;
	transform: none;
}

.aj-intro__underline.aj-reveal-init path {
	stroke-dashoffset: 310;
}

.aj-intro__underline.aj-reveal-visible path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aj-intro__description {
	max-width: 560px;
	margin: 0 0 32px;
	color: var(--aj-text-muted);
	font-size: 17px;
	line-height: 1.65;
}

/* Numbered step timeline */
.aj-intro__steps {
	position: relative;
	list-style: none;
	margin: 0 0 36px;
	padding: 0 0 0 48px;
}

.aj-intro__steps::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 20px;
	bottom: 20px;
	width: 2px;
	border-radius: 2px;
	background: var(--aj-brand-light);
	background: color-mix(in srgb, var(--aj-brand) 28%, transparent);
}

.aj-intro__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 20px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg-subtle);
	transition: border-color var(--aj-motion) ease, box-shadow var(--aj-motion) ease, background-color var(--aj-motion) ease;
}

.aj-intro__step + .aj-intro__step {
	margin-top: 12px;
}

.aj-intro__step:hover {
	border-color: color-mix(in srgb, var(--aj-brand) 35%, var(--aj-border));
	background: #fff;
	box-shadow: var(--aj-shadow-sm);
}

.aj-intro__step-number {
	position: absolute;
	left: -48px;
	top: 18px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--aj-brand);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 0 0 4px var(--aj-bg);
}

.aj-intro__step-body {
	min-width: 0;
}

.aj-intro__step-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.aj-intro__step-description {
	margin: 0;
	color: var(--aj-text-muted);
	font-size: 14px;
	line-height: 1.55;
}

/* CTA row */
.aj-intro__actions {
	display: flex;
	align-items: center;
	gap: 14px 22px;
	flex-wrap: wrap;
}

.aj-intro__button {
	padding: 7px 7px 7px 24px;
	gap: 14px;
}

.aj-intro__button-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	color: var(--aj-brand);
	transition: transform var(--aj-motion) ease;
}

.aj-intro__button-arrow svg {
	width: 18px;
	height: 18px;
}

.aj-intro__button:hover .aj-intro__button-arrow {
	transform: translateX(3px);
}

.aj-intro__note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--aj-text);
	font-size: 14px;
	font-weight: 600;
}

.aj-intro__note-icon {
	display: inline-flex;
	color: var(--aj-brand);
}

.aj-intro__note-icon svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 1100px) {
	.aj-intro {
		gap: 48px;
	}

	.aj-intro__heading {
		font-size: 36px;
	}
}

@media (max-width: 900px) {
	.aj-intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.aj-intro__media {
		min-height: 300px;
	}

	.aj-intro__media.aj-intro__media--image {
		min-height: 0;
		margin-bottom: 12px;
	}

	.aj-intro__frame {
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.aj-intro__stats--floating {
		left: -10px;
		top: 24px;
	}

	.aj-intro__media--panel {
		min-height: 0;
		padding: 32px;
	}

	.aj-intro__panel-icon {
		margin-bottom: 8px;
	}
}

@media (max-width: 560px) {
	.aj-intro__heading {
		font-size: 30px;
	}

	.aj-intro__highlight {
		padding-bottom: 6px;
	}

	.aj-intro__description {
		font-size: 16px;
	}

	.aj-intro__steps {
		padding-left: 42px;
	}

	.aj-intro__steps::before {
		left: 13px;
	}

	.aj-intro__step {
		padding: 14px 16px;
	}

	.aj-intro__step-number {
		left: -42px;
		width: 28px;
		height: 28px;
		font-size: 13px;
	}

	.aj-intro__stats--panel .aj-intro__stat-number {
		font-size: 36px;
	}

	.aj-intro__media--image {
		padding: 0 14px 14px 0;
	}

	.aj-intro__media--image::before {
		inset: 14px 0 0 14px;
	}

	/* At phone width the card would cover over half the photo wherever it
	   sits, so it stops floating and sits under the photo instead. */
	.aj-intro__media.aj-intro__media--image {
		margin-bottom: 0;
	}

	.aj-intro__stats--floating {
		position: relative;
		inset: auto;
		margin-top: 12px;
		justify-content: space-around;
		box-shadow: var(--aj-shadow-sm);
		border: 1px solid var(--aj-border);
		gap: 16px;
		padding: 10px 14px;
	}

	.aj-intro__stats--floating .aj-intro__stat-number {
		font-size: 22px;
	}

	.aj-intro__stats--floating .aj-intro__stat-label {
		font-size: 12px;
	}
}

/* ---------------------------------------------------------------------
 * Popular categories
 * ------------------------------------------------------------------- */

.aj-categories-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.aj-category-card {
	display: block;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	padding: 24px;
	transition: transform var(--aj-motion) ease, box-shadow var(--aj-motion) ease, border-color var(--aj-motion) ease;
}

.aj-category-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--aj-shadow-md);
	border-color: transparent;
	text-decoration: none;
}

/* A category card can sit on its own photo (set per Job Category in
   wp-admin). Same box, same layout — only the background changes; the photo
   and the veil over it come from the card's inline --aj-card-image /
   --aj-card-overlay.

   Default is a LIGHT veil, which keeps the card's normal colours (blue name,
   light-blue number chip, grey count) legible over the photo. The dark
   variant is opt-in and flips that text to white. */
.aj-category-card--image {
	position: relative;
	z-index: 0;
	overflow: hidden;
	/* The base card has a 1px border (invisible here — --image-dark sets
	   its colour to transparent, and --image-light never had one to see).
	   But inset: 0 on an absolutely positioned ::before lines up with the
	   PADDING edge, one pixel inside that border, and overflow: hidden
	   clips there too — so a 1px ring of the raw, un-veiled photo was
	   showing right at the edge of every card, all the way round. No
	   border at all closes that gap: nothing was drawn by it anyway. */
	border-width: 0;
	background-image: var(--aj-card-image);
	background-size: cover;
	background-position: center;
}

.aj-category-card--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transition: background-color var(--aj-motion) ease;
}

.aj-category-card--image-light::before {
	background: rgba(255, 255, 255, var(--aj-card-overlay, 0.55));
}

.aj-category-card--image-light:hover::before {
	background: rgba(255, 255, 255, calc(var(--aj-card-overlay, 0.55) + 0.08));
}

/* Dark variant: the card's own palette can't survive on a dark photo, so the
   text goes white here. */
.aj-category-card--image-dark {
	border-color: transparent;
	color: #fff;
}

.aj-category-card--image-dark::before {
	background: rgba(9, 12, 18, var(--aj-card-overlay, 0.55));
}

.aj-category-card--image-dark:hover::before {
	background: rgba(9, 12, 18, calc(var(--aj-card-overlay, 0.55) + 0.08));
}

/* A tight dark shadow plus a soft ambient one, rather than depending on
   the veil alone: the default overlay strength above was turned down (it
   read as a flat grey film sitting over the photo, not a polish), and
   text-shadow keeps legibility over any part of the photo — the palm
   trees, the sky, the pool — regardless. */
.aj-category-card--image-dark .aj-category-card__name {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 14px rgba(0, 0, 0, 0.4);
}

.aj-category-card--image-dark .aj-category-card__count {
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 14px rgba(0, 0, 0, 0.4);
}

.aj-category-card__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--aj-radius-sm);
	background: var(--aj-gradient-soft);
	font-size: 12px;
	font-weight: 700;
	color: var(--aj-brand);
	margin-bottom: 12px;
}

.aj-category-card__name {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 6px;
}

.aj-category-card__count {
	color: var(--aj-text-muted);
	font-size: 13px;
}

@media (max-width: 980px) {
	.aj-categories-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.aj-categories-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Job listings (grid + cards) — shared by the plain Browse Jobs grid and
 * the homepage Job Section widget.
 * ------------------------------------------------------------------- */

.aj-job-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aj-job-list--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.aj-job-list--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.aj-job-list--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 780px) {
	.aj-job-list--cols-2,
	.aj-job-list--cols-3,
	.aj-job-list--cols-4 {
		grid-template-columns: 1fr;
	}
}

.aj-job-card {
	position: relative;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	padding: 24px;
	background: var(--aj-bg);
	transition: transform var(--aj-motion) ease, box-shadow var(--aj-motion) ease, border-color var(--aj-motion) ease;
}

.aj-job-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--aj-shadow-md);
	border-color: transparent;
}

.aj-job-card__badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--aj-brand);
	background: var(--aj-brand-light);
	border-radius: var(--aj-radius-sm);
	padding: 4px 10px;
	margin-bottom: 12px;
}

.aj-job-card__title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
}

.aj-job-card__title a {
	color: var(--aj-text);
}

.aj-job-card__meta {
	color: var(--aj-text-muted);
	font-size: 14px;
	margin: 0 0 14px;
}

.aj-job-card__completion {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--aj-brand);
	background: var(--aj-bg-subtle);
	border-radius: var(--aj-radius-sm);
	padding: 3px 12px;
}

.aj-job-card__top {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 14px;
}

.aj-job-card__logo {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: var(--aj-radius-sm);
	overflow: hidden;
	background: var(--aj-brand-light);
	display: flex;
	align-items: center;
	justify-content: center;
}

.aj-job-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aj-job-card__logo-fallback {
	font-size: 20px;
	font-weight: 700;
	color: var(--aj-brand);
}

.aj-job-card__heading {
	flex: 1 1 auto;
	min-width: 0;
}

.aj-job-card__heading .aj-job-card__title {
	margin: 0 0 4px;
}

.aj-job-card__heading .aj-job-card__meta {
	margin: 0;
}

.aj-job-card__save {
	flex-shrink: 0;
	color: var(--aj-text-muted);
	font-size: 18px;
	line-height: 1;
}

/* When a logged-in Jobseeker sees the toggle instead of the decorative
   span (class-saved-jobs.php), it becomes a real link — still sized and
   positioned identically so the card layout never shifts between the two
   states. */
a.aj-job-card__save {
	cursor: pointer;
	text-decoration: none;
	transition: color var(--aj-motion) ease, transform var(--aj-motion) ease;
}

a.aj-job-card__save:hover {
	transform: scale(1.15);
}

a.aj-job-card__save.is-saved {
	color: var(--aj-brand);
}

.aj-job-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

.aj-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	border-radius: var(--aj-radius-sm);
	padding: 4px 12px;
}

.aj-tag--experience {
	color: var(--aj-brand);
	background: var(--aj-brand-light);
}

.aj-tag--type {
	color: var(--aj-text-muted);
	background: var(--aj-bg-subtle);
}

.aj-job-card__excerpt {
	color: var(--aj-text-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 16px;
}

.aj-job-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 14px;
	border-top: 1px solid var(--aj-border);
}

.aj-job-card__salary {
	font-weight: 700;
	color: var(--aj-text);
}

.aj-job-card__salary span {
	font-weight: 500;
	color: var(--aj-text-muted);
	font-size: 13px;
}

/* No salary given: say so, quietly (2026-10-04). */
.aj-job-card__salary--none {
	font-size: 13px;
	font-weight: 500;
	color: var(--aj-text-muted);
}

.aj-job-card__posted {
	color: var(--aj-text-muted);
	font-size: 13px;
}

/* ---------------------------------------------------------------------
 * Single Job listing
 * ------------------------------------------------------------------- */

.aj-job-single {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: var(--aj-section-padding) 24px;
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 48px;
	align-items: start;
}

.aj-job-single__main {
	min-width: 0;
}

.aj-job-single__header {
	margin-bottom: 32px;
}

.aj-job-single__title {
	font-size: 42px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}

.aj-job-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	color: var(--aj-text-muted);
	font-size: 14px;
	margin: 0 0 18px;
}

.aj-job-single__meta .aj-job-single__company {
	font-weight: 700;
	color: var(--aj-brand);
}

.aj-job-single__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.aj-job-single__meta svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.aj-job-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Not CSS Grid: with an auto-fit column grid, a last row with fewer items
 * than the row above still reserves every column track, so an odd item
 * out (5 items fit a row, the 6th wraps alone) sits in the first column
 * with a large stretch of empty grid to its right. Flexbox doesn't
 * reserve tracks per row, so a wrapped item just sits at its own size
 * with nothing forcing the row to look "unfinished". */
.aj-overview {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 28px 20px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	box-shadow: var(--aj-shadow-sm);
	padding: 36px;
	margin-bottom: 40px;
}

.aj-overview__item {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 1 160px;
	min-width: 160px;
}

/* The text column next to the icon is a flex item with no width of its
 * own — by default a flex item won't shrink below its content's natural
 * width, so an unbroken string (a URL with no spaces, here) just overflows
 * the card instead of wrapping. min-width: 0 lets it shrink to the flex
 * container's actual width; overflow-wrap below then wraps the text that
 * no longer fits on one line. */
.aj-overview__item > div:not(.aj-overview__icon) {
	min-width: 0;
}

.aj-overview__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--aj-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
}

.aj-overview__icon svg {
	width: 22px;
	height: 22px;
}

.aj-overview__label {
	display: block;
	color: var(--aj-text-muted);
	font-size: 13px;
	margin-bottom: 4px;
}

.aj-overview__value {
	display: block;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.aj-job-single__content {
	font-size: 15px;
	line-height: 1.75;
	color: var(--aj-text);
	margin-bottom: 40px;
}

.aj-job-single__content h2,
.aj-job-single__content h3,
.aj-job-single__content h4 {
	font-size: 19px;
	font-weight: 800;
	margin: 32px 0 14px;
}

.aj-job-single__content h2:first-child,
.aj-job-single__content h3:first-child {
	margin-top: 0;
}

.aj-job-single__content p {
	margin: 0 0 16px;
}

.aj-job-single__content ul,
.aj-job-single__content ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.aj-job-single__content li {
	margin-bottom: 8px;
}

.aj-job-single__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 0;
	border-top: 1px solid var(--aj-border);
	margin-bottom: 48px;
}

.aj-job-single__actions-primary {
	display: flex;
	align-items: center;
	gap: 12px;
}

.aj-share-links {
	display: flex;
	align-items: center;
	gap: 8px;
}

.aj-share-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	color: var(--aj-text-muted);
	transition: color var(--aj-motion) ease, border-color var(--aj-motion) ease;
}

.aj-share-links a:hover {
	color: var(--aj-brand);
	border-color: var(--aj-brand);
}

.aj-share-links svg {
	width: 16px;
	height: 16px;
}

.aj-related-jobs h2 {
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 20px;
}

.aj-job-sidebar {
	position: sticky;
	top: calc(var(--aj-sticky-top) + 24px);
}

.aj-sidebar-card {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	box-shadow: var(--aj-shadow-sm);
	padding: 28px;
	margin-bottom: 24px;
}

.aj-sidebar-card h3 {
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--aj-text-muted);
	margin: 0 0 16px;
}

.aj-sidebar-company {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.aj-sidebar-company__logo {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--aj-radius-sm);
	overflow: hidden;
	background: var(--aj-gradient-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	color: var(--aj-brand);
}

.aj-sidebar-company__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aj-sidebar-company__name {
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 2px;
}

.aj-sidebar-company__link {
	font-size: 13px;
}

/* Company contact chips (website, email, socials) — one component for the
 * job page header and the company profile sidebar. */
.aj-contact-links {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.aj-contact-links li {
	margin: 0;
	min-width: 0;
}

.aj-contact-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 30px;
	padding: 4px 8px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg);
	color: var(--aj-text-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--aj-motion) ease, border-color var(--aj-motion) ease, background-color var(--aj-motion) ease;
}

.aj-contact-link:hover,
.aj-contact-link:focus-visible {
	color: var(--aj-brand);
	border-color: var(--aj-brand);
	background: var(--aj-brand-light);
}

.aj-contact-link svg {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
}

.aj-contact-links--hero {
	margin-top: 14px;
}

.aj-sidebar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}

.aj-sidebar-actions .aj-button {
	flex: 1 1 auto;
}

.aj-sidebar-save {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	color: var(--aj-text-muted);
}

.aj-sidebar-team {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.aj-sidebar-team img {
	width: 36px;
	height: 36px;
	border-radius: var(--aj-radius-sm);
	object-fit: cover;
}

.aj-sidebar-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aj-sidebar-categories li {
	border-bottom: 1px solid var(--aj-border);
}

.aj-sidebar-categories li:last-child {
	border-bottom: 0;
}

.aj-sidebar-categories a {
	display: block;
	padding: 10px 0;
	color: var(--aj-text);
	font-size: 14px;
	transition: color var(--aj-motion) ease;
}

.aj-sidebar-categories a:hover {
	color: var(--aj-brand);
}

.aj-job-sidebar__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.aj-job-sidebar__tags .aj-tag {
	text-decoration: none;
}

.aj-job-sidebar__report {
	padding: 0 4px;
}

.aj-job-sidebar__report .aj-report-link {
	margin: 0;
}

@media (max-width: 960px) {
	.aj-job-single {
		grid-template-columns: 1fr;
	}

	.aj-job-sidebar {
		position: static;
	}
}

/* ---------------------------------------------------------------------
 * Single Company profile
 * ------------------------------------------------------------------- */

.aj-breadcrumbs {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 8px;
	color: var(--aj-border);
}

.aj-company-hero {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	box-shadow: var(--aj-shadow-sm);
	padding: 32px;
	margin-bottom: 40px;
}

.aj-company-hero__logo {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: var(--aj-radius);
	overflow: hidden;
	background: var(--aj-gradient-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	font-weight: 800;
	color: var(--aj-brand);
}

.aj-company-hero__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aj-company-hero__info {
	flex: 1 1 320px;
	min-width: 0;
}

.aj-company-hero__name {
	font-size: 28px;
	font-weight: 800;
	margin: 0 0 10px;
}

.aj-company-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	color: var(--aj-text-muted);
	font-size: 14px;
	margin: 0;
}

.aj-company-hero__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.aj-company-hero__meta svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.aj-company-hero__badge {
	flex-shrink: 0;
}

/* On the company profile the hero grows with the contact chips, so the
 * logo sits level with the name instead of floating mid-block. */
.aj-company-hero--company {
	align-items: flex-start;
	gap: 20px;
}

/* Save heart in the header's top-right corner. Only the company name
 * makes room for it, so the contact-chip row keeps its full width. */
.aj-company-hero--company {
	position: relative;
}

.aj-company-hero__save {
	position: absolute;
	top: 20px;
	right: 20px;
}

.aj-company-hero--company.has-save .aj-company-hero__name {
	padding-right: 56px;
}

/* Phones: the logo gets its own row, level with the heart, so the name
 * below needs no room kept for it. */
@media (max-width: 640px) {
	.aj-company-hero--company.has-save .aj-company-hero__name {
		padding-right: 0;
	}
}

/* A slightly smaller logo leaves the full contact-chip row (Website,
 * Email, Phone, Facebook, Instagram, LinkedIn, X) room for one line at
 * common laptop widths. */
.aj-company-hero--company .aj-company-hero__logo {
	width: 80px;
	height: 80px;
}

/* View Open Jobs, beside the company info. */
.aj-company-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-shrink: 0;
	align-self: center;
}

.aj-company-hero__actions .aj-button {
	justify-content: center;
	text-align: center;
}

@media (max-width: 640px) {
	.aj-company-hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-self: stretch;
		width: 100%;
	}

	.aj-company-hero__actions .aj-button {
		flex: 1 1 160px;
	}
}

/* Browse Jobs: the active filters, above the results, each removable. */
.aj-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	font-size: 14px;
}

.aj-active-filters__label {
	color: var(--aj-text-muted);
	font-weight: 600;
}

.aj-active-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid var(--aj-brand);
	border-radius: 999px;
	background: var(--aj-brand-light);
	color: var(--aj-brand-dark);
	font-weight: 600;
	text-decoration: none;
}

.aj-active-filters__chip:hover,
.aj-active-filters__chip:focus-visible {
	background: var(--aj-brand);
	color: #fff;
}

.aj-active-filters__clear {
	margin-left: 4px;
	font-size: 13px;
}

/* Company page "Sectors" card: main sector chips, then sub-sectors with
 * how many of the company's jobs sit in each. */
.aj-company-sectors__label {
	margin: 0 0 8px;
	color: var(--aj-text-muted);
	font-size: 12px;
	font-weight: 700;
}

.aj-company-sectors .aj-skill-cloud + .aj-company-sectors__label {
	/* Sub-sectors under the main sector tag(s). */
	margin-top: 18px;
}

.aj-company-sectors__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aj-company-sectors__list li {
	border-top: 1px solid var(--aj-border);
	font-size: 14px;
}

.aj-company-sectors__list li:first-child {
	border-top: 0;
}

/* The whole row is the link: name left, this company's job count right. */
.aj-company-sectors__list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 -8px;
	padding: 8px;
	border-radius: var(--aj-radius-sm);
	color: var(--aj-text);
	text-decoration: none;
}

.aj-company-sectors__list li:first-child a {
	padding-top: 4px;
}

.aj-company-sectors__list a:hover,
.aj-company-sectors__list a:focus-visible {
	background: var(--aj-bg-subtle);
	color: var(--aj-brand);
}

.aj-company-sectors__name {
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.aj-company-sectors__count {
	flex-shrink: 0;
	color: var(--aj-text-muted);
	font-size: 13px;
}

/* Company page: breadcrumbs sit above the grid (same width and side
 * padding), so both columns start with a card on the same line. */
.aj-company-crumbs {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: var(--aj-section-padding) 24px 0;
}

.aj-company-crumbs .aj-breadcrumbs {
	margin: 0;
}

.aj-job-single--company {
	padding-top: 24px;
}

/* No sidebar content: the main column takes the full width. */
.aj-job-single--no-sidebar {
	grid-template-columns: minmax(0, 1fr);
}

.aj-company-content {
	font-size: 15px;
	line-height: 1.75;
	color: var(--aj-text);
	margin-bottom: 40px;
}

.aj-company-content h2 {
	font-size: 19px;
	font-weight: 800;
	margin: 0 0 14px;
}

.aj-company-content p {
	margin: 0 0 16px;
}

.aj-skill-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------------------------------------------------------------------
 * Browse Jobs — filter sidebar + results
 * ------------------------------------------------------------------- */

.aj-browse-jobs {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: var(--aj-section-padding) 24px;
}

.aj-browse-jobs--with-sidebar {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start;
}

.aj-browse-jobs__sidebar {
	position: sticky;
	top: calc(var(--aj-sticky-top) + 24px);
}

/* ---------------------------------------------------------------------
 * Collapsible filters (small screens) — see assets/js/filter-collapse.js.
 * The button is JS-inserted and hidden above the breakpoint, where the
 * sidebar sits beside the results and is always visible.
 * ------------------------------------------------------------------- */

.aj-filter-toggle {
	display: none;
	width: 100%;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding: 14px 18px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: #fff;
	color: var(--aj-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color var(--aj-motion) ease, box-shadow var(--aj-motion) ease;
}

.aj-filter-toggle:hover {
	border-color: var(--aj-brand);
	box-shadow: var(--aj-shadow-sm);
}

.aj-filter-toggle__count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--aj-brand);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.aj-filter-toggle__chevron {
	display: inline-flex;
	margin-left: auto;
	color: var(--aj-text-muted);
	transition: transform var(--aj-motion) ease;
}

.aj-filter-toggle__chevron svg {
	width: 20px;
	height: 20px;
}

.aj-filter-toggle[aria-expanded="true"] .aj-filter-toggle__chevron {
	transform: rotate(180deg);
}

/* Long option lists are trimmed by filter-collapse.js rather than capped in
   height — a nested scrollbar inside the page scroll cut rows in half. */
.aj-filter-checkbox.is-hidden-option {
	display: none;
}

.aj-filter-group__more {
	display: inline-flex;
	align-items: center;
	margin-top: 8px;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--aj-brand);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.aj-filter-group__more:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.aj-filter-toggle {
		display: flex;
	}

	.aj-filter-form.is-collapsed {
		display: none;
	}
}

.aj-filter-form {
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	padding: 24px;
}

.aj-filter-form__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.aj-filter-form__header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.aj-filter-form__clear {
	font-size: 13px;
	font-weight: 600;
	color: var(--aj-brand);
}

.aj-filter-group {
	padding: 16px 0;
	border-top: 1px solid var(--aj-border);
}

.aj-filter-form__header + .aj-filter-group {
	border-top: 0;
	padding-top: 0;
}

.aj-filter-group__title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
}

.aj-filter-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--aj-text-muted);
	padding: 5px 0;
	cursor: pointer;
}

.aj-filter-checkbox input {
	flex-shrink: 0;
}

/* Plain text inputs inside the filter sidebar (Keyword, skill search) had
 * no styling of their own and fell back to the bare browser default look,
 * out of step with every other input on the site. */
.aj-filter-input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	font-family: inherit;
	font-size: 14px;
	color: var(--aj-text);
	background: var(--aj-bg);
	transition: border-color var(--aj-motion) ease;
}

.aj-filter-input:focus {
	outline: none;
	border-color: var(--aj-brand);
}

.aj-filter-input::placeholder {
	color: var(--aj-text-muted);
}

/* Skills checkbox list can run to 100+ items (one per leaf skill term) —
 * capped to a scrollable height with a search box above it
 * (assets/js/filter-skills.js) instead of dumping the whole list into the
 * sidebar unfiltered. */
.aj-filter-skills__search {
	margin-bottom: 10px;
}

.aj-filter-skills__list {
	max-height: 240px;
	overflow-y: auto;
	padding-right: 4px;
}

.aj-filter-skills__list .aj-filter-checkbox {
	padding: 4px 0;
}

.aj-filter-skills__list .aj-filter-checkbox.is-filtered-out {
	display: none;
}

.aj-filter-salary {
	display: flex;
	align-items: center;
	gap: 8px;
}

.aj-filter-salary input {
	width: 0;
	flex: 1 1 auto;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	padding: 8px 10px;
	font-size: 14px;
	font-family: inherit;
}

.aj-filter-salary span {
	color: var(--aj-text-muted);
}

.aj-button--block {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 20px;
	border: 0;
	cursor: pointer;
}

.aj-browse-jobs__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.aj-browse-jobs__count {
	margin: 0;
	color: var(--aj-text-muted);
	font-size: 14px;
}

.aj-browse-jobs__sort .aj-custom-select {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	padding: 8px 12px;
	font-family: inherit;
	font-size: 14px;
	color: var(--aj-text);
	background: var(--aj-bg);
}

/* Browse Jobs uses the homepage's job-card grid. Beside the 260px filter
 * sidebar, three columns only fit on wide screens; two below that, one on
 * phones (the shared .aj-job-list rule). */
@media (max-width: 1280px) and (min-width: 781px) {
	.aj-browse-jobs .aj-job-list--cols-3,
	.aj-browse-jobs .aj-job-list--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The Browse Jobs page is two Elementor widgets (search header, then the
 * grid) in one container, whose 20px widget gap pushed the filters and
 * results 20px lower than on Companies and Candidates, where the header is
 * part of the same widget. No gap between those two. */
.e-con:has(> .elementor-widget-aj-hero-search + .elementor-widget-aj-job-grid) {
	--row-gap: 0px;
	row-gap: 0;
}

@media (max-width: 900px) {
	.aj-browse-jobs--with-sidebar {
		grid-template-columns: 1fr;
	}

	.aj-browse-jobs__sidebar {
		position: static;
	}
}

/* ---------------------------------------------------------------------
 * Companies (grid + cards)
 * ------------------------------------------------------------------- */

.aj-company-card {
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	padding: 16px;
	background: var(--aj-bg);
	margin-bottom: 24px;
	transition: transform var(--aj-motion) ease, box-shadow var(--aj-motion) ease, border-color var(--aj-motion) ease;
}

.aj-company-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.aj-company-grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.aj-company-grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.aj-company-grid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 780px) {
	.aj-company-grid--cols-2,
	.aj-company-grid--cols-3,
	.aj-company-grid--cols-4 {
		grid-template-columns: 1fr;
	}
}

.aj-company-card__logo img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: var(--aj-radius-sm);
	border: 1px solid var(--aj-border);
}

.aj-company-card__logo-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	border-radius: var(--aj-radius);
	background: var(--aj-gradient-soft);
	color: var(--aj-brand);
	font-size: 22px;
	font-weight: 800;
}

.aj-company-grid-card {
	position: relative;
	text-align: center;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	padding: 36px 24px 28px;
	background: var(--aj-bg);
	transition: transform var(--aj-motion) ease, box-shadow var(--aj-motion) ease, border-color var(--aj-motion) ease;
	/* Column layout so cards in a row match height and every footer button
	   lines up, however much text the card above it happens to carry. */
	display: flex;
	flex-direction: column;
	height: 100%;
}

.aj-company-grid-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--aj-shadow-md);
	border-color: transparent;
}

.aj-company-grid-card__save {
	position: absolute;
	top: 16px;
	right: 16px;
	color: var(--aj-text-muted);
	font-size: 18px;
	line-height: 1;
}

.aj-match-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	border-radius: var(--aj-radius-sm);
	padding: 4px 10px;
	color: #fff;
	background: var(--aj-brand);
}

.aj-company-grid-card__logo {
	width: 72px;
	height: 72px;
	margin: 0 auto 16px;
	border-radius: var(--aj-radius);
	overflow: hidden;
	background: var(--aj-gradient-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}

.aj-company-grid-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aj-company-grid-card__logo-fallback {
	font-size: 26px;
	font-weight: 800;
	color: var(--aj-brand);
}

.aj-company-grid-card__name {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 4px;
}

.aj-company-grid-card__name a {
	color: var(--aj-text);
}

.aj-company-grid-card__location {
	color: var(--aj-text-muted);
	font-size: 13px;
	margin: 0 0 12px;
}

.aj-company-grid-card__excerpt {
	color: var(--aj-text-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 20px;
}

.aj-company-grid-card__footer {
	padding-top: 20px;
	border-top: 1px solid var(--aj-border);
	margin-top: auto;
}

/* ---------------------------------------------------------------------
 * Candidate single profile (see class-candidates.php — Employer/
 * Recruiter/Admin-only, never candidate-to-candidate).
 * ------------------------------------------------------------------- */

.aj-candidate-profile {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: 48px 24px 88px;
}

.aj-candidate-profile__header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 32px;
}

.aj-candidate-profile__header img {
	border-radius: 50%;
}

.aj-candidate-profile__name {
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 4px;
}

.aj-candidate-profile__headline {
	color: var(--aj-text-muted);
	font-size: 16px;
	margin: 0 0 4px;
}

.aj-candidate-profile__meta {
	color: var(--aj-text-muted);
	font-size: 13px;
	margin: 0;
}

.aj-candidate-profile__section {
	margin-bottom: 28px;
}

.aj-candidate-profile__section h2 {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 12px;
}

.aj-candidate-profile__links {
	display: flex;
	gap: 14px;
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 600;
}

.aj-timeline-item {
	border-left: 2px solid var(--aj-border);
	padding: 0 0 18px 18px;
	margin-left: 4px;
}

.aj-timeline-item:last-child {
	padding-bottom: 0;
}

.aj-timeline-item h3 {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 2px;
}

.aj-timeline-item h3 span {
	font-weight: 500;
	color: var(--aj-text-muted);
}

.aj-timeline-item h3 span::before {
	content: "· ";
}

.aj-timeline-item__date {
	color: var(--aj-text-muted);
	font-size: 13px;
	margin: 0 0 6px;
}

.aj-timeline-item p {
	font-size: 14px;
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Directory layout — shared two-column (sidebar + results) shell for the
 * Browse Jobs and Company Directory pages. See .aj-filter-form /
 * .aj-filter-group / .aj-filter-checkbox further down for the sidebar
 * controls themselves.
 * ------------------------------------------------------------------- */

.aj-directory {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: var(--aj-section-padding) 24px;
}

.aj-directory--with-sidebar {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 40px;
	align-items: start;
}

.aj-directory__sidebar {
	position: sticky;
	top: calc(var(--aj-sticky-top) + 24px);
}

.aj-directory__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.aj-directory__count {
	margin: 0;
	color: var(--aj-text-muted);
	font-size: 14px;
}

.aj-directory__sort .aj-custom-select {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	padding: 8px 12px;
	font-family: inherit;
	font-size: 14px;
	color: var(--aj-text);
	background: var(--aj-bg);
}

@media (max-width: 900px) {
	.aj-directory--with-sidebar {
		grid-template-columns: 1fr;
	}

	.aj-directory__sidebar {
		position: static;
	}
}

/* ---------------------------------------------------------------------
 * Dual CTA (Jobseeker / Employer)
 * ------------------------------------------------------------------- */

.aj-dual-cta {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: var(--aj-section-padding) 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.aj-dual-cta__card {
	border-radius: var(--aj-radius-lg);
	padding: 48px;
	transition: transform var(--aj-motion) ease, box-shadow var(--aj-motion) ease;
}

.aj-dual-cta__card:hover {
	transform: translateY(-4px);
}

.aj-dual-cta__card--left {
	background: var(--aj-brand-light);
}

.aj-dual-cta__card--left:hover {
	box-shadow: var(--aj-shadow-md);
}

/* A deep brand blue, not black — this card used to be #10141c (near-
   black), which read as a plain dark slab dropped onto the section's own
   brand-blue background rather than a matching, deliberate pair. */
.aj-dual-cta__card--right {
	background: var(--aj-brand-dark);
	color: #fff;
}

/* .aj-button--dark defaults to var(--aj-text) (near-black), which would be
   invisible against this card's blue — only its white label would show.
   Invert it here instead: white fill, dark label. */
.aj-dual-cta__card--right .aj-button--dark {
	background: #fff;
	color: var(--aj-brand-dark);
}

.aj-dual-cta__card--right .aj-button--dark:hover {
	background: var(--aj-brand-light);
	color: var(--aj-brand-dark);
}

.aj-dual-cta__card--right:hover {
	box-shadow: 0 12px 32px rgba(0, 87, 199, 0.35);
}

.aj-dual-cta__card h3 {
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 12px;
}

/* Order matters here: both selectors match a paragraph inside the right
   card at equal specificity (class + type), so whichever rule comes LAST
   wins for it — .aj-dual-cta__card--right p has to stay below the generic
   rule, or the right card's white silently loses to this gray again. */
.aj-dual-cta__card p {
	color: var(--aj-text);
	margin: 0 0 28px;
}

.aj-dual-cta__card--right p {
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 780px) {
	.aj-dual-cta {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Articles section
 * ------------------------------------------------------------------- */

.aj-articles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.aj-article-card {
	display: block;
	color: var(--aj-text);
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	overflow: hidden;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.aj-article-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--aj-shadow-md);
	text-decoration: none;
}

.aj-article-card__image img {
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.aj-article-card__title {
	font-size: 16px;
	font-weight: 700;
	margin: 18px 18px 8px;
}

.aj-article-card__excerpt {
	color: var(--aj-text-muted);
	font-size: 14px;
	margin: 0 18px 18px;
}

@media (max-width: 900px) {
	.aj-articles-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Generic page content (forms, dashboards, packages) — unchanged in
 * substance from Phase 1, refined to the new tokens.
 * ------------------------------------------------------------------- */

.aj-page-title {
	font-size: 30px;
	font-weight: 800;
	margin: 40px 0 8px;
}

/* Plain (non-Elementor) content pages — About, legal/policy pages, the
   info pages linked from the footer. Narrower than .aj-container's grid
   width because long-form paragraphs at 1440px are unreadable. */
.aj-page-content {
	max-width: 760px;
	/* Gutters so body text never touches the screen edge on a phone;
	   content-box keeps the text column itself 760px wide on desktop. */
	box-sizing: content-box;
	padding-inline: 24px;
	max-width: min(760px, 100%);
	margin: 0 auto 96px;
	color: var(--aj-text);
}

.aj-page-content__meta {
	color: var(--aj-text-muted);
	font-size: 14px;
	margin: 0 0 32px;
}

.aj-page-content h2 {
	font-size: 24px;
	font-weight: 700;
	margin: 40px 0 12px;
}

.aj-page-content h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 28px 0 8px;
}

.aj-page-content p {
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 16px;
}

.aj-page-content ul,
.aj-page-content ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.aj-page-content li {
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 8px;
}

.aj-page-content a:not(.aj-button) {
	color: var(--aj-brand);
}

.aj-page-content strong {
	font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Knowledge Base (class-knowledge-base.php shortcode + single-aj_kb_
 * article.php) — the shortcode's search bar and article list previously
 * had no CSS at all: a bare native <select>/<input> row and a plain
 * <ul><li> list of link + paragraph, no card, no visual hierarchy.
 * ------------------------------------------------------------------- */

.aj-kb-page .aj-page-title {
	margin-top: 48px;
}

.aj-kb {
	margin: 0;
	padding-top: 40px;
}

@media (max-width: 600px) {
	.aj-kb {
		padding-top: 28px;
	}
}

/* ---------------------------------------------------------------------
 * Content search (Knowledge Base, skill guides, FAQ, Blog) — one form,
 * rendered inside the blue page band by template-parts/page-hero.php via
 * Aruba_Jobs_Content_Search::render_form(). One row on desktop, stacked
 * on phones.
 * ------------------------------------------------------------------- */
.aj-content-search {
	display: flex;
	align-items: stretch;
	gap: 8px;
	max-width: 640px;
	margin: 28px auto 0;
	padding: 6px;
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-md);
	color: var(--aj-text);
	text-align: left;
}

.aj-content-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 14px;
	border: 0;
	border-radius: var(--aj-radius-sm);
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	color: var(--aj-text);
}

.aj-content-search__input:focus-visible {
	outline: 2px solid var(--aj-brand);
	outline-offset: 0;
}

/* The <select> becomes .aj-custom-select (custom-select.js), and both the
 * wrapper and the now-hidden native select carry this class — so the
 * wrapper is targeted explicitly, and the native select (shown only if
 * the script never runs) stays hidden once enhanced. */
.aj-content-search .aj-content-search__category.aj-custom-select__native {
	display: none;
}

.aj-content-search select.aj-content-search__category {
	flex: 0 0 190px;
	border: 0;
	border-left: 1px solid var(--aj-border);
	background: transparent;
	padding: 11px 14px;
	font: inherit;
	color: var(--aj-text);
}

.aj-content-search .aj-custom-select.aj-content-search__category {
	display: flex;
	align-items: center;
	flex: 0 0 190px;
	min-width: 0;
	padding: 11px 14px;
	border-left: 1px solid var(--aj-border);
	font-size: 15px;
	color: var(--aj-text);
}

.aj-content-search__submit {
	flex: 0 0 auto;
	padding: 11px 24px;
}

@media (max-width: 600px) {
	.aj-content-search {
		flex-direction: column;
		gap: 6px;
		margin-top: 22px;
	}

	.aj-content-search .aj-custom-select.aj-content-search__category,
	.aj-content-search select.aj-content-search__category {
		flex-basis: auto;
		border-top: 1px solid var(--aj-border);
		border-left: 0;
	}

	.aj-content-search__submit {
		width: 100%;
	}
}

/* "3 results for “visa” · Clear search" above filtered results. */
.aj-content-search-status {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 0 0 24px;
	color: var(--aj-text-muted);
	font-size: 14px;
}

.aj-content-search-status span {
	color: var(--aj-text);
	font-weight: 600;
}

/* Related Jobs / Related Courses after KB, FAQ, blog and skill-guide
 * content (Aruba_Jobs_Related_Content). */
.aj-related-content {
	max-width: 1080px;
	margin: 56px auto 0;
	padding-top: 40px;
	border-top: 1px solid var(--aj-border);
}

.aj-related-content:last-child {
	margin-bottom: 64px;
}

.aj-related-content > section + section {
	margin-top: 40px;
}

.aj-related-jobs-block__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin-bottom: 20px;
}

.aj-related-jobs-block__header h2,
.aj-related-courses h2 {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
}

.aj-related-courses h2 {
	margin-bottom: 20px;
}

/* General-information notice, last on Knowledge Base content. */
.aj-content-disclaimer {
	max-width: 720px;
	margin: 40px 0 64px;
	color: var(--aj-text-muted);
	font-size: 13px;
	line-height: 1.6;
	text-align: left;
}

.aj-content-disclaimer strong {
	color: var(--aj-text);
	font-weight: 700;
}

.aj-kb__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 640px) {
	.aj-kb__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.aj-kb__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.aj-kb-card {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--aj-motion) ease, border-color var(--aj-motion) ease, transform var(--aj-motion) ease;
}

.aj-kb-card:hover {
	box-shadow: var(--aj-shadow-md);
	border-color: transparent;
	transform: translateY(-2px);
}

.aj-kb-card__category {
	display: inline-flex;
	align-self: flex-start;
	padding: 4px 12px;
	margin-bottom: 12px;
	border-radius: 999px;
	background: var(--aj-brand-light);
	color: var(--aj-brand);
	font-size: 12px;
	font-weight: 600;
}

.aj-kb-card__title {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--aj-text);
}

.aj-kb-card__excerpt {
	flex-grow: 1;
	margin: 0 0 16px;
	color: var(--aj-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

.aj-kb-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--aj-brand);
}

.aj-kb-card__link svg {
	width: 14px;
	height: 14px;
}

.aj-kb-article__header {
	max-width: 760px;
	margin: 0 auto;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--aj-border);
}

.aj-kb-article__header .aj-kb-card__category {
	margin-bottom: 12px;
}

.aj-kb-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	margin: 12px 0 0;
	color: var(--aj-text-muted);
	font-size: 14px;
}

.aj-kb-article__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.aj-kb-article__meta svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.aj-kb-article__content {
	padding-top: 32px;
}

.aj-kb-article__content .aj-share-links {
	margin-top: 32px;
}

.aj-kb-article__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
	color: var(--aj-brand);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.aj-kb-article__back:hover {
	text-decoration: underline;
}

.aj-kb-article__back span {
	font-size: 16px;
}

.aj-kb-article__related {
	max-width: 1080px;
	margin: 56px auto 0;
	padding-top: 40px;
	border-top: 1px solid var(--aj-border);
}

.aj-kb-article__related h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 20px;
}

/* ---------------------------------------------------------------------
 * Skill Guide (taxonomy-aj_skill.php)
 * ------------------------------------------------------------------- */

.aj-skill-guide {
	padding: 40px 0 88px;
}

/* Aligned with the guide layout below (same max width, left edge). */
.aj-skill-guide__breadcrumbs {
	max-width: 1080px;
	margin: 0 auto 28px;
}

/* On a skill guide the disclaimer closes the guide text column, and
 * Related Jobs follows without its own divider or extra bottom space. */
.aj-skill-guide__content .aj-content-disclaimer {
	margin: 24px 0 0;
}

.aj-skill-guide .aj-related-content {
	margin: 48px auto 0;
	padding-top: 0;
	border-top: 0;
}

.aj-skill-guide__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	max-width: 1080px;
	margin: 0 auto;
}

.aj-skill-guide__content {
	min-width: 0;
}

.aj-skill-guide__section {
	padding: 0 0 28px;
	border-bottom: 1px solid var(--aj-border);
}

.aj-skill-guide__section + .aj-skill-guide__section {
	margin-top: 28px;
}

.aj-skill-guide__section h2,
.aj-skill-guide__articles > h2,
.aj-skill-guide__details > h2 {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 800;
}

/* Paragraph colour is an admin choice (skill edit screen / Settings →
 * Skill Guides): black by default, grey when chosen. */
.aj-skill-guide__copy,
.aj-skill-guide__section p {
	color: var(--aj-text);
	font-size: 16px;
	line-height: 1.7;
}

.aj-skill-guide--text-muted .aj-skill-guide__copy,
.aj-skill-guide--text-muted .aj-skill-guide__section p {
	color: var(--aj-text-muted);
}

.aj-skill-guide__copy p,
.aj-skill-guide__copy ul,
.aj-skill-guide__copy ol {
	margin: 0 0 12px;
}

.aj-skill-guide__copy > :first-child {
	margin-top: 0;
}

.aj-skill-guide__copy > :last-child {
	margin-bottom: 0;
}

.aj-skill-guide__audiences {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-top: 28px;
}

.aj-skill-guide__audiences .aj-skill-guide__section {
	margin: 0;
}

.aj-skill-guide__section--matching {
	margin-top: 28px;
}

.aj-skill-guide__aside {
	min-width: 0;
}

.aj-skill-guide__details {
	margin: 0;
}

.aj-skill-guide__details > h2 {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--aj-text-muted);
}

.aj-skill-guide__details dl {
	margin: 0;
}

.aj-skill-guide__details dl > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--aj-border);
}

.aj-skill-guide__details dt {
	color: var(--aj-text-muted);
	font-size: 14px;
	font-weight: 600;
}

.aj-skill-guide__details dd {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.aj-skill-guide__detail-group {
	padding-top: 20px;
	margin-top: 20px;
	border-top: 1px solid var(--aj-border);
}

.aj-skill-guide__detail-group h3 {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
}

.aj-skill-guide__articles {
	max-width: 1080px;
	margin: 56px auto 0;
	padding-top: 40px;
	border-top: 1px solid var(--aj-border);
}

.aj-tag[href] {
	text-decoration: none;
}

.aj-tag[href]:hover,
.aj-tag[href]:focus-visible {
	color: var(--aj-brand-dark);
	box-shadow: inset 0 0 0 1px currentColor;
}

@media (min-width: 900px) {
	.aj-skill-guide__layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 48px;
	}

	.aj-skill-guide__aside {
		position: sticky;
		top: calc(var(--aj-sticky-top) + 24px);
		align-self: start;
	}

	.aj-skill-guide__audiences {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}
}

/* ---------------------------------------------------------------------
 * Legal / Policy page template (page-legal.php) — Privacy Policy, Terms
 * of Use, Employer/Candidate Terms, Cookie Policy, Accessibility, Safety
 * & Scam Reporting. Replaces the plain .aj-page-title/.aj-page-content
 * wrapper those pages fell through to before, which read as a bland wall
 * of text with no way to jump to a section.
 * ------------------------------------------------------------------- */

.aj-legal-hero {
	background: var(--aj-brand);
	padding: 56px 24px;
	text-align: center;
	color: #fff;
}

.aj-legal-hero__inner {
	max-width: 760px;
	margin: 0 auto;
}

.aj-legal-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
}

.aj-legal-hero__icon svg {
	width: 26px;
	height: 26px;
}

.aj-legal-hero__title {
	font-size: 32px;
	font-weight: 800;
	margin: 0 0 12px;
}

.aj-legal-hero__updated {
	display: inline-flex;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	font-size: 13px;
	font-weight: 600;
}

.aj-legal-hero--nav {
	padding-block: 56px;
}

.aj-legal-hero--nav .aj-legal-hero__inner {
	max-width: 1120px;
}

.aj-legal-hero--nav .aj-legal-hero__title {
	margin-bottom: 18px;
}

.aj-legal-hero__nav {
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.aj-legal-hero__nav::-webkit-scrollbar {
	display: none;
}

.aj-legal-hero__nav ul {
	display: flex;
	justify-content: center;
	gap: 6px;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aj-legal-hero__nav li {
	margin: 0;
}

.aj-legal-hero__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 5px 11px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--aj-motion) ease, border-color var(--aj-motion) ease, color var(--aj-motion) ease;
}

.aj-legal-hero__nav a:hover,
.aj-legal-hero__nav a:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.aj-legal-hero__nav a[aria-current="page"] {
	border-color: #fff;
	background: #fff;
	color: var(--aj-brand);
}

.aj-legal__updated {
	display: inline-flex;
	margin: 0 0 22px;
	padding: 5px 10px;
	border: 1px solid var(--aj-border);
	border-radius: 999px;
	background: var(--aj-bg-subtle);
	color: var(--aj-text-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

@media (max-width: 360px) {
	.aj-legal__updated {
		font-size: 12px;
	}
}

@media (max-width: 899px) {
	.aj-legal-hero--nav {
		padding-inline: 0;
	}

	.aj-legal-hero--nav .aj-legal-hero__title {
		padding-inline: 24px;
	}

	.aj-legal-hero__nav ul {
		justify-content: flex-start;
		min-width: 0;
		padding-inline: 24px;
	}
}

.aj-legal {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	max-width: 1080px;
	margin: 56px auto;
	padding: 0 24px;
	align-items: start;
}

@media (min-width: 900px) {
	.aj-legal {
		grid-template-columns: 220px 1fr;
	}

	.aj-legal__toc {
		position: sticky;
		top: calc(var(--aj-sticky-top) + 24px);
	}

	/* legal-page.js hides the sidebar with the `hidden` attribute on a page
	   with under 2 headings — display:none removes it from the grid
	   entirely, and CSS Grid's auto-placement doesn't leave its column
	   empty for the next item, it reflows into it: the content ended up
	   squeezed into the 220px sidebar track instead of the wide one, with
	   the rest of the row blank. Collapse back to a single column so the
	   remaining content item gets the full width instead. */
	.aj-legal:has(.aj-legal__toc[hidden]) {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Contact page (page-contact.php) — same hero and CTA as the legal/FAQ
 * pages, with a two-column body: the page's own text plus an email button,
 * and a sidebar pointing at the answers people usually actually want.
 * Built from the existing tokens/components; no new colours.
 * ------------------------------------------------------------------- */

.aj-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	max-width: 1080px;
	margin: 56px auto;
	padding: 0 24px;
	align-items: start;
}

@media (min-width: 900px) {
	.aj-contact {
		grid-template-columns: 1fr 300px;
		gap: 40px;
	}

	.aj-contact__aside {
		position: sticky;
		top: calc(var(--aj-sticky-top) + 24px);
	}
}

.aj-contact__card {
	padding: 32px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-sm);
}

.aj-contact__body {
	color: var(--aj-text);
	font-size: 16px;
	line-height: 1.7;
}

.aj-contact__body p {
	margin: 0 0 12px;
}

.aj-contact__button {
	margin-top: 20px;
	gap: 10px;
}

.aj-contact__note {
	margin: 12px 0 0;
	color: var(--aj-text-muted);
	font-size: 14px;
}

.aj-contact__aside-text {
	margin: 0 0 16px;
	color: var(--aj-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

.aj-contact__links {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--aj-border);
}

.aj-contact__links a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--aj-border);
	color: var(--aj-text);
	font-size: 15px;
	font-weight: 600;
}

.aj-contact__links a:hover {
	color: var(--aj-brand);
	text-decoration: none;
}

.aj-contact__links small {
	color: var(--aj-text-muted);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

/* FAQ page (page-faq.php) reuses the legal page's hero, sidebar and CTA.
   Two additions: an intro line under the title, and flattening the
   [aj_faq] shortcode's own section scaffolding, which is built to sit
   full-width on its own and would otherwise double the padding inside
   the content column. */
.aj-legal-hero__intro {
	max-width: 560px;
	margin: 0 auto 16px;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

.aj-legal--faq .aj-faq-section {
	max-width: none;
	padding: 0;
}

.aj-legal--faq .aj-faq-section + .aj-faq-section {
	margin-top: 44px;
}

.aj-legal--faq .aj-faq-section__header {
	/* Centred by default for a standalone homepage section; in this column
	   it sat oddly against the left-aligned sidebar, questions and answers. */
	text-align: left;
	max-width: none;
	margin: 0 0 4px;
}

.aj-legal__toc-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--aj-text-muted);
	margin: 0 0 12px;
}

.aj-legal__toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--aj-border);
}

.aj-legal__toc li {
	margin: 0;
}

.aj-legal__toc a {
	display: block;
	padding: 6px 0 6px 16px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	color: var(--aj-text-muted);
	font-size: 14px;
	text-decoration: none;
	transition: color var(--aj-motion) ease, border-color var(--aj-motion) ease;
}

.aj-legal__toc a:hover {
	color: var(--aj-brand);
	border-left-color: var(--aj-brand);
}

.aj-legal__content {
	max-width: 720px;
	color: var(--aj-text);
}

.aj-legal__content h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 40px 0 12px;
	scroll-margin-top: 96px;
}

.aj-legal__content h2:first-child {
	margin-top: 0;
}

.aj-legal__content h3 {
	font-size: 17px;
	font-weight: 700;
	margin: 24px 0 8px;
}

.aj-legal__content p {
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 16px;
	color: var(--aj-text);
}

.aj-legal__content ul,
.aj-legal__content ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.aj-legal__content li {
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 8px;
}

/* ---------------------------------------------------------------------
 * Content lists — editorial markers
 *
 * Lists written in the editor (job descriptions, company "About", pages,
 * posts, legal, FAQ answers) swap the default round bullet for a short
 * brand-blue rule with a true hanging indent, the way a typeset page
 * marks a list: wrapped lines align with the text, not the marker. Only
 * class-less lists (and the block editor's wp-block-list) are touched, so
 * menus and any UI list inside these areas keep their own styling.
 * ------------------------------------------------------------------- */

:is(.aj-job-single__content, .aj-page-content, .aj-legal__content, .aj-company-content, .aj-faq__answer) :is(ul:not([class]), ul.wp-block-list) {
	list-style: none;
	padding-left: 0;
}

:is(.aj-job-single__content, .aj-page-content, .aj-legal__content, .aj-company-content, .aj-faq__answer) :is(ul:not([class]), ul.wp-block-list) > li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
	text-wrap: pretty;
}

/* Centred on the first line: half of a 1.7 line box sits at 0.85em. */
:is(.aj-job-single__content, .aj-page-content, .aj-legal__content, .aj-company-content, .aj-faq__answer) :is(ul:not([class]), ul.wp-block-list) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(0.85em - 1px);
	width: 12px;
	height: 2px;
	border-radius: 1px;
	background: var(--aj-brand);
}

/* Second level steps down to a shorter, quieter rule. */
:is(.aj-job-single__content, .aj-page-content, .aj-legal__content, .aj-company-content, .aj-faq__answer) :is(ul:not([class]), ul.wp-block-list) :is(ul:not([class]), ul.wp-block-list) {
	margin: 10px 0 4px;
}

:is(.aj-job-single__content, .aj-page-content, .aj-legal__content, .aj-company-content, .aj-faq__answer) :is(ul:not([class]), ul.wp-block-list) :is(ul:not([class]), ul.wp-block-list) > li::before {
	width: 6px;
	background: var(--aj-text-muted);
}

/* Numbered lists keep native numbering, set in brand blue with
 * equal-width figures so 9. and 10. line up. */
:is(.aj-job-single__content, .aj-page-content, .aj-legal__content, .aj-company-content, .aj-faq__answer) :is(ol:not([class]), ol.wp-block-list) > li::marker {
	color: var(--aj-brand);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.aj-legal__content a:not(.aj-button) {
	color: var(--aj-brand);
}

.aj-legal__content strong {
	font-weight: 700;
}

/* Single blog post (single.php) reuses this same "On this page" sidebar
   and grid — Carsten asked for the privacy-policy-style page indexing on
   articles too. It nests .aj-page-content (used elsewhere on its own,
   already centred with its own gutters) as the grid's content column
   instead of introducing a second content-typography class, so these
   overrides just stop the two from doubling up on padding/max-width. */
.aj-legal--blog .aj-page-content {
	max-width: none;
	padding-inline: 0;
	margin: 0;
}

.aj-legal--blog .aj-page-content h2 {
	scroll-margin-top: 96px;
}

.aj-legal-cta {
	background: var(--aj-bg-subtle);
	padding: 40px 24px;
}

.aj-legal-cta__inner {
	max-width: 720px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.aj-legal-cta__text {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--aj-text);
}

/* Lead paragraph + CTA row used at the top of the info/landing pages
   (About, For Employers/Recruiters/Jobseekers, Pricing, etc.) — the legal
   pages skip these and go straight into body copy. */
.aj-lead {
	font-size: 19px;
	line-height: 1.6;
	color: var(--aj-text-muted);
	margin: 0 0 28px;
}

.aj-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 40px;
}

/* wpautop inserts a <br> between adjacent lines inside a block it treats
   as a single paragraph — harmless in prose, but a stray flex item here. */
.aj-cta-row br {
	display: none;
}

.aj-form {
	/* Self-constrained, not wrapped in .aj-container: this renders via the
	   registration/login/job-form/company-form/profile-form Elementor
	   widgets, always directly inside the unconstrained <main> on an
	   Elementor-built page — see header.php for why <main> has no width
	   constraint of its own. */
	max-width: 560px;
	margin: 48px auto;
	padding: 0 24px;
}

.aj-form p {
	margin: 0 0 16px;
}

.aj-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 14px;
}

.aj-form fieldset {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	padding: 12px 16px;
	margin: 0 0 16px;
}

.aj-form fieldset legend {
	padding: 0 8px;
	margin-left: -4px;
	font-weight: 700;
	font-size: 14px;
	color: var(--aj-text);
}

/* Card-style fieldset grouping (company profile, and any other long form
 * that benefits from breaking fields into labeled sections instead of one
 * long vertical list) — more breathing room than the plain chip-group
 * fieldset above, since this wraps a whole block of fields rather than a
 * handful of radio/checkbox chips. */
.aj-form fieldset.aj-form-section {
	padding: 24px 24px 8px;
	margin: 0 0 20px;
}

.aj-form fieldset.aj-form-section legend {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--aj-text-muted);
}

/* Two/three-column field grid inside a form section — lets short fields
 * (industry, phone, social URLs, etc.) sit side by side instead of each
 * taking a full line, so a long form like Company Profile doesn't scroll
 * forever. Falls back to one column below the breakpoint. */
.aj-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 20px;
}

.aj-form-grid p {
	margin-bottom: 16px;
}

@media (min-width: 640px) {
	.aj-form-grid--2 {
		grid-template-columns: 1fr 1fr;
	}

	.aj-form-grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Logo + Company Name/Tagline side by side, so the name field — usually a
 * short string — doesn't take a whole line by itself above an empty-looking
 * logo uploader underneath it. */
.aj-company-form__identity {
	display: grid;
	grid-template-columns: 148px 1fr;
	gap: 20px;
	align-items: start;
	margin-bottom: 16px;
}

@media (max-width: 480px) {
	.aj-company-form__identity {
		grid-template-columns: 1fr;
	}
}

.aj-company-form__logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.aj-company-form__logo-preview {
	width: 72px;
	height: 72px;
	margin-bottom: 8px;
	border-radius: var(--aj-radius-sm);
	border: 1px solid var(--aj-border);
	background: var(--aj-bg-subtle);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.aj-company-form__logo-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aj-company-form__logo-placeholder {
	color: var(--aj-text-muted);
	display: inline-flex;
}

.aj-company-form__logo-placeholder svg {
	width: 28px;
	height: 28px;
}

.aj-company-form__logo-label {
	font-size: 12px;
	font-weight: 600;
	margin: 0 0 8px;
}

/* Visually hidden but still focusable/keyboard-operable — the visible
 * "Upload Logo" / "Change Logo" button is the <label for="aj_logo">
 * right after it, so there's no default-looking "Choose File" control
 * sitting under the logo preview. */
.aj-form input.aj-company-form__logo-input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.aj-form input.aj-company-form__logo-input[type="file"]:focus-visible + label {
	outline: 3px solid color-mix(in srgb, var(--aj-brand) 30%, transparent);
	outline-offset: 3px;
}

.aj-company-form__logo .aj-button {
	margin-bottom: 6px;
}

.aj-company-form__identity-fields {
	min-width: 0;
}

/* Choice "chips" — the native radio/checkbox stays in the DOM (so keyboard
 * nav, screen readers and :checked all work exactly as normal) but is
 * shrunk to an invisible 1px hit target; the label it's wrapped in is what
 * actually gets styled, using :has() to react to its checked state.
 *
 * Scoped to labels that actually wrap a radio/checkbox (:has(> input...))
 * rather than every <label> in a fieldset — a fieldset can also hold a
 * plain field label for something else entirely, like "Work Authorization
 * Status" above its <select>, which must keep looking like a field label,
 * not another option in the choice group. */
.aj-form fieldset label:has(> input[type="radio"]),
.aj-form fieldset label:has(> input[type="checkbox"]) {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	margin: 0 8px 8px 0;
	border: 1.5px solid var(--aj-border);
	border-radius: 999px;
	font-weight: 500;
	font-size: 14px;
	color: var(--aj-text);
	background: var(--aj-bg);
	cursor: pointer;
	transition: background var(--aj-motion) ease, border-color var(--aj-motion) ease, color var(--aj-motion) ease;
}

.aj-form fieldset label:has(> input[type="radio"]) > input[type="radio"],
.aj-form fieldset label:has(> input[type="checkbox"]) > input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.aj-form fieldset label:has(> input[type="radio"]):hover,
.aj-form fieldset label:has(> input[type="checkbox"]):hover {
	border-color: var(--aj-brand);
}

.aj-form fieldset label:has(> input:checked) {
	background: var(--aj-brand);
	border-color: var(--aj-brand);
	color: #fff;
}

.aj-form fieldset label:has(> input:focus-visible) {
	outline: 2px solid var(--aj-brand);
	outline-offset: 2px;
}

/* A plain field label (e.g. "Work Authorization Status") can sit inside
 * the same fieldset as the chips above — since it no longer matches the
 * :has(> input) chip rules, it just falls through to .aj-form label's
 * normal block-label styling further up, unchanged. */

.aj-jobseeker-intent {
	overflow: hidden;
	max-height: 480px;
	opacity: 1;
	transition: max-height 320ms ease, opacity 220ms ease, padding 320ms ease, margin 320ms ease, border-width 320ms ease;
}

/* Overflow needs to stay hidden while the height is animating (that's what
 * makes the reveal look like a smooth grow instead of a jump-cut), but left
 * on permanently it also clips anything that's supposed to pop out past
 * the box — like the work-authorization dropdown below. JS adds this once
 * the expand transition has settled. */
.aj-jobseeker-intent.is-expanded {
	overflow: visible;
}

.aj-jobseeker-intent.is-collapsed {
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 0;
	border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	.aj-jobseeker-intent {
		transition: none;
	}
}

.aj-form input[type="text"],
.aj-form input[type="email"],
.aj-form input[type="password"],
.aj-form input[type="number"],
.aj-form input[type="url"],
.aj-form input[type="file"],
.aj-form .aj-custom-select,
.aj-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	font-family: inherit;
	font-size: 15px;
}

.aj-form-error {
	color: #b3261e;
	background: #fdecea;
	border-radius: var(--aj-radius-sm);
	padding: 10px 14px;
}

.aj-form-notice {
	color: #0a7d3f;
	background: #e7f6ed;
	border-radius: var(--aj-radius-sm);
	padding: 10px 14px;
}

/* Small confirmation shown after an AJAX action (e.g. saving a job) — see
   assets/js/saved-jobs.js. Off-screen/invisible until JS adds is-visible,
   so it never appears at all if JavaScript is disabled. */
.aj-toast {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9999;
	max-width: 320px;
	padding: 12px 16px;
	border-radius: var(--aj-radius-sm);
	background: #1a1f2b;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	box-shadow: var(--aj-shadow-md);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--aj-motion) ease, transform var(--aj-motion) ease;
	pointer-events: none;
}

.aj-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.aj-toast--error {
	background: #fdecea;
	color: #b3261e;
}

.aj-form-success {
	color: #1e6b3a;
	background: #e8f5ec;
	border-radius: var(--aj-radius-sm);
	padding: 10px 14px;
}

.aj-form-switch {
	text-align: center;
	color: var(--aj-text-muted);
	font-size: 14px;
	margin: 20px 0 0;
}

.aj-form-switch a {
	color: var(--aj-brand);
	font-weight: 600;
}

.aj-login-form__forgot {
	text-align: right;
	margin: -8px 0 20px;
	font-size: 13px;
}

.aj-login-form__forgot a {
	color: var(--aj-brand);
}

/* The login/registration pages replaced a sign-in modal — this keeps
 * their arrival feeling just as immediate/modern without one. */
@media (prefers-reduced-motion: no-preference) {
	.aj-login-form,
	.aj-registration-form {
		animation: aj-hero-fade-up 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

/* ---------------------------------------------------------------------
 * Dashboard shell — left-hand section navigation beside a content column.
 * Sections are real ?aj_section= URLs (see class-dashboards.php), so the
 * "active" state is just which link matches the current one; there is no
 * tab JavaScript to keep in sync.
 * ------------------------------------------------------------------- */

.aj-dash {
	/* Self-constrained for the same reason as .aj-form — this renders via
	   the aj-dashboard widget directly inside the unconstrained <main>. */
	max-width: 1380px;
	min-height: 720px;
	margin: 28px auto 72px;
	padding: 0;
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
	background: #f7f8fb;
	border: 1px solid var(--aj-border);
	border-radius: 18px;
	box-shadow: 0 12px 40px rgba(16, 20, 28, 0.07);
	overflow: clip;
}

.aj-dash__sidebar {
	position: sticky;
	top: calc(var(--aj-sticky-top) + 20px);
	align-self: start;
	max-height: calc(100vh - var(--aj-sticky-top) - 40px);
	overflow-y: auto;
	border: 0;
	border-right: 1px solid var(--aj-border);
	border-radius: 0;
	background: #f7f8fb;
	padding: 24px 14px;
}

.aj-dash__main {
	min-width: 0;
	padding: 30px 34px 44px;
	background: var(--aj-bg);
}

.aj-dash__identity {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 8px 18px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--aj-border);
}

/* Same flexbox trap as .aj-overview__item: the text column has no width
 * of its own, so a flex item won't shrink below its content's natural
 * width by default — an email standing in for a display name (no spaces
 * to wrap on) just overflowed the sidebar instead of wrapping/truncating. */
.aj-dash__identity > div {
	min-width: 0;
}

.aj-dash__identity strong {
	display: block;
	font-size: 14px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.aj-dash__identity span {
	color: var(--aj-text-muted);
	font-size: 12px;
}

.aj-dash__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.aj-dash-nav__group + .aj-dash-nav__group {
	margin-top: 20px;
}

.aj-dash-nav__group-label {
	display: block;
	padding: 0 10px 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aj-text-muted);
}

.aj-dash-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aj-dash-nav__link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 38px;
	padding: 8px 10px;
	border-radius: var(--aj-radius-sm);
	color: var(--aj-text);
	font-size: 14px;
	font-weight: 500;
	transition: background var(--aj-motion) ease, color var(--aj-motion) ease;
}

.aj-dash-nav__link:hover {
	background: var(--aj-bg-subtle);
}

.aj-dash-nav__link.is-active {
	background: var(--aj-brand-light);
	color: var(--aj-brand-dark);
	font-weight: 700;
}

.aj-dash-nav__icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: currentColor;
}

.aj-dash-nav__icon svg {
	width: 18px;
	height: 18px;
}

.aj-dash-nav__count {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	background: var(--aj-bg-subtle);
	color: var(--aj-text-muted);
	border-radius: 999px;
	padding: 1px 8px;
}

.aj-dash-nav__link.is-active .aj-dash-nav__count {
	background: var(--aj-bg);
	color: var(--aj-brand-dark);
}

.aj-dash__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--aj-border);
}

.aj-dash__header h1 {
	font-size: 25px;
	font-weight: 800;
	letter-spacing: 0;
	margin: 0;
}

.aj-dash__header p {
	color: var(--aj-text-muted);
	font-size: 14px;
	margin: 0;
}

.aj-dash__header p:has(.aj-button) {
	margin-left: auto;
}

.aj-dash-card {
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	background: var(--aj-bg);
	padding: 20px;
	margin-bottom: 16px;
	box-shadow: var(--aj-shadow-sm);
}

/* A section like Subscription (class-subscriptions.php) is just a plain
 * <h3> + <p> + <form> dropped straight into the card with nothing
 * setting their spacing, so the browser's own large default heading
 * margins made for an oddly big gap before the text below it. */
.aj-dash-card h3 {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 700;
}

.aj-dash-card > p {
	margin: 0 0 8px;
}

.aj-dash-card > p:last-of-type {
	margin-bottom: 16px;
}

.aj-dash-card--tight {
	padding: 12px 16px;
}

.aj-dash-card--split {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	background: linear-gradient(120deg, #f4f8ff 0%, #ffffff 68%);
	border-color: #dce8fa;
}

.aj-dash-card__body {
	flex: 1 1 260px;
	min-width: 0;
}

.aj-dash-card__title {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 12px;
}

.aj-dash-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
}

.aj-dash__main > .aj-dash-actions {
	margin-bottom: 20px;
}

.aj-dash .aj-button,
.aj-dash button[type="submit"] {
	min-height: 40px;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.2;
}

/* Completion meter ---------------------------------------------------- */

.aj-completion {
	text-align: center;
	flex-shrink: 0;
}

.aj-completion__ring {
	position: relative;
	width: 112px;
	height: 112px;
	margin: 0 auto;
}

.aj-completion__ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.aj-completion__track,
.aj-completion__value {
	fill: none;
	stroke-width: 10;
}

.aj-completion__track {
	stroke: var(--aj-bg-subtle);
}

.aj-completion__value {
	stroke: var(--aj-brand);
	stroke-linecap: round;
	transition: stroke-dashoffset 600ms ease;
}

.aj-completion__pct {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 23px;
	font-weight: 800;
}

.aj-completion__caption {
	color: var(--aj-text-muted);
	font-size: 13px;
	margin: 10px 0 0;
}

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

/* "What's left" lists -------------------------------------------------- */

.aj-dash-missing + .aj-dash-missing {
	margin-top: 16px;
}

.aj-dash-missing h3 {
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 8px;
}

.aj-dash-missing--required h3 {
	color: #b3261e;
}

.aj-dash-missing ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aj-dash-missing li {
	font-size: 13px;
	border: 1px solid var(--aj-border);
	border-radius: 999px;
	padding: 4px 12px;
	color: var(--aj-text-muted);
}

.aj-dash-missing--required li {
	border-color: #f3c7c3;
	background: #fdecea;
	color: #b3261e;
}

.aj-dash-missing li a {
	color: inherit;
}

.aj-dash-complete {
	color: #1e6b3a;
	background: #e8f5ec;
	border-radius: var(--aj-radius-sm);
	padding: 12px 16px;
	margin: 0;
	font-size: 14px;
}

.aj-dash-company-switcher {
	display: flex;
	align-items: center;
	gap: 12px;
}

.aj-dash-company-switcher label {
	font-size: 13px;
	font-weight: 600;
	margin: 0;
}

/* Forms inside the dashboard sit flush in their card ------------------- */

.aj-dash-card .aj-form {
	max-width: none;
	margin: 0;
	padding: 0;
}

.aj-dash-card .aj-form-section {
	padding: 0 0 20px;
	margin: 0 0 20px;
	border: 0;
	border-bottom: 1px solid var(--aj-border);
	border-radius: 0;
}

.aj-dash-card .aj-form-section:last-of-type {
	padding-bottom: 0;
	margin-bottom: 20px;
	border-bottom: 0;
}

.aj-dash-card .aj-form-section legend {
	padding: 0;
	margin-bottom: 16px;
	font-size: 16px;
}

.aj-dash-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.aj-dash-card select,
.aj-dash-card textarea {
	width: 100%;
	min-height: 42px;
	border-color: #dfe4ec;
	border-radius: 8px;
	background: #fff;
}

.aj-dash-card .aj-message-screen {
	margin: 8px auto;
	padding: 28px 24px;
	background: transparent;
	border: 0;
}

.aj-dash-card .aj-message-screen__icon {
	width: 48px;
	height: 48px;
	margin-bottom: 14px;
}

/* Candidate CV upload -------------------------------------------------- */

.aj-profile-file {
	display: grid;
	gap: 10px;
}

.aj-profile-file__label {
	display: block;
	font-weight: 700;
}

.aj-profile-file__picker {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.aj-form input.aj-profile-file__input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.aj-form input.aj-profile-file__input[type="file"]:focus-visible + .aj-profile-file__button {
	outline: 3px solid color-mix(in srgb, var(--aj-brand) 30%, transparent);
	outline-offset: 3px;
}

.aj-form .aj-profile-file__button {
	display: inline-flex;
	width: auto;
	margin: 0;
	flex-shrink: 0;
}

.aj-profile-file__icon,
.aj-profile-file__current > span:first-child {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.aj-profile-file__icon svg,
.aj-profile-file__current svg {
	width: 18px;
	height: 18px;
}

.aj-profile-file__filename {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-profile-file__current {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: fit-content;
	font-size: 14px;
	font-weight: 600;
}

.aj-profile-file__builder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 8px;
	padding: 16px;
	border: 1px solid #dce8fa;
	border-radius: 10px;
	background: #f4f8ff;
}

.aj-profile-file__builder > div {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.aj-profile-file__builder strong {
	font-size: 14px;
}

.aj-profile-file__builder span {
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-profile-file__builder .aj-button {
	flex-shrink: 0;
}

.aj-profile-file__photo-layout {
	display: flex;
	align-items: center;
	gap: 16px;
}

.aj-profile-file--photo {
	margin-bottom: 24px;
}

.aj-profile-file__photo-controls {
	display: grid;
	gap: 4px;
	min-width: 0;
	flex: 1;
}

.aj-profile-file--photo .aj-profile-avatar-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--aj-border);
	border-radius: 50%;
	background: var(--aj-bg-subtle);
	flex-shrink: 0;
}

.aj-profile-file--photo .aj-profile-avatar-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aj-profile-avatar-preview__empty {
	display: inline-flex;
	color: var(--aj-text-muted);
}

.aj-profile-avatar-preview__empty svg {
	width: 28px;
	height: 28px;
}

.aj-form .aj-profile-form__actions {
	display: flex;
	align-items: center;
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--aj-border);
}

/* Employer referrals -------------------------------------------------- */

.aj-referral-panel {
	display: grid;
	gap: 20px;
}

.aj-referral-panel__intro {
	max-width: 760px;
	margin: 0;
	color: var(--aj-text-muted);
}

.aj-referral-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	overflow: hidden;
}

.aj-referral-summary__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 72px;
	padding: 16px 18px;
}

.aj-referral-summary__item + .aj-referral-summary__item {
	border-left: 1px solid var(--aj-border);
}

.aj-referral-summary__item > span {
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-referral-summary__item code {
	padding: 5px 9px;
	border-radius: 6px;
	background: var(--aj-bg-subtle);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.aj-referral-summary__item strong {
	font-size: 24px;
	line-height: 1;
}

.aj-referral-share {
	display: grid;
	gap: 7px;
}

.aj-referral-share > label {
	font-size: 13px;
	font-weight: 700;
}

.aj-referral-share__control {
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 4px;
	border: 1px solid #dfe4ec;
	border-radius: 10px;
	background: var(--aj-bg);
	transition: border-color var(--aj-motion) ease, box-shadow var(--aj-motion) ease;
}

.aj-referral-share__control:focus-within {
	border-color: var(--aj-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--aj-brand) 14%, transparent);
}

.aj-dash-card .aj-referral-share__control input {
	min-width: 0;
	min-height: 40px;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	outline: 0;
	font-size: 14px;
	color: var(--aj-text-muted);
	background: transparent;
}

.aj-referral-share__control .aj-button {
	min-width: 108px;
	min-height: 40px;
	border-radius: 7px;
	justify-content: center;
	flex-shrink: 0;
}

.aj-referral-share__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.aj-referral-empty {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 8px;
	background: var(--aj-bg-subtle);
	color: var(--aj-text-muted);
}

.aj-referral-empty__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: var(--aj-brand);
	flex-shrink: 0;
}

.aj-referral-empty__icon svg {
	width: 20px;
	height: 20px;
}

.aj-referral-empty strong {
	color: var(--aj-text);
	font-size: 14px;
}

.aj-referral-empty > span:last-child {
	font-size: 13px;
}

@media (max-width: 620px) {
	.aj-referral-summary {
		grid-template-columns: 1fr;
	}

	.aj-referral-summary__item + .aj-referral-summary__item {
		border-top: 1px solid var(--aj-border);
		border-left: 0;
	}

	.aj-referral-share__control,
	.aj-referral-empty {
		align-items: stretch;
		flex-direction: column;
	}

	.aj-referral-share__control {
		gap: 4px;
	}
}

@media (max-width: 620px) {
	.aj-profile-file__picker,
	.aj-profile-file__builder {
		align-items: flex-start;
		flex-direction: column;
	}

	.aj-profile-file__filename {
		width: 100%;
	}

	.aj-profile-file__photo-layout {
		align-items: flex-start;
	}

}

.aj-profile-form__section-title {
	font-size: 16px;
	font-weight: 700;
	margin: 28px 0 12px;
	padding-top: 20px;
	border-top: 1px solid var(--aj-border);
}

.aj-profile-form__section-title:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.aj-field-required {
	color: #b3261e;
	margin-left: 2px;
}

.aj-profile-avatar-preview {
	display: block;
	margin-bottom: 8px;
}

.aj-profile-avatar-preview img {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
}

/* Repeatable rows (experience / education) ----------------------------- */

.aj-repeater {
	margin-bottom: 24px;
}

.aj-repeater__label {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 12px;
}

.aj-repeater__row {
	position: relative;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	padding: 18px 18px 4px;
	margin-bottom: 12px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

.aj-repeater__field--notes {
	grid-column: 1 / -1;
}

.aj-repeater__remove {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: 0;
	color: var(--aj-text-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: var(--aj-radius-sm);
}

.aj-repeater__remove:hover {
	background: var(--aj-bg-subtle);
	color: #b3261e;
}

@media (max-width: 900px) {
	.aj-dash {
		/* minmax(0, 1fr), not 1fr: a 1fr track still takes an automatic
		   minimum from its content, so the nowrap nav list below (min-content
		   ~630px) forced the track open to ~660px on a phone. .aj-dash clips
		   its overflow, so the result wasn't a scrollbar — half the sidebar
		   was simply cut off and unreachable. */
		grid-template-columns: minmax(0, 1fr);
		margin: 16px;
		min-height: 0;
	}

	.aj-dash__sidebar {
		position: static;
		max-height: none;
		overflow: visible;
		border-right: 0;
		border-bottom: 1px solid var(--aj-border);
		padding: 18px;
	}

	/* Same reason as the grid track: every ancestor between the track and
	   the scroll container has to be allowed to be narrower than its
	   content, or the min-content width just propagates back up. */
	.aj-dash__sidebar,
	.aj-dash-nav,
	.aj-dash-nav__group,
	.aj-dash-nav ul {
		min-width: 0;
	}

	.aj-dash-nav ul {
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		overflow-x: auto;
		padding-bottom: 4px;
	}

	/* Flex items shrink before they overflow, which squashed the pills into
	   the row instead of letting it scroll. */
	.aj-dash-nav ul > li {
		flex: 0 0 auto;
	}

	.aj-dash-nav__group + .aj-dash-nav__group {
		margin-top: 12px;
	}

	.aj-dash-nav__link {
		white-space: nowrap;
	}

	.aj-dash__main {
		padding: 26px 24px 36px;
	}

	.aj-repeater__row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.aj-dash {
		margin: 0;
		border-right: 0;
		border-left: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.aj-dash__main {
		padding: 22px 16px 32px;
	}

	.aj-dash__header {
		align-items: flex-start;
	}

	.aj-dash__header h1 {
		font-size: 22px;
	}

	.aj-dash-card {
		padding: 16px;
	}

	.aj-dash-card--split {
		align-items: flex-start;
		gap: 20px;
	}

	.aj-stat-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aj-stat-card:nth-child(2n) {
		border-right: 0;
	}

	.aj-stat-card:nth-child(n + 3) {
		border-top: 1px solid var(--aj-border);
	}

	.aj-dash-card:has(> .aj-dashboard-table),
	.aj-dash-card:has(> .aj-table) {
		overflow-x: auto;
	}

	.aj-dashboard-table,
	.aj-dash-card > .aj-table {
		min-width: 680px;
	}

}

.aj-dashboard {
	/* Same self-constraint reasoning as .aj-form above — rendered via the
	   aj-dashboard Elementor widget directly inside the unconstrained <main>. */
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: 48px 24px 88px;
}

.aj-dashboard-header {
	margin-bottom: 32px;
}

.aj-dashboard-header h1 {
	font-size: 28px;
	font-weight: 800;
	margin: 0 0 4px;
}

.aj-dashboard-header p {
	color: var(--aj-text-muted);
	margin: 0;
}

.aj-dashboard-section {
	margin-bottom: 40px;
}

.aj-dashboard-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.aj-dashboard-section__head h2 {
	font-size: 18px;
	font-weight: 800;
	margin: 0;
}

.aj-stat-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0;
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	overflow: hidden;
}

.aj-dash-card:has(> .aj-stat-cards) {
	padding: 0;
	border: 0;
	box-shadow: none;
}

.aj-dash-card:has(> .aj-stat-cards) > .aj-dash-actions {
	margin-top: 12px;
}

.aj-stat-card {
	position: relative;
	overflow: hidden;
	border: 0;
	border-right: 1px solid var(--aj-border);
	border-radius: 0;
	padding: 18px 20px;
	background: var(--aj-bg);
	transition: background var(--aj-motion) ease;
}

.aj-stat-card:hover {
	transform: none;
	box-shadow: none;
	background: #f8faff;
}

.aj-stat-card::before {
	display: none;
}

.aj-stat-card:last-child {
	border-right: 0;
}

.aj-stat-card__value {
	display: block;
	font-size: 25px;
	font-weight: 800;
	color: var(--aj-text);
	margin-bottom: 4px;
}

.aj-stat-card__label {
	color: var(--aj-text-muted);
	font-size: 13px;
}

.aj-dashboard-card {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
	overflow: hidden;
}

.aj-dashboard-card__empty {
	padding: 32px 24px;
	text-align: center;
	color: var(--aj-text-muted);
}

.aj-dashboard-table {
	width: 100%;
	border-collapse: collapse;
}

.aj-dashboard-table th {
	text-align: left;
	padding: 12px 16px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--aj-text-muted);
	background: #f7f8fb;
	border-bottom: 1px solid var(--aj-border);
}

.aj-dashboard-table td {
	text-align: left;
	padding: 14px 16px;
	border-bottom: 1px solid var(--aj-border);
	font-size: 14px;
	vertical-align: middle;
}

.aj-dash-card > .aj-dashboard-table,
.aj-dash-card > .aj-table {
	margin: -4px 0;
}

.aj-dash-card table a {
	font-weight: 600;
}

.aj-dashboard-table tbody tr {
	transition: background-color var(--aj-motion) ease;
}

.aj-dashboard-table tbody tr:last-child td {
	border-bottom: 0;
}

.aj-dashboard-table tbody tr:hover {
	background: var(--aj-bg-subtle);
}

.aj-status-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg-subtle);
	color: var(--aj-text-muted);
}

.aj-status-badge--publish {
	background: #e6f6ec;
	color: #1e6b3a;
}

.aj-status-badge--draft {
	background: var(--aj-accent-light);
	color: var(--aj-accent);
}

.aj-pricing-packages {
	max-width: var(--aj-content-max);
	margin: 0 auto;
}

.aj-pricing-packages__header {
	max-width: 640px;
	margin: 0 auto 40px;
	text-align: center;
}

.aj-package-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 0;
	margin: 0;
}

@media (max-width: 900px) {
	.aj-package-list {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin: 0 auto;
	}
}

.aj-package-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-sm);
	overflow: hidden;
	transition: transform var(--aj-motion) ease, box-shadow var(--aj-motion) ease;
}

@media (min-width: 901px) {
	.aj-package-card--highlighted {
		transform: scale(1.04);
	}
}

.aj-package-card--highlighted {
	border-color: var(--aj-brand);
	box-shadow: var(--aj-shadow-lg);
}

.aj-package-card__badge {
	position: absolute;
	top: 16px;
	right: 16px;
	background: var(--aj-brand);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 12px;
	border-radius: 999px;
}

.aj-package-card__head {
	padding: 24px 24px 20px;
	border-bottom: 1px solid var(--aj-border);
}

.aj-package-card--highlighted .aj-package-card__head {
	background: var(--aj-brand-light);
}

.aj-package-card__name {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 12px;
}

.aj-package-card__price {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
}

.aj-package-card__price .amount {
	font-weight: 800;
}

.aj-package-card__billed {
	color: var(--aj-text-muted);
	font-size: 13px;
	margin: 4px 0 0;
}

.aj-package-card__features {
	list-style: none;
	margin: 0;
	padding: 20px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.aj-package-card__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-package-card__check {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--aj-brand);
}

.aj-package-card__footer {
	padding: 0 24px 24px;
}

.aj-package-card__cta {
	width: 100%;
}

.aj-social-login {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--aj-border);
}

.aj-social-login__label {
	font-size: 13px;
	color: var(--aj-text-muted);
	margin-bottom: 8px;
}

.aj-social-login .aj-button--social {
	margin-right: 8px;
}

/* ---------------------------------------------------------------------
 * FAQ accordion (native <details>/<summary>, no JS)
 * ------------------------------------------------------------------- */

.aj-faq__item {
	border-bottom: 1px solid var(--aj-border);
	padding: 20px 0;
}

.aj-faq__question {
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.aj-faq__question::-webkit-details-marker {
	display: none;
}

.aj-faq__question::after {
	content: "+";
	font-size: 20px;
	color: var(--aj-brand);
	flex-shrink: 0;
	margin-left: 16px;
}

.aj-faq__item[open] .aj-faq__question::after {
	content: "\2212";
}

.aj-faq__answer {
	color: var(--aj-text-muted);
	margin: 14px 0 0;
}

.aj-faq-section__header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
}

.aj-faq-section__subtitle {
	color: var(--aj-text-muted);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0 0 8px;
}

.aj-faq-section__description {
	color: var(--aj-text-muted);
	margin: 0 0 24px;
}

.aj-faq-section__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 48px;
	text-align: left;
}

@media (min-width: 768px) {
	.aj-faq-section__columns {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Homepage FAQ teaser (AJ: FAQ (Homepage Teaser) widget) — a compact,
 * asymmetric split: a sticky intro column beside a short accordion,
 * distinct from the full two-column FAQ page layout above.
 * ------------------------------------------------------------------- */

.aj-faq-home {
	width: 100%;
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: var(--aj-section-padding, 88px) 24px;
}

.aj-faq-home__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	text-align: left;
}

@media (min-width: 992px) {
	.aj-faq-home__grid {
		grid-template-columns: 1fr 1.4fr;
		align-items: start;
	}

	.aj-faq-home__intro {
		position: sticky;
		top: calc(var(--aj-sticky-top) + 24px);
	}
}

.aj-faq-home__badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 5px 14px;
	margin-bottom: 16px;
	border: 1px solid var(--aj-border);
	border-radius: 999px;
	background: var(--aj-bg);
	color: var(--aj-text-muted);
	font-size: 12px;
	font-weight: 600;
	box-shadow: var(--aj-shadow-sm);
}

.aj-faq-home__heading {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 12px;
}

.aj-faq-home__description {
	color: var(--aj-text-muted);
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
}

.aj-faq-home__cta {
	display: inline-flex;
}

.aj-faq-home .aj-faq__item:first-child {
	padding-top: 0;
}

/* ---------------------------------------------------------------------
 * Custom select (progressive enhancement of native <select> elements —
 * see assets/js/custom-select.js). The wrapper inherits whatever class
 * the original <select> carried, so it drops into existing contextual
 * styling (search bar, sort toolbar, form fields) unchanged; the trigger
 * itself carries no box styling of its own so it doesn't double it up.
 * ------------------------------------------------------------------- */

.aj-custom-select {
	position: relative;
	display: block;
}

.aj-custom-select.is-disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.aj-custom-select.is-invalid {
	outline: 1px solid #b3261e;
	outline-offset: 2px;
	border-radius: var(--aj-radius-sm);
}

.aj-custom-select__native {
	display: none;
}

.aj-custom-select__trigger {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.aj-custom-select.is-disabled .aj-custom-select__trigger {
	cursor: not-allowed;
}

.aj-custom-select__trigger:focus-visible {
	outline: 2px solid var(--aj-brand);
	outline-offset: 2px;
	border-radius: var(--aj-radius-sm);
}

.aj-custom-select__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aj-custom-select__value.is-placeholder {
	color: var(--aj-text-muted);
}

.aj-custom-select__chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: inline-flex;
	color: var(--aj-text-muted);
	transition: transform var(--aj-motion) ease;
}

.aj-custom-select[data-open="true"] .aj-custom-select__chevron {
	transform: rotate(180deg);
}

.aj-custom-select__listbox {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 100%;
	max-height: 280px;
	overflow-y: auto;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	box-shadow: var(--aj-shadow-md);
	padding: 6px;
	margin: 0;
	list-style: none;
	z-index: 60;
}

.aj-custom-select[data-open="true"] .aj-custom-select__listbox {
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	.aj-custom-select[data-open="true"] .aj-custom-select__listbox {
		animation: aj-select-pop-in 160ms ease both;
	}
}

@keyframes aj-select-pop-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.aj-custom-select__option {
	padding: 8px 10px;
	border-radius: var(--aj-radius-sm);
	font-size: 14px;
	color: var(--aj-text);
	cursor: pointer;
}

.aj-custom-select__option.is-highlighted {
	background: var(--aj-brand-light);
}

.aj-custom-select__option[aria-selected="true"] {
	font-weight: 600;
	color: var(--aj-brand);
}

.aj-custom-select__option[aria-disabled="true"] {
	color: var(--aj-text-muted);
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 * Coming soon placeholder
 * ------------------------------------------------------------------- */

.aj-coming-soon {
	text-align: center;
	padding-top: 120px;
	padding-bottom: 120px;
}

.aj-coming-soon__heading {
	font-size: 32px;
	font-weight: 800;
	margin: 0 0 12px;
}

.aj-coming-soon__description {
	color: var(--aj-text-muted);
	font-size: 16px;
}

/* ---------------------------------------------------------------------
 * Notices (email-confirmation banner, etc.)
 * ------------------------------------------------------------------- */

.aj-notice {
	border-radius: var(--aj-radius);
	padding: 16px 20px;
	margin-bottom: 24px;
}

.aj-notice--warning {
	background: #fff8e6;
	border: 1px solid #f2d98a;
}

.aj-notice--success {
	background: #e8f5ec;
	border: 1px solid #a8d8b9;
	color: #1e6b3a;
}

.aj-notice p {
	margin: 0 0 10px;
}

.aj-notice p:only-child {
	margin: 0;
}

.aj-notice form {
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Applicant cards + status stepper ("who viewed" pipeline)
 * ------------------------------------------------------------------- */

.aj-applicant-card {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	padding: 20px;
	margin-bottom: 20px;
	background: var(--aj-bg);
	transition: box-shadow var(--aj-motion) ease, border-color var(--aj-motion) ease;
}

.aj-applicant-card:hover {
	box-shadow: var(--aj-shadow-md);
	border-color: transparent;
}

.aj-applicant-card__meta {
	color: var(--aj-text-muted);
	font-size: 14px;
	margin: 4px 0;
}

.aj-applicant-card__cover-letter {
	background: var(--aj-bg-subtle);
	border-radius: var(--aj-radius-sm);
	padding: 12px 16px;
	font-size: 14px;
}

.aj-status-stepper {
	display: flex;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	gap: 4px;
}

.aj-status-stepper__step {
	flex: 1;
	text-align: center;
	border-bottom: 3px solid var(--aj-border);
	padding-bottom: 8px;
	transition: border-color var(--aj-motion) ease;
}

.aj-status-stepper__step a {
	font-size: 12px;
	font-weight: 600;
	color: var(--aj-text-muted);
}

.aj-status-stepper__step--done {
	border-color: var(--aj-brand);
}

.aj-status-stepper__step--done a {
	color: var(--aj-brand);
}

.aj-status-stepper__step--current a {
	color: var(--aj-text);
	font-weight: 800;
}

/* ---------------------------------------------------------------------
 * Resume / cover letter builder + print views
 * ------------------------------------------------------------------- */

.aj-form--wide {
	max-width: 720px;
}

.aj-field-note {
	color: var(--aj-text-muted);
	font-size: 12px;
	margin: 4px 0 0;
}

.aj-cover-letter-print {
	max-width: 720px;
	margin: 40px auto;
	padding: 0 24px;
	font-size: 15px;
	line-height: 1.6;
}

/* .aj-resume-print itself is styled further down, alongside the live
 * preview rules it shares its inner markup with. */

@media print {
	.aj-site-header,
	.aj-site-footer,
	.aj-button {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------
 * Resume builder: wizard on the left, a real A4 sheet on the right.
 *
 * The .aj-resume-doc block below is the document itself — the same markup
 * and the same physical dimensions (210x297mm) whether it is being previewed
 * in the builder, shown on the print page, or sent to the printer. The
 * builder only scales it down with a transform to fit its column, so the
 * preview is literally the PDF.
 * ------------------------------------------------------------------- */

.aj-resume-builder {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: 48px 24px 88px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: 48px;
	align-items: start;
}

@media (max-width: 1100px) {
	/* minmax(0, 1fr), not 1fr: a grid item will not shrink below its
	   content by default, and the content here is a 210mm sheet — which
	   pushed the whole builder wider than a phone screen until the sheet
	   had a column it could actually be scaled down into. */
	.aj-resume-builder {
		grid-template-columns: minmax(0, 1fr);
	}
}

.aj-form--builder.aj-form {
	max-width: none;
	margin: 0;
	padding: 0;
}

.aj-repeater__row--single {
	grid-template-columns: 1fr;
	padding: 8px 40px 8px 16px;
}

.aj-repeater__row--single .aj-repeater__field {
	margin-bottom: 0;
}

/* Without JS every step renders stacked and the plain Save button at the
 * bottom submits everything — the wizard only kicks in once
 * resume-builder.js adds .is-ready to the root. */
.aj-resume-builder.is-ready .aj-resume-builder__steps {
	overflow: hidden;
	/* Keeps the Back/Next row from leaping up the page when a long step
	   (Contact) is replaced by a short one (Summary). */
	min-height: 440px;
	transition: height var(--aj-motion) ease;
}

.aj-resume-builder.is-ready .aj-resume-step {
	display: none;
}

.aj-resume-builder.is-ready .aj-resume-step.is-active {
	display: block;
}

.aj-resume-builder.is-ready .aj-resume-step--forward.is-active {
	animation: aj-resume-step-in var(--aj-motion) ease;
}

.aj-resume-builder.is-ready .aj-resume-step--backward.is-active {
	animation: aj-resume-step-in-reverse var(--aj-motion) ease;
}

@keyframes aj-resume-step-in {
	from { opacity: 0; transform: translateX(28px); }
	to { opacity: 1; transform: none; }
}

@keyframes aj-resume-step-in-reverse {
	from { opacity: 0; transform: translateX(-28px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.aj-resume-builder.is-ready .aj-resume-step.is-active {
		animation: none;
	}

	.aj-resume-builder.is-ready .aj-resume-builder__steps {
		transition: none;
	}
}

.aj-resume-step__heading {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 6px;
}

.aj-resume-builder__skill-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 0 0 12px;
}

.aj-resume-builder__skill-list li {
	background: var(--aj-brand-light);
	color: var(--aj-brand-dark);
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
}

.aj-resume-builder__nav {
	display: none;
}

.aj-resume-builder.is-ready .aj-resume-builder__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid var(--aj-border);
}

.aj-resume-builder__dots {
	display: flex;
	gap: 8px;
}

.aj-resume-builder__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--aj-border);
	cursor: pointer;
	transition: background var(--aj-motion) ease, transform var(--aj-motion) ease;
}

.aj-resume-builder__dot.is-done {
	background: var(--aj-brand-light);
}

.aj-resume-builder__dot.is-active {
	background: var(--aj-brand);
	transform: scale(1.3);
}

.aj-resume-builder__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.aj-resume-builder__save-status {
	color: var(--aj-text-muted);
	font-size: 13px;
	flex: 1;
}

[data-save-submit].is-confirmed,
[data-apply-button].is-confirmed {
	border-color: #15803d;
	background: #15803d;
	color: #fff;
}

/* Photo — the same attachment as the candidate's profile picture. */
.aj-resume-photo-field {
	display: flex;
	gap: 24px;
	align-items: center;
	max-width: 1040px;
	margin: 0 auto 28px;
	padding: 24px 28px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
}

.aj-resume-photo-field__preview {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--aj-bg-subtle);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.aj-resume-photo-field__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aj-resume-photo-field__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--aj-text-muted);
}

.aj-resume-photo-field__empty[hidden] {
	display: none;
}

.aj-resume-photo-field__empty svg {
	display: block;
	margin: 0;
	width: 28px;
	height: 28px;
}

.aj-resume-photo-field__controls {
	flex: 1;
	min-width: 0;
}

.aj-resume-photo-field__picker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

.aj-form input.aj-resume-photo-field__input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.aj-form input.aj-resume-photo-field__input[type="file"]:focus-visible + .aj-button {
	outline: 3px solid color-mix(in srgb, var(--aj-primary) 30%, transparent);
	outline-offset: 3px;
}

.aj-form .aj-resume-photo-field__picker .aj-button {
	display: inline-flex;
	width: auto;
	margin: 0;
	flex-shrink: 0;
}

.aj-resume-photo-field__filename {
	flex: 1;
	min-width: 0;
	color: var(--aj-text-muted);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aj-resume-photo-field__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--aj-border);
	border-radius: 50%;
	background: transparent;
	color: var(--aj-text-muted);
	cursor: pointer;
	flex-shrink: 0;
}

.aj-resume-photo-field__remove:hover {
	border-color: #b3261e;
	background: #fff7f7;
	color: #b3261e;
}

.aj-resume-photo-field__remove:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--aj-primary) 30%, transparent);
	outline-offset: 2px;
}

.aj-resume-photo-field__remove svg {
	width: 18px;
	height: 18px;
}

.aj-resume-photo-field__remove[hidden] {
	display: none;
}

@media (max-width: 640px) {
	.aj-resume-photo-field {
		align-items: flex-start;
		gap: 16px;
		padding: 20px;
	}

	.aj-resume-photo-field__picker {
		flex-wrap: wrap;
	}

	.aj-resume-photo-field__filename {
		flex-basis: calc(100% - 52px);
	}
}

.aj-resume-photo-field__status {
	display: block;
	font-size: 12px;
	color: var(--aj-text-muted);
	margin-top: 6px;
}

/* Template picker: radios styled as cards. :has() reacts to the native
 * :checked state so this still works with zero JS. */
.aj-resume-template-picker {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}

.aj-resume-template-option {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 1.5px solid var(--aj-border);
	border-radius: var(--aj-radius);
	padding: 14px;
	cursor: pointer;
	transition: border-color var(--aj-motion) ease, box-shadow var(--aj-motion) ease;
}

.aj-resume-template-option:hover {
	border-color: var(--aj-brand);
}

.aj-resume-template-option:has(> input:checked) {
	border-color: var(--aj-brand);
	box-shadow: var(--aj-shadow-sm);
	background: var(--aj-brand-light);
}

.aj-resume-template-option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.aj-resume-template-option__thumb {
	height: 64px;
	border-radius: var(--aj-radius-sm);
	background: #fff;
	border: 1px solid var(--aj-border);
	padding: 7px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.aj-resume-template-option__thumb-head {
	display: block;
	height: 8px;
	width: 55%;
	border-radius: 2px;
	background: var(--aj-brand);
}

.aj-resume-template-option__thumb-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.aj-resume-template-option__thumb-body span {
	display: block;
	height: 3px;
	border-radius: 2px;
	background: var(--aj-border);
}

/* Each thumbnail hints at that layout's actual shape. */
.aj-resume-template-option--arikok .aj-resume-template-option__thumb-head {
	width: 70%;
	background: #33404f;
}

.aj-resume-template-option--eagle .aj-resume-template-option__thumb {
	align-items: center;
}

.aj-resume-template-option--eagle .aj-resume-template-option__thumb-head {
	width: 18px;
	height: 18px;
	border-radius: 50%;
}

.aj-resume-template-option--eagle .aj-resume-template-option__thumb-body {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 4px;
	align-content: start;
}

.aj-resume-template-option--savaneta .aj-resume-template-option__thumb {
	align-items: center;
}

.aj-resume-template-option--savaneta .aj-resume-template-option__thumb-head {
	width: 18px;
	height: 18px;
	border-radius: 50%;
}

.aj-resume-template-option--savaneta .aj-resume-template-option__thumb-body span:nth-child(odd) {
	width: 40%;
	background: var(--aj-brand);
	opacity: 0.5;
}

.aj-resume-template-option__label {
	font-size: 14px;
	font-weight: 700;
}

.aj-resume-template-option__note {
	font-size: 12px;
	color: var(--aj-text-muted);
	line-height: 1.4;
}

.aj-resume-color-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.aj-resume-color-swatch {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--swatch);
	cursor: pointer;
	display: inline-block;
	box-shadow: inset 0 0 0 1px rgba(16, 20, 28, 0.1);
}

.aj-resume-color-swatch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.aj-resume-color-swatch:has(> input:checked)::after {
	content: "";
	position: absolute;
	inset: -4px;
	border: 2px solid var(--swatch);
	border-radius: 999px;
}

/* Final step: copy the finished resume onto the profile. */
.aj-resume-apply {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg-subtle);
	padding: 20px;
	margin-top: 24px;
}

.aj-resume-apply h3 {
	margin: 0 0 8px;
	font-size: 16px;
}

.aj-resume-apply p {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-resume-apply__checkbox {
	display: block;
	margin-bottom: 12px;
	font-weight: 500;
}

.aj-resume-apply__status {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	color: var(--aj-text-muted);
}

/* -----------------------------------------------------------------
 * The preview column
 * -------------------------------------------------------------- */

.aj-resume-builder__preview {
	position: sticky;
	top: calc(var(--aj-sticky-top) + 16px);
}

.aj-resume-builder__preview-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.aj-resume-builder__preview-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--aj-text-muted);
}

/* JS sets the height to the scaled sheet's height. */
.aj-resume-sheet-frame {
	position: relative;
	overflow: auto;
	max-height: calc(100vh - 140px);
	background: var(--aj-bg-subtle);
	border-radius: var(--aj-radius);
	padding: 0;
}

.aj-resume-sheet-frame .aj-resume-doc,
.aj-resume-sheet-frame .aj-letter-doc {
	box-shadow: var(--aj-shadow-md);
}

/* -----------------------------------------------------------------
 * The document — one A4 sheet, four layouts
 * -------------------------------------------------------------- */

.aj-resume-doc {
	--aj-resume-accent: var(--aj-brand);
	--aj-resume-ink: #1a1d23;
	--aj-resume-muted: #58626f;
	--aj-resume-rule: #dde2e9;
	width: 210mm;
	min-height: 297mm;
	box-sizing: border-box;
	padding: 14mm 15mm;
	background: #fff;
	color: var(--aj-resume-ink);
	font-family: var(--aj-font);
	font-size: 10pt;
	line-height: 1.45;
	transform-origin: top left;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.aj-resume-doc__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8mm;
}

.aj-resume-doc__identity {
	flex: 1;
	min-width: 0;
}

.aj-resume-doc__name {
	margin: 0;
	font-size: 20pt;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--aj-resume-ink);
}

.aj-resume-doc__headline {
	margin: 1.5mm 0 0;
	font-size: 10.5pt;
	color: var(--aj-resume-muted);
}

.aj-resume-doc__contact {
	list-style: none;
	margin: 3mm 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	font-size: 8.5pt;
	color: var(--aj-resume-muted);
	line-height: 1.6;
}

.aj-resume-doc__contact li + li::before {
	content: "·";
	margin: 0 2.5mm;
	color: #b3bbc6;
}

.aj-resume-doc__photo img {
	display: block;
	width: 26mm;
	height: 26mm;
	object-fit: cover;
	border-radius: 1.5mm;
}

.aj-resume-doc__body {
	margin-top: 7mm;
	display: flex;
	flex-direction: column;
}

/* Single-column by default: the wrappers only become real boxes in the
 * layouts that actually place them side by side, so the DOM order stays
 * linear for applicant tracking systems either way. */
.aj-resume-doc__main,
.aj-resume-doc__aside {
	display: contents;
}

.aj-resume-doc__section {
	margin-top: 6mm;
	break-inside: avoid;
}

/* Only the document's very first section starts flush. Scoped to the main
 * wrapper because the aside's sections are siblings of it in the single
 * column layouts — a bare :first-child would zero the gap above Skills. */
.aj-resume-doc__main > .aj-resume-doc__section:first-child {
	margin-top: 0;
}

.aj-resume-doc__section h2 {
	margin: 0 0 2.5mm;
	font-size: 9pt;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--aj-resume-accent);
}

.aj-resume-doc__content p {
	margin: 0;
}

.aj-resume-doc__entry {
	margin-bottom: 4mm;
}

.aj-resume-doc__entry:last-child {
	margin-bottom: 0;
}

.aj-resume-doc__entry-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 4mm;
}

.aj-resume-doc__entry-title {
	font-weight: 700;
}

.aj-resume-doc__entry-meta {
	flex-shrink: 0;
	font-size: 8.5pt;
	color: var(--aj-resume-muted);
	white-space: nowrap;
}

.aj-resume-doc__entry-sub {
	color: var(--aj-resume-muted);
	font-size: 9.5pt;
}

.aj-resume-doc__content .aj-resume-doc__entry-text {
	margin: 1.5mm 0 0;
}

.aj-resume-doc__bullets {
	margin: 1.5mm 0 0;
	padding-left: 4.5mm;
}

.aj-resume-doc__bullets li {
	margin-bottom: 0.8mm;
}

.aj-resume-doc__tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	line-height: 1.7;
}

.aj-resume-doc__tags li + li::before {
	content: "·";
	margin: 0 2mm;
	color: #b3bbc6;
}

.aj-resume-doc__list {
	margin: 0;
	padding-left: 4.5mm;
}

.aj-resume-doc__list li {
	margin-bottom: 0.8mm;
}

/* --- Malmok: single column, rule-lined headings, photo top right ---- */

.aj-resume-doc[data-template="malmok"] .aj-resume-doc__name {
	display: flex;
	align-items: center;
	gap: 4mm;
}

.aj-resume-doc[data-template="malmok"] .aj-resume-doc__name::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--aj-resume-accent);
	opacity: 0.4;
}

.aj-resume-doc[data-template="malmok"] .aj-resume-doc__contact {
	color: var(--aj-resume-accent);
}

.aj-resume-doc[data-template="malmok"] .aj-resume-doc__section h2 {
	color: var(--aj-resume-ink);
	border-bottom: 1px solid var(--aj-resume-rule);
	padding-bottom: 1.5mm;
}

/* --- Arikok: classic serif ------------------------------------------ */

.aj-resume-doc[data-template="arikok"] {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10.5pt;
}

.aj-resume-doc[data-template="arikok"] .aj-resume-doc__name {
	font-size: 19pt;
	letter-spacing: 0;
}

.aj-resume-doc[data-template="arikok"] .aj-resume-doc__section h2 {
	font-size: 11.5pt;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	color: var(--aj-resume-ink);
	border-bottom: 1px solid var(--aj-resume-rule);
	padding-bottom: 1.5mm;
}

.aj-resume-doc[data-template="arikok"] .aj-resume-doc__entry-meta,
.aj-resume-doc[data-template="arikok"] .aj-resume-doc__contact {
	font-size: 9pt;
}

/* --- Eagle Beach: centred header, skills sidebar -------------------- */

.aj-resume-doc[data-template="eagle"] .aj-resume-doc__header,
.aj-resume-doc[data-template="savaneta"] .aj-resume-doc__header {
	flex-direction: column-reverse;
	align-items: center;
	text-align: center;
	gap: 3mm;
}

.aj-resume-doc[data-template="eagle"] .aj-resume-doc__contact,
.aj-resume-doc[data-template="savaneta"] .aj-resume-doc__contact {
	justify-content: center;
}

.aj-resume-doc[data-template="eagle"] .aj-resume-doc__photo img,
.aj-resume-doc[data-template="savaneta"] .aj-resume-doc__photo img {
	width: 27mm;
	height: 27mm;
	border-radius: 50%;
}

.aj-resume-doc[data-template="eagle"] .aj-resume-doc__body {
	display: grid;
	grid-template-columns: 33% minmax(0, 1fr);
	gap: 0 8mm;
	align-items: start;
}

.aj-resume-doc[data-template="eagle"] .aj-resume-doc__aside {
	display: block;
	grid-column: 1;
	grid-row: 1;
	border-right: 1px solid var(--aj-resume-rule);
	padding-right: 7mm;
}

.aj-resume-doc[data-template="eagle"] .aj-resume-doc__main {
	display: block;
	grid-column: 2;
	grid-row: 1;
}

/* Both columns start level with each other. */
.aj-resume-doc[data-template="eagle"] .aj-resume-doc__aside > .aj-resume-doc__section:first-child {
	margin-top: 0;
}

.aj-resume-doc[data-template="eagle"] .aj-resume-doc__section h2 {
	position: relative;
	padding-left: 4mm;
}

.aj-resume-doc[data-template="eagle"] .aj-resume-doc__section h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 2mm;
	height: 2mm;
	background: var(--aj-resume-accent);
	transform: rotate(45deg);
}

.aj-resume-doc[data-template="eagle"] .aj-resume-doc__tags {
	display: block;
}

.aj-resume-doc[data-template="eagle"] .aj-resume-doc__tags li + li::before {
	content: none;
}

/* --- Savaneta: section names in a left margin column ---------------- */

.aj-resume-doc[data-template="savaneta"] .aj-resume-doc__section {
	display: grid;
	grid-template-columns: 26% minmax(0, 1fr);
	gap: 0 6mm;
	border-top: 1px solid var(--aj-resume-rule);
	padding-top: 4mm;
	margin-top: 4mm;
}

.aj-resume-doc[data-template="savaneta"] .aj-resume-doc__section h2 {
	margin: 0;
}

.aj-resume-doc[data-template="savaneta"] .aj-resume-doc__main > .aj-resume-doc__section:first-child {
	border-top: 0;
	padding-top: 0;
}

/* -----------------------------------------------------------------
 * Cover letter builder
 *
 * The wizard reuses the resume builder's chrome wholesale (.aj-resume-
 * builder, .aj-resume-step, the dots, the sheet frame), so only the parts
 * a letter has and a resume doesn't are defined here: the letter library
 * bar, the per-paragraph word counters and starters, the "before you send"
 * checklist, and the document itself.
 *
 * .aj-letter-doc is the printed letter — same A4 sheet mechanics as
 * .aj-resume-doc above, four layouts carrying the same names as the resume
 * templates so a candidate can send a matching pair. Mirrored by
 * render_document() in class-cover-letter-builder.php and by
 * assets/js/cover-letter-builder.js.
 * -------------------------------------------------------------- */

/* The library bar spans both columns of the builder grid. */
.aj-letter-library {
	grid-column: 1 / -1;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg-subtle);
	padding: 16px 18px;
}

.aj-letter-library__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.aj-letter-library__label {
	font-size: 13px;
	font-weight: 700;
}

.aj-letter-library__select {
	flex: 1 1 260px;
	min-width: 0;
	max-width: 420px;
	padding: 9px 12px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg);
	font: inherit;
	font-size: 14px;
	color: var(--aj-text);
}

.aj-letter-library__spacer {
	flex: 1 1 16px;
}

.aj-letter-library__delete {
	color: #b91c1c;
	border-color: #f0cccc;
}

.aj-letter-library__delete:hover {
	background: #fdf1f1;
	color: #b91c1c;
}

.aj-letter-library .aj-field-note {
	margin: 10px 0 0;
}

.aj-letter-jobpick select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg);
	font: inherit;
	font-size: 15px;
	color: var(--aj-text);
}

/* A paragraph of the letter: label, note, textarea, then the word count
   and the "starting point" button on one line under it. */
.aj-letter-field {
	margin: 0 0 22px;
}

.aj-letter-field__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: -6px;
}

.aj-letter-field__count {
	font-size: 12px;
	color: var(--aj-text-muted);
}

.aj-letter-field__count.is-short,
.aj-letter-field__count.is-long {
	color: var(--aj-accent);
}

.aj-letter-field__count.is-ok {
	color: #15803d;
}

.aj-letter-field__starter {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--aj-brand);
	text-decoration: underline;
	cursor: pointer;
}

.aj-letter-field__starter:hover {
	color: var(--aj-brand-dark);
}

.aj-letter-checklist {
	margin: 24px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg-subtle);
}

.aj-letter-checklist h3 {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
}

.aj-letter-checklist ul {
	list-style: none;
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.aj-letter-checklist li {
	display: flex;
	gap: 8px;
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-letter-checklist li span {
	width: 14px;
	font-weight: 700;
}

.aj-letter-checklist li.is-pass {
	color: var(--aj-text);
}

.aj-letter-checklist li.is-pass span {
	color: #15803d;
}

.aj-letter-send {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 12px 0 4px;
}

.aj-letter-send__status {
	font-size: 13px;
	font-weight: 600;
	color: #15803d;
}

/* -----------------------------------------------------------------
 * The letter itself — one A4 sheet
 * -------------------------------------------------------------- */

.aj-letter-doc {
	--aj-letter-accent: var(--aj-brand);
	--aj-letter-ink: #1a1d23;
	--aj-letter-muted: #58626f;
	--aj-letter-rule: #dde2e9;
	width: 210mm;
	min-height: 297mm;
	box-sizing: border-box;
	padding: 18mm 20mm;
	background: #fff;
	color: var(--aj-letter-ink);
	font-family: var(--aj-font);
	font-size: 10.5pt;
	line-height: 1.6;
	transform-origin: top left;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.aj-letter-doc__header {
	padding-bottom: 4mm;
	border-bottom: 1px solid var(--aj-letter-rule);
}

.aj-letter-doc__name {
	margin: 0;
	font-size: 17pt;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--aj-letter-accent);
}

.aj-letter-doc__contact {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0 5mm;
	margin: 2mm 0 0;
	padding: 0;
	font-size: 9pt;
	color: var(--aj-letter-muted);
}

.aj-letter-doc__meta {
	margin-top: 12mm;
}

.aj-letter-doc__date {
	margin: 0 0 6mm;
	font-size: 9.5pt;
	color: var(--aj-letter-muted);
}

.aj-letter-doc__recipient p {
	margin: 0;
	font-size: 10pt;
}

.aj-letter-doc__subject {
	margin: 8mm 0 0;
	font-weight: 700;
}

.aj-letter-doc__salutation {
	margin: 6mm 0 0;
}

.aj-letter-doc__body p {
	margin: 4mm 0 0;
}

.aj-letter-doc__signoff {
	margin-top: 8mm;
}

.aj-letter-doc__signoff p {
	margin: 0;
}

.aj-letter-doc__signoff .aj-letter-doc__signature {
	margin-top: 6mm;
	font-weight: 700;
}

/* Arikok — classic serif, centred header. */
.aj-letter-doc[data-template="arikok"] {
	font-family: Georgia, "Times New Roman", serif;
}

.aj-letter-doc[data-template="arikok"] .aj-letter-doc__header {
	text-align: center;
	border-bottom-width: 2px;
	border-bottom-color: var(--aj-letter-ink);
}

.aj-letter-doc[data-template="arikok"] .aj-letter-doc__name {
	font-size: 15pt;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aj-letter-ink);
}

.aj-letter-doc[data-template="arikok"] .aj-letter-doc__contact {
	justify-content: center;
}

/* Eagle Beach — colour band across the top, matching the resume's
   centred header treatment. */
.aj-letter-doc[data-template="eagle"] {
	padding-top: 0;
}

.aj-letter-doc[data-template="eagle"] .aj-letter-doc__header {
	margin: 0 -20mm;
	padding: 12mm 20mm 9mm;
	border-bottom: 0;
	background: var(--aj-letter-accent);
	color: #fff;
}

.aj-letter-doc[data-template="eagle"] .aj-letter-doc__name,
.aj-letter-doc[data-template="eagle"] .aj-letter-doc__contact {
	color: #fff;
}

.aj-letter-doc[data-template="eagle"] .aj-letter-doc__contact {
	opacity: 0.88;
}

/* Savaneta — contact details in a left column beside the name. */
.aj-letter-doc[data-template="savaneta"] .aj-letter-doc__header {
	display: grid;
	grid-template-columns: 52mm 1fr;
	align-items: end;
	gap: 8mm;
	border-bottom: 0;
}

.aj-letter-doc[data-template="savaneta"] .aj-letter-doc__contact {
	order: -1;
	flex-direction: column;
	gap: 1mm;
	margin: 0;
	padding-right: 6mm;
	border-right: 2px solid var(--aj-letter-accent);
	text-align: right;
}

.aj-letter-doc[data-template="savaneta"] .aj-letter-doc__name {
	color: var(--aj-letter-ink);
}

/* -----------------------------------------------------------------
 * The print page (?aj_print=1) — the sheet at true size, ready to save
 * -------------------------------------------------------------- */

.aj-resume-print-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 28px 16px 56px;
}

.aj-resume-print-page .aj-resume-doc,
.aj-resume-print-page .aj-letter-doc {
	box-shadow: var(--aj-shadow-lg);
}

.aj-resume-print-page__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
}

.aj-resume-print-page__hint {
	font-size: 13px;
	color: var(--aj-text-muted);
}

/* The print page is a document viewer, not a site page. */
body:has(.aj-resume-print-page) {
	background: #e9edf2;
}

body:has(.aj-resume-print-page) .aj-site-header,
body:has(.aj-resume-print-page) .aj-site-footer {
	display: none;
}

@media (max-width: 900px) {
	/* A4 is wider than a phone: let it scroll rather than overflow. */
	.aj-resume-print-page {
		overflow-x: auto;
		align-items: flex-start;
	}
}

@page {
	size: A4;
	margin: 0;
}

/* Print page: messages instead of a sheet. */
.aj-resume-print-page__notice {
	max-width: 560px;
	margin: 48px auto;
	padding: 28px 28px 24px;
	border: 1px solid #f2d98a;
	border-radius: var(--aj-radius);
	background: #fff8e6;
}

.aj-resume-print-page__notice h2 {
	margin: 0 0 8px;
	font-size: 20px;
}

.aj-resume-print-page__notice ul {
	margin: 8px 0 20px 20px;
}

.aj-resume-print-page__error {
	max-width: 210mm;
	margin: 0 auto 16px;
	padding: 12px 16px;
	border-radius: var(--aj-radius-sm);
	background: #fdecea;
	color: #b3261e;
}

/* CV Builder: CV name, and Download while the CV is still empty. */
.aj-resume-builder__cv {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg-subtle);
}

.aj-resume-builder__cv label {
	margin-bottom: 6px;
}

.aj-resume-builder__cv input {
	width: 100%;
}

.aj-resume-builder__cv .aj-field-note {
	margin: 6px 0 0;
}

.aj-button.is-disabled,
.aj-button[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

.aj-resume-builder__missing {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--aj-accent);
}

.aj-resume-builder__missing:empty {
	display: none;
}

.aj-resume-builder__missing.is-flash {
	font-weight: 700;
}

@media print {
	body {
		background: #fff !important;
	}

	/* Only the CV sheet goes to the printer — not the page's title band,
	   menus or anything else around it (which used to push the sheet onto
	   a second page). */
	body:has(.aj-resume-print-page) * {
		visibility: hidden !important;
	}

	body:has(.aj-resume-print-page) .aj-resume-doc,
	body:has(.aj-resume-print-page) .aj-resume-doc *,
	body:has(.aj-resume-print-page) .aj-resume-print-page__notice,
	body:has(.aj-resume-print-page) .aj-resume-print-page__notice * {
		visibility: visible !important;
	}

	/* Removed from the layout too (hidden alone still takes up room and
	   leaves a blank second page): the site header, the title band, the
	   footer, the admin bar and the page's own toolbar. */
	body:has(.aj-resume-print-page) .aj-site-header,
	body:has(.aj-resume-print-page) .aj-legal-hero,
	body:has(.aj-resume-print-page) .aj-site-footer,
	body:has(.aj-resume-print-page) #wpadminbar,
	body:has(.aj-resume-print-page) .aj-resume-print-page__bar,
	body:has(.aj-resume-print-page) .aj-resume-print-page__error {
		display: none !important;
	}

	body:has(.aj-resume-print-page),
	body:has(.aj-resume-print-page) main,
	body:has(.aj-resume-print-page) .elementor,
	body:has(.aj-resume-print-page) .elementor-element,
	body:has(.aj-resume-print-page) .elementor-widget-container {
		margin: 0 !important;
		padding: 0 !important;
		min-height: 0 !important;
		--padding-top: 0;
		--padding-bottom: 0;
	}

	/* A sheet that failed its check is not printed as a blank page. */
	.aj-resume-print-page[data-print-blocked] .aj-resume-doc {
		display: none !important;
	}

	.aj-resume-print-page {
		display: block !important;
		padding: 0 !important;
	}

	.aj-resume-print-page__bar {
		display: none !important;
	}

	.aj-resume-doc,
	.aj-letter-doc {
		width: 210mm !important;
		min-height: 297mm !important;
		margin: 0 !important;
		box-shadow: none !important;
		transform: none !important;
	}
}
/* ---------------------------------------------------------------------
 * Interview details + messaging (candidate <-> employer, per application)
 * ------------------------------------------------------------------- */

.aj-applicant-card__interview,
.aj-applicant-card__messages {
	margin-top: 16px;
	border-top: 1px solid var(--aj-border);
	padding-top: 14px;
}

.aj-applicant-card__interview summary,
.aj-applicant-card__messages summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
}

.aj-applicant-card__interview form,
.aj-applicant-card__messages form {
	margin-top: 12px;
}

.aj-message-thread__list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 360px;
	overflow-y: auto;
}

.aj-message-bubble {
	max-width: 80%;
	background: var(--aj-bg-subtle);
	border-radius: var(--aj-radius);
	padding: 10px 14px;
	align-self: flex-start;
}

.aj-message-bubble--mine {
	align-self: flex-end;
	background: var(--aj-brand-light);
}

.aj-message-bubble__body {
	margin: 0 0 4px;
	font-size: 14px;
	white-space: pre-wrap;
}

.aj-message-bubble__time {
	color: var(--aj-text-muted);
	font-size: 11px;
}

.aj-message-form textarea {
	width: 100%;
	resize: vertical;
}

.aj-message-thread__empty {
	color: var(--aj-text-muted);
	font-size: 14px;
}

.aj-message-threads {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aj-message-threads__item {
	border-bottom: 1px solid var(--aj-border);
}

.aj-message-threads__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 4px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Privacy & Account dashboard section
 * ------------------------------------------------------------------- */

.aj-dash-card--danger {
	border-color: #f3c6c6;
	background: #fff7f7;
}

.aj-button--danger {
	background: #c0392b;
	color: #fff;
}

.aj-button--danger:hover {
	background: #a5291d;
}

/* ---------------------------------------------------------------------
 * Verified badge, report-this-listing link, recruiter tools panel
 * ------------------------------------------------------------------- */

.aj-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--aj-brand-light);
	color: var(--aj-brand);
	font-size: 12px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: var(--aj-radius-sm);
	vertical-align: middle;
	margin-left: 8px;
}

.aj-verified-badge svg {
	width: 12px;
	height: 12px;
}

.aj-report-link {
	margin: 8px 0 16px;
	font-size: 13px;
}

.aj-report-link summary {
	cursor: pointer;
	color: var(--aj-text-muted);
	text-decoration: underline;
	width: fit-content;
}

.aj-report-form {
	margin-top: 10px;
	max-width: 420px;
}

.aj-recruiter-tools {
	background: var(--aj-bg-subtle);
	border-radius: var(--aj-radius);
	padding: 20px;
}

.aj-candidate-notes {
	margin-top: 16px;
}

.aj-candidate-notes__list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.aj-candidate-notes__item {
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	padding: 10px 14px;
}

.aj-candidate-notes__item p {
	margin: 0 0 6px;
	font-size: 14px;
}

.aj-candidate-notes__meta {
	color: var(--aj-text-muted);
	font-size: 12px;
}

.aj-message-threads__item .aj-dash-nav__count {
	margin-left: 8px;
}


/* ------------------------------------------------------------------
 * Featured listings & companies
 *
 * A featured card gets a blue border, a soft tint and a corner ribbon so
 * it reads as promoted at a glance without changing the card's geometry
 * (no size change, so grid rows stay aligned).
 * ------------------------------------------------------------------ */

.aj-job-card.is-featured,
.aj-company-grid-card.is-featured {
	position: relative;
	border-color: #0070ff;
	box-shadow: 0 0 0 1px #0070ff, var(--aj-shadow-lg);
	background: linear-gradient(180deg, rgba(204, 224, 255, 0.45) 0%, #fff 40%);
}

.aj-featured-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #0070ff;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

/* On a card the ribbon pins to the top-left corner, clear of the heart. */
.aj-job-card.is-featured > .aj-featured-badge,
.aj-company-grid-card.is-featured > .aj-featured-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
}

/* The company card is centre-aligned and its logo sits at the top, so the
   ribbon needs the content pushed down rather than overlapping it. */
.aj-company-grid-card.is-featured {
	padding-top: 44px;
}

.aj-job-card.is-featured {
	padding-top: 44px;
}

.aj-job-single__title .aj-featured-badge {
	vertical-align: middle;
	margin-left: 10px;
}

/* ------------------------------------------------------------------
 * Verified candidate badge (100% complete profile)
 * ------------------------------------------------------------------ */

.aj-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #0a7d3f;
	background: #e7f6ed;
	border-radius: 999px;
	padding: 3px 10px 3px 7px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	vertical-align: middle;
	white-space: nowrap;
}

.aj-verified-badge svg {
	flex-shrink: 0;
}

.aj-verified-badge--sm {
	font-size: 11px;
	padding: 2px 8px 2px 6px;
}

.aj-verified-badge--sm span {
	/* The label is redundant beside a name in a dense list — the tick and
	   its title attribute carry the meaning. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.aj-candidate-profile__name .aj-verified-badge {
	margin-left: 10px;
}

.aj-company-grid-card__name .aj-verified-badge {
	margin-left: 6px;
}

/* ------------------------------------------------------------------
 * Guest save-heart: a real link to sign in, not a dead decoration
 * ------------------------------------------------------------------ */

.aj-save--guest {
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 150ms ease, color 150ms ease;
}

.aj-save--guest:hover,
.aj-save--guest:focus {
	opacity: 1;
	color: var(--aj-brand);
}

/* ------------------------------------------------------------------
 * Logged-out apply gate
 * ------------------------------------------------------------------ */

.aj-apply-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}


/* ------------------------------------------------------------------
 * Candidate directory card
 *
 * Same shape as the company card. Skills are chips in a centred, wrapping
 * row capped at three plus a "+N more" counter — the old card printed every
 * skill as a block-level tag, which stacked into a tall ragged column and
 * made card height depend on how many skills a person listed.
 * ------------------------------------------------------------------ */

.aj-candidate-card__skills {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.aj-candidate-card__skills li {
	margin: 0;
	min-width: 0;
}

.aj-candidate-card__skills .aj-tag {
	display: inline-block;
	max-width: 100%;
	/* Quieter than a job card's tags: on a candidate card these are
	   supporting detail under the name, not the headline of the card. */
	font-size: 11px;
	font-weight: 600;
	padding: 3px 9px;
	/* One line per chip: a long skill name is trimmed rather than wrapped,
	   so the row stays the same height no matter what people type. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

.aj-tag--more {
	color: var(--aj-text-muted);
	background: var(--aj-surface, #f1f3f7);
}

/* The subtitle line is a single line; a long headline is trimmed so it
   can't push the rest of the card around. */
.aj-candidate-card .aj-company-grid-card__location {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Two lines of prose maximum, matching the company card's visual weight. */
.aj-candidate-card .aj-company-grid-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 16px;
}

.aj-candidate-card .aj-company-grid-card__name {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}


/* ------------------------------------------------------------------
 * Candidate single profile — reuses the job/company single-page shell
 * (.aj-job-single + .aj-job-sidebar), so a candidate page reads as part
 * of the same family as a job listing and a company profile.
 * ------------------------------------------------------------------ */

.aj-candidate-single .aj-company-hero__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.aj-candidate-single .aj-company-hero__badge {
	align-self: flex-start;
	margin-left: auto;
	white-space: nowrap;
}

.aj-candidate-single__headline {
	font-size: 16px;
	font-weight: 600;
	color: var(--aj-text);
	margin: 0 0 6px;
}

.aj-candidate-single__section {
	margin-top: 48px;
}

.aj-candidate-single__section > h2 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 18px;
	padding: 22px 26px;
	background: var(--aj-surface, #f7f8fa);
	border: 1px solid var(--aj-border);
	border-radius: 6px;
}

/* Candidate records need their own visual rhythm: a recruiter can scan one
 * role or qualification at a time instead of parsing a single dense timeline. */
.aj-candidate-single .aj-timeline-item {
	margin: 0 0 14px;
	padding: 24px 26px;
	border: 1px solid var(--aj-border);
	border-left: 3px solid var(--aj-primary);
	border-radius: 6px;
	background: var(--aj-surface, #fff);
}

.aj-candidate-single .aj-timeline-item:last-child {
	padding-bottom: 24px;
}

.aj-candidate-single .aj-timeline-item h3 {
	font-size: 18px;
	line-height: 1.3;
	margin-bottom: 8px;
}

.aj-candidate-single .aj-timeline-item__date {
	margin-bottom: 10px;
}

.aj-candidate-single .aj-timeline-item p {
	font-size: 15px;
	line-height: 1.6;
}

.aj-candidate-single__prefs {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-candidate-single__prefs .aj-overview__label {
	display: block;
	margin-bottom: 2px;
}

/* Space the sidebar's stacked clouds when a card holds more than one. */
.aj-candidate-single .aj-sidebar-card .aj-skill-cloud + .aj-skill-cloud {
	margin-top: 10px;
}

.aj-candidate-single .aj-sidebar-card .aj-button--block {
	margin-top: 18px;
}

.aj-candidate-single .aj-candidate-profile__links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 14px 0 0;
	font-size: 14px;
}

@media (max-width: 640px) {
	.aj-candidate-single .aj-company-hero__badge {
		width: 100%;
		margin-left: 0;
	}

	.aj-candidate-single__section {
		margin-top: 36px;
	}

	.aj-candidate-single__section > h2 {
		font-size: 18px;
		padding: 18px 20px;
	}

	.aj-candidate-single .aj-timeline-item {
		padding: 20px;
	}

	.aj-candidate-single .aj-timeline-item:last-child {
		padding-bottom: 20px;
	}

	.aj-candidate-single .aj-timeline-item h3 {
		font-size: 17px;
	}
}


/* ------------------------------------------------------------------
 * Pagination
 *
 * paginate_links() ships no container and the theme had no rules for
 * .page-numbers at all, so every directory ended with a bare line of blue
 * text links. These are the real navigation between pages of results, so
 * they get proper 40px targets, a clear current state, and centring under
 * the results rather than hugging the left edge.
 * ------------------------------------------------------------------ */

.aj-pagination {
	margin: 32px 0 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.aj-pagination__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
}

.aj-pagination__list li {
	margin: 0;
}

.aj-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg);
	color: var(--aj-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background var(--aj-motion) ease, border-color var(--aj-motion) ease, color var(--aj-motion) ease;
}

.aj-pagination a.page-numbers:hover,
.aj-pagination a.page-numbers:focus-visible {
	border-color: var(--aj-brand);
	color: var(--aj-brand);
	background: var(--aj-brand-light);
}

.aj-pagination .page-numbers.current {
	background: var(--aj-brand);
	border-color: var(--aj-brand);
	color: #fff;
	cursor: default;
}

/* "…" between page runs is a label, not a control. */
.aj-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--aj-text-muted);
	min-width: 24px;
	padding: 0 4px;
	font-weight: 700;
}

.aj-pagination .prev.page-numbers,
.aj-pagination .next.page-numbers {
	padding: 0 16px;
}

.aj-pagination__arrow {
	font-size: 15px;
	line-height: 1;
}

.aj-pagination__status {
	margin: 0;
	font-size: 13px;
	color: var(--aj-text-muted);
}

@media (max-width: 640px) {
	/* On a narrow screen the numbers matter less than being able to step
	   back and forth, so the word labels collapse to their arrows and the
	   "Page X of Y" line carries the position instead. */
	.aj-pagination__word {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.aj-pagination .prev.page-numbers,
	.aj-pagination .next.page-numbers {
		padding: 0 12px;
	}

	.aj-pagination .page-numbers {
		min-width: 38px;
		height: 38px;
		padding: 0 10px;
		font-size: 13px;
	}
}


/* ------------------------------------------------------------------
 * Moderation states on the employer dashboard
 * ------------------------------------------------------------------ */

.aj-status-badge--pending {
	background: #fff4e0;
	color: #8a5a00;
}

.aj-status-badge--rejected {
	background: #fdeaea;
	color: #a01b1b;
}

/* The "why" under a badge — a rejection reason, or a note that edits are
   queued. Reads as a caption, not as a second status. */
.aj-status-note {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--aj-text-muted);
	max-width: 34ch;
}


/* ------------------------------------------------------------------
 * Notification preferences
 * ------------------------------------------------------------------ */

.aj-pref-list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.aj-pref-list li + li {
	border-top: 1px solid var(--aj-border);
}

.aj-pref-list label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	cursor: pointer;
	font-size: 15px;
}

.aj-pref-list input[disabled] + span {
	color: var(--aj-text-muted);
}

.aj-pref-list label:has(input[disabled]) {
	cursor: default;
}

.aj-pref-list__required {
	margin-left: auto;
	font-size: 12px;
	font-style: normal;
	color: var(--aj-text-muted);
	background: var(--aj-brand-light);
	border-radius: 999px;
	padding: 2px 10px;
	white-space: nowrap;
}

/* Dashboard > Notifications groups its options in .aj-fieldset boxes:
 * keep them plain checkbox rows, not the chips .aj-form gives checkboxes
 * inside a fieldset (the Categories / Job types pickers). */
.aj-form fieldset .aj-pref-list label:has(> input[type="checkbox"]) {
	position: static;
	display: flex;
	margin: 0;
	padding: 11px 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: 15px;
	font-weight: 600;
}

.aj-form fieldset .aj-pref-list label:has(> input[type="checkbox"]) > input[type="checkbox"] {
	position: static;
	opacity: 1;
	width: auto;
	height: auto;
	pointer-events: auto;
}

.aj-fieldset .aj-pref-list {
	margin: 0;
}

.aj-fieldset {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	padding: 14px 16px;
	margin: 0 0 16px;
}

.aj-fieldset legend {
	font-size: 13px;
	font-weight: 600;
	padding: 0 6px;
	color: var(--aj-text-muted);
}

.aj-checkbox-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 6px 16px;
}

.aj-checkbox-grid label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	cursor: pointer;
}

.aj-field-hint {
	font-size: 13px;
	color: var(--aj-text-muted);
	margin: 0 0 20px;
}


/* ------------------------------------------------------------------
 * Subscription plans
 * ------------------------------------------------------------------ */

.aj-subscription-status {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 88px;
	padding: 16px;
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	background: var(--aj-bg-subtle);
}

.aj-subscription-status__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
}

.aj-subscription-status__icon svg {
	width: 22px;
	height: 22px;
}

.aj-subscription-status--active .aj-subscription-status__icon {
	color: #137a48;
	background: #e7f6ed;
}

.aj-subscription-status--attention .aj-subscription-status__icon {
	color: #996515;
	background: #fff4d8;
}

.aj-subscription-status--inactive .aj-subscription-status__icon {
	color: var(--aj-text-muted);
	background: #e9ecf1;
}

.aj-subscription-status__body {
	display: grid;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.aj-subscription-status__label {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--aj-text-muted);
}

.aj-subscription-status--active .aj-subscription-status__label {
	color: #137a48;
}

.aj-subscription-status--attention .aj-subscription-status__label {
	color: #996515;
}

.aj-subscription-status__body strong {
	font-size: 16px;
}

.aj-subscription-status__meta {
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-subscription-status__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.aj-subscription-status__actions form {
	margin: 0;
}

@media (max-width: 620px) {
	.aj-subscription-status {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.aj-subscription-status__actions {
		width: 100%;
		padding-left: 56px;
	}
}

.aj-plan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.aj-plan-card {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aj-plan-card h4 {
	margin: 0;
	font-size: 16px;
}

.aj-plan-card__price {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.aj-plan-card__price span {
	font-size: 13px;
	font-weight: 500;
	color: var(--aj-text-muted);
}

.aj-plan-card p {
	margin: 0;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-plan-card form {
	margin-top: auto;
	padding-top: 8px;
}


/* ------------------------------------------------------------------
 * Listing quality score explanation (§5)
 * ------------------------------------------------------------------ */

.aj-score-panel {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	padding: 18px 20px;
	margin: 24px 0;
	background: var(--aj-bg);
}

.aj-score-panel__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--aj-border);
	margin-bottom: 12px;
}

.aj-score-panel__value {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--aj-brand);
	line-height: 1;
}

.aj-score-panel__head p {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-score-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aj-score-panel__list li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 7px 0;
	font-size: 14px;
}

.aj-score-panel__list li + li {
	border-top: 1px solid var(--aj-border);
}

.aj-score-panel__list li.is-met .aj-score-panel__mark { color: #00733f; }
.aj-score-panel__list li.is-missing .aj-score-panel__mark { color: var(--aj-text-muted); }
.aj-score-panel__list li.is-met strong { color: var(--aj-text-muted); font-weight: 500; }

.aj-score-panel__mark {
	font-weight: 700;
	width: 14px;
	flex-shrink: 0;
}

.aj-score-panel__list em {
	display: block;
	font-style: normal;
	font-size: 12.5px;
	color: var(--aj-text-muted);
	margin-top: 2px;
}

.aj-score-panel__weight {
	margin-left: auto;
	font-size: 12px;
	color: var(--aj-text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------
 * Screening questions
 * ------------------------------------------------------------------ */

.aj-screening-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.aj-screening-row input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
}

.aj-screening-row label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--aj-text-muted);
	white-space: nowrap;
}

.aj-screening h3 {
	font-size: 16px;
	margin: 24px 0 8px;
}

.aj-required {
	color: #b32d2e;
	margin-left: 2px;
}

.aj-screening-answers {
	margin-top: 14px;
	padding: 12px 16px;
	background: var(--aj-brand-light);
	border-radius: var(--aj-radius-sm);
}

.aj-screening-answers h4 {
	margin: 0 0 8px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--aj-text-muted);
}

.aj-screening-answers dl { margin: 0; }

.aj-screening-answers dt {
	font-weight: 600;
	font-size: 14px;
	margin-top: 8px;
}

.aj-screening-answers dd {
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--aj-text-muted);
}


/* ------------------------------------------------------------------
 * Conversation safety controls
 * ------------------------------------------------------------------ */

.aj-thread-controls {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--aj-border);
}

.aj-thread-controls__details summary {
	cursor: pointer;
	font-size: 13px;
	color: var(--aj-text-muted);
	list-style: none;
}

.aj-thread-controls__details summary::-webkit-details-marker { display: none; }

.aj-thread-controls__details summary::before {
	content: "⚠";
	margin-right: 6px;
}

.aj-thread-controls__details summary:hover {
	color: var(--aj-text);
}

.aj-thread-controls__details[open] summary {
	margin-bottom: 10px;
	color: var(--aj-text);
	font-weight: 600;
}

.aj-thread-controls__notice {
	font-size: 14px;
	color: #a01b1b;
	background: #fdeaea;
	border-radius: var(--aj-radius-sm);
	padding: 10px 14px;
	margin: 0 0 10px;
}


/* ------------------------------------------------------------------
 * Employer metrics
 * ------------------------------------------------------------------ */

.aj-metrics h3 {
	font-size: 15px;
	margin: 24px 0 10px;
}

.aj-metrics h3:first-child { margin-top: 0; }

.aj-metrics__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 12px;
}

.aj-metrics__grid li {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	padding: 14px 16px;
	text-align: center;
}

.aj-metrics__grid span {
	display: block;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.aj-metrics__grid em {
	display: block;
	margin-top: 4px;
	font-style: normal;
	font-size: 12px;
	color: var(--aj-text-muted);
}

.aj-metrics table th {
	text-align: left;
	font-weight: 500;
	color: var(--aj-text-muted);
}

.aj-metrics .aj-field-hint {
	display: block;
	margin: 2px 0 0;
	font-size: 12px;
}


/* ------------------------------------------------------------------
 * Applicant pipeline: inbox, board, stage badges
 * ------------------------------------------------------------------ */

.aj-stage-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	background: var(--aj-brand-light);
	color: var(--aj-brand);
}

/* Each stage reads differently at a glance: neutral early, warm in the
   middle, green at the good end, red at the bad one. */
.aj-stage-badge--applied             { background: #eef1f6; color: #4a5464; }
.aj-stage-badge--reviewed,
.aj-stage-badge--viewed              { background: #eaf2ff; color: #0057c2; }
.aj-stage-badge--contacted           { background: #e8f4fd; color: #05628a; }
.aj-stage-badge--interview_scheduled { background: #fff4e0; color: #8a5a00; }
.aj-stage-badge--interviewed         { background: #fdf0d5; color: #7a5200; }
.aj-stage-badge--offer               { background: #ecebff; color: #4b3ecb; }
.aj-stage-badge--hired               { background: #e7f6ed; color: #0a7d3f; }
.aj-stage-badge--rejected            { background: #fdeaea; color: #a01b1b; }
.aj-stage-badge--withdrawn           { background: #f1f2f4; color: #6b7280; }

/* Generic dashboard table (Billing > Invoices, and anywhere else that
 * reuses the same class) — this was referenced on the markup in more
 * than one place but never actually defined, so those tables rendered
 * with completely unstyled default browser spacing/borders, same root
 * cause as the Applications inbox table fixed above. */
.aj-table {
	width: 100%;
	border-collapse: collapse;
}

.aj-table th {
	padding: 10px 16px 10px 0;
	border-bottom: 1px solid var(--aj-border);
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--aj-text-muted);
	white-space: nowrap;
}

.aj-table td {
	padding: 14px 16px 14px 0;
	border-bottom: 1px solid var(--aj-border);
	font-size: 14px;
	color: var(--aj-text);
	vertical-align: middle;
}

.aj-table tbody tr:last-child td {
	border-bottom: 0;
}

.aj-inbox__filters {
	margin-bottom: 20px;
}

.aj-inbox__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.aj-inbox__form label {
	font-size: 13px;
	color: var(--aj-text-muted);
}

/* The native <select>s here get progressively enhanced into
 * .aj-custom-select by custom-select.js same as everywhere else on the
 * site, but that component deliberately carries no box styling of its
 * own (see the comment above .aj-custom-select) — every other place it's
 * used adds its own border/background, which this context never did, so
 * these two dropdowns rendered as bare unstyled text with a chevron. */
.aj-inbox__form .aj-custom-select {
	min-width: 180px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	padding: 8px 12px;
	font-family: inherit;
	font-size: 14px;
	color: var(--aj-text);
	background: var(--aj-bg);
}

/* Applications inbox table — uses the shared .aj-table look above, plus
 * a horizontal-scroll wrapper and min-width so the action-buttons column
 * doesn't squeeze on narrow viewports. */
.aj-inbox__table-wrap {
	overflow-x: auto;
}

.aj-inbox__table {
	min-width: 720px;
}

.aj-inbox__table td strong {
	display: inline-block;
	margin-right: 4px;
}

.aj-inbox__moves {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 220px;
}

.aj-dashboard-table__danger {
	color: #a01b1b;
	font-size: 13px;
}

.aj-dash-card--pipeline {
	padding: 0;
	border: 0;
	box-shadow: none;
}

/* A 9-stage pipeline (Applied through Hired, plus Rejected/Withdrawn) never
 * fit a wrapping 3-column grid — columns either got crushed to a sliver or
 * wrapped into an ugly staircase. Each stage now gets a full-width section
 * stacked down the page, with its own accent color down the left edge, and
 * its candidate cards laid out in a row that wraps — so the page fills out
 * properly instead of a cramped grid or a narrow side-scrolling strip. */
.aj-board {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.aj-board__column {
	--aj-stage-color: var(--aj-text-muted);
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-left: 4px solid var(--aj-stage-color);
	border-radius: 10px;
	padding: 16px 20px;
}

.aj-board__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}

.aj-board__column--applied              { --aj-stage-color: #94a3b8; }
.aj-board__column--reviewed             { --aj-stage-color: #3b82f6; }
.aj-board__column--contacted            { --aj-stage-color: #6366f1; }
.aj-board__column--interview_scheduled  { --aj-stage-color: #8b5cf6; }
.aj-board__column--interviewed          { --aj-stage-color: #a855f7; }
.aj-board__column--offer                { --aj-stage-color: #f59e0b; }
.aj-board__column--hired                { --aj-stage-color: #16a34a; }
.aj-board__column--rejected             { --aj-stage-color: #ef4444; background: #fbfbfc; }
.aj-board__column--withdrawn            { --aj-stage-color: #9ca3af; background: #fbfbfc; }

.aj-board__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--aj-text);
}

.aj-board__count {
	background: color-mix(in srgb, var(--aj-stage-color) 14%, transparent);
	color: var(--aj-stage-color);
	border-radius: 999px;
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 700;
}

.aj-board__empty {
	margin: 0;
	padding: 20px 8px;
	text-align: center;
	font-size: 13px;
	color: var(--aj-text-muted);
	border: 1px dashed var(--aj-border);
	border-radius: 8px;
}

.aj-board__card {
	background: var(--aj-surface, #fff);
	border: 1px solid var(--aj-border);
	border-radius: 8px;
	padding: 12px;
	font-size: 14px;
	box-shadow: var(--aj-shadow-sm);
	transition: box-shadow var(--aj-motion) ease, transform var(--aj-motion) ease;
}

.aj-board__card:hover {
	box-shadow: var(--aj-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
	transform: translateY(-1px);
}

.aj-board__card-top {
	display: flex;
	align-items: center;
	gap: 8px;
}

.aj-board__avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--aj-stage-color) 16%, var(--aj-brand-light));
	color: var(--aj-stage-color);
	font-size: 11px;
	font-weight: 700;
}

.aj-board__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aj-board__when {
	display: block;
	font-size: 11px;
	color: var(--aj-text-muted);
	margin-top: 6px;
	margin-left: 34px;
}

.aj-board__moves {
	display: flex;
	gap: 4px;
	margin-top: 8px;
	margin-left: 34px;
}

.aj-board__move {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	font-size: 14px;
	line-height: 1;
	color: var(--aj-text-muted);
	text-decoration: none;
}

.aj-board__move:hover,
.aj-board__move:focus-visible {
	border-color: var(--aj-brand);
	color: var(--aj-brand);
	background: var(--aj-brand-light);
}

.aj-board__move--reject:hover,
.aj-board__move--reject:focus-visible {
	border-color: #b32d2e;
	color: #b32d2e;
	background: #fdeaea;
}

.aj-board__move--reopen {
	width: auto;
	padding: 0 10px;
	font-size: 12px;
}

.aj-pipeline-switcher {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding: 14px 16px;
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	background: var(--aj-bg);
}

.aj-pipeline-switcher label {
	font-size: 13px;
	color: var(--aj-text-muted);
}

@media (max-width: 620px) {
	.aj-board__cards {
		grid-template-columns: 1fr;
	}

	.aj-pipeline-switcher {
		align-items: stretch;
		flex-direction: column;
	}
}

.aj-stage-history {
	margin-top: 12px;
	font-size: 13px;
}

.aj-stage-history summary {
	cursor: pointer;
	color: var(--aj-text-muted);
}

.aj-stage-history ol {
	margin: 10px 0 0;
	padding-left: 18px;
}

.aj-stage-history li { margin-bottom: 8px; }
.aj-stage-history li span { color: var(--aj-text-muted); }

.aj-stage-history li em {
	display: block;
	font-style: normal;
	font-size: 12px;
	color: var(--aj-text-muted);
}

.aj-stage-history li p {
	margin: 2px 0 0;
	font-size: 13px;
}


/* ------------------------------------------------------------------
 * Team, permission matrix, candidate availability
 * ------------------------------------------------------------------ */

.aj-team-role-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.aj-invite-form { max-width: 520px; }

.aj-matrix-wrap {
	overflow-x: auto;
}

.aj-matrix th,
.aj-matrix td {
	white-space: nowrap;
}

.aj-matrix td:first-child,
.aj-matrix th:first-child {
	white-space: normal;
	min-width: 210px;
}

.aj-matrix__cell { text-align: center; }
.aj-matrix__yes { color: #0a7d3f; font-weight: 700; }
.aj-matrix__no  { color: var(--aj-border); }

.aj-availability {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.aj-availability--available_now  { background: #e7f6ed; color: #0a7d3f; }
.aj-availability--available_soon { background: #eaf2ff; color: #0057c2; }
.aj-availability--open_to_offers { background: #fff4e0; color: #8a5a00; }

.aj-progress-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aj-progress-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-progress-list li.is-reached {
	color: var(--aj-text);
}

.aj-progress-list__mark {
	width: 16px;
	flex-shrink: 0;
	color: var(--aj-border);
}

.aj-progress-list li.is-reached .aj-progress-list__mark {
	color: #0a7d3f;
}


/* ------------------------------------------------------------------
 * Read receipts
 * ------------------------------------------------------------------ */

.aj-message-bubble__read {
	margin-left: 6px;
	letter-spacing: -2px;
	color: var(--aj-text-muted);
	opacity: .6;
}

.aj-message-bubble__read.is-read {
	color: var(--aj-brand);
	opacity: 1;
}

.aj-message-bubble--mine .aj-message-bubble__read {
	color: rgba(255, 255, 255, .7);
}

.aj-message-bubble--mine .aj-message-bubble__read.is-read {
	color: #fff;
	opacity: 1;
}

/* ---------------------------------------------------------------------
 * Blog: magazine-style article cards (home.php, archive.php, category
 * pages, and the "AJ: Blog Article Grid" Elementor widget all share this
 * markup via Aruba_Jobs_Render_Helpers::render_article_card()).
 *
 * This is a deliberate, one-off exception to the flat-color rule noted by
 * --aj-gradient-brand at the top of this file: editorial/lifestyle content
 * reads better with a photo-forward gradient treatment, and this is the
 * only place on the site that does it. One consistent brand-blue tint is
 * used on every card regardless of category — kept light enough that the
 * photo underneath stays the dominant thing on the card (see
 * .aj-article-grid-card__overlay below) — rather than a different color
 * per category, which read as too busy. Every job-board UI element
 * (buttons, badges, filters) stays flat color as before.
 * ------------------------------------------------------------------- */

.aj-article-section__header {
	max-width: var(--aj-content-max);
	margin: 0 auto 8px;
	padding: 0 24px;
}

.aj-article-section__heading {
	font-size: 38px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
}

/* 38px is a desktop size; on a phone it wrapped the blog heading across
   three lines while every other section heading scaled down. */
@media (max-width: 560px) {
	.aj-article-section__heading {
		font-size: 28px;
	}

	.aj-article-section__subheading {
		font-size: 15px;
	}
}

.aj-article-section__subheading {
	color: var(--aj-text-muted);
	font-size: 16px;
	margin: 0 0 28px;
}

/* On a phone the Blog page's heading sat ~10px under the (sticky) header.
 * Only when the blog section opens the page (the Blog page itself, plus
 * the home.php/archive.php fallbacks) — the same widget further down the
 * homepage already has section spacing around it. */
@media (max-width: 767px) {
	.elementor > :first-child .elementor-widget-aj-blog-grid:first-child .aj-article-section,
	body.blog .aj-article-section,
	body.archive .aj-article-section {
		padding-top: 32px;
	}
}

/* Blog page opening with the blue page band (see the blog grid widget):
 * the band sits flush under the nav, then breathing room before the
 * category filters. The widget lives inside a boxed Elementor section, so
 * the band breaks out of it to the full viewport width like the legal/FAQ
 * page bands (html/body clip overflow-x, so 100vw adds no scrollbar). */
.aj-article-section--banded > .aj-legal-hero {
	margin-right: calc(50% - 50vw);
	margin-bottom: 40px;
	margin-left: calc(50% - 50vw);
}

/* Elementor pads the column holding the widget by 10px, which left a white
 * strip between the nav and the band. Drop it for that column only. */
.elementor-widget-wrap:has(> .elementor-widget-aj-blog-grid:first-child .aj-article-section--banded) {
	padding-top: 0;
}

@media (max-width: 767px) {
	.elementor > :first-child .elementor-widget-aj-blog-grid:first-child .aj-article-section--banded {
		padding-top: 0;
	}

	.aj-article-section--banded > .aj-legal-hero {
		padding: 40px 20px;
		margin-bottom: 28px;
	}
}

.aj-article-section__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: var(--aj-content-max);
	margin: 0 auto 28px;
	padding: 0 24px;
}

.aj-pill-filter {
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1.5px solid var(--aj-border);
	color: var(--aj-text-muted);
	font-size: 14px;
	font-weight: 600;
	transition: background-color var(--aj-motion) ease, color var(--aj-motion) ease, border-color var(--aj-motion) ease;
}

.aj-pill-filter:hover {
	background: var(--aj-bg-subtle);
	color: var(--aj-text);
	text-decoration: none;
}

.aj-pill-filter.is-active {
	background: var(--aj-text);
	border-color: var(--aj-text);
	color: #fff;
}

/* AJAX category-switch transition (assets/js/blog-grid.js) — the old grid
   fades/slides out, the new HTML is swapped in while it's invisible, then
   this same rule fades/slides it back in. max-width: var(--aj-content-max);
   margin: 0 auto; padding here (not on .aj-article-grid) so the empty-state
   message gets the same width and slide animation as the grid. */
.aj-article-grid-results {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: 0 24px 24px;
}

.aj-article-grid-results .aj-article-grid,
.aj-article-grid-results .aj-empty-state {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

.aj-article-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: 0 24px 24px;
}

/* The blog grid carries its own container width and side padding; inside a
 * .aj-section (Career Development) that would double up and leave the cards
 * narrower than the section above them. */
.aj-section > .aj-article-grid {
	max-width: none;
	padding: 0;
}

.aj-article-grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.aj-article-grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.aj-article-grid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px) {
	.aj-article-grid--cols-3,
	.aj-article-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.aj-article-grid--cols-2,
	.aj-article-grid--cols-3,
	.aj-article-grid--cols-4 {
		grid-template-columns: 1fr;
	}
}

.aj-article-grid-card {
	position: relative;
	display: block;
	overflow: hidden;
	height: 320px;
	padding: 24px;
	border-radius: var(--aj-radius-lg);
	background-color: #1a1f2b;
	background-size: cover;
	background-position: center;
	color: #fff;
	box-shadow: var(--aj-shadow-md);
	transition: transform var(--aj-motion) ease, box-shadow var(--aj-motion) ease;
}

.aj-article-grid-card:hover {
	transform: translateY(-4px) scale(1.015);
	box-shadow: var(--aj-shadow-lg);
	color: #fff;
	text-decoration: none;
}

/* Keep the card copy legible without washing the photography in brand blue.
   The middle stays nearly clear so the image's original colors come through. */
.aj-article-grid-card__overlay {
	position: absolute;
	inset: 0;
	opacity: 1;
	background: linear-gradient(180deg, rgba(8, 15, 27, 0.46) 0%, rgba(8, 15, 27, 0.06) 46%, rgba(8, 15, 27, 0.12) 62%, rgba(8, 15, 27, 0.58) 100%);
	transition: opacity var(--aj-motion) ease;
}

.aj-article-grid-card:hover .aj-article-grid-card__overlay {
	opacity: 0.9;
}

.aj-article-grid-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.aj-article-grid-card__category {
	display: block;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	opacity: 0.85;
}

.aj-article-grid-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
}

.aj-article-grid-card__pill {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-size: 13px;
	font-weight: 700;
	transition: background-color var(--aj-motion) ease;
}

.aj-article-grid-card__pill svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.aj-article-grid-card:hover .aj-article-grid-card__pill {
	background: rgba(255, 255, 255, 0.32);
}

.aj-blog-related {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: var(--aj-section-padding) 24px 24px;
}

.aj-blog-related .aj-article-grid,
.aj-blog-related .aj-article-grid-results {
	padding-left: 0;
	padding-right: 0;
}

.aj-blog-related h2 {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 24px;
}

/* -------------------------------------------------------------------
 * Skill picker (Aruba_Jobs_Skill_Picker + assets/js/skill-picker.js) —
 * searchable multi-select used by the job form and jobseeker profile.
 * ---------------------------------------------------------------- */

.aj-skill-picker {
	margin: 0 0 16px;
}

.aj-skill-picker__label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 14px;
}

.aj-skill-picker__chips {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 8px;
}

.aj-skill-picker__chips:empty {
	display: none;
}

/* A row per selected skill, stacked under each other — not an
 * inline-wrapping pill, which is what made a proficiency dropdown look
 * cramped and overflow next to a long skill name. */
.aj-skill-picker__chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--aj-bg-subtle);
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	padding: 8px 8px 8px 14px;
	font-size: 14px;
}

.aj-skill-picker__chip-name {
	font-weight: 600;
	color: var(--aj-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aj-skill-picker__chip-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/* Sizes the styled dropdown assets/js/custom-select.js turns this <select>
 * into (see .aj-custom-select above) — the wrapper it creates inherits
 * this class, and its trigger is deliberately unstyled by that component
 * so the box chrome here is what actually renders. */
/* No border/padding/font-size of its own — .aj-form .aj-custom-select
 * (style.css, shared by every other dropdown on the site, e.g. Experience
 * Level) already supplies that box chrome once this becomes a wrapper via
 * assets/js/custom-select.js, and this only needs to say how wide it is. */
.aj-skill-picker__chip-proficiency {
	width: 190px;
	flex-shrink: 0;
}

.aj-skill-picker__chip-remove {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--aj-text-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.aj-skill-picker__chip-remove:hover {
	background: rgba(16, 20, 28, 0.08);
	color: var(--aj-text);
}

.aj-skill-picker__search-wrap {
	position: relative;
}

/* Matches .aj-form .aj-custom-select's box exactly (same padding/border/
 * radius/font-size as Experience Level and every other dropdown trigger on
 * the site) so this reads as one of the same family of controls, not a
 * plain text field bolted on next to them. */
.aj-skill-picker__search {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	font-family: inherit;
	font-size: 15px;
}

.aj-skill-picker__search:focus {
	outline: none;
	border-color: var(--aj-brand);
	box-shadow: 0 0 0 3px var(--aj-brand-light);
}

/* Same panel as .aj-custom-select__listbox (Experience Level, Job Category,
 * ...) — same background/border/radius/shadow/spacing — so a search result
 * list reads as the same dropdown family, just with a text field standing
 * in for the trigger button. */
.aj-skill-picker__dropdown {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 280px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	box-shadow: var(--aj-shadow-md);
}

@media (prefers-reduced-motion: no-preference) {
	.aj-skill-picker__dropdown {
		animation: aj-select-pop-in 160ms ease both;
	}
}

/* Same option look as .aj-custom-select__option, including the
 * highlighted/keyboard-focused state (light-blue fill) skill-picker.js
 * manages the same way custom-select.js does for every other dropdown. */
.aj-skill-picker__option {
	padding: 8px 10px;
	border-radius: var(--aj-radius-sm);
	font-size: 14px;
	color: var(--aj-text);
	cursor: pointer;
}

.aj-skill-picker__option.is-highlighted {
	background: var(--aj-brand-light);
}

.aj-skill-picker__option--other {
	color: var(--aj-text-muted);
}

.aj-skill-picker__option--add {
	color: var(--aj-brand-dark);
	font-weight: 600;
}

.aj-skill-picker__option--error {
	color: #b32d2e;
}

.aj-skill-picker__option.is-pending {
	opacity: 0.6;
	cursor: default;
}

.aj-skill-picker__divider {
	padding: 6px 10px 2px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--aj-text-muted);
}

.aj-skill-picker__empty {
	padding: 8px 10px;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-skill-picker__native-select {
	width: 100%;
	min-height: 160px;
}

.aj-skill-picker[data-aj-enhanced] .aj-skill-picker__native-select {
	display: none;
}

/* Signed-in account card and dropdown, scoped to the header. */
.aj-profile { position: relative; width: 240px; max-width: 100%; }
.aj-profile__trigger {
	display: flex; align-items: center; gap: 12px; position: relative;
	padding: 8px; border: 0; border-radius: var(--aj-radius-sm);
	background: transparent; cursor: pointer; list-style: none;
	transition: background var(--aj-motion) ease;
}
.aj-profile__trigger::-webkit-details-marker { display: none; }
.aj-profile__trigger:hover, .aj-profile[open] .aj-profile__trigger {
	background: var(--aj-bg-subtle);
}
.aj-profile__identity { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.aj-profile__name, .aj-profile__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; line-height: 1.3; }
.aj-profile__name { color: var(--aj-text); font-size: 14px; font-weight: 600; }
.aj-profile__email { color: var(--aj-text-muted); font-size: 12px; font-weight: 400; }
.aj-profile__avatar {
	display: flex; align-items: center; justify-content: center; flex: 0 0 40px;
	width: 40px; height: 40px; padding: 0; border-radius: var(--aj-radius-sm);
	background: var(--aj-brand-light); color: var(--aj-brand); overflow: hidden;
}
.aj-profile__avatar .aj-profile__photo, .aj-profile__avatar > svg { display: block; width: 40px; height: 40px; max-width: none; margin: 0; border: 0; border-radius: var(--aj-radius-sm); object-fit: cover; background: transparent; }
.aj-profile__avatar > svg { padding: 7px; }
.aj-profile__panel {
	position: absolute; z-index: 100; right: 0; top: calc(100% + 6px); width: 260px;
	max-width: calc(100vw - 40px); max-height: calc(100dvh - 150px); overflow-y: auto;
	padding: 6px; border: 1px solid var(--aj-border); border-radius: var(--aj-radius-sm);
	background: var(--aj-bg); box-shadow: var(--aj-shadow-md);
	transform-origin: top right;
}
.aj-profile[open] .aj-profile__panel { animation: aj-profile-reveal 160ms ease-out; }
.aj-header-auth .aj-profile__item:not(.aj-button) {
	display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px;
	border: 1px solid transparent; border-radius: 4px; color: var(--aj-text);
	font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none;
	transition: background 160ms ease, border-color 160ms ease;
}
.aj-profile__item + .aj-profile__item { margin-top: 2px; }
.aj-profile__item svg { width: 18px; height: 18px; flex: 0 0 18px; }
.aj-header-auth .aj-profile__item:hover, .aj-header-auth .aj-profile__item:focus-visible { background: var(--aj-brand-light); border-color: transparent; color: var(--aj-brand); }
.aj-profile__trigger:focus-visible, .aj-profile__item:focus-visible { outline: 2px solid var(--aj-brand); outline-offset: 3px; }
.aj-profile__separator { height: 1px; margin: 6px 6px; background: var(--aj-border); }
.aj-header-auth .aj-profile__logout:not(.aj-button) { color: #b42318; background: transparent; }
.aj-header-auth .aj-profile__logout:hover, .aj-header-auth .aj-profile__logout:focus-visible { color: #912018; background: #fff0ef; border-color: transparent; }
@keyframes aj-profile-reveal { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@media (min-width: 901px) and (max-width: 1150px) {
	.aj-profile { width: 205px; }
	.aj-profile__trigger { gap: 10px; }
}
@media (max-width: 900px) {
	.aj-profile { width: 100%; }
	.aj-profile__panel { position: static; width: 100%; max-width: none; max-height: none; margin-top: 6px; box-shadow: var(--aj-shadow-sm); }
	.aj-site-header__menu.is-open:has(.aj-profile[open]) { max-height: calc(100dvh - 120px); overflow-y: auto; padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
	.aj-profile__trigger, .aj-header-auth .aj-profile__item { transition: none; }
	.aj-profile[open] .aj-profile__panel { animation: none; }
}

/* ---------------------------------------------------------------------
 * Section backgrounds
 * Set per widget in Elementor: Style tab > Section Background. The
 * choices land as classes on the full-width widget wrapper (see
 * Aruba_Jobs_Elementor_Integration::add_section_background_controls()),
 * so colours and decorations run edge to edge while content keeps its
 * normal max-width. Flat colours only; decorations are low-opacity SVG
 * patterns and outlines, faded out with a mask so they never sit hard
 * against the content.
 * ------------------------------------------------------------------- */

.elementor-widget:is(.aj-bg--white, .aj-bg--sky, .aj-bg--sand, .aj-bg--mist, .aj-bg--brand),
.elementor-widget:is(.aj-deco--dots, .aj-deco--rings, .aj-deco--grid, .aj-deco--waves) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
}

.elementor-widget.aj-bg--white { background-color: #ffffff; }
.elementor-widget.aj-bg--sky   { background-color: #f1f6ff; }
.elementor-widget.aj-bg--sand  { background-color: #fbf6ec; }
.elementor-widget.aj-bg--mist  { background-color: #f3f5f9; }
.elementor-widget.aj-bg--brand { background-color: var(--aj-brand); }

/* Featured Companies was asked to stay plain white regardless of whatever
   Section Background variant is picked in Elementor for this instance. */
.elementor-widget-aj-company-section.aj-bg--sky,
.elementor-widget-aj-company-section.aj-bg--sand,
.elementor-widget-aj-company-section.aj-bg--mist {
	background-color: #ffffff;
}

/* A section that paints its own background (Featured Companies' muted
   variant) defers to the chosen one. */
.elementor-widget:is(.aj-bg--white, .aj-bg--sky, .aj-bg--sand, .aj-bg--mist, .aj-bg--brand) .aj-section--muted {
	background: transparent;
}

/* Brand blue: headings and intro copy flip to white. Cards keep their own
   colours, so this suits card-based sections (e.g. the Jobseeker/Employer
   CTA) best. */
.elementor-widget.aj-bg--brand :is(
	.aj-section__heading,
	.aj-section__subheading,
	.aj-faq-home__heading,
	.aj-faq-home__description,
	.aj-article-section__heading,
	.aj-article-section__subheading,
	.aj-intro__eyebrow,
	.aj-intro__heading,
	.aj-intro__highlight,
	.aj-intro__description
) {
	color: #fff;
}

/* Outline buttons are transparent by default; on tinted or decorated
   sections give them a white fill so the pattern never shows through. */
.elementor-widget:is(.aj-bg--sky, .aj-bg--sand, .aj-bg--mist, .aj-deco--dots, .aj-deco--rings, .aj-deco--grid, .aj-deco--waves):not(.aj-bg--brand) .aj-button--outline {
	background-color: #fff;
}

/* Decorations ------------------------------------------------------- */

.elementor-widget:is(.aj-deco--dots, .aj-deco--rings, .aj-deco--grid, .aj-deco--waves) > .elementor-widget-container {
	position: relative;
	z-index: 1;
}

.elementor-widget:is(.aj-deco--dots, .aj-deco--rings, .aj-deco--grid, .aj-deco--waves)::before,
.elementor-widget:is(.aj-deco--dots, .aj-deco--rings, .aj-deco--grid, .aj-deco--waves)::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

/* Dot grid: two soft patches, top-right and bottom-left. */
.elementor-widget.aj-deco--dots::before,
.elementor-widget.aj-deco--dots::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='3' cy='3' r='1.7' fill='%230070FF' fill-opacity='0.24'/%3E%3C/svg%3E");
	-webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
	mask-image: radial-gradient(closest-side, #000 35%, transparent);
}

.elementor-widget.aj-deco--dots::before {
	top: 24px;
	right: -60px;
	width: 420px;
	height: 320px;
}

.elementor-widget.aj-deco--dots::after {
	bottom: 16px;
	left: -60px;
	width: 320px;
	height: 240px;
}

/* Rings: concentric outlines breaking in from the top-right corner. */
.elementor-widget.aj-deco--rings::before,
.elementor-widget.aj-deco--rings::after {
	border-radius: 50%;
	border: 2px solid rgba(0, 112, 255, 0.1);
}

.elementor-widget.aj-deco--rings::before {
	width: 560px;
	height: 560px;
	top: -260px;
	right: -200px;
}

.elementor-widget.aj-deco--rings::after {
	width: 340px;
	height: 340px;
	top: -150px;
	right: -90px;
	border-color: rgba(0, 112, 255, 0.14);
}

/* Line grid: fades out from the top centre. */
.elementor-widget.aj-deco--grid::before {
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M44 .5H.5V44' fill='none' stroke='%230070FF' stroke-opacity='0.1'/%3E%3C/svg%3E");
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 75%);
}

.elementor-widget.aj-deco--grid::after {
	content: none;
}

/* Waves: two bands of soft swells, bottom-left and top-right. */
.elementor-widget.aj-deco--waves::before,
.elementor-widget.aj-deco--waves::after {
	height: 132px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath d='M0 11c15 0 15-7 30-7s15 7 30 7 15-7 30-7 15 7 30 7' fill='none' stroke='%230070FF' stroke-opacity='0.16' stroke-width='2'/%3E%3C/svg%3E");
	-webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
	mask-image: radial-gradient(closest-side, #000 30%, transparent);
}

.elementor-widget.aj-deco--waves::before {
	bottom: 20px;
	left: -80px;
	width: 520px;
}

.elementor-widget.aj-deco--waves::after {
	top: 20px;
	right: -80px;
	width: 420px;
}

/* On brand blue the decorations switch to white. */
.elementor-widget.aj-bg--brand.aj-deco--rings::before { border-color: rgba(255, 255, 255, 0.16); }
.elementor-widget.aj-bg--brand.aj-deco--rings::after { border-color: rgba(255, 255, 255, 0.22); }

.elementor-widget.aj-bg--brand.aj-deco--dots::before,
.elementor-widget.aj-bg--brand.aj-deco--dots::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='3' cy='3' r='1.7' fill='%23ffffff' fill-opacity='0.3'/%3E%3C/svg%3E");
}

.elementor-widget.aj-bg--brand.aj-deco--grid::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M44 .5H.5V44' fill='none' stroke='%23ffffff' stroke-opacity='0.14'/%3E%3C/svg%3E");
}

.elementor-widget.aj-bg--brand.aj-deco--waves::before,
.elementor-widget.aj-bg--brand.aj-deco--waves::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath d='M0 11c15 0 15-7 30-7s15 7 30 7 15-7 30-7 15 7 30 7' fill='none' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='2'/%3E%3C/svg%3E");
}

@media (max-width: 700px) {
	.elementor-widget.aj-deco--dots::before { width: 260px; height: 200px; right: -70px; }
	.elementor-widget.aj-deco--dots::after { width: 200px; height: 160px; left: -70px; }
	.elementor-widget.aj-deco--rings::before { width: 360px; height: 360px; top: -190px; right: -170px; }
	.elementor-widget.aj-deco--rings::after { width: 220px; height: 220px; top: -110px; right: -90px; }
	.elementor-widget.aj-deco--waves::before { width: 300px; left: -90px; }
	.elementor-widget.aj-deco--waves::after { width: 240px; right: -90px; }
}

/* Employer partner products ------------------------------------------ */

.aj-partner-products {
	display: grid;
	gap: 28px;
}

.aj-partner-products__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.aj-partner-product-card {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding: 14px;
	border: 1px solid var(--aj-border);
	border-radius: 8px;
	background: var(--aj-bg-subtle);
}

.aj-partner-product-card > img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 6px;
	background: #fff;
}

.aj-partner-product-card h3 {
	margin: 6px 0 2px;
	font-size: 16px;
}

.aj-partner-product-card p {
	margin: 0;
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-partner-product-form {
	display: grid;
	gap: 18px;
	padding-top: 24px;
	border-top: 1px solid var(--aj-border);
}

.aj-partner-product-form h2 {
	margin: 0;
	font-size: 20px;
}

.aj-partner-product-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

@media (max-width: 620px) {
	.aj-partner-product-card {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.aj-partner-product-card > img {
		width: 64px;
		height: 64px;
	}

	.aj-partner-product-card > .aj-button {
		grid-column: 1 / -1;
	}
}

/* ---------------------------------------------------------------------
 * Company Logos widget (class-widget-company-logos.php) — a "trusted by"
 * strip in two layouts (Simple / Stats), sharing the same rotating logo
 * row. assets/js/company-logos.js crossfades a slot's <img> in place; the
 * fade class here only needs to define what mid-crossfade looks like.
 * ------------------------------------------------------------------- */

.aj-company-logos {
	/* Full content width, not a narrow centred block — the row is meant to
	   read as a wide brand strip spanning the page (see the reference), and
	   squeezing 7 logos into 1080px is what made them look undersized. */
	--aj-logo-height: 64px;
	/* width:100% matters as much as max-width here — as a flex item (the
	   theme's body is a column flex container) `margin: 0 auto` makes a
	   block shrink-wrap to its content and centre instead of stretching,
	   which collapsed the strip to the width of the logos themselves. */
	width: 100%;
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: 56px 24px;
	text-align: center;
}

.aj-company-logos__eyebrow {
	margin: 0 0 40px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--aj-text-muted);
}

.aj-company-logos--stats .aj-company-logos__stats-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	text-align: left;
	margin-bottom: 36px;
	padding: 32px;
	background: var(--aj-bg-subtle);
	border-radius: var(--aj-radius-lg);
}

.aj-company-logos__headline {
	margin: 0;
	max-width: 380px;
	font-size: 22px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-company-logos__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.aj-company-logos__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-left: 16px;
	border-left: 2px solid var(--aj-border);
	min-width: 140px;
}

.aj-company-logos__stat-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-company-logos__stat-label {
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-company-logos__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* space-around rather than space-between: the last row of a wrapped set
	   keeps its own even spacing instead of stranding one logo hard left. */
	justify-content: space-around;
	gap: 32px 24px;
}

.aj-company-logos__slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--aj-logo-height);
	/* Never compress: without this the row squeezes all the logos into one
	   line on a phone (flex items shrink before they wrap) instead of
	   wrapping onto a second row at full size. */
	flex: 0 0 auto;
	transition: opacity 0.3s ease;
}

.aj-company-logos__slot--fade {
	opacity: 0;
}

.aj-company-logos__slot img {
	max-height: var(--aj-logo-height);
	/* Square company logos (most of them here) are bounded by the height;
	   the width cap only exists to stop a very wide lockup from eating the
	   row, so it's generous rather than tight. */
	max-width: min(200px, 100%);
	width: auto;
	height: auto;
	object-fit: contain;
}

.aj-company-logos--grayscale .aj-company-logos__slot img {
	filter: grayscale(100%);
	opacity: 0.55;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.aj-company-logos--grayscale .aj-company-logos__slot:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

@media (max-width: 700px) {
	.aj-company-logos--stats .aj-company-logos__stats-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.aj-company-logos {
		padding: 40px 24px;
	}

	.aj-company-logos__row {
		justify-content: center;
		gap: 28px 20px;
	}
}

/* -----------------------------------------------------------------
 * Spotlight hero (class-widget-hero-search.php, layout "spotlight")
 *
 * Moving footage — or a still, slowly drifting — behind a scrim that is
 * heaviest on the text side, a very large headline, an "I want to work /
 * I want to hire" toggle, one search, and category shortcuts.
 *
 * Both sides of the toggle are in the page at once and stacked in the same
 * grid cell; :has() on the checked radio crossfades between them, so the
 * whole hero is script-free and each search stays an ordinary crawlable
 * GET form. The hidden side is visibility: hidden, which also takes it out
 * of the accessibility tree.
 *
 * The scrim is the one gradient in this stylesheet, and it is not a brand
 * gradient: it is a photographic scrim, dark where the words are and clear
 * where the picture should still read. A flat overlay strong enough for
 * the headline greys out the whole photograph.
 * -------------------------------------------------------------- */

.aj-hero.aj-hero--spotlight {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Deliberately short: the logo band underneath has to be on screen with
	   the hero, not a scroll away. */
	padding: 76px 24px 72px;
	text-align: left;
	color: #fff;
}

.aj-hero-spotlight__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-image: var(--aj-hero-image, none);
	background-size: cover;
	background-position: center;
	object-fit: cover;
}

.aj-hero-spotlight__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(9, 14, 24, var(--aj-hero-scrim, 0.62)) 0%,
		rgba(9, 14, 24, var(--aj-hero-scrim, 0.62)) 34%,
		rgba(9, 14, 24, 0.12) 100%
	);
}

.aj-hero-spotlight {
	position: relative;
	z-index: 2;
	max-width: 1160px;
	margin: 0 auto;
}

/* The headline and the chips live in one grid cell each and crossfade —
   both sides of each pair are close enough in height that reserving room
   for the taller one never leaves a visible gap under the shorter.
   The work button and the hire form are NOT part of this: a one-line
   button and a two-row search field differ far too much in height for
   that trick, so they get a plain display swap instead (below). */
.aj-hero-spotlight__copy,
.aj-hero-spotlight__chipsets {
	display: grid;
}

.aj-hero-spotlight__copy-side,
.aj-hero-spotlight__chips {
	grid-area: 1 / 1;
	transition: opacity 260ms ease, transform 260ms ease, visibility 260ms;
}

/* Hidden side: invisible, unfocusable, and out of the a11y tree. */
.aj-hero-spotlight__copy-side[data-mode="hire"],
.aj-hero-spotlight__chips[data-mode="hire"] {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
}

.aj-hero-spotlight:has(.aj-hero-spotlight__mode-input[value="hire"]:checked) [data-mode="work"] {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
}

.aj-hero-spotlight:has(.aj-hero-spotlight__mode-input[value="hire"]:checked) [data-mode="hire"] {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.aj-hero-spotlight__heading {
	margin: 0 0 20px;
	max-width: 16ch;
	font-size: clamp(40px, 5.6vw, 72px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: #fff;
}

.aj-hero-spotlight__sub {
	margin: 0 0 36px;
	max-width: 46ch;
	font-size: 19px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}

/* The "I want to..." segmented control, with a pill that slides between
   the two options rather than blinking from one to the other. */
.aj-hero-spotlight__modes {
	position: relative;
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0;
	margin: 0 0 22px;
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.aj-hero-spotlight__modes::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 6px;
	left: 6px;
	width: calc(50% - 6px);
	height: calc(100% - 12px);
	border-radius: 999px;
	background: #fff;
	transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.aj-hero-spotlight:has(.aj-hero-spotlight__mode-input[value="hire"]:checked) .aj-hero-spotlight__modes::before {
	transform: translateX(100%);
}

.aj-hero-spotlight__mode-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.aj-hero-spotlight__mode {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	padding: 12px 28px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: color 200ms ease;
}

.aj-hero-spotlight__mode-input:checked + .aj-hero-spotlight__mode {
	color: var(--aj-text);
}

.aj-hero-spotlight__mode-input:focus-visible + .aj-hero-spotlight__mode {
	outline: 2px solid #fff;
	outline-offset: 5px;
}

.aj-hero-spotlight__chipsets {
	margin-top: 28px;
}

.aj-hero-spotlight__chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.aj-hero-spotlight__chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.aj-hero-spotlight__chip:hover,
.aj-hero-spotlight__chip:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--aj-text);
	text-decoration: none;
}

.aj-hero-spotlight__chip-arrow {
	transition: transform 160ms ease;
}

.aj-hero-spotlight__chip:hover .aj-hero-spotlight__chip-arrow {
	transform: translateX(3px);
}

/* -----------------------------------------------------------------
 * Motion: a slow drift over the picture, and the hero's own parts
 * arriving one after another. All of it is opt-in to motion.
 * -------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.aj-hero-spotlight__media {
		animation: aj-hero-drift 28s ease-in-out infinite alternate;
	}

	.aj-hero-spotlight__copy,
	.aj-hero-spotlight__modes,
	.aj-hero-spotlight__actions,
	.aj-hero-spotlight__chipsets {
		animation: aj-hero-rise 620ms cubic-bezier(0.16, 0.84, 0.44, 1) backwards;
	}

	.aj-hero-spotlight__copy {
		animation-delay: 60ms;
	}

	.aj-hero-spotlight__modes {
		animation-delay: 180ms;
	}

	.aj-hero-spotlight__actions {
		animation-delay: 260ms;
	}

	.aj-hero-spotlight__chipsets {
		animation-delay: 340ms;
	}
}

@keyframes aj-hero-drift {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.08);
	}
}

@keyframes aj-hero-rise {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 720px) {
	.aj-hero.aj-hero--spotlight {
		padding: 56px 20px 48px;
	}

	/* Full-width text over the picture needs cover everywhere, not just
	   down one side. */
	.aj-hero-spotlight__scrim {
		background: rgba(9, 14, 24, calc(var(--aj-hero-scrim, 0.62) + 0.14));
	}

	.aj-hero-spotlight__heading {
		max-width: none;
	}

	.aj-hero-spotlight__sub {
		margin-bottom: 28px;
		font-size: 16px;
	}

	.aj-hero-spotlight__modes {
		display: grid;
		grid-auto-flow: row;
		width: 100%;
		border-radius: var(--aj-radius-lg);
	}

	.aj-hero-spotlight__modes::before {
		width: calc(100% - 12px);
		height: calc(50% - 6px);
		border-radius: calc(var(--aj-radius-lg) - 4px);
	}

	.aj-hero-spotlight:has(.aj-hero-spotlight__mode-input[value="hire"]:checked) .aj-hero-spotlight__modes::before {
		transform: translateY(100%);
	}

	.aj-hero-spotlight__mode {
		min-width: 0;
	}
}

/* On anything wider than a phone, the "Spotlight: rounded card" layout
   makes the hero an inset, rounded card — page background showing on both
   sides and above it — rather than a full-bleed band. "Spotlight: full
   width" is the same hero with this class left off. calc(100% - 48px) guarantees a
   visible gutter even on a modest laptop screen; min() caps the card
   itself at the site's usual content width on anything wider than that. */
@media (min-width: 721px) {
	.aj-hero.aj-hero--spotlight.aj-hero--inset {
		max-width: min(var(--aj-content-max), calc(100% - 48px));
		margin: 32px auto 40px;
		border-radius: 28px;
	}
}

/* -----------------------------------------------------------------
 * The work side's button, and the client logo band under the hero
 * -------------------------------------------------------------- */

/* Two buttons now, one per side — the hire button hidden by default (the
   work side is the default side), shown (not faded in) when the hire
   radio is checked, and the work button the reverse. See the comment
   above .aj-hero-spotlight__copy for why this pair uses display instead
   of a crossfade. */
.aj-hero-spotlight__cta[data-mode="hire"] {
	display: none;
}

.aj-hero-spotlight:has(.aj-hero-spotlight__mode-input[value="hire"]:checked) .aj-hero-spotlight__cta[data-mode="work"] {
	display: none;
}

.aj-hero-spotlight:has(.aj-hero-spotlight__mode-input[value="hire"]:checked) .aj-hero-spotlight__cta[data-mode="hire"] {
	display: block;
}

/* A rounded rectangle, not a pill: the reference's primary button is
   squarer than the toggle and the chips around it, which is what keeps it
   reading as the one thing to press. */
.aj-hero-spotlight__cta-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 17px 32px;
	border-radius: 10px;
	background: var(--aj-brand);
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(9, 14, 24, 0.22);
	transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.aj-hero-spotlight__cta-button:hover,
.aj-hero-spotlight__cta-button:focus-visible {
	background: var(--aj-brand-dark);
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 16px 38px rgba(9, 14, 24, 0.3);
}

.aj-hero-spotlight__cta-arrow {
	transition: transform 160ms ease;
}

.aj-hero-spotlight__cta-button:hover .aj-hero-spotlight__cta-arrow {
	transform: translateX(4px);
}

/* The band under the hero. It is a section of its own, printed by the hero
   widget right after it, so the two are always adjacent — the hero's
   height above is budgeted to leave this on screen with it. */
.aj-logo-strip {
	padding: 30px 24px 34px;
	background: var(--aj-bg);
	text-align: center;
}

.aj-logo-strip__label {
	margin: 0 0 22px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aj-text-muted);
}

/* Sweeping is a mobile-only presentation — shown again in the max-width:
   720px query below, alongside .aj-logo-strip__grid switching the other
   way. Logos don't move on a desktop screen; see .aj-logo-strip__grid. */
.aj-logo-strip__window {
	display: none;
	overflow: hidden;
	/* Fades the row out at both edges instead of clipping a logo in half. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

/* The logos are printed twice and the track slides left by exactly one
   copy, then restarts — invisible because the second copy is where the
   first began. For that, one copy has to be exactly half the track, so the
   track carries one extra gap of padding at the end (otherwise the join
   is short by half a gap and jumps). */
.aj-logo-strip__track {
	--aj-logo-gap: 28px;
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--aj-logo-gap);
	margin: 0;
	padding: 0 var(--aj-logo-gap) 0 0;
	width: max-content;
}

/* A bordered, shadowed card rather than a bare image: several employer
   logos are themselves near-white or on a white background, which would
   otherwise vanish against this section's white background. The card
   gives every logo the same visible edge regardless of its own colours.

   The card has a fixed WIDTH as well as height, not just a max-width on
   the image inside it: employer logos arrive at every aspect ratio (a
   near-square icon, a wide horizontal wordmark, a tall vertical stack),
   and letting each card's width follow its own image's shape made the
   row visibly uneven — some cards noticeably wider or narrower than their
   neighbours. Every card is now the same size regardless of what shape
   logo is inside it; the image scales down to fit within it on both axes
   (object-fit: contain), never up past its own resolution. */
.aj-logo-strip__track a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 96px;
	padding: 12px 26px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-sm);
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.aj-logo-strip__track a:hover,
.aj-logo-strip__track a:focus-visible {
	border-color: var(--aj-brand-light);
	box-shadow: var(--aj-shadow-md);
	transform: translateY(-2px);
}

/* Elementor ships `.elementor img { height: auto }` at the same weight as a
   single-class selector and loads later, so this needs the extra element to
   win the tie. max-width/max-height (not a fixed size) is what lets a wide
   logo and a tall one both shrink to fit the same card without distorting
   either — object-fit: contain never upscales past the image's own size. */
.aj-logo-strip__track a img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media (prefers-reduced-motion: no-preference) {
	.aj-logo-strip__track {
		/* Linear and one-directional: a steady leftward loop. The duration
		   scales with the number of logos (see class-widget-hero-search.php),
		   so the pace stays the same as companies are added. */
		animation: aj-logo-sweep var(--aj-logo-sweep, 90s) linear infinite;
	}

	.aj-logo-strip__window:hover .aj-logo-strip__track {
		animation-play-state: paused;
	}
}

@keyframes aj-logo-sweep {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* The desktop presentation: shown by default (hidden again below 720px),
   a still row rather than a sweep — a fresh random handful of the pool,
   picked in the browser on every page load by assets/js/logo-strip.js.
   Card styling duplicates .aj-logo-strip__track a rather than sharing a
   class with it, so the two presentations can't drift into affecting each
   other by accident. Same card size as the mobile sweep; staying on one
   row at this size is handled by keeping the count down (see
   logos_desktop_count in class-widget-hero-search.php), not by shrinking
   the cards. */
.aj-logo-strip__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px;
	list-style: none;
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: 0;
}

.aj-logo-strip__grid a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 96px;
	padding: 12px 26px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-sm);
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.aj-logo-strip__grid a:hover,
.aj-logo-strip__grid a:focus-visible {
	border-color: var(--aj-brand-light);
	box-shadow: var(--aj-shadow-md);
	transform: translateY(-2px);
}

.aj-logo-strip__grid a img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media (max-width: 720px) {
	.aj-hero-spotlight__cta-button {
		width: 100%;
		justify-content: center;
		padding: 16px 24px;
		font-size: 16px;
	}

	.aj-hero-spotlight__cta {
		justify-self: stretch;
	}

	/* Keep the compact logo strip visually attached to the hero. The following
	   intro retains the shared 56px mobile section inset. */
	.aj-logo-strip {
		padding: 36px 20px 0;
	}

	/* Swap presentations: the grid was the default (desktop), the sweep
	   window was hidden by default — a phone gets the reverse. */
	.aj-logo-strip__grid {
		display: none;
	}

	.aj-logo-strip__window {
		display: block;
	}

	.aj-logo-strip__track {
		--aj-logo-gap: 20px;
	}

	.aj-logo-strip__track a {
		width: 150px;
		height: 72px;
		padding: 10px 18px;
	}
}

@media (max-width: 480px) {
	/* Four pills wrap to three rows on a narrow phone and push everything
	   below the hero off the screen; three is enough of a hint. */
	.aj-hero-spotlight__chips li:nth-child(n + 4) {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Snapshots, requirements and the compact term picker
 * (Aruba_Jobs_Job_Attributes). A job card shows the job's own Job
 * Snapshot; company cards, the job sidebar and the company page show the
 * company's Company Snapshot. Both are capped (30 / 25 words) so cards
 * stay a predictable height; cards are also flex columns with the footer
 * pinned to the bottom so a row lines up whatever each one carries.
 * ------------------------------------------------------------------- */

.screen-reader-text,
.aj-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.aj-job-card {
	display: flex;
	flex-direction: column;
}

.aj-job-card__footer {
	margin-top: auto;
}

.aj-job-card__snapshot,
.aj-company-grid-card__snapshot {
	overflow-wrap: anywhere;
}

.aj-sidebar-company__snapshot {
	margin: 14px 0 16px;
	color: var(--aj-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

.aj-company-hero__snapshot {
	margin: 0 0 12px;
	max-width: 62ch;
	color: var(--aj-text-muted);
	font-size: 16px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------
 * Single job page (single-aj_job.php)
 *
 * Title, then a two-column grid: .aj-job-summary (ONE panel — the hiring
 * company, its Company Snapshot, the job overview ending in Apply/Save)
 * heads the main column with the description under it, and the sidebar
 * (.aj-job-side: job facts, then the sponsored slot) starts level with
 * the panel on the right. On phones the columns stack: panel, job facts,
 * description, then the sponsored slot. Scoped to .aj-job-single--job so the company and
 * candidate pages, which share .aj-job-single, are untouched.
 * ------------------------------------------------------------------- */

.aj-job-page {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: var(--aj-section-padding) 24px 0;
}

.aj-job-page__header {
	margin-bottom: 24px;
}

.aj-job-page .aj-job-single__title {
	margin: 0;
	overflow-wrap: anywhere;
}

.aj-job-summary {
	margin-bottom: 40px;
	padding: 28px;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	box-shadow: var(--aj-shadow-sm);
}

.aj-job-summary--no-company .aj-job-summary__head {
	display: none;
}

.aj-job-summary--no-company .aj-overview {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.aj-job-summary .aj-sidebar-company {
	align-items: flex-start;
	min-width: 0;
	margin: 0;
}

.aj-sidebar-company__identity {
	min-width: 0;
}

.aj-job-summary .aj-sidebar-company__name {
	font-size: 18px;
	overflow-wrap: anywhere;
}

.aj-sidebar-company__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0;
	font-size: 13px;
}

/* The Save heart: last item of the facts row, pushed to the right edge
 * (wraps onto its own line, still right-aligned, when the row is full). */
.aj-job-summary .aj-sidebar-actions {
	flex: 0 0 auto;
	margin: 0 0 0 auto;
}

/* Apply Now — full width under the Skills card in the sidebar. */
.aj-job-apply {
	display: flex;
	width: 100%;
	min-height: 50px;
	margin: 0 0 24px;
}

/* The snapshot runs the full width of the panel. */
.aj-job-summary .aj-sidebar-company__snapshot {
	margin: 18px 0 0;
	font-size: 15px;
}

/* The overview keeps its item styling but loses its own card chrome — it
 * is part of the panel now, set off by a divider, and ends with the
 * Apply/Save actions. */
.aj-job-summary .aj-overview {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 24px 32px;
	margin: 24px 0 0;
	padding: 24px 0 0;
	border: 0;
	border-top: 1px solid var(--aj-border);
	border-radius: 0;
	box-shadow: none;
}

.aj-job-summary .aj-overview__item {
	flex: 0 1 auto;
	min-width: 120px;
}

.aj-job-single--job {
	max-width: none;
	margin: 0;
	padding: 0 0 var(--aj-section-padding);
	grid-template-columns: minmax(0, 1fr) 340px;
	/* Row 2 is flexible so the sidebar (spanning both rows) never pushes
	 * the description down away from the panel above it. */
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"summary side"
		"main    side";
	gap: 0 48px;
}

.aj-job-single--job > .aj-job-summary {
	grid-area: summary;
	min-width: 0;
}

.aj-job-single--job > .aj-job-side {
	grid-area: side;
	align-self: start;
	min-width: 0;
}

.aj-job-single--job > .aj-job-single__main {
	grid-area: main;
	min-width: 0;
}

.aj-job-sidebar--general {
	position: static;
	min-width: 0;
}

.aj-job-page .aj-sidebar-card h2 {
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--aj-text-muted);
	margin: 0 0 12px;
}

.aj-sidebar-card--compact {
	padding: 20px 24px;
}

.aj-job-page .aj-sidebar-team,
.aj-job-page .aj-job-sidebar__tags,
.aj-job-requirements__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aj-job-page .aj-sidebar-team li {
	display: flex;
}

.aj-sidebar-team__initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--aj-radius-sm);
	background: var(--aj-brand-light);
	color: var(--aj-brand-dark, var(--aj-brand));
	font-size: 13px;
	font-weight: 700;
}

.aj-job-requirements {
	display: grid;
	gap: 18px;
}

.aj-job-requirements__rows {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 10px;
	margin: 0;
}

/* Every row shares the list's two columns (subgrid), so the label column
 * is exactly as wide as the longest label — no fixed width, labels never
 * wrap, and long values wrap inside their own column. */
.aj-job-requirements__row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: baseline;
	padding-top: 10px;
	border-top: 1px solid var(--aj-border);
}

@supports not (grid-template-columns: subgrid) {
	.aj-job-requirements__row {
		grid-template-columns: minmax(max-content, 0.8fr) minmax(0, 1.2fr);
		column-gap: 16px;
	}
}

.aj-job-requirements__row:first-child {
	padding-top: 0;
	border-top: 0;
}

.aj-job-requirements__row dt {
	color: var(--aj-text-muted);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.aj-job-requirements__row dd {
	min-width: 0;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.aj-job-page .aj-tag {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.aj-job-page a.aj-tag:focus-visible {
	outline: 2px solid var(--aj-brand);
	outline-offset: 2px;
}

/* Required, preferred and languages stay visibly different at a glance. */
.aj-tag--required {
	color: var(--aj-brand-dark, var(--aj-brand));
	background: var(--aj-brand-light);
}

.aj-tag--preferred {
	color: var(--aj-text);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--aj-border);
}

.aj-tag--language {
	color: var(--aj-text-muted);
	background: var(--aj-bg-subtle);
}

/* Fixed-shape sponsored slots (Aruba_Jobs_Banners placements with a
 * slot_ratio): the frame reserves its aspect ratio before the image loads
 * (no layout shift) and the creative is fitted inside it whole — never
 * stretched or cropped — centred on a quiet background if its shape is
 * off. The ratio itself comes from the placement config (--aj-ad-ratio). */
.aj-ad-banner--sized {
	width: 100%;
	margin: 0 auto 24px;
}

/* Keeps its sidebar footprint (340 × 350) — including when the sidebar
 * drops below the content on tablets and phones, where it stays a centred
 * portrait unit instead of stretching to the full page width. */
.aj-ad-banner--job_sidebar_vertical {
	max-width: 340px;
}

.aj-ad-banner__link {
	display: block;
	border-radius: var(--aj-radius);
}

.aj-ad-banner__link:focus-visible {
	outline: 2px solid var(--aj-brand);
	outline-offset: 3px;
}

.aj-ad-banner__media {
	display: block;
	width: 100%;
	aspect-ratio: var(--aj-ad-ratio);
	overflow: hidden;
	border-radius: var(--aj-radius);
	background: var(--aj-bg-subtle);
}

.aj-ad-banner__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
	border-radius: 0;
}

@media (max-width: 960px) {
	.aj-job-summary {
		padding: 24px;
	}

	/* One column: the sidebar wrapper dissolves so its two parts can sit
	 * either side of the description — job facts right after the panel,
	 * the sponsored slot and report link at the end. */
	.aj-job-single--job {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas:
			"summary"
			"facts"
			"main"
			"general";
	}

	.aj-job-single--job > .aj-job-side {
		display: contents;
	}

	.aj-job-single--job .aj-job-facts {
		grid-area: facts;
		min-width: 0;
	}

	.aj-job-single--job .aj-job-sidebar--general {
		grid-area: general;
	}
}

@media (max-width: 560px) {
	.aj-job-page {
		padding-left: 16px;
		padding-right: 16px;
	}

	.aj-job-page .aj-job-single__title {
		font-size: 30px;
	}

	.aj-job-summary {
		padding: 20px;
	}

	.aj-job-summary .aj-sidebar-actions {
		flex: 1 1 100%;
		justify-content: flex-end;
	}

	.aj-job-summary .aj-overview {
		gap: 20px 16px;
	}

	.aj-job-summary .aj-overview__item {
		flex: 1 1 130px;
	}
}

/* Snapshot field + live word counter (assets/js/word-counter.js). */
.aj-snapshot-field {
	margin: 0 0 16px;
}

.aj-snapshot-field__label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 14px;
}

.aj-snapshot-field__input {
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
}

.aj-snapshot-field__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 4px 0 0;
}

.aj-snapshot-field__meta .aj-field-note {
	margin: 0;
}

.aj-snapshot-field__count {
	flex-shrink: 0;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--aj-text-muted);
}

.aj-snapshot-field.is-over .aj-snapshot-field__count {
	color: #b32d2e;
	font-weight: 700;
}

.aj-snapshot-field.is-over .aj-snapshot-field__input {
	border-color: #b32d2e;
	box-shadow: 0 0 0 3px rgba(179, 45, 46, 0.12);
}

.aj-skill-picker__help {
	margin: 0 0 8px;
}

.aj-skill-picker__option-note {
	font-size: 12px;
	color: var(--aj-text-muted);
}

.aj-legacy-note {
	padding: 8px 12px;
	border-radius: var(--aj-radius-sm);
	background: #fcf9e8;
	color: var(--aj-text);
}

/* Languages / locations: inline pills — no proficiency dropdown, so the
 * one-row-per-item layout skills need would only waste space. */
.aj-skill-picker--compact .aj-skill-picker__chips {
	flex-direction: row;
	flex-wrap: wrap;
}

.aj-skill-picker--compact .aj-skill-picker__chip {
	padding: 4px 4px 4px 12px;
	border-radius: 999px;
	background: var(--aj-brand-light);
	border-color: transparent;
}

.aj-skill-picker__chip-remove:focus-visible {
	outline: 2px solid var(--aj-brand);
	outline-offset: 1px;
}

/* ------------------------------------------------------------------
 * Filled positions (Aruba_Jobs_Filled_Jobs) — hidden from the normal
 * job list, reachable through the Browse Jobs toggle or their own URL.
 * ------------------------------------------------------------------ */

.aj-browse-jobs__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
}

.aj-filled-toggle {
	font-size: 14px;
	font-weight: 600;
	color: var(--aj-brand);
	text-decoration: none;
}

.aj-filled-toggle:hover,
.aj-filled-toggle:focus-visible {
	text-decoration: underline;
}

.aj-filled-intro {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg-subtle);
	color: var(--aj-text-muted);
	font-size: 14px;
}

.aj-filled-badge {
	display: inline-flex;
	align-items: center;
	background: var(--aj-text-muted);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.aj-job-card.is-filled {
	padding-top: 44px;
	background: var(--aj-bg-subtle);
}

.aj-job-card.is-filled > .aj-filled-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
}

.aj-job-single__title .aj-filled-badge {
	vertical-align: middle;
	margin-left: 10px;
}

.aj-filled-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	padding: 18px 20px;
	border: 1px solid var(--aj-border);
	border-left: 4px solid var(--aj-text-muted);
	border-radius: var(--aj-radius);
	background: var(--aj-bg-subtle);
}

.aj-filled-notice__text {
	flex: 1 1 320px;
}

.aj-filled-notice p {
	margin: 0;
	color: var(--aj-text-muted);
}

.aj-filled-notice .aj-filled-notice__title {
	margin-bottom: 4px;
	color: var(--aj-text);
	font-weight: 700;
}

.aj-reopen-alert.is-saved {
	background: transparent;
	color: var(--aj-text);
	border: 1.5px solid var(--aj-border);
	box-shadow: none;
}

.aj-status-badge--filled {
	background: #eceef2;
	color: #414a57;
}

/* Experience checkboxes (Aruba_Jobs_Job_Attributes::render_experience_checkboxes)
 * on the employer job form: level and stated requirement, several allowed. */
.aj-experience-checkboxes {
	display: grid;
	gap: 12px;
	margin: 6px 0 4px;
}

.aj-experience-checkboxes__group {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.aj-experience-checkboxes__group legend {
	margin: 0 0 6px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--aj-text-muted);
}

.aj-experience-checkboxes__option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 16px 6px 0;
	font-weight: 400;
}

/* ==========================================================================
   Résumé import (Aruba_Jobs_Resume_Import)
   ========================================================================== */

/* ---- The card under the CV field --------------------------------------- */

.aj-resume-import {
	margin-top: 20px;
}

.aj-resume-import .aj-form-error,
.aj-resume-import .aj-form-success {
	margin: 0 0 16px;
}

.aj-resume-import__status {
	display: flex;
	align-items: center;
	gap: 16px 20px;
	flex-wrap: wrap;
}

.aj-resume-import__status > div {
	flex: 1 1 280px;
	min-width: 0;
}

.aj-resume-import__status h2 {
	margin: 0 0 4px;
	font-size: 18px;
}

.aj-resume-import__status p {
	margin: 0;
	color: var(--aj-text-muted);
}

.aj-resume-import__privacy {
	margin: 14px 0 0;
}

.aj-resume-import.is-reading {
	border-color: var(--aj-brand);
	background: var(--aj-brand-light);
}

.aj-resume-import.is-ready {
	border-color: #9fd5b4;
	background: #f1faf4;
}

.aj-resume-import.is-failed {
	border-color: #f1b8b3;
	background: #fdf4f3;
}

.aj-resume-import__spinner,
.aj-resume-import__icon {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.aj-resume-import__spinner {
	border: 3px solid rgba(0, 112, 255, 0.2);
	border-top-color: var(--aj-brand);
	animation: aj-spin 0.9s linear infinite;
}

.aj-resume-import__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 18px;
	color: #fff;
}

.aj-resume-import__icon.is-ready {
	background: #1e8a4c;
}

.aj-resume-import__icon.is-failed {
	background: #c5372c;
}

.aj-button.is-busy {
	cursor: progress;
	opacity: 0.85;
}

.aj-button.is-busy::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	vertical-align: -2px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: aj-spin 0.8s linear infinite;
}

@keyframes aj-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aj-button.is-busy::before,
	.aj-resume-import__spinner {
		animation: none;
	}
}

/* ---- Review screen ---------------------------------------------------- */

/* Lives in the dashboard's content column: full width, not the narrow
   centred standalone .aj-form. */
.aj-form.aj-resume-review {
	max-width: none;
	margin: 0;
	padding: 0;
}

.aj-resume-review__note {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: var(--aj-radius-sm);
	background: var(--aj-accent-light);
	color: var(--aj-accent);
}

.aj-resume-review__group {
	margin-bottom: 20px;
}

.aj-resume-review__group-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-bottom: 8px;
}

.aj-resume-review__group-head h2 {
	margin: 0;
	font-size: 18px;
}

.aj-resume-review__summary {
	font-size: 13px;
	color: var(--aj-text-muted);
}

/* One field: label + badge, then profile vs résumé side by side, then the choice. */
.aj-review-row {
	padding: 16px 0;
	border-top: 1px solid var(--aj-border);
}

.aj-review-row:first-of-type {
	border-top: 0;
}

.aj-review-row__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.aj-review-row__label {
	font-size: 15px;
}

.aj-review-row__value {
	margin: 0;
	color: var(--aj-text-muted);
	overflow-wrap: anywhere;
}

.aj-review-row__compare {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 12px;
	margin-bottom: 12px;
}

.aj-review-value {
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg-subtle);
}

.aj-review-value.is-parsed {
	padding: 0;
	border: 0;
	background: transparent;
}

.aj-review-value__label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--aj-text-muted);
}

.aj-review-value__text {
	display: block;
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.aj-review-value__text em {
	color: var(--aj-text-muted);
}

/* A value that differs from the profile is highlighted on both sides. */
.aj-review-row.is-conflict .aj-review-value.is-current {
	border-color: #f0c98a;
	background: var(--aj-accent-light);
}

.aj-review-row.is-conflict .aj-review-value.is-parsed input,
.aj-review-row.is-conflict .aj-review-value.is-parsed textarea {
	border-color: #f0c98a;
}

.aj-review-row.is-skipped .aj-review-value.is-parsed,
.aj-review-entry.is-skipped .aj-review-entry__title {
	opacity: 0.5;
}

.aj-review-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.aj-review-badge.is-new {
	background: var(--aj-brand-light);
	color: var(--aj-brand-dark);
}

.aj-review-badge.is-conflict {
	background: var(--aj-accent-light);
	color: var(--aj-accent);
}

.aj-review-badge.is-same {
	background: var(--aj-bg-subtle);
	color: var(--aj-text-muted);
}

.aj-resume-import__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--aj-text-muted);
}

.aj-resume-import__field input,
.aj-resume-import__field textarea {
	width: 100%;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--aj-text);
}

/* Segmented "Use résumé value | Keep current value" control. */
.aj-choice {
	display: inline-flex;
	margin: 0;
	padding: 3px;
	border: 1px solid var(--aj-border);
	border-radius: 999px;
	background: var(--aj-bg-subtle);
	min-width: 0;
}

.aj-choice__option {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.aj-choice__option input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.aj-choice__option span {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--aj-text-muted);
	transition: background var(--aj-motion) ease, color var(--aj-motion) ease, box-shadow var(--aj-motion) ease;
	white-space: nowrap;
}

.aj-choice__option input:checked + span {
	background: var(--aj-bg);
	color: var(--aj-text);
	box-shadow: var(--aj-shadow-sm), 0 0 0 1px var(--aj-border);
}

.aj-choice__option input[data-review-use]:checked + span {
	background: var(--aj-brand);
	color: #fff;
	box-shadow: none;
}

.aj-choice__option input:focus-visible + span {
	outline: 2px solid var(--aj-brand);
	outline-offset: 2px;
}

/* The theme styles every fieldset/radio in .aj-form as a boxed group of
   chips; the segmented control resets that. */
.aj-form fieldset.aj-choice {
	margin: 0;
	padding: 3px;
	border: 1px solid var(--aj-border);
	border-radius: 999px;
}

.aj-form fieldset.aj-choice label.aj-choice__option:has(> input) {
	display: inline-flex;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-weight: 600;
}

.aj-form fieldset.aj-choice label.aj-choice__option:has(> input:checked) {
	background: transparent;
}

.aj-form fieldset.aj-choice label.aj-choice__option:has(> input:focus-visible) {
	outline: 0;
}

.aj-form fieldset.aj-choice label.aj-choice__option > input {
	width: 100%;
	height: 100%;
	pointer-events: auto;
}

.aj-form .aj-resume-import__field {
	margin: 0;
}

/* Experience / education / certification entries. */
.aj-review-entry {
	padding: 14px 16px;
	margin-top: 10px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
}

.aj-review-entry.is-duplicate {
	background: var(--aj-bg-subtle);
}

.aj-review-entry__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	flex-wrap: wrap;
}

.aj-review-entry__title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 260px;
	min-width: 0;
	transition: opacity var(--aj-motion) ease;
}

.aj-review-entry__title strong {
	overflow-wrap: anywhere;
}

.aj-review-entry__title > span:not(.aj-review-badge) {
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-review-entry__title .aj-review-badge {
	align-self: flex-start;
	margin-top: 4px;
}

.aj-review-entry__edit {
	margin-top: 10px;
}

.aj-review-entry__edit summary {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: var(--aj-brand);
	cursor: pointer;
	list-style: none;
}

.aj-review-entry__edit summary::-webkit-details-marker {
	display: none;
}

.aj-review-entry__edit summary::after {
	content: " ▾";
}

.aj-review-entry__edit[open] summary::after {
	content: " ▴";
}

.aj-resume-review__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 14px;
	margin-top: 12px;
}

.aj-resume-review__fields .aj-resume-import__field:has(textarea) {
	grid-column: 1 / -1;
}

/* Languages and skills: toggle chips. */
.aj-review-chips__label {
	margin: 12px 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--aj-text-muted);
}

.aj-review-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.aj-review-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	cursor: pointer;
}

.aj-review-chip input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.aj-review-chip span,
.aj-review-chip.is-listed {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--aj-border);
	border-radius: 999px;
	background: var(--aj-bg);
	font-size: 14px;
	color: var(--aj-text-muted);
	transition: background var(--aj-motion) ease, border-color var(--aj-motion) ease, color var(--aj-motion) ease;
}

.aj-review-chip span::before {
	content: "+";
	font-weight: 700;
}

.aj-review-chip input:checked + span {
	border-color: var(--aj-brand);
	background: var(--aj-brand-light);
	color: var(--aj-brand-dark);
	font-weight: 600;
}

.aj-review-chip input:checked + span::before {
	content: "✓";
}

.aj-review-chip input:focus-visible + span {
	outline: 2px solid var(--aj-brand);
	outline-offset: 2px;
}

.aj-review-chip.is-listed {
	background: var(--aj-bg-subtle);
	cursor: default;
}

.aj-review-chip.is-listed small {
	font-size: 12px;
}

.aj-resume-review__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

@media (max-width: 640px) {
	.aj-review-row__compare,
	.aj-resume-review__fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.aj-choice {
		display: flex;
		width: 100%;
	}

	.aj-choice__option {
		flex: 1 1 50%;
	}

	.aj-choice__option span {
		display: block;
		text-align: center;
		padding: 9px 8px;
		white-space: normal;
	}

	.aj-review-entry__head .aj-choice {
		flex: 1 1 100%;
	}

	.aj-resume-review__actions .aj-button {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   My CVs (Aruba_Jobs_CVs) and the CV choice when applying
   ========================================================================== */

.aj-my-cvs {
	margin-top: 20px;
	scroll-margin-top: 96px;
}

.aj-my-cvs__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 20px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.aj-my-cvs__head > div {
	flex: 1 1 320px;
	min-width: 0;
}

.aj-my-cvs__head h2 {
	margin: 0 0 4px;
	font-size: 18px;
}

.aj-my-cvs__head p {
	margin: 0;
	color: var(--aj-text-muted);
}

.aj-my-cvs .aj-form-error,
.aj-my-cvs .aj-form-success {
	margin: 0 0 12px;
}

.aj-my-cvs__empty {
	margin: 0;
	color: var(--aj-text-muted);
}

.aj-my-cvs__pick {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid #f2d98a;
	border-radius: var(--aj-radius);
	background: #fff8e6;
}

.aj-my-cvs__pick p {
	margin: 0 0 8px;
}

.aj-my-cvs__pick-option {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-weight: 500;
}

.aj-my-cvs__pick .aj-button {
	margin-top: 6px;
}

.aj-my-cvs__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aj-cv-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px 16px;
	flex-wrap: wrap;
	padding: 14px 16px;
	margin-top: 10px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
}

.aj-cv-item.is-default {
	border-color: var(--aj-brand);
	box-shadow: 0 0 0 1px var(--aj-brand);
}

.aj-cv-item__main {
	flex: 1 1 240px;
	min-width: 0;
}

.aj-cv-item__title {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.aj-cv-item__title strong {
	overflow-wrap: anywhere;
}

.aj-cv-item__meta {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-cv-item__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.aj-cv-inline-form {
	display: inline;
	margin: 0;
}

.aj-cv-action {
	padding: 4px 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--aj-brand);
	text-decoration: none;
	cursor: pointer;
}

.aj-cv-action:hover {
	text-decoration: underline;
}

.aj-cv-item__more {
	position: relative;
}

.aj-cv-item__more summary {
	list-style: none;
}

.aj-cv-item__more summary::-webkit-details-marker {
	display: none;
}

.aj-cv-item__more summary::after {
	content: " ▾";
}

.aj-cv-item__panel {
	flex-basis: 100%;
	margin-top: 10px;
	padding: 14px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg-subtle);
	min-width: min(360px, 80vw);
}

.aj-cv-item__panel form {
	margin: 0 0 12px;
}

.aj-cv-item__panel label span {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 600;
}

.aj-cv-item__panel input[type="text"],
.aj-cv-item__panel input[type="file"] {
	width: 100%;
	margin-bottom: 8px;
}

.aj-cv-item__delete {
	padding-top: 12px;
	border-top: 1px solid var(--aj-border);
}

.aj-cv-item__delete p {
	margin: 0 0 8px;
	font-size: 14px;
}

.aj-apply-cv legend {
	font-weight: 700;
}

.aj-apply-cv small {
	margin-left: 4px;
	opacity: 0.8;
}

@media (max-width: 640px) {
	.aj-cv-item__actions {
		width: 100%;
	}

	.aj-cv-item__more {
		position: static;
		width: 100%;
	}

	.aj-cv-item__panel {
		min-width: 0;
	}
}

/* An open "More" panel takes the whole row under the CV, not a squeezed column. */
.aj-cv-item:has(.aj-cv-item__more[open]) .aj-cv-item__actions {
	flex-basis: 100%;
	justify-content: flex-start;
}

.aj-cv-item__more[open] {
	flex-basis: 100%;
	order: 10;
}

.aj-cv-item__more[open] summary::after {
	content: " ▴";
}

.aj-cv-item__more[open] .aj-cv-item__panel {
	min-width: 0;
	max-width: 520px;
}

.aj-cv-item .aj-cv-inline-form {
	display: inline-flex;
	margin: 0;
}

.aj-cv-item button.aj-cv-action,
.aj-cv-item .aj-cv-action {
	min-height: 0;
	margin: 0;
	padding: 4px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	line-height: 1.4;
}

/* ---------------------------------------------------------------------
 * About page (page-about.php). The story column reuses .aj-page-content
 * for its type; the paths reuse .aj-kb-card and the values sit in the
 * muted .aj-section. Only what the other pages had no equivalent for is
 * defined here: the story/at-a-glance layout, the mission line, the value
 * tiles and the two-sided call to action.
 * ------------------------------------------------------------------- */

.aj-about-story {
	max-width: 1120px;
	margin: 0 auto;
	padding: 64px 24px 72px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

@media (min-width: 992px) {
	.aj-about-story {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 64px;
	}
}

.aj-about-story .aj-about-story__body {
	max-width: 680px;
	margin: 0;
	padding: 0;
}

.aj-about-story__body > h2:first-child {
	margin-top: 0;
}

.aj-about-story__body h2 {
	position: relative;
	padding-left: 16px;
}

.aj-about-story__body h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	bottom: 0.2em;
	width: 4px;
	border-radius: 4px;
	background: var(--aj-brand);
}

.aj-about-glance {
	padding: 28px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-md);
}

@media (min-width: 992px) {
	.aj-about-glance {
		position: sticky;
		top: calc(var(--aj-sticky-top, 88px) + 16px);
	}
}

.aj-about-glance__label {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aj-brand);
}

.aj-about-glance__list {
	margin: 0 0 24px;
}

.aj-about-glance__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--aj-border);
}

.aj-about-glance__item:first-child {
	padding-top: 0;
}

.aj-about-glance__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--aj-radius);
	background: var(--aj-brand-light);
	color: var(--aj-brand);
}

.aj-about-glance__icon svg {
	width: 20px;
	height: 20px;
}

.aj-about-glance__item dt {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--aj-text);
}

.aj-about-glance__item dd {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--aj-text-muted);
}

/* The fee line: a tinted tile instead of a ruled row, so "Afl. 0" reads
   as a price, not a count. */
.aj-about-glance__item--accent {
	margin-top: 14px;
	padding: 16px;
	border: 0;
	border-radius: var(--aj-radius);
	background: var(--aj-brand-light);
}

.aj-about-glance__item--accent .aj-about-glance__icon {
	background: var(--aj-brand);
	color: #fff;
}

.aj-about-glance__item--accent dt {
	color: var(--aj-brand);
}

.aj-about-glance__item--accent dd {
	color: var(--aj-text);
}

.aj-about-glance__badge {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--aj-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.aj-about-photo {
	max-width: 1120px;
	margin: 0 auto 72px;
	padding: 0 24px;
}

.aj-about-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: 50% 18%;
	border-radius: var(--aj-radius-lg);
	box-shadow: var(--aj-shadow-md);
}

@media (max-width: 640px) {
	.aj-about-photo {
		margin-bottom: 48px;
	}

	.aj-about-photo img {
		aspect-ratio: 4 / 3;
	}
}

.aj-about-mission {
	background: var(--aj-brand-light);
	padding: 64px 24px;
	text-align: center;
}

.aj-about-mission__eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aj-brand);
}

.aj-about-mission__text {
	max-width: 820px;
	margin: 0 auto;
	font-size: clamp(22px, 3.2vw, 32px);
	font-weight: 800;
	line-height: 1.3;
	color: var(--aj-text);
	text-wrap: balance;
}

.aj-about-values {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 640px) {
	.aj-about-values {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.aj-about-values {
		grid-template-columns: repeat(4, 1fr);
	}
}

.aj-about-value {
	padding: 28px 24px;
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-sm);
}

.aj-about-value__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	border-radius: var(--aj-radius);
	background: var(--aj-brand-light);
	color: var(--aj-brand);
}

.aj-about-value__icon svg {
	width: 24px;
	height: 24px;
}

.aj-about-value__title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-about-value__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--aj-text-muted);
}

.aj-about-split {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: 0 24px var(--aj-section-padding);
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 768px) {
	.aj-about-split {
		grid-template-columns: repeat(2, 1fr);
	}
}

.aj-about-split__panel {
	display: flex;
	flex-direction: column;
	padding: 40px 36px;
	border-radius: var(--aj-radius-lg);
}

.aj-about-split__panel--work {
	background: var(--aj-brand);
	color: #fff;
}

.aj-about-split__panel--hire {
	background: var(--aj-bg-subtle);
	border: 1px solid var(--aj-border);
	color: var(--aj-text);
}

.aj-about-split__title {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 800;
	color: inherit;
}

.aj-about-split__text {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.6;
	opacity: 0.9;
}

.aj-about-split__actions {
	margin-top: auto; /* both panels end on the same line, whatever the copy length */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.aj-about-split__link {
	font-size: 15px;
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aj-about-split__panel--hire .aj-about-split__link {
	color: var(--aj-brand);
}

.aj-about-split__link:hover {
	color: inherit;
	text-decoration-thickness: 2px;
}

.aj-button--light {
	background: #fff;
	color: var(--aj-brand);
}

.aj-button--light:hover {
	background: var(--aj-brand-light);
	color: var(--aj-brand-dark);
}

/* CV tools section (About page): copy on the left, a decorative
   "CV -> profile" illustration on the right, built from plain markup so
   it stays sharp and themable. */
.aj-about-cv__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}

@media (min-width: 992px) {
	.aj-about-cv__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 64px;
	}
}

.aj-about-cv__eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aj-brand);
}

.aj-about-cv__copy .aj-section__subheading {
	margin-bottom: 28px;
}

.aj-about-cv__ways {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	gap: 16px;
}

.aj-about-cv__way {
	display: flex;
	gap: 16px;
	padding: 20px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
}

.aj-about-cv__way-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--aj-radius);
	background: var(--aj-brand-light);
	color: var(--aj-brand);
}

.aj-about-cv__way-icon svg {
	width: 22px;
	height: 22px;
}

.aj-about-cv__way-title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-about-cv__way-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--aj-text-muted);
}

.aj-about-cv__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.aj-about-mock {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 40px 20px;
	border-radius: 24px;
	background: linear-gradient(135deg, var(--aj-brand-light), #fff);
	border: 1px solid var(--aj-border);
}

.aj-about-mock__doc,
.aj-about-mock__profile {
	background: var(--aj-bg);
	border-radius: var(--aj-radius);
	box-shadow: var(--aj-shadow-md);
}

.aj-about-mock__doc {
	flex: 0 1 170px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 18px 16px 24px;
	transform: rotate(-3deg);
}

.aj-about-mock__file {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--aj-text-muted);
}

.aj-about-mock__file svg {
	width: 16px;
	height: 16px;
	color: var(--aj-brand);
}

.aj-about-mock__line {
	display: block;
	height: 6px;
	border-radius: 6px;
	background: var(--aj-border);
}

.aj-about-mock__line--title {
	width: 70%;
	height: 10px;
	background: var(--aj-text);
	opacity: 0.8;
}

.aj-about-mock__line--head {
	width: 45%;
	margin-top: 6px;
	background: var(--aj-brand);
	opacity: 0.55;
}

.aj-about-mock__line--mid {
	width: 80%;
}

.aj-about-mock__line--short {
	width: 55%;
}

.aj-about-mock__flows {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.aj-about-mock__flow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: 92px;
	text-align: center;
}

.aj-about-mock__flow-label {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--aj-text);
}

.aj-about-mock__flow--out .aj-about-mock__arrow {
	background: var(--aj-bg);
	color: var(--aj-brand);
	border: 1.5px solid var(--aj-brand);
}

.aj-about-mock__flow--out .aj-about-mock__arrow svg {
	transform: rotate(180deg);
}

.aj-about-mock__pdf {
	align-self: flex-start;
	margin-top: 8px;
	padding: 5px 12px;
	border: 1.5px solid var(--aj-brand);
	border-radius: 999px;
	color: var(--aj-brand);
	font-size: 11px;
	font-weight: 700;
}

.aj-about-mock__arrow {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--aj-brand);
	color: #fff;
	box-shadow: var(--aj-shadow-md);
}

.aj-about-mock__arrow svg {
	width: 20px;
	height: 20px;
}

.aj-about-mock__profile {
	flex: 0 1 220px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
}

.aj-about-mock__person {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--aj-border);
}

.aj-about-mock__avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--aj-brand-light);
	color: var(--aj-brand);
}

.aj-about-mock__avatar svg {
	width: 18px;
	height: 18px;
}

.aj-about-mock__name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-about-mock__meter {
	display: block;
	width: 110px;
	height: 6px;
	margin-top: 6px;
	border-radius: 6px;
	background: var(--aj-border);
	overflow: hidden;
}

.aj-about-mock__meter span {
	display: block;
	width: 90%;
	height: 100%;
	border-radius: 6px;
	background: #1f9d55;
}

.aj-about-mock__row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--aj-text);
}

.aj-about-mock__check {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #e3f6ea;
	color: #1f9d55;
}

.aj-about-mock__check svg {
	width: 13px;
	height: 13px;
}

.aj-about-mock__save {
	align-self: flex-start;
	margin-top: 4px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--aj-brand);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

@media (max-width: 520px) {
	.aj-about-mock {
		flex-direction: column;
		padding: 32px 20px;
	}

	.aj-about-mock__doc,
	.aj-about-mock__profile {
		flex-basis: auto;
		width: min(240px, 100%);
	}

	.aj-about-mock__flows {
		flex-direction: row;
		gap: 28px;
	}

	.aj-about-mock__flow--in .aj-about-mock__arrow svg {
		transform: rotate(90deg);
	}

	.aj-about-mock__flow--out .aj-about-mock__arrow svg {
		transform: rotate(-90deg);
	}
}

/* ---------------------------------------------------------------------
 * For Employers page (page-for-employers.php). Story, glance panel,
 * photo, tool rows, value tiles and the split CTA reuse the About page's
 * .aj-about-* rules above; the package cards are the [aj_job_packages]
 * shortcode's own. Defined here: the four hiring steps and the
 * decorative stage board.
 * ------------------------------------------------------------------- */

.aj-emp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	counter-reset: none;
}

@media (min-width: 640px) {
	.aj-emp-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.aj-emp-steps {
		grid-template-columns: repeat(4, 1fr);
	}
}

.aj-emp-step {
	position: relative;
	padding: 28px 24px;
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-sm);
}

/* A thin connector from each step to the next on wide screens. */
@media (min-width: 1100px) {
	.aj-emp-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 51px;
		right: -20px;
		width: 20px;
		height: 2px;
		background: var(--aj-brand);
		opacity: 0.35;
	}
}

.aj-emp-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--aj-brand);
	color: #fff;
	font-size: 18px;
	font-weight: 800;
}

.aj-emp-step__title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-emp-step__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--aj-text-muted);
}

/* The board's fixed-width columns must not widen the layout on phones;
   it scrolls inside its own frame instead. */
.aj-emp-tools .aj-about-cv__inner {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
	.aj-emp-tools .aj-about-cv__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

.aj-emp-tools .aj-about-cv__visual {
	min-width: 0;
}

.aj-emp-tools .aj-about-cv__ways {
	margin-bottom: 0;
}

.aj-emp-tools__more {
	margin-top: 48px;
}

@media (min-width: 1100px) {
	.aj-emp-tools__more {
		grid-template-columns: repeat(3, 1fr);
	}
}

.aj-emp-tools__more .aj-about-value {
	border: 1px solid var(--aj-border);
	box-shadow: none;
}

.aj-emp-board {
	padding: 22px;
	border: 1px solid var(--aj-border);
	border-radius: 24px;
	background: linear-gradient(135deg, var(--aj-brand-light), #fff);
}

.aj-emp-board__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 16px;
}

.aj-emp-board__job {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-emp-board__job svg {
	width: 18px;
	height: 18px;
	color: var(--aj-brand);
}

.aj-emp-board__count {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--aj-bg);
	color: var(--aj-text-muted);
	font-size: 12px;
	font-weight: 600;
}

.aj-emp-board__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.aj-emp-board__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 210px;
	padding: 10px 8px;
	border-radius: var(--aj-radius);
	background: rgba(255, 255, 255, 0.7);
}

.aj-emp-board__stage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-emp-board__stage em {
	min-width: 18px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--aj-brand-light);
	color: var(--aj-brand);
	font-style: normal;
	text-align: center;
}

.aj-emp-board__card {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 7px;
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-sm);
}

.aj-emp-board__col:last-child .aj-emp-board__card {
	outline: 1.5px solid #1f9d55;
}

.aj-emp-board__avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--aj-brand-light);
	color: var(--aj-brand);
	font-size: 9px;
	font-weight: 800;
}

.aj-emp-board__lines {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.aj-emp-board__lines span {
	display: block;
	height: 4px;
	border-radius: 4px;
	background: var(--aj-border);
}

.aj-emp-board__lines span:first-child {
	width: 85%;
	background: var(--aj-text);
	opacity: 0.55;
}

.aj-emp-board__lines span:last-child {
	width: 55%;
}

.aj-emp-board__match {
	flex: none;
	font-size: 10px;
	font-weight: 800;
	color: #1f9d55;
}

/* Narrow screens: the board scrolls sideways inside itself rather than
   squeezing four columns into a phone. */
@media (max-width: 640px) {
	.aj-emp-board__cols {
		grid-template-columns: repeat(4, 132px);
		overflow-x: auto;
		padding-bottom: 6px;
	}

	.aj-emp-board__col {
		min-height: 0;
	}
}

.aj-about-glance__item dt {
	flex-wrap: wrap;
	row-gap: 6px;
}

.aj-about-glance__value {
	white-space: nowrap;
}

.aj-emp-packages {
	scroll-margin-top: var(--aj-sticky-top, 88px);
}

/* ---------------------------------------------------------------------
 * Employer login wall (Aruba_Jobs_Render_Helpers::hiring_gate()) on Post
 * a Job and the candidate directory, for visitors who are not logged in.
 * ------------------------------------------------------------------- */

.aj-hiring-gate {
	max-width: 1040px;
	margin: 24px auto 72px;
	padding: 40px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	border: 1px solid var(--aj-border);
	border-radius: 24px;
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-md);
}

@media (min-width: 900px) {
	.aj-hiring-gate {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		padding: 48px;
	}
}

@media (max-width: 640px) {
	.aj-hiring-gate {
		margin: 16px 16px 48px;
		padding: 28px 22px;
	}
}

.aj-hiring-gate__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aj-brand);
}

.aj-hiring-gate__eyebrow svg {
	width: 14px;
	height: 14px;
}

.aj-hiring-gate__heading {
	margin: 0 0 12px;
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--aj-text);
}

.aj-hiring-gate__text {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--aj-text-muted);
}

.aj-hiring-gate__points {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.aj-hiring-gate__points li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--aj-text);
}

.aj-hiring-gate__check {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #e3f6ea;
	color: #1f9d55;
}

.aj-hiring-gate__check svg {
	width: 13px;
	height: 13px;
}

.aj-hiring-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.aj-hiring-gate__more {
	margin: 0;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-hiring-gate__more a {
	font-weight: 600;
	color: var(--aj-brand);
}

.aj-hiring-gate__panel {
	padding: 22px;
	border: 1px solid var(--aj-border);
	border-radius: 20px;
	background: linear-gradient(135deg, var(--aj-brand-light), #fff);
}

.aj-hiring-gate__panel-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-hiring-gate__panel-title svg {
	width: 18px;
	height: 18px;
	color: var(--aj-brand);
}

.aj-hiring-gate__row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	padding: 10px 12px;
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-sm);
}

.aj-hiring-gate__row:last-child {
	margin-bottom: 0;
}

.aj-hiring-gate__avatar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--aj-brand-light);
	color: var(--aj-brand);
	font-size: 11px;
	font-weight: 800;
}

.aj-hiring-gate__lines {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.aj-hiring-gate__lines span {
	display: block;
	height: 5px;
	border-radius: 5px;
	background: var(--aj-border);
}

.aj-hiring-gate__lines span:first-child {
	width: 70%;
	background: var(--aj-text);
	opacity: 0.55;
}

.aj-hiring-gate__lines span:last-child {
	width: 45%;
}

.aj-hiring-gate__match {
	flex: none;
	padding: 3px 9px;
	border-radius: 999px;
	background: #e3f6ea;
	color: #1f9d55;
	font-size: 12px;
	font-weight: 800;
}

/* ---------------------------------------------------------------------
 * Sign-up form: a "What … get" link under each account type.
 * ------------------------------------------------------------------- */

.aj-role-option {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin: 0 8px 8px 0;
	vertical-align: top;
}

.aj-form fieldset .aj-role-option label:has(> input[type="radio"]) {
	margin: 0 0 4px;
}

.aj-role-info {
	font-size: 12px;
	font-weight: 600;
	color: var(--aj-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Homepage Jobseeker / Employer cards: optional checklist + text link.
 * ------------------------------------------------------------------- */

.aj-dual-cta__card {
	display: flex;
	flex-direction: column;
}

.aj-dual-cta__points {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.aj-dual-cta__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

.aj-dual-cta__points span {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--aj-bg);
	color: var(--aj-brand);
}

.aj-dual-cta__card--right .aj-dual-cta__points span {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.aj-dual-cta__points svg {
	width: 13px;
	height: 13px;
}

.aj-dual-cta__actions {
	margin-top: auto; /* both cards end on the same line */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.aj-dual-cta__link {
	font-size: 15px;
	font-weight: 600;
	color: var(--aj-brand-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aj-dual-cta__card--right .aj-dual-cta__link {
	color: #fff;
}

.aj-dual-cta__link:hover {
	text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------
 * Job Packages and Pricing pages (page-job-packages.php, page-pricing.php)
 * ------------------------------------------------------------------- */

.aj-pkg-guide__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 900px) {
	.aj-pkg-guide__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.aj-pkg-option {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
	transition: box-shadow var(--aj-motion) ease, transform var(--aj-motion) ease;
}

.aj-pkg-option:hover {
	box-shadow: var(--aj-shadow-md);
	transform: translateY(-2px);
}

.aj-pkg-option--highlighted {
	border: 2px solid var(--aj-brand);
}

.aj-pkg-option__fit {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 800;
	color: var(--aj-text);
}

.aj-pkg-option__fit-text {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--aj-text-muted);
}

.aj-pkg-option__name {
	display: inline-flex;
	align-self: flex-start;
	margin: 0 0 14px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--aj-brand-light);
	color: var(--aj-brand);
	font-size: 13px;
	font-weight: 700;
}

.aj-pkg-option__facts {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 8px;
}

.aj-pkg-option__facts li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--aj-text);
}

.aj-pkg-option__facts svg {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--aj-brand);
}

.aj-pkg-option__foot {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--aj-border);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.aj-pkg-option__price {
	font-size: 18px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-pkg-guide__note {
	margin: 28px 0 0;
	text-align: center;
	font-size: 15px;
	color: var(--aj-text-muted);
}

.aj-pkg-guide__note a {
	font-weight: 600;
	color: var(--aj-brand);
}

@media (min-width: 900px) {
	.aj-pkg-included {
		grid-template-columns: repeat(3, 1fr);
	}
}

.aj-pkg-included .aj-about-value {
	border: 1px solid var(--aj-border);
	box-shadow: none;
}

.aj-pricing-newhere {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 14px 24px;
	background: var(--aj-brand-light);
	font-size: 15px;
	color: var(--aj-text);
}

.aj-pricing-newhere svg {
	width: 16px;
	height: 16px;
	color: var(--aj-brand);
}

.aj-pricing-newhere a {
	font-weight: 700;
	color: var(--aj-brand);
}

.aj-pricing-table-wrap {
	max-width: 1040px;
	margin: 0 auto;
	overflow-x: auto;
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-sm);
}

.aj-pricing-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.aj-pricing-table th,
.aj-pricing-table td {
	padding: 16px 20px;
	text-align: left;
	border-bottom: 1px solid var(--aj-border);
	white-space: nowrap;
}

.aj-pricing-table thead th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aj-text-muted);
	background: var(--aj-bg-subtle);
}

.aj-pricing-table tbody th {
	font-weight: 700;
	color: var(--aj-text);
}

.aj-pricing-table tbody tr:last-child th,
.aj-pricing-table tbody tr:last-child td {
	border-bottom: 0;
}

.aj-pricing-table tr.is-highlighted th,
.aj-pricing-table tr.is-highlighted td {
	background: var(--aj-brand-light);
}

.aj-pricing-table__save {
	display: inline-flex;
	padding: 3px 10px;
	border-radius: 999px;
	background: #e3f6ea;
	color: #1f9d55;
	font-size: 13px;
	font-weight: 700;
}

/* Phones: one card per package instead of a sideways-scrolling table. */
@media (max-width: 640px) {
	.aj-pricing-table thead {
		display: none;
	}

	.aj-pricing-table,
	.aj-pricing-table tbody,
	.aj-pricing-table tr,
	.aj-pricing-table th,
	.aj-pricing-table td {
		display: block;
		width: 100%;
	}

	.aj-pricing-table tr {
		padding: 8px 0;
		border-bottom: 1px solid var(--aj-border);
	}

	.aj-pricing-table th,
	.aj-pricing-table td {
		padding: 6px 18px;
		border: 0;
		white-space: normal;
	}

	.aj-pricing-table td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
	}

	.aj-pricing-table td::before {
		content: attr(data-label);
		color: var(--aj-text-muted);
	}
}

.aj-pricing-details__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
}

@media (min-width: 900px) {
	.aj-pricing-details__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 64px;
	}
}

.aj-pricing-details .aj-section__heading {
	font-size: 26px;
	margin-bottom: 24px;
}

.aj-pricing-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.aj-pricing-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--aj-text);
}

.aj-pricing-checklist span {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #e3f6ea;
	color: #1f9d55;
}

.aj-pricing-checklist svg {
	width: 13px;
	height: 13px;
}

.aj-pricing-fact {
	display: flex;
	gap: 14px;
	margin-bottom: 20px;
}

.aj-pricing-fact__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--aj-radius);
	background: var(--aj-brand-light);
	color: var(--aj-brand);
}

.aj-pricing-fact__icon svg {
	width: 20px;
	height: 20px;
}

.aj-pricing-fact__title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-pricing-fact__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--aj-text-muted);
}

.aj-pricing-details__terms {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-pricing-details__terms a {
	color: var(--aj-brand);
}

/* ---------------------------------------------------------------------
 * For Recruiters page: the decorative "your clients" panel.
 * ------------------------------------------------------------------- */

.aj-rec-clients {
	padding: 22px;
	border: 1px solid var(--aj-border);
	border-radius: 24px;
	background: linear-gradient(135deg, var(--aj-brand-light), #fff);
}

.aj-rec-client {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	padding: 12px 14px;
	border: 1.5px solid transparent;
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-sm);
}

.aj-rec-client.is-active {
	border-color: var(--aj-brand);
}

.aj-rec-client__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--aj-radius-sm);
	background: var(--aj-brand-light);
	color: var(--aj-brand);
}

.aj-rec-client__logo svg {
	width: 18px;
	height: 18px;
}

.aj-rec-client__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--aj-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aj-rec-client__stat {
	font-size: 12px;
	font-weight: 600;
	color: var(--aj-text-muted);
	white-space: nowrap;
}

.aj-rec-clients__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.aj-rec-clients__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--aj-bg);
	color: var(--aj-brand);
	font-size: 12px;
	font-weight: 700;
}

.aj-rec-clients__chip svg {
	width: 14px;
	height: 14px;
}

@media (max-width: 520px) {
	.aj-rec-client {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.aj-rec-client__stat {
		grid-column: 2;
	}
}

/* ---------------------------------------------------------------------
 * Mega menu (template-parts/mega-menu.php, assets/js/mega-menu.js) and
 * the header's button group. Panels are positioned against the header's
 * content container, so they line up with the page body rather than
 * stretching edge to edge. Below 1100px the header switches to the
 * hamburger panel (the 900px rules near the top of this file, repeated
 * here for 901-1100px) and the dropdowns become accordions.
 * ------------------------------------------------------------------- */

.aj-site-header__inner {
	position: relative;
}

.aj-mega__bar {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aj-mega__trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 9px 12px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--aj-text);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--aj-motion) ease, color var(--aj-motion) ease;
}

.aj-mega__trigger:hover,
.aj-mega__item.is-open .aj-mega__trigger {
	background: var(--aj-brand-light);
	color: var(--aj-brand);
}

.aj-mega__trigger:focus-visible {
	outline: 2px solid var(--aj-brand);
	outline-offset: 2px;
}

.aj-mega__chevron {
	width: 16px;
	height: 16px;
	transition: transform var(--aj-motion) ease;
}

.aj-mega__item.is-open .aj-mega__chevron {
	transform: rotate(180deg);
}

.aj-mega__panel {
	display: none;
	position: absolute;
	top: calc(100% + 18px);
	left: 24px;
	right: 24px;
	z-index: 200;
	grid-template-columns: minmax(0, 1fr) 340px;
	border: 1px solid var(--aj-border);
	border-top: 0;
	border-radius: 0 0 20px 20px;
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-lg);
	overflow: hidden;
}

/* Bridges the gap between the bar and the panel so the pointer can travel
   down without the panel closing. */
.aj-mega__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -18px;
	height: 18px;
}

.aj-mega__item.is-open .aj-mega__panel,
.aj-mega:not(.is-enhanced) .aj-mega__item:hover .aj-mega__panel,
.aj-mega:not(.is-enhanced) .aj-mega__item:focus-within .aj-mega__panel {
	display: grid;
	animation: aj-mega-in 160ms ease-out;
}

@keyframes aj-mega-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aj-mega__item.is-open .aj-mega__panel {
		animation: none;
	}

	.aj-mega__chevron {
		transition: none;
	}
}

.aj-mega__main {
	padding: 32px 36px 36px;
}

.aj-mega__heading {
	margin: 0 0 18px 14px;
	font-size: 18px;
	font-weight: 800;
	color: var(--aj-text);
}

.aj-mega__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px 18px;
}

.aj-mega__grid:has(> li:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aj-mega__link {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	height: 100%;
	padding: 14px;
	border-radius: 14px;
	color: var(--aj-text);
	text-decoration: none;
	transition: background-color var(--aj-motion) ease;
}

.aj-mega__link:hover,
.aj-mega__link:focus-visible {
	background: var(--aj-bg-subtle);
	color: var(--aj-text);
	text-decoration: none;
}

.aj-mega__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--aj-brand-light);
	color: var(--aj-brand);
}

.aj-mega__icon svg {
	width: 20px;
	height: 20px;
}

.aj-mega__text {
	min-width: 0;
}

.aj-mega__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-mega__arrow {
	flex: none;
	width: 15px;
	height: 15px;
	color: var(--aj-brand);
	transition: transform var(--aj-motion) ease;
}

.aj-mega__link:hover .aj-mega__arrow,
.aj-mega__promo:hover .aj-mega__arrow {
	transform: translateX(3px);
}

.aj-mega__desc {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--aj-text-muted);
}

.aj-mega__side {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	background: var(--aj-brand-light);
}

.aj-mega__promo {
	display: block;
	flex: 1;
	padding: 22px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.65);
	color: var(--aj-text);
	text-decoration: none;
	transition: background-color var(--aj-motion) ease, box-shadow var(--aj-motion) ease;
}

.aj-mega__promo + .aj-mega__promo {
	background: rgba(255, 255, 255, 0.4);
}

.aj-mega__promo:hover,
.aj-mega__promo:focus-visible {
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-md);
	color: var(--aj-text);
	text-decoration: none;
}

.aj-mega__promo-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: var(--aj-brand);
	color: #fff;
}

.aj-mega__promo-icon svg {
	width: 22px;
	height: 22px;
}

.aj-mega__promo .aj-mega__title {
	font-size: 16px;
}

/* Header button group: Post a job | Log In | Register */
.aj-header-auth {
	gap: 14px;
}

.aj-header-post {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 16px 5px 6px;
	border: 1.5px solid var(--aj-brand);
	border-radius: 999px;
	background: var(--aj-bg);
	color: var(--aj-brand);
	text-decoration: none;
	transition: background-color var(--aj-motion) ease;
}

.aj-header-post:hover,
.aj-header-post:focus-visible {
	background: var(--aj-brand-light);
	color: var(--aj-brand);
	text-decoration: none;
}

.aj-header-post__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--aj-brand);
	color: #fff;
}

.aj-header-post__icon svg {
	width: 16px;
	height: 16px;
}

.aj-header-post__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.aj-header-post__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aj-text-muted);
}

.aj-header-post__action {
	font-size: 14px;
	font-weight: 800;
}

.aj-header-auth__divider {
	width: 1px;
	height: 28px;
	background: var(--aj-border);
}

/* 1101-1240px: tighten so five dropdowns and the button group fit. */
@media (min-width: 1101px) and (max-width: 1240px) {
	.aj-site-header__inner,
	.aj-site-header__menu {
		gap: 18px;
	}

	.aj-mega__trigger {
		padding: 9px 9px;
	}

	.aj-header-post__label {
		display: none;
	}
}

/* Up to 1100px: hamburger header (same rules as the 900px block above). */
@media (min-width: 901px) and (max-width: 1100px) {
	.aj-site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 0;
	}

	.aj-mobile-toggle {
		display: flex;
		grid-column: 1;
		justify-self: start;
	}

	.aj-logo {
		grid-column: 2;
		justify-self: center;
	}

	.aj-site-header__menu {
		grid-column: 1 / -1;
		grid-row: 2;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		padding-top: 0;
		margin-top: 0;
		border-top: 0 solid var(--aj-border);
		transition: max-height 320ms ease, opacity 220ms ease;
	}

	.aj-site-header__menu.is-open {
		max-height: min(600px, calc(100dvh - 110px));
		overflow-y: auto;
		opacity: 1;
		padding-top: 16px;
		margin-top: 16px;
		border-top-width: 1px;
	}

	.aj-header-auth {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.aj-header-auth a:not(.aj-button) {
		padding: 8px 4px;
	}

	.aj-header-auth .aj-button {
		justify-content: center;
	}

	.aj-profile {
		width: 100%;
	}

	.aj-profile__panel {
		position: static;
		width: 100%;
		max-width: none;
		max-height: none;
		margin-top: 6px;
		box-shadow: var(--aj-shadow-sm);
	}
}

@media (max-width: 1100px) {
	.aj-site-header__menu.is-open {
		max-height: calc(100dvh - 110px);
	}

	.aj-mega {
		margin-bottom: 16px;
	}

	.aj-mega__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.aj-mega__trigger {
		width: 100%;
		justify-content: space-between;
		padding: 12px 8px;
		border-radius: 10px;
		font-size: 15px;
	}

	.aj-mega__panel {
		position: static;
		grid-template-columns: minmax(0, 1fr);
		margin: 4px 0 10px;
		border: 0;
		border-radius: 14px;
		background: var(--aj-bg-subtle);
		box-shadow: none;
	}

	.aj-mega__panel::before {
		display: none;
	}

	.aj-mega__item.is-open .aj-mega__panel {
		display: block;
		animation: none;
	}

	.aj-mega__main {
		padding: 8px;
	}

	.aj-mega__heading {
		display: none;
	}

	.aj-mega__grid,
	.aj-mega__grid:has(> li:nth-child(2):last-child) {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.aj-mega__link {
		align-items: center;
		padding: 10px;
	}

	.aj-mega__icon {
		width: 34px;
		height: 34px;
		border-radius: 10px;
	}

	.aj-mega__icon svg {
		width: 18px;
		height: 18px;
	}

	.aj-mega__grid .aj-mega__desc {
		display: none;
	}

	.aj-mega__side {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		padding: 8px;
		border-radius: 0 0 14px 14px;
	}

	.aj-mega__promo {
		flex: 1 1 200px;
		padding: 14px;
	}

	.aj-mega__promo-icon {
		width: 34px;
		height: 34px;
		margin-bottom: 8px;
	}

	.aj-header-post {
		justify-content: center;
		padding: 8px 16px;
	}

	.aj-header-auth__divider {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 * Shop pages (cart, checkout, order received, My Account): WooCommerce's
 * default skin painted the payment box and the main buttons plum
 * (#7f54b3) and left fields and notices unstyled. These rules give them
 * the site's own colours, fields and buttons. Scoped to .woocommerce
 * and the WooCommerce Blocks classes so nothing else is affected.
 * ------------------------------------------------------------------- */

body.woocommerce-checkout .aj-page-content,
body.woocommerce-cart .aj-page-content,
body.woocommerce-account .aj-page-content {
	max-width: min(1040px, 100%);
	margin-top: 32px;
}

/* The page title sat at the container's left edge while the form is
   centred; line it up with the form column. */
body.woocommerce-checkout .aj-page-title,
body.woocommerce-cart .aj-page-title,
body.woocommerce-account .aj-page-title {
	max-width: min(1040px, 100%);
	margin-left: auto;
	margin-right: auto;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message {
	border: 1px solid var(--aj-border);
	border-left: 4px solid var(--aj-brand);
	border-top: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-brand-light);
	color: var(--aj-text);
	font-size: 15px;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--aj-brand);
}

.woocommerce-error {
	border-left-color: #b42318;
	background: #fff0ef;
}

.woocommerce-error::before {
	color: #b42318;
}

.woocommerce-message a,
.woocommerce-info a {
	color: var(--aj-brand);
	font-weight: 600;
}

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	padding: 11px 22px;
	border: 1.5px solid var(--aj-brand);
	border-radius: 999px;
	background: var(--aj-bg);
	color: var(--aj-brand);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color var(--aj-motion) ease, color var(--aj-motion) ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--aj-brand-light);
	color: var(--aj-brand-dark);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
	border-color: var(--aj-brand);
	background: var(--aj-brand);
	color: #fff;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover {
	border-color: var(--aj-brand-dark);
	background: var(--aj-brand-dark);
	color: #fff;
}

.woocommerce #place_order {
	padding: 14px 32px;
	font-size: 16px;
}

.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.disabled {
	opacity: 0.55;
}

/* Fields */
.woocommerce form .form-row label {
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--aj-text);
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select:not(.aj-custom-select__native),
.woocommerce form .form-row textarea,
.woocommerce form .form-row .aj-custom-select,
.woocommerce .select2-container .select2-selection--single {
	min-height: 46px;
	padding: 11px 14px;
	border: 1.5px solid var(--aj-border);
	border-radius: 10px;
	background: var(--aj-bg);
	color: var(--aj-text);
	font-size: 15px;
}

.woocommerce .select2-container .select2-selection--single {
	padding: 8px 10px;
}

/* Country/State: the theme turns the <select> into its own dropdown
   (custom-select.js) and WooCommerce also adds select2 to it, so the field
   showed twice. Keep the theme's dropdown, styled like the other fields. */
.woocommerce .aj-custom-select .select2-container,
.woocommerce .aj-custom-select__native {
	display: none !important;
}

.woocommerce form .form-row .aj-custom-select {
	display: flex;
	align-items: center;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	top: 10px;
	right: 8px;
}

.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--aj-brand);
	outline: 3px solid var(--aj-brand-light);
}

.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
	accent-color: var(--aj-brand);
}

/* Section headings and the order table */
.woocommerce-checkout h3,
.woocommerce-cart h2 {
	margin: 32px 0 14px;
	font-size: 20px;
	font-weight: 800;
	color: var(--aj-text);
}

.woocommerce table.shop_table {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	border-collapse: separate;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px 18px;
	border-top-color: var(--aj-border);
}

.woocommerce table.shop_table thead th {
	background: var(--aj-bg-subtle);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aj-text-muted);
}

.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
	font-size: 17px;
	font-weight: 800;
}

/* Payment step: was a plum panel with a plum inner box */
.woocommerce-checkout #payment {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg-subtle);
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 20px 24px;
	border-bottom: 1px solid var(--aj-border);
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 4px 0;
	font-size: 15px;
	font-weight: 600;
}

.woocommerce-checkout #payment div.payment_box {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
	color: var(--aj-text-muted);
	font-size: 14px;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--aj-bg);
}

.woocommerce-checkout #payment div.form-row {
	padding: 20px 24px 24px;
}

.woocommerce-terms-and-conditions-wrapper {
	font-size: 14px;
	line-height: 1.6;
	color: var(--aj-text-muted);
}

.woocommerce-terms-and-conditions-wrapper a {
	color: var(--aj-brand);
	font-weight: 600;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	font-weight: 600;
	color: var(--aj-text);
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions {
	max-height: 220px;
	padding: 16px 18px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
}

/* Cart (WooCommerce Blocks): "Add to cart" buttons on the empty cart
   were dark grey with blue text. */
.wc-block-components-product-button__button,
.wp-block-button.wc-block-components-product-button .wp-block-button__link,
.wc-block-cart .wc-block-components-button:not(.is-link),
.wc-block-checkout .wc-block-components-button:not(.is-link) {
	border: 0;
	border-radius: 999px;
	background: var(--aj-brand);
	color: #fff;
	font-weight: 600;
}

.wc-block-components-product-button__button:hover,
.wp-block-button.wc-block-components-product-button .wp-block-button__link:hover,
.wc-block-cart .wc-block-components-button:not(.is-link):hover {
	background: var(--aj-brand-dark);
	color: #fff;
}

/* CX Pay's own header bar (grey with a blue top stripe) and the yellow
   divider under its methods: same information, in the site's palette.
   The CX Pay logo stays. */
.woocommerce-checkout #payment .wc_payment_methods_header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 2px 6px;
	border-top: 0;
	background: transparent;
	color: var(--aj-text-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce-checkout #payment .wc_payment_methods_header .inner {
	background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods li.last-cxpay-payment-method::after {
	height: 1px !important; /* CX Pay sets a 4px yellow bar with !important */
	margin: 10px 0 !important;
	background: var(--aj-border) !important;
}

/* CX Pay's card details panel (shown once card payment is chosen) */
.woocommerce-checkout #payment .creditcardextrasafe_cxpay_gateway_payment_box .inner {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
	color: var(--aj-text);
}

.woocommerce-checkout #payment .creditcardextrasafe_cxpay_gateway_payment_box::before {
	border-bottom-color: var(--aj-border);
}

/* Each payment method as a selectable card */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:not(:empty) {
	padding: 12px 16px;
	border: 1.5px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input:checked) {
	border-color: var(--aj-brand);
	background: var(--aj-brand-light);
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input:checked) div.payment_box {
	background: var(--aj-bg);
}

/* Grey (.aj-section--muted) sections on the About, For Jobseekers, For
   Employers, For Recruiters and Job Packages pages: the step cards and the
   note under them had margin 0, which beat the section's own centring and
   pinned them to the left edge on screens wider than 1440px. Centre them
   and give them the same content width as the other sections (container
   1440px minus its 24px padding on each side). */
.aj-section--muted > .aj-emp-steps,
.aj-section--muted > .aj-about-values,
.aj-section--muted > .aj-pkg-guide__note {
	max-width: calc(var(--aj-content-max) - 48px);
	margin-left: auto;
	margin-right: auto;
}

/* Spacing reported on For Jobseekers (2026-10-02):
   - the CV section's buttons sat directly under the last card: the
     "no space under the list" rule meant for For Employers (no buttons
     there) also applied here;
   - the two-panel call to action had no top padding of its own, so after a
     grey section (For Jobseekers, For Employers) the panels touched the grey
     band. After a white section the section's own padding already spaces it. */
.aj-about-cv__ways + .aj-about-cv__actions {
	margin-top: 32px;
}

.aj-section--muted + .aj-about-split {
	padding-top: var(--aj-section-padding);
}

/* Logo strip, subtle variant (template-parts/logo-strip.php with
   'modifier' => 'subtle', used on For Employers under the header): the
   homepage strip's markup in a quieter style. Smaller cards without a
   shadow, logos greyed out until hovered, a hairline under the band. */
.aj-logo-strip--subtle {
	padding: 26px 24px 28px;
	border-bottom: 1px solid var(--aj-border);
}

.aj-logo-strip--subtle .aj-logo-strip__label {
	margin-bottom: 16px;
	font-size: 11px;
}

.aj-logo-strip--subtle .aj-logo-strip__grid {
	gap: 18px;
}

.aj-logo-strip--subtle .aj-logo-strip__grid a,
.aj-logo-strip--subtle .aj-logo-strip__track a {
	width: 150px;
	height: 68px;
	padding: 10px 18px;
	border-color: var(--aj-border);
	box-shadow: none;
}

.aj-logo-strip--subtle .aj-logo-strip__track {
	--aj-logo-gap: 18px;
}

.aj-logo-strip--subtle .aj-logo-strip__grid a img,
.aj-logo-strip--subtle .aj-logo-strip__track a img {
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter var(--aj-motion) ease, opacity var(--aj-motion) ease;
}

.aj-logo-strip--subtle .aj-logo-strip__grid a:hover img,
.aj-logo-strip--subtle .aj-logo-strip__grid a:focus-visible img,
.aj-logo-strip--subtle .aj-logo-strip__track a:hover img,
.aj-logo-strip--subtle .aj-logo-strip__track a:focus-visible img {
	filter: none;
	opacity: 1;
}

.aj-logo-strip--subtle .aj-logo-strip__grid a:hover,
.aj-logo-strip--subtle .aj-logo-strip__grid a:focus-visible,
.aj-logo-strip--subtle .aj-logo-strip__track a:hover,
.aj-logo-strip--subtle .aj-logo-strip__track a:focus-visible {
	box-shadow: var(--aj-shadow-sm);
}

@media (max-width: 720px) {
	.aj-logo-strip--subtle {
		padding: 22px 0 24px;
	}

	.aj-logo-strip--subtle .aj-logo-strip__label {
		padding: 0 20px;
	}
}

/* ==========================================================================
   Pricing calculator (page-pricing.php, assets/js/pricing-calculator.js)
   ========================================================================== */

.aj-calc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	max-width: 1120px;
	margin: 0 auto;
}

@media (min-width: 960px) {
	.aj-calc__grid {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 40px;
	}

	.aj-calc__summary {
		position: sticky;
		top: calc(var(--aj-sticky-top, 88px) + 16px);
	}
}

.aj-calc__builder {
	display: grid;
	gap: 20px;
}

.aj-calc-step {
	margin: 0;
	padding: 24px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-sm);
	min-width: 0;
}

.aj-calc-step__title {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 800;
	color: var(--aj-text);
}

.aj-calc-step__num {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--aj-brand);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.aj-calc-step__optional {
	font-size: 13px;
	font-weight: 600;
	color: var(--aj-text-muted);
}

/* Step 1: plan cards */
.aj-calc-plans {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (max-width: 520px) {
	.aj-calc-plans {
		grid-template-columns: minmax(0, 1fr);
	}
}

.aj-calc-plan {
	position: relative;
	display: block;
	cursor: pointer;
}

.aj-calc-plan input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.aj-calc-plan__card {
	display: grid;
	gap: 4px;
	height: 100%;
	box-sizing: border-box;
	padding: 18px;
	border: 1.5px solid var(--aj-border);
	border-radius: var(--aj-radius);
	transition: border-color var(--aj-motion) ease, background-color var(--aj-motion) ease;
}

.aj-calc-plan:hover .aj-calc-plan__card {
	border-color: #b9d3ff;
}

.aj-calc-plan input:checked + .aj-calc-plan__card {
	border-color: var(--aj-brand);
	background: var(--aj-brand-light);
	box-shadow: inset 0 0 0 1px var(--aj-brand);
}

.aj-calc-plan input:focus-visible + .aj-calc-plan__card {
	outline: 2px solid var(--aj-brand);
	outline-offset: 2px;
}

.aj-calc-plan__tag {
	position: absolute;
	top: -10px;
	right: 14px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--aj-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.aj-calc-plan__name {
	font-size: 20px;
	font-weight: 800;
	color: var(--aj-text);
}

.aj-calc-plan__price {
	font-size: 14px;
	font-weight: 700;
	color: var(--aj-brand);
}

.aj-calc-plan__text {
	font-size: 13px;
	color: var(--aj-text-muted);
}

/* Steppers */
.aj-calc-stepper {
	display: inline-flex;
	align-items: center;
	flex: none;
	border: 1px solid var(--aj-border);
	border-radius: 999px;
	background: var(--aj-bg);
}

.aj-calc-stepper__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--aj-brand);
	cursor: pointer;
}

.aj-calc-stepper__btn:hover {
	background: var(--aj-brand-light);
}

.aj-calc-stepper__btn svg {
	width: 18px;
	height: 18px;
}

.aj-calc-stepper__input {
	width: 44px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	color: var(--aj-text);
	-moz-appearance: textfield;
}

.aj-calc-stepper__input::-webkit-outer-spin-button,
.aj-calc-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Step 2: job count */
.aj-calc-jobs {
	display: flex;
	align-items: center;
	gap: 20px;
}

.aj-calc-range {
	flex: 1;
	min-width: 0;
	height: 6px;
	margin: 0;
	border-radius: 999px;
	background: linear-gradient(to right, var(--aj-brand) var(--fill, 0%), var(--aj-border) var(--fill, 0%));
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.aj-calc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--aj-brand);
	box-shadow: 0 1px 4px rgba(16, 20, 28, 0.25);
}

.aj-calc-range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--aj-brand);
	box-shadow: 0 1px 4px rgba(16, 20, 28, 0.25);
}

.aj-calc-hint {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-radius: var(--aj-radius-sm);
	background: #e3f6ea;
	color: #17643a;
	font-size: 14px;
	line-height: 1.5;
}

.aj-calc-hint[hidden] {
	display: none;
}

.aj-calc-hint__action {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Step 3: add-ons */
.aj-calc-addon {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
	border-top: 1px solid var(--aj-border);
}

.aj-calc-addon:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.aj-calc-addon--check {
	cursor: pointer;
}

.aj-calc-addon__icon {
	display: grid;
	place-items: center;
	flex: none;
	align-self: flex-start;
	width: 40px;
	height: 40px;
	border-radius: var(--aj-radius-sm);
	background: var(--aj-brand-light);
	color: var(--aj-brand);
}

.aj-calc-addon__icon svg {
	width: 20px;
	height: 20px;
}

.aj-calc-addon__body {
	display: block;
	flex: 1;
	min-width: 0;
}

.aj-calc-addon__name {
	display: block;
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-calc-addon__price {
	margin-left: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--aj-brand);
	white-space: nowrap;
}

.aj-calc-addon__text {
	display: block;
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--aj-text-muted);
}

.aj-calc-check {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0 8px;
	accent-color: var(--aj-brand);
	cursor: pointer;
}

.aj-calc-note {
	margin: 4px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--aj-border);
	font-size: 13px;
	color: var(--aj-text-muted);
}

/* Phones: the control goes under the text instead of squeezing it. */
@media (max-width: 520px) {
	.aj-calc-step {
		padding: 18px;
	}

	.aj-calc-step__title {
		flex-wrap: wrap;
		font-size: 17px;
	}

	.aj-calc-addon {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 12px;
		align-items: start;
	}

	.aj-calc-addon .aj-calc-stepper,
	.aj-calc-addon .aj-calc-check {
		grid-column: 2;
		justify-self: start;
		margin: 0;
	}

	.aj-calc-jobs {
		gap: 14px;
	}
}

/* Order summary */
.aj-calc__summary {
	padding: 24px;
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	box-shadow: var(--aj-shadow-md);
}

.aj-calc__summary-label {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aj-brand);
}

.aj-calc-lines {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0 0 16px;
	list-style: none;
	border-bottom: 1px solid var(--aj-border);
	font-size: 14px;
	color: var(--aj-text);
}

.aj-calc-lines li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.aj-calc-lines li span:last-child {
	font-weight: 700;
	white-space: nowrap;
}

.aj-calc-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

.aj-calc-total__label {
	font-size: 15px;
	font-weight: 700;
}

.aj-calc-total__value {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--aj-text);
}

.aj-calc-per {
	margin: 2px 0 18px;
	min-height: 1.4em;
	font-size: 13px;
	text-align: right;
	color: var(--aj-text-muted);
}

.aj-calc-assure {
	display: grid;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-calc-assure li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.aj-calc-assure svg {
	flex: none;
	width: 16px;
	height: 16px;
	color: #1f9d55;
}

/* Example prices table */
.aj-calc-table td {
	font-variant-numeric: tabular-nums;
}

.aj-calc-table .aj-pricing-table__save {
	margin-left: 8px;
}

.aj-calc-table__more {
	margin: 20px 0 0;
	text-align: center;
	font-size: 15px;
	color: var(--aj-text-muted);
}

.aj-calc-table__more a {
	font-weight: 700;
	color: var(--aj-brand);
}

/* How promotions work: same column as the calculator above. */
.aj-calc-promo .aj-section__header,
.aj-calc-promo__grid {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

.aj-calc-promo .aj-section__header {
	margin-bottom: 32px;
}

.aj-calc-promo__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

@media (min-width: 900px) {
	.aj-calc-promo__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.aj-calc-promo__card {
	padding: 24px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
}

.aj-calc-promo__card .aj-pricing-fact__icon {
	margin-bottom: 14px;
}

.aj-calc-promo .aj-section__heading {
	font-size: 26px;
}

/* "More than 50 jobs?" link under the order summary */
.aj-calc-bulk-link {
	display: block;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--aj-border);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	color: var(--aj-brand);
}

/* Phones: total bar pinned to the bottom of the screen */
.aj-calc-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: var(--aj-bg);
	border-top: 1px solid var(--aj-border);
	box-shadow: 0 -8px 24px rgba(16, 20, 28, 0.08);
}

.aj-calc-bar[hidden] {
	display: none;
}

.aj-calc-bar__text {
	display: grid;
	min-width: 0;
}

.aj-calc-bar__sub {
	overflow: hidden;
	font-size: 12px;
	color: var(--aj-text-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.aj-calc-bar__total {
	font-size: 22px;
	font-weight: 800;
	color: var(--aj-text);
}

.aj-calc-bar__btn {
	flex: none;
}

/* The cookie banner sits above the bar while it is open. */
.aj-consent-open .aj-calc-bar {
	display: none;
}

/* Volume quote (#quote) */
.aj-calc-bulk-wrap {
	padding-top: 0;
}

.aj-calc-bulk {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 40px 32px;
	border-radius: var(--aj-radius-lg);
	background: var(--aj-brand);
	color: #fff;
	scroll-margin-top: calc(var(--aj-sticky-top, 88px) + 16px);
}

#quote {
	scroll-margin-top: calc(var(--aj-sticky-top, 88px) + 16px);
}

@media (min-width: 900px) {
	.aj-calc-bulk {
		gap: 24px;
		padding: 24px;
	}

	/* Without a photo: copy and form side by side. */
	.aj-calc-bulk:not(:has(.has-photo)) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: 48px;
		padding: 48px;
	}
}

.aj-calc-bulk__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 13px;
	font-weight: 700;
}

.aj-calc-bulk__eyebrow svg {
	width: 16px;
	height: 16px;
}

.aj-calc-bulk__heading {
	margin: 0 0 12px;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
}

.aj-calc-bulk__text {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
}

.aj-calc-bulk__points {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 600;
}

.aj-calc-bulk__points li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.aj-calc-bulk__points svg {
	flex: none;
	width: 20px;
	height: 20px;
	padding: 3px;
	border-radius: 50%;
	background: #fff;
	color: var(--aj-brand);
}

/* The photo spans the panel. On wide screens the copy sits on its light
   right half (the wall and the laptop), in dark text; on phones it follows
   below the photo in white, on the blue panel. */
.aj-calc-bulk__hero.has-photo {
	display: grid;
	gap: 24px;
}

.aj-calc-bulk__photo {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--aj-radius);
	background: #f3f4f6;
}

.aj-calc-bulk__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 25% 20%;
}

@media (min-width: 900px) {
	.aj-calc-bulk__hero.has-photo {
		position: relative;
		display: block;
	}

	.aj-calc-bulk__hero.has-photo .aj-calc-bulk__photo {
		position: relative;
		aspect-ratio: 1200 / 640;
	}

	/* A soft white wash over the right half, strongest behind the selling
	   points where the laptop sits, so the copy stays easy to read. */
	.aj-calc-bulk__hero.has-photo .aj-calc-bulk__photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(to right, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.55) 58%, rgba(255, 255, 255, 0.8) 100%),
			radial-gradient(ellipse 40% 30% at 70% 55%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%);
		pointer-events: none;
	}

	.aj-calc-bulk__hero.has-photo .aj-calc-bulk__copy {
		z-index: 1;
	}

	.aj-calc-bulk__hero.has-photo .aj-calc-bulk__photo img {
		object-position: center top;
	}

	.aj-calc-bulk__hero.has-photo .aj-calc-bulk__copy {
		position: absolute;
		top: 7%;
		right: 4%;
		width: 47%;
		color: var(--aj-text);
	}

	.aj-calc-bulk__hero.has-photo .aj-calc-bulk__eyebrow {
		background: var(--aj-brand-light);
		color: var(--aj-brand);
	}

	.aj-calc-bulk__hero.has-photo .aj-calc-bulk__heading {
		color: var(--aj-text);
		font-size: clamp(28px, 3.2vw, 38px);
	}

	.aj-calc-bulk__hero.has-photo .aj-calc-bulk__text {
		color: #3d4654;
		font-size: 17px;
	}

	.aj-calc-bulk__hero.has-photo .aj-calc-bulk__points {
		font-size: 16px;
		color: var(--aj-text);
	}

	.aj-calc-bulk__hero.has-photo .aj-calc-bulk__points svg {
		background: var(--aj-brand);
		color: #fff;
	}

	/* Wide form under the photo: three fields per row. */
	.aj-calc-bulk:has(.has-photo) .aj-calc-bulk__card {
		padding: 28px;
	}

	.aj-calc-bulk:has(.has-photo) .aj-calc-bulk__form {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 16px;
		row-gap: 16px;
		align-items: end;
	}

	.aj-calc-bulk:has(.has-photo) .aj-calc-bulk__row {
		display: contents;
	}

	.aj-calc-bulk:has(.has-photo) .aj-calc-bulk__form > label,
	.aj-calc-bulk:has(.has-photo) .aj-calc-bulk__error {
		grid-column: 1 / -1;
	}

	.aj-calc-bulk:has(.has-photo) .aj-calc-bulk__form button[type="submit"] {
		grid-column: 1;
	}

	.aj-calc-bulk:has(.has-photo) .aj-calc-bulk__privacy {
		grid-column: 2 / -1;
		align-self: center;
		text-align: left;
	}
}

.aj-calc-bulk__card {
	padding: 24px;
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
	color: var(--aj-text);
	box-shadow: var(--aj-shadow-lg);
}

.aj-calc-bulk__form {
	display: grid;
	gap: 14px;
}

.aj-calc-bulk__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

@media (min-width: 560px) {
	.aj-calc-bulk__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.aj-calc-bulk__form label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
}

.aj-calc-bulk__form small {
	font-weight: 500;
	color: var(--aj-text-muted);
}

.aj-calc-bulk__form input,
.aj-calc-bulk__form select,
.aj-calc-bulk__form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg);
	font: inherit;
	font-size: 15px;
	font-weight: 400;
	color: var(--aj-text);
}

.aj-calc-bulk__form input:focus,
.aj-calc-bulk__form select:focus,
.aj-calc-bulk__form textarea:focus {
	outline: 2px solid var(--aj-brand);
	outline-offset: 0;
	border-color: var(--aj-brand);
}

.aj-calc-bulk__form textarea {
	resize: vertical;
}

.aj-calc-bulk__form select {
	padding-right: 36px;
	background: var(--aj-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23616b7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* The theme swaps selects for its own dropdown (.aj-custom-select); give
   its button the same frame as the text fields. */
.aj-calc-bulk__form .aj-custom-select {
	display: block;
	width: 100%;
}

.aj-calc-bulk__form .aj-custom-select__trigger {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg);
	font: inherit;
	font-size: 15px;
	font-weight: 400;
	color: var(--aj-text);
}

.aj-calc-bulk__form .aj-custom-select[data-open="true"] .aj-custom-select__trigger,
.aj-calc-bulk__form .aj-custom-select__trigger:focus-visible {
	border-color: var(--aj-brand);
	outline: 2px solid var(--aj-brand);
	outline-offset: 0;
}

.aj-calc-bulk__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aj-calc-bulk__error {
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--aj-radius-sm);
	background: #fdecec;
	color: #a12828;
	font-size: 14px;
}

.aj-calc-bulk__privacy {
	margin: 0;
	font-size: 12px;
	text-align: center;
	color: var(--aj-text-muted);
}

.aj-calc-bulk__privacy a {
	color: var(--aj-brand);
}

.aj-calc-bulk__done {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 32px 8px;
	text-align: center;
}

.aj-calc-bulk__done h3 {
	margin: 0;
	font-size: 20px;
}

.aj-calc-bulk__done p {
	margin: 0;
	color: var(--aj-text-muted);
}

.aj-calc-bulk__done-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #e3f6ea;
	color: #1f9d55;
}

.aj-calc-bulk__done-icon svg {
	width: 26px;
	height: 26px;
}

@media (max-width: 520px) {
	.aj-calc-bulk {
		padding: 28px 18px;
	}

	.aj-calc-bulk__heading {
		font-size: 26px;
	}

	.aj-calc-bulk__card {
		padding: 18px;
	}
}

/* The sections under the calculator share its column on wide screens,
   with one section gap between them instead of two. */
.aj-calc-promo + .aj-pricing-details {
	padding-top: 0;
}

.aj-calc-promo + .aj-pricing-details .aj-pricing-details__inner {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------
 * "Boosted now" strip (Browse Jobs above the results count; homepage at
 * the top of Recent Jobs). A slim text ticker: tiny company logo, job title, boost
 * window, company and location. Three presentations, chosen by
 * assets/js/boost-strip.js from whether the jobs fit the width:
 *   is-static  - they fit: a still row, left-aligned
 *   is-fade    - they don't fit and there are 3 or fewer: one at a time
 *   is-marquee - they don't fit and there are more: a slow continuous loop
 * Reduced motion: always a still, swipeable row. No jobs: not printed.
 * ------------------------------------------------------------------- */

.aj-boost-strip {
	/* Never let the strip's own content widen the column it sits in: the
	   script measures whether the jobs fit this width. */
	contain: inline-size;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	padding: 10px 14px;
	border: 1px solid var(--aj-border);
	border-radius: 14px;
	background: var(--aj-bg-subtle);
}

.aj-boost-strip[hidden] {
	display: none;
}

.aj-boost-strip__label {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--aj-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Green "active now" dot with a soft pulse. */
.aj-boost-strip__label::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	animation: aj-boost-pulse 1.8s ease-out infinite;
}

@keyframes aj-boost-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
	}
	70% {
		box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aj-boost-strip__label::before {
		animation: none;
		box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
	}
}

.aj-boost-strip__viewport {
	position: relative;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.aj-boost-strip__track {
	display: flex;
	align-items: center;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aj-boost-strip__item {
	display: flex;
	align-items: center;
	flex: none;
}

/* Small dot between items, as in a news ticker. */
.aj-boost-strip__item + .aj-boost-strip__item::before {
	content: "";
	width: 4px;
	height: 4px;
	margin: 0 22px;
	border-radius: 50%;
	background: var(--aj-text-muted);
	opacity: 0.45;
}

.aj-boost-strip__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 4px;
	border-radius: 10px;
	color: var(--aj-text);
	text-decoration: none;
}

.aj-boost-strip__link:hover,
.aj-boost-strip__link:focus-visible {
	color: var(--aj-text);
	text-decoration: none;
}

.aj-boost-strip__link:hover .aj-boost-strip__title {
	color: var(--aj-brand);
}

.aj-boost-strip__logo {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 3px;
	border: 1px solid var(--aj-border);
	border-radius: 50%;
	background: var(--aj-bg);
	overflow: hidden;
}

.aj-boost-strip__logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.aj-boost-strip__text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	white-space: nowrap;
}

.aj-boost-strip__line {
	font-size: 14px;
}

.aj-boost-strip__title {
	font-weight: 700;
	transition: color var(--aj-motion) ease;
}

.aj-boost-strip__when {
	margin-left: 6px;
	color: var(--aj-text-muted);
	font-size: 13px;
}

.aj-boost-strip__where {
	color: var(--aj-text-muted);
	font-size: 13px;
}

/* Marquee: list printed twice by the script, track slides one copy. */
.aj-boost-strip.is-marquee .aj-boost-strip__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.aj-boost-strip.is-marquee .aj-boost-strip__track {
	animation: aj-boost-marquee var(--aj-boost-duration, 40s) linear infinite;
}

.aj-boost-strip.is-marquee:hover .aj-boost-strip__track,
.aj-boost-strip.is-marquee:focus-within .aj-boost-strip__track {
	animation-play-state: paused;
}

@keyframes aj-boost-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Fade: one job at a time, no separators. */
.aj-boost-strip.is-fade .aj-boost-strip__item {
	display: none;
	animation: aj-boost-fade 480ms ease;
}

.aj-boost-strip.is-fade .aj-boost-strip__item.is-current {
	display: flex;
}

.aj-boost-strip.is-fade .aj-boost-strip__item::before {
	display: none;
}

@keyframes aj-boost-fade {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* One job (still) or one-at-a-time (fade): the item may be wider than a
   phone, so let it shrink and shorten the lines with an ellipsis. */
.aj-boost-strip.is-single .aj-boost-strip__track,
.aj-boost-strip.is-fade .aj-boost-strip__track {
	width: 100%;
}

.aj-boost-strip.is-single .aj-boost-strip__item,
.aj-boost-strip.is-fade .aj-boost-strip__item,
.aj-boost-strip.is-single .aj-boost-strip__link,
.aj-boost-strip.is-fade .aj-boost-strip__link,
.aj-boost-strip.is-single .aj-boost-strip__text,
.aj-boost-strip.is-fade .aj-boost-strip__text {
	min-width: 0;
	max-width: 100%;
}

.aj-boost-strip.is-single .aj-boost-strip__line,
.aj-boost-strip.is-fade .aj-boost-strip__line,
.aj-boost-strip.is-single .aj-boost-strip__where,
.aj-boost-strip.is-fade .aj-boost-strip__where {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Reduced motion, or no script: a still row you can swipe. */
.aj-boost-strip.is-scroll .aj-boost-strip__viewport {
	overflow-x: auto;
	scrollbar-width: none;
}

.aj-boost-strip.is-scroll .aj-boost-strip__viewport::-webkit-scrollbar {
	display: none;
}

@media (max-width: 640px) {
	.aj-boost-strip {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 10px 12px;
	}

	.aj-boost-strip__viewport {
		width: 100%;
	}
}

/* "Boosted" tag on a job card while its boost runs (Aruba_Jobs_Boosts). */
.aj-boosted-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: #e7f8ee;
	color: #15803d;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.aj-boosted-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #22c55e;
}

.aj-job-card > .aj-boosted-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
}

.aj-job-card > .aj-featured-badge + .aj-boosted-badge {
	left: 104px;
}

.aj-job-card:has(> .aj-boosted-badge) {
	padding-top: 44px;
}

/* Pricing calculator: refused order message */
.aj-calc-error {
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--aj-radius-sm);
	background: #fdecec;
	color: #a12828;
	font-size: 14px;
}

/* Post a Job: listing options (Aruba_Jobs_Promotions) */
.aj-listing-options .aj-field-hint {
	margin-top: 0;
}

.aj-listing-options__choice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-weight: 600;
}

.aj-listing-options__feature {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 10px;
	align-items: start;
	margin-top: 12px;
	padding: 14px 16px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-brand-light);
	cursor: pointer;
}

.aj-listing-options__feature input {
	grid-row: span 2;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--aj-brand);
}

.aj-listing-options__feature span {
	font-size: 13px;
	color: var(--aj-text-muted);
}

/* Dashboard: Credits & Boosts */
.aj-credits {
	margin-bottom: 20px;
}

.aj-credits__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.aj-credits__head h3 {
	margin: 0;
}

.aj-credits__plan {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: var(--aj-radius-sm);
	background: #e7f8ee;
	color: #15603a;
	font-weight: 600;
}

.aj-credits__plan svg {
	flex: none;
	width: 18px;
	height: 18px;
}

.aj-credits__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin-bottom: 12px;
}

.aj-credits__tile {
	display: grid;
	gap: 2px;
	padding: 16px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg-subtle);
}

.aj-credits__num {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--aj-text);
}

.aj-credits__label {
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-credits__extra {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--aj-brand);
}

.aj-notice--error {
	background: #fdecec;
	border: 1px solid #f3b8b8;
	color: #a12828;
}

.aj-boost-book {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	align-items: end;
	margin: 0 0 18px;
	padding: 16px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
}

.aj-boost-book label {
	display: grid;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
}

.aj-boost-book label[hidden] {
	display: none;
}

.aj-boost-book select,
.aj-boost-book input {
	width: 100%;
	box-sizing: border-box;
}

.aj-boost-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.aj-boost-table th,
.aj-boost-table td {
	padding: 10px 8px;
	border-bottom: 1px solid var(--aj-border);
	text-align: left;
	vertical-align: middle;
}

.aj-boost-table th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aj-text-muted);
}

.aj-boost-table small {
	display: block;
	color: var(--aj-text-muted);
}

.aj-boost-table form {
	margin: 0;
}

@media (max-width: 640px) {
	.aj-boost-table thead {
		display: none;
	}

	.aj-boost-table tr {
		display: grid;
		padding: 8px 0;
		border-bottom: 1px solid var(--aj-border);
	}

	.aj-boost-table td {
		padding: 3px 0;
		border: 0;
	}
}

/* ==========================================================================
   Post a Job (Aruba_Jobs_Job_Form): numbered sections on the left, a sticky
   sidebar with a live preview card, a checklist, listing options and the
   submit button on the right. One column on phones.
   ========================================================================== */

.aj-jf {
	box-sizing: border-box;
	max-width: 1120px;
	margin: 0 auto;
	padding: 40px 24px 72px;
}

.aj-jf__head {
	max-width: 720px;
	margin-bottom: 28px;
}

.aj-jf__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--aj-brand-light);
	color: var(--aj-brand);
	font-size: 13px;
	font-weight: 700;
}

.aj-jf__eyebrow svg {
	width: 16px;
	height: 16px;
}

.aj-jf__title {
	margin: 0 0 8px;
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 800;
	line-height: 1.2;
}

.aj-jf__intro {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--aj-text-muted);
}

/* The theme's .aj-form is a narrow centred column; here the grid sets the width. */
.aj-form.aj-jf__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	max-width: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 960px) {
	.aj-form.aj-jf__grid {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 32px;
	}

	.aj-jf__side {
		position: sticky;
		top: calc(var(--aj-sticky-top, 88px) + 16px);
	}
}

.aj-jf__main,
.aj-jf__side {
	display: grid;
	gap: 20px;
	min-width: 0;
}

.aj-jf-section {
	padding: 24px 24px 8px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-sm);
}

.aj-jf-section__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	font-size: 19px;
	font-weight: 800;
}

.aj-jf-section__num {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--aj-brand);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.aj-jf label small,
.aj-jf summary small {
	font-weight: 500;
	color: var(--aj-text-muted);
}

.aj-jf .aj-field-note {
	display: block;
	margin: 2px 0 6px;
}

/* Two fields side by side on wider screens. */
.aj-jf-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 16px;
}

@media (min-width: 640px) {
	.aj-jf-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.aj-jf-company {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg-subtle);
	font-weight: 600;
}

.aj-jf-company svg {
	width: 18px;
	height: 18px;
	color: var(--aj-brand);
}

/* Optional extras folded away until needed. */
.aj-jf-more {
	margin: 0 0 16px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
}

.aj-jf-more > summary {
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.aj-jf-more > summary::-webkit-details-marker {
	display: none;
}

.aj-jf-more > summary::before {
	content: "+";
	display: inline-block;
	width: 18px;
	color: var(--aj-brand);
	font-weight: 800;
}

.aj-jf-more[open] > summary::before {
	content: "–";
}

.aj-jf-more[open] > summary {
	border-bottom: 1px solid var(--aj-border);
}

.aj-jf-more > :not(summary) {
	margin-left: 16px;
	margin-right: 16px;
}

.aj-jf-more > :nth-child(2) {
	margin-top: 14px;
}

/* How people apply: three option cards. */
.aj-jf-apply {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin: 0 0 16px;
}

@media (min-width: 720px) {
	.aj-jf-apply {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.aj-jf .aj-jf-apply__option {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	padding: 14px;
	border: 1.5px solid var(--aj-border);
	border-radius: var(--aj-radius);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--aj-text-muted);
	cursor: pointer;
}

.aj-jf-apply__option strong {
	font-size: 14px;
	color: var(--aj-text);
}

.aj-jf-apply__option em {
	margin-left: 4px;
	padding: 1px 8px;
	border-radius: 999px;
	background: #e7f8ee;
	color: #15803d;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
}

.aj-jf-apply__option input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--aj-brand);
}

.aj-jf-apply__option:has(input:checked) {
	border-color: var(--aj-brand);
	background: var(--aj-brand-light);
	box-shadow: inset 0 0 0 1px var(--aj-brand);
}

.aj-jf [data-apply-field][hidden] {
	display: none;
}

/* Sidebar */
.aj-jf-card {
	padding: 20px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
}

.aj-jf-card__label {
	display: flex;
	justify-content: space-between;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aj-brand);
}

.aj-jf-preview {
	display: grid;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg-subtle);
}

.aj-jf-preview__top {
	display: flex;
	gap: 12px;
	align-items: center;
}

.aj-jf-preview__top > span:last-child {
	display: grid;
	min-width: 0;
}

.aj-jf-preview__logo {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	background: var(--aj-bg);
	color: var(--aj-brand);
	font-weight: 800;
}

.aj-jf-preview__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.aj-jf-preview__title {
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aj-jf-preview__meta {
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-jf-preview__tags:empty {
	display: none;
}

.aj-jf-preview__tags {
	justify-self: start;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--aj-bg);
	border: 1px solid var(--aj-border);
	font-size: 12px;
	font-weight: 600;
}

.aj-jf-preview__snap {
	font-size: 13px;
	line-height: 1.5;
	color: var(--aj-text-muted);
}

.aj-jf-checks {
	display: grid;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.aj-jf-checks li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--aj-text-muted);
}

.aj-jf-checks li::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--aj-border);
	border-radius: 50%;
}

.aj-jf-checks li.is-done {
	color: var(--aj-text);
}

.aj-jf-checks li.is-done::before {
	border-color: #22c55e;
	background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.aj-jf__side .aj-listing-options {
	margin: 0;
	padding: 20px;
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
}

.aj-jf__side .aj-listing-options legend {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aj-brand);
}

.aj-jf-submit {
	display: grid;
	gap: 8px;
}

.aj-jf-submit .aj-button {
	padding-top: 14px;
	padding-bottom: 14px;
	font-size: 16px;
}

.aj-jf-submit .aj-field-note {
	margin: 0;
	text-align: center;
}

/* ==========================================================================
   Recruiters and client companies (Aruba_Jobs_Recruiter_Clients)
   ========================================================================== */

/* "Posted by [agency]" on a job page, and the note on a client's profile. */
.aj-via-note {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-via-note a {
	font-weight: 600;
	color: var(--aj-brand);
}

.aj-via-note--company {
	display: inline-block;
	margin-top: 10px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--aj-bg-subtle);
}

/* Dashboard > Clients */
.aj-clients-agency {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	background: var(--aj-brand-light);
}

.aj-clients-agency h3 {
	margin: 0 0 4px;
}

.aj-clients {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aj-clients__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px 16px;
	align-items: center;
	padding: 16px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius);
}

.aj-clients__main {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.aj-clients__main > span:last-child {
	display: grid;
	min-width: 0;
}

.aj-clients__logo {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border: 1px solid var(--aj-border);
	border-radius: 10px;
	background: var(--aj-bg);
	color: var(--aj-brand);
	font-weight: 800;
}

.aj-clients__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.aj-clients__name {
	font-weight: 700;
	color: var(--aj-text);
}

.aj-clients__meta {
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-clients__actions {
	display: flex;
	gap: 8px;
}

.aj-clients__invite {
	grid-column: 1 / -1;
	padding-top: 10px;
	border-top: 1px solid var(--aj-border);
}

.aj-clients__invite summary {
	font-size: 14px;
	font-weight: 600;
	color: var(--aj-brand);
	cursor: pointer;
}

.aj-clients__invite form {
	display: grid;
	gap: 6px;
	margin-top: 10px;
}

.aj-clients__invite label {
	font-size: 13px;
	font-weight: 700;
}

.aj-clients__invite-row {
	display: flex;
	gap: 8px;
}

.aj-clients__invite-row input {
	flex: 1;
	min-width: 0;
}

@media (max-width: 640px) {
	.aj-clients__item,
	.aj-clients-agency {
		grid-template-columns: minmax(0, 1fr);
		flex-direction: column;
		align-items: stretch;
	}
}

/* ==========================================================================
   Company profile form (Aruba_Jobs_Company_Form): same layout as Post a Job
   (.aj-jf sections, sidebar), plus the logo block and benefit tiles.
   ========================================================================== */

/* Inside Dashboard > Company Profile: the dashboard has its own header, and
   the column is narrower, so one column with the sidebar after the form. */
.aj-cf--embedded {
	padding: 0;
}

.aj-cf--embedded .aj-form.aj-jf__grid {
	grid-template-columns: minmax(0, 1fr);
}

.aj-cf--embedded .aj-jf__side {
	position: static;
}

.aj-jf-section__opt {
	font-size: 13px;
	font-weight: 500;
	color: var(--aj-text-muted);
}

@media (min-width: 720px) {
	.aj-jf-row--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.aj-jf-apply--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Logo beside name and snapshot. */
.aj-cf-identity {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-bottom: 4px;
}

@media (min-width: 640px) {
	.aj-cf-identity {
		grid-template-columns: 132px minmax(0, 1fr);
		align-items: start;
	}
}

.aj-cf .aj-company-form__logo {
	gap: 8px;
	padding: 16px 12px;
	border: 1px dashed #c8d3e6;
	border-radius: var(--aj-radius);
	background: var(--aj-bg-subtle);
}

.aj-cf .aj-company-form__logo-preview {
	width: 84px;
	height: 84px;
	margin: 0;
	border-radius: 14px;
	background: #fff;
}

.aj-cf .aj-company-form__logo-preview img {
	object-fit: contain;
	padding: 6px;
	box-sizing: border-box;
}

.aj-cf .aj-company-form__logo .aj-field-note {
	margin: 0;
	font-size: 11px;
}

.aj-cf .aj-company-location {
	margin: 4px 0 16px;
}

/* ------------------------------------------------------------------
   Benefits: one tile per benefit with a tick in the corner. Strong
   selectors on purpose: inside a fieldset (Post a Job) the theme's
   pill style for checkboxes would otherwise turn them into ovals.
   ------------------------------------------------------------------ */
.aj-form .aj-benefit-choices {
	gap: 12px;
}

.aj-form .aj-benefit-choices .aj-benefit-group {
	position: relative;
	border: 1.5px solid var(--aj-border);
	border-radius: var(--aj-radius);
	background: var(--aj-bg);
	transition: border-color var(--aj-motion) ease, background-color var(--aj-motion) ease;
}

.aj-form .aj-benefit-choices .aj-benefit-group:hover {
	border-color: #b9d3ff;
}

.aj-form .aj-benefit-group label.aj-benefit-choice {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin: 0;
	padding: 14px 48px 14px 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--aj-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
}

.aj-form .aj-benefit-group label.aj-benefit-choice > input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* The tick: an empty circle, filled when chosen. */
.aj-form .aj-benefit-group label.aj-benefit-choice::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 14px;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	border: 1.5px solid #c8ced8;
	border-radius: 50%;
	background: #fff;
}

.aj-form .aj-benefit-group label.aj-benefit-choice:has(> input:checked)::after {
	border-color: var(--aj-brand);
	background: var(--aj-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.aj-form .aj-benefit-group label.aj-benefit-choice:has(> input:focus-visible) {
	outline: 2px solid var(--aj-brand);
	outline-offset: -2px;
	border-radius: var(--aj-radius);
}

.aj-form .aj-benefit-choices .aj-benefit-group:has(> label.aj-benefit-choice--parent > input:checked) {
	border-color: var(--aj-brand);
	background: var(--aj-brand-light);
}

.aj-form .aj-benefit-group label.aj-benefit-choice strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--aj-text);
}

.aj-form .aj-benefit-group label.aj-benefit-choice small {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--aj-text-muted);
}

/* Variations: small pills under their benefit. */
.aj-form .aj-benefit-choices .aj-benefit-variations {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 10px 16px 14px;
	border-top: 1px solid var(--aj-border);
	background: transparent;
}

.aj-form .aj-benefit-choices .aj-benefit-variations__label {
	width: 100%;
	margin: 0 0 2px;
}

.aj-form .aj-benefit-group label.aj-benefit-choice--variation {
	padding: 5px 12px 5px 30px;
	border: 1px solid var(--aj-border);
	border-radius: 999px;
	background: var(--aj-bg);
	font-size: 13px;
}

.aj-form .aj-benefit-group label.aj-benefit-choice--variation + .aj-benefit-choice--variation {
	border-top: 1px solid var(--aj-border);
}

.aj-form .aj-benefit-group label.aj-benefit-choice--variation strong {
	font-size: 13px;
	font-weight: 600;
}

.aj-form .aj-benefit-group label.aj-benefit-choice--variation::after {
	top: 50%;
	right: auto;
	left: 9px;
	width: 15px;
	height: 15px;
	margin-top: -7.5px;
}

.aj-form .aj-benefit-group label.aj-benefit-choice--variation:has(> input:checked) {
	border-color: var(--aj-brand);
	background: var(--aj-brand-light);
}

.aj-form .aj-benefit-group label.aj-benefit-choice--variation:has(> input:checked)::after {
	background-size: 10px;
}

/* Location: compact chips that wrap, like the job form's choices. */
.aj-cf .aj-company-location .aj-checkbox-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: 10px;
}

.aj-cf .aj-company-location .aj-checkbox-grid label {
	width: auto;
	margin: 0 8px 8px 0;
}

/* Logo block: the upload button fits the column on one line. */
.aj-cf .aj-company-form__logo label.aj-button {
	width: 100%;
	padding: 8px 10px;
	font-size: 13px;
	white-space: nowrap;
}

/* Accepted card logos (page-pricing.php) */
.aj-pay-cards {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.aj-pay-cards svg {
	width: 40px;
	height: 25px;
	border: 1px solid var(--aj-border);
	border-radius: 5px;
	background: #fff;
}

.aj-pay-cards__text {
	font-size: 12px;
	color: var(--aj-text-muted);
}

.aj-calc-assure .aj-calc-assure__cards {
	padding-left: 24px;
}

.aj-pricing-details__cards {
	margin: 4px 0 14px 56px;
}

/* ==========================================================================
   Order steps (Aruba_Jobs_Promotions::render_steps): breadcrumbs and a
   tracker on sign-up/log-in (on the way to checkout), checkout and the
   order received page; the "Your order" box with Remove links on checkout.
   ========================================================================== */

.aj-steps-wrap {
	max-width: 1120px;
	margin: 0 auto 24px;
}

.aj-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--aj-text-muted);
}

.aj-crumbs a {
	color: var(--aj-brand);
	font-weight: 600;
	text-decoration: none;
}

.aj-crumbs a:hover {
	text-decoration: underline;
}

.aj-crumbs [aria-current] {
	color: var(--aj-text);
	font-weight: 600;
}

.aj-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.aj-steps__step {
	position: relative;
	text-align: center;
}

/* Connecting line between the dots. */
.aj-steps__step + .aj-steps__step::before {
	content: "";
	position: absolute;
	top: 15px;
	right: 50%;
	width: 100%;
	height: 2px;
	background: var(--aj-border);
	z-index: 0;
}

.aj-steps__step.is-done + .aj-steps__step::before,
.aj-steps__step.is-current::before {
	background: var(--aj-brand);
}

.aj-steps__step > a,
.aj-steps__step > span:first-child {
	position: relative;
	z-index: 1;
}

.aj-steps__step a {
	display: inline-grid;
	justify-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

.aj-steps__step:not(:has(a)) {
	display: grid;
	justify-items: center;
	gap: 6px;
}

.aj-steps__dot {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 2px solid var(--aj-border);
	border-radius: 50%;
	background: var(--aj-bg);
	color: var(--aj-text-muted);
	font-size: 14px;
	font-weight: 700;
}

.aj-steps__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--aj-text-muted);
}

.aj-steps__step.is-done .aj-steps__dot {
	border-color: var(--aj-brand);
	background: var(--aj-brand);
	color: #fff;
}

.aj-steps__step.is-done a:hover .aj-steps__label {
	color: var(--aj-brand);
	text-decoration: underline;
}

.aj-steps__step.is-current .aj-steps__dot {
	border-color: var(--aj-brand);
	color: var(--aj-brand);
	box-shadow: 0 0 0 4px var(--aj-brand-light);
}

.aj-steps__step.is-current .aj-steps__label,
.aj-steps__step.is-done .aj-steps__label {
	color: var(--aj-text);
}

/* Checkout: the order box above the form. */
.aj-order-box {
	max-width: 1120px;
	margin: 0 auto 28px;
	padding: 20px 24px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-lg);
	background: var(--aj-bg);
	box-shadow: var(--aj-shadow-sm);
}

.aj-order-box__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.aj-order-box__head h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
}

.aj-order-box__lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aj-order-box__lines li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 16px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--aj-border);
	font-size: 15px;
}

.aj-order-box__price {
	font-weight: 700;
	white-space: nowrap;
}

.aj-order-box__remove {
	font-size: 13px;
	font-weight: 600;
	color: #b42318;
	text-decoration: none;
}

.aj-order-box__remove:hover {
	text-decoration: underline;
}

.aj-order-box__total {
	display: flex;
	justify-content: space-between;
	margin: 14px 0 0;
	font-size: 16px;
}

.aj-order-box__total strong {
	font-size: 20px;
}

@media (max-width: 520px) {
	.aj-steps__label {
		font-size: 11px;
	}

	.aj-order-box {
		padding: 16px;
	}

	.aj-order-box__lines li {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.aj-order-box__remove {
		grid-column: 1 / -1;
	}
}

/* Shop pages (checkout, cart, account): the title lines up with the
   centred content column instead of the page's left edge. */
.aj-container:has(> .aj-page-content .woocommerce) > .aj-page-title {
	box-sizing: border-box;
	max-width: calc(min(760px, 100%) + 48px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* ---------------------------------------------------------------------
 * Blog: single post (single.php, template-parts/article-*.php), 2026-10-04
 *
 * An editorial page rather than a blog template: one left edge shared by
 * the title, the key figures and the article text; numbered sections that
 * match the numbered "On this page"; a 2px ink rule opening each section;
 * sourced figures in a band; inline references; the Aruba Jobs mark as
 * byline and end mark. Brand blue marks structure (numbers, the current
 * section, references, one button per card), never decoration. No
 * gradients, no pills, no shadows on content.
 *
 * Grid: "On this page" 200px | article 720px | rail 280px from 1180px;
 * rail under the article from 900px; one column below 900px, where "On
 * this page" folds into a disclosure. Body links use --aj-brand-dark
 * (6.6:1 on white; the lighter brand blue is 4.4:1, below AA for text).
 * ------------------------------------------------------------------- */

.aj-post {
	--aj-post-max: 1296px;
	--aj-post-gap: 48px;
	--aj-post-toc: 200px;
	--aj-post-main: 720px;
	--aj-post-rail: 280px;
}

.aj-post-progress {
	display: none;
}

@supports (animation-timeline: scroll()) {
	.aj-post-progress {
		display: block;
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		left: 0;
		right: 0;
		height: 3px;
		z-index: 1000;
		background: var(--aj-brand);
		transform-origin: 0 50%;
		transform: scaleX(0);
		animation: aj-post-progress linear both;
		animation-timeline: scroll(root);
	}
}

@keyframes aj-post-progress {
	to {
		transform: scaleX(1);
	}
}

/* Shared grid: masthead text, key figures and body start on the article's left edge. */
.aj-post-head,
.aj-post-figures,
.aj-post-body,
.aj-post-market__inner {
	max-width: var(--aj-post-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: content-box;
}

.aj-post-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding-top: 24px;
}

@media (min-width: 900px) {
	.aj-post-head,
	.aj-post-figures,
	.aj-post-market__inner {
		display: grid;
		grid-template-columns: var(--aj-post-toc) minmax(0, 1fr);
		column-gap: var(--aj-post-gap);
	}

	.aj-post-head__text,
	.aj-post-head__meta,
	.aj-post-figures__row,
	.aj-post-market__inner > * {
		grid-column: 2;
	}

	.aj-post-head__media {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1180px) {
	.aj-post-head__text,
	.aj-post-head__meta {
		max-width: calc(var(--aj-post-main) + var(--aj-post-gap) + var(--aj-post-rail));
	}
}

/* Masthead ------------------------------------------------------------ */

.aj-post-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aj-post-kicker__section {
	color: var(--aj-brand-dark);
}

.aj-post-kicker__section:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aj-post-kicker__place {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--aj-text-muted);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
}

.aj-post-kicker__section + .aj-post-kicker__place {
	padding-left: 14px;
	border-left: 1px solid var(--aj-border);
}

@media (max-width: 559px) {
	.aj-post-kicker__section + .aj-post-kicker__place {
		flex-basis: 100%;
		padding-left: 0;
		border-left: 0;
	}
}

.aj-post-kicker__place svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.aj-post-title {
	margin: 0 0 20px;
	max-width: 21ch;
	font-size: clamp(34px, 1.3rem + 3vw, 60px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var(--aj-text);
	text-wrap: balance;
}

.aj-post-dek {
	margin: 0 0 28px;
	max-width: 58ch;
	font-size: clamp(18px, 1rem + 0.45vw, 22px);
	line-height: 1.5;
	color: var(--aj-text-muted);
	text-wrap: pretty;
}

.aj-post-byline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
}

.aj-post-byline__mark {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--aj-border);
	background: #fff;
	object-fit: cover;
}

.aj-post-byline__mark--initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--aj-brand);
	font-weight: 800;
}

.aj-post-byline__names {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 16px;
	margin: 0;
	font-size: 15px;
	color: var(--aj-text-muted);
}

.aj-post-byline__names strong,
.aj-post-byline__names a {
	color: var(--aj-text);
	font-weight: 600;
}

.aj-post-byline__names a {
	text-decoration: underline;
	text-decoration-color: var(--aj-border);
	text-underline-offset: 3px;
}

.aj-post-byline__names a:hover {
	text-decoration-color: currentColor;
}

.aj-post-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 0;
	margin: 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--aj-border);
}

.aj-post-facts > div {
	padding: 0 22px;
	border-left: 1px solid var(--aj-border);
}

.aj-post-facts > div:first-child {
	padding-left: 0;
	border-left: 0;
}

.aj-post-facts dt {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aj-text-muted);
}

.aj-post-facts dd {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--aj-text);
}

.aj-post-facts__checked a {
	color: var(--aj-brand-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

@media (max-width: 559px) {
	.aj-post-facts {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px 16px;
	}

	.aj-post-facts > div,
	.aj-post-facts > div:first-child {
		padding: 0;
		border-left: 0;
	}
}

.aj-post-head__media {
	margin: 40px 0 0;
}

.aj-post-head__image {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--aj-radius-sm);
}

@media (min-width: 900px) {
	.aj-post-head__image {
		aspect-ratio: 2 / 1;
	}

	.aj-post-head__media figcaption {
		margin-left: calc(var(--aj-post-toc) + var(--aj-post-gap));
	}
}

.aj-post-head__media figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--aj-text-muted);
}

/* Header style "overlay" (filter aruba_jobs_post_header_style): kicker,
   title and standfirst on the featured image. An even 60% ink tint, not a
   gradient, keeps white text at 4.9:1 or better even on the brightest
   pixel of any photo. Byline and facts follow on white. The text keeps the
   article's left edge from 900px. */
.aj-post-head--overlay .aj-post-head__media,
.aj-post-head--overlay .aj-post-head__text {
	grid-row: 1;
	grid-column: 1 / -1;
}

.aj-post-head--overlay .aj-post-head__media {
	position: relative;
	margin: 0;
	min-height: 440px;
	border-radius: var(--aj-radius-sm);
	overflow: hidden;
	background: var(--aj-text);
}

.aj-post-head--overlay .aj-post-head__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(16, 20, 28, 0.6);
}

.aj-post-head--overlay .aj-post-head__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
}

.aj-post-head--overlay .aj-post-head__media figcaption {
	position: absolute;
	right: 16px;
	bottom: 12px;
	z-index: 2;
	margin: 0;
	font-size: 12px;
	color: #fff;
}

.aj-post-head--overlay .aj-post-head__text {
	position: relative;
	z-index: 1;
	align-self: end;
	padding: 72px 20px 44px;
	color: #fff;
}

.aj-post-head--overlay .aj-post-title,
.aj-post-head--overlay .aj-post-dek,
.aj-post-head--overlay .aj-post-kicker__section,
.aj-post-head--overlay .aj-post-kicker__place {
	color: #fff;
}

.aj-post-head--overlay .aj-post-dek {
	margin-bottom: 0;
}

.aj-post-head--overlay .aj-post-kicker__section + .aj-post-kicker__place {
	border-left-color: rgba(255, 255, 255, 0.5);
}

.aj-post-head--overlay .aj-post-head__meta {
	grid-row: 2;
	padding-top: 22px;
}

@media (min-width: 900px) {
	.aj-post-head--overlay .aj-post-head__media {
		min-height: clamp(460px, 44vw, 620px);
	}

	.aj-post-head--overlay .aj-post-head__text {
		max-width: none;
		padding: 96px 48px 52px calc(var(--aj-post-toc) + var(--aj-post-gap));
	}

	.aj-post-head--overlay .aj-post-title {
		max-width: 20ch;
	}
}

/* Key figures: real, sourced numbers only (writer metadata). */
.aj-post-figures {
	margin-top: 40px;
}

.aj-post-figures__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	border-top: 2px solid var(--aj-text);
}

.aj-post-figure {
	padding: 18px 20px 4px 0;
}

.aj-post-figure + .aj-post-figure {
	padding-left: 20px;
	box-shadow: inset 1px 0 0 var(--aj-border);
}

@media (max-width: 559px) {
	.aj-post-figures__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.aj-post-figure + .aj-post-figure {
		padding-left: 0;
		box-shadow: inset 0 1px 0 var(--aj-border);
		margin-top: 14px;
	}
}

.aj-post-figure__value {
	margin: 0 0 6px;
	font-size: clamp(28px, 1rem + 1.6vw, 40px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--aj-text);
}

.aj-post-figure__label {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--aj-text-muted);
}

/* Body grid ------------------------------------------------------------ */

.aj-post-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "toc" "main" "rail";
	gap: 32px;
	align-items: start;
	margin-top: 48px;
}

.aj-post-body__toc {
	grid-area: toc;
}

.aj-post-body__main {
	grid-area: main;
	min-width: 0;
	max-width: var(--aj-post-main);
}

.aj-post-body__rail {
	grid-area: rail;
	display: grid;
	gap: 20px;
	align-content: start;
}

@media (min-width: 640px) and (max-width: 1179px) {
	.aj-post-body__rail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: var(--aj-post-main);
	}
}

@media (min-width: 900px) {
	.aj-post-body {
		grid-template-columns: var(--aj-post-toc) minmax(0, var(--aj-post-main));
		grid-template-areas: "toc main" ". rail";
		column-gap: var(--aj-post-gap);
	}

	.aj-post-body__toc {
		position: sticky;
		top: calc(var(--aj-sticky-top) + 24px);
	}
}

@media (min-width: 1180px) {
	.aj-post-body {
		grid-template-columns: var(--aj-post-toc) minmax(0, var(--aj-post-main)) var(--aj-post-rail);
		grid-template-areas: "toc main rail";
	}

	.aj-post-body__rail {
		position: sticky;
		top: calc(var(--aj-sticky-top) + 24px);
	}
}

/* On this page: numbered like the sections; a disclosure below 900px. */
.aj-post-toc {
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg);
}

.aj-post-toc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 14px 16px;
	cursor: pointer;
	list-style: none;
}

.aj-post-toc > summary::-webkit-details-marker {
	display: none;
}

.aj-post-toc > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--aj-motion) ease;
}

.aj-post-toc[open] > summary::after {
	transform: rotate(-135deg) translateY(-2px);
}

.aj-post-toc .aj-legal__toc {
	padding: 0 16px 14px;
}

.aj-post-toc ul {
	counter-reset: aj-toc;
}

.aj-post-toc .aj-legal__toc a {
	display: flex;
	gap: 10px;
}

.aj-post-toc .aj-legal__toc a::before {
	counter-increment: aj-toc;
	content: counter(aj-toc, decimal-leading-zero);
	flex-shrink: 0;
	min-width: 18px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.75;
	font-variant-numeric: tabular-nums;
	color: var(--aj-text-muted);
}

.aj-post-toc .aj-legal__toc a[aria-current] {
	color: var(--aj-text);
	border-left-color: var(--aj-brand);
	font-weight: 600;
}

.aj-post-toc .aj-legal__toc a[aria-current]::before {
	color: var(--aj-brand);
}

@media (min-width: 900px) {
	.aj-post-toc {
		border: 0;
		border-radius: 0;
		background: none;
	}

	.aj-post-toc > summary {
		padding: 0;
		margin: 0 0 12px;
		cursor: default;
		pointer-events: none;
	}

	.aj-post-toc > summary::after {
		display: none;
	}

	.aj-post-toc .aj-legal__toc {
		padding: 0;
		max-height: calc(100vh - var(--aj-sticky-top) - 48px);
		overflow-y: auto;
	}
}

/* In short ---------------------------------------------------------- */

.aj-post-keypoints {
	margin: 0 0 40px;
	padding: 20px 24px;
	border-left: 3px solid var(--aj-brand);
	border-radius: 0 var(--aj-radius-sm) var(--aj-radius-sm) 0;
	background: var(--aj-brand-light);
}

.aj-post-keypoints__title {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aj-brand-dark);
}

.aj-post-keypoints ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.aj-post-keypoints li {
	position: relative;
	padding-left: 22px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--aj-text);
}

.aj-post-keypoints li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(0.775em - 1px);
	width: 12px;
	height: 2px;
	background: var(--aj-brand);
}

/* Article typography -------------------------------------------------- */

.aj-post-content.aj-page-content {
	max-width: none;
	padding-inline: 0;
	margin: 0;
	counter-reset: aj-section;
}

.aj-post-content p,
.aj-post-content li {
	font-size: clamp(16px, 0.95rem + 0.2vw, 18px);
	line-height: 1.75;
}

.aj-post-content p {
	margin: 0 0 20px;
}

/* Numbered sections, opened by an ink rule. The editor's own separator
   before a heading would double it, so it is dropped there. */
.aj-post-content > h2 {
	counter-increment: aj-section;
	margin: 56px 0 14px;
	padding-top: 16px;
	border-top: 2px solid var(--aj-text);
	font-size: clamp(23px, 1.1rem + 0.7vw, 29px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	scroll-margin-top: calc(var(--aj-sticky-top) + 16px);
	text-wrap: balance;
}

.aj-post-content > h2::before {
	content: counter(aj-section, decimal-leading-zero);
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--aj-brand);
	font-variant-numeric: tabular-nums;
}

.aj-post-content > h2:first-child {
	margin-top: 0;
}

.aj-post-content > hr:has(+ h2) {
	display: none;
}

.aj-post-content h3 {
	margin: 32px 0 10px;
	font-size: clamp(18px, 1rem + 0.3vw, 21px);
	font-weight: 700;
	scroll-margin-top: calc(var(--aj-sticky-top) + 16px);
}

.aj-post-content a:not(.aj-button) {
	color: var(--aj-brand-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.aj-post-content a:not(.aj-button):hover {
	text-decoration-thickness: 2px;
}

.aj-post-content hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--aj-border);
}

/* End mark: the Aruba Jobs mark closes the article text. */
.aj-post-content > p:last-child::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: 0.35em;
	vertical-align: -0.14em;
	background: var(--aj-end-mark) center / contain no-repeat;
}

/* Inline references [cite n]. */
.aj-cite {
	font-size: 0.68em;
	line-height: 0;
	vertical-align: super;
}

.aj-cite a,
.aj-post-content .aj-cite a:not(.aj-button) {
	padding: 0 1px;
	font-weight: 700;
	color: var(--aj-brand-dark);
	text-decoration: none;
}

.aj-cite a::before {
	content: "[";
}

.aj-cite a::after {
	content: "]";
}

.aj-cite a:hover,
.aj-cite a:focus-visible {
	text-decoration: underline;
}

.aj-post-content blockquote,
.aj-post-content .wp-block-pullquote {
	margin: 36px 0;
	padding: 20px 0;
	border: 0;
	border-top: 2px solid var(--aj-text);
	border-bottom: 1px solid var(--aj-border);
	text-align: left;
}

.aj-post-content blockquote p,
.aj-post-content .wp-block-pullquote p {
	font-size: clamp(20px, 1rem + 0.6vw, 24px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.aj-post-content figure {
	margin: 32px 0;
}

.aj-post-content figure img {
	border-radius: var(--aj-radius-sm);
}

.aj-post-content figcaption {
	margin-top: 8px;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-post-content .wp-block-table {
	overflow-x: auto;
}

.aj-post-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.aj-post-content .wp-block-table td,
.aj-post-content .wp-block-table th,
.aj-post-content th,
.aj-post-content td {
	padding: 10px 14px 10px 0;
	border: 0;
	border-bottom: 1px solid var(--aj-border);
	text-align: left;
	vertical-align: top;
	font-variant-numeric: tabular-nums;
}

.aj-post-content thead th,
.aj-post-content .wp-block-table thead th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aj-text-muted);
	border-bottom: 2px solid var(--aj-text);
}

.aj-post-content .wp-block-table thead {
	border-bottom: 0;
}

/* Callout: a paragraph or Group block with the class "aj-callout". */
.aj-post-content .aj-callout {
	margin: 28px 0;
	padding: 16px 20px;
	border-left: 3px solid var(--aj-text);
	border-radius: 0 var(--aj-radius-sm) var(--aj-radius-sm) 0;
	background: var(--aj-bg-subtle);
}

.aj-post-content .aj-callout > :last-child {
	margin-bottom: 0;
}

/* "Steps" list style (List block > Styles > Steps): numbered markers on a line. */
.aj-post-content ol.is-style-aj-steps {
	list-style: none;
	counter-reset: aj-step;
	margin: 28px 0;
	padding: 0;
}

.aj-post-content ol.is-style-aj-steps > li {
	counter-increment: aj-step;
	position: relative;
	margin: 0;
	padding: 2px 0 20px 46px;
}

.aj-post-content ol.is-style-aj-steps > li::before {
	content: counter(aj-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border: 2px solid var(--aj-brand);
	border-radius: 50%;
	box-sizing: border-box;
	background: var(--aj-bg);
	color: var(--aj-brand-dark);
	font-size: 14px;
	font-weight: 700;
	line-height: 26px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.aj-post-content ol.is-style-aj-steps > li::after {
	content: "";
	position: absolute;
	left: 14px;
	top: 32px;
	bottom: 2px;
	width: 2px;
	background: var(--aj-border);
}

.aj-post-content ol.is-style-aj-steps > li:last-child {
	padding-bottom: 0;
}

.aj-post-content ol.is-style-aj-steps > li:last-child::after {
	display: none;
}

/* Minimum pay check ([aj_wage_check], assets/js/article.js). */
.aj-wage-check {
	margin: 32px 0;
	padding: 20px 22px;
	border: 1px solid var(--aj-border);
	border-top: 3px solid var(--aj-brand);
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg);
}

.aj-post-content .aj-wage-check p {
	margin: 0 0 12px;
}

.aj-post-content .aj-wage-check__title {
	font-size: 17px;
	font-weight: 700;
}

.aj-post-content .aj-wage-check__note {
	font-size: 14px;
	line-height: 1.55;
	color: var(--aj-text-muted);
}

.aj-wage-check__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4px 16px;
}

.aj-wage-check__form:not([hidden]) {
	display: grid;
}

@media (min-width: 560px) {
	.aj-wage-check__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.aj-wage-check label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
}

.aj-wage-check input {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	font: inherit;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}

.aj-wage-check input:focus-visible {
	outline: 2px solid var(--aj-brand);
	outline-offset: 1px;
}

.aj-wage-check__result:empty {
	display: none;
}

.aj-wage-check__result {
	padding-top: 12px;
	border-top: 1px solid var(--aj-border);
}

.aj-wage-check__result dl {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	gap: 4px 24px;
	margin: 0 0 10px;
	font-size: 15px;
}

.aj-wage-check__result dt {
	color: var(--aj-text-muted);
}

.aj-wage-check__result dd {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.aj-wage-check__verdict {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.aj-wage-check__verdict svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 3px;
}

.aj-wage-check__verdict.is-ok {
	color: #0a7d3f;
}

.aj-wage-check__verdict.is-below {
	color: #b3261e;
}

/* Topics, share --------------------------------------------------------- */

.aj-post-tags {
	margin: 40px 0 0;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-post-tags span {
	margin-right: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aj-post-tags a {
	color: var(--aj-text);
	font-weight: 600;
}

.aj-post-tags a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aj-post-tags a + a::before {
	content: "·";
	margin: 0 8px;
	color: var(--aj-text-muted);
}

.aj-post-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin: 20px 0 0;
	padding: 16px 0;
	border-top: 1px solid var(--aj-border);
	border-bottom: 1px solid var(--aj-border);
}

.aj-post-share__label {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aj-text-muted);
}

.aj-post-share__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	background: none;
	color: var(--aj-text-muted);
	cursor: pointer;
	transition: color var(--aj-motion) ease, border-color var(--aj-motion) ease;
}

.aj-post-share__copy:hover,
.aj-post-share__copy.is-copied {
	color: var(--aj-brand);
	border-color: var(--aj-brand);
}

.aj-post-share__copy svg {
	width: 16px;
	height: 16px;
}

.aj-post-share__status {
	font-size: 14px;
	color: var(--aj-brand-dark);
}

/* References and editorial note -------------------------------------- */

.aj-post-trust {
	margin: 40px 0 0;
	scroll-margin-top: calc(var(--aj-sticky-top) + 16px);
}

.aj-post-trust__title {
	margin: 0 0 14px;
	padding-top: 14px;
	border-top: 2px solid var(--aj-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aj-post-references {
	margin: 0 0 28px;
	padding-left: 24px;
	font-size: 14.5px;
	line-height: 1.6;
}

.aj-post-references li {
	margin: 0 0 8px;
	padding: 2px 4px;
	scroll-margin-top: calc(var(--aj-sticky-top) + 24px);
}

.aj-post-references li::marker {
	font-weight: 700;
	color: var(--aj-brand-dark);
	font-variant-numeric: tabular-nums;
}

.aj-post-references li:target {
	background: var(--aj-brand-light);
	outline: 2px solid var(--aj-brand-light);
}

.aj-post-references a {
	color: var(--aj-text);
	text-decoration: underline;
	text-decoration-color: var(--aj-border);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.aj-post-references a:hover {
	text-decoration-color: currentColor;
}

.aj-post-references__checked {
	color: var(--aj-text-muted);
	white-space: nowrap;
}

.aj-post-references__checked::before {
	content: " · ";
}

.aj-post-editorial {
	display: flex;
	gap: 14px;
	padding: 18px 20px;
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg-subtle);
	font-size: 14px;
	line-height: 1.6;
	color: var(--aj-text-muted);
}

.aj-post-editorial__mark {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
}

.aj-post-editorial p {
	margin: 0 0 8px;
}

.aj-post-editorial p:last-child {
	margin-bottom: 0;
}

.aj-post-editorial strong {
	color: var(--aj-text);
}

.aj-post-editorial a {
	color: var(--aj-brand-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Rail ------------------------------------------------------------------ */

.aj-post-card {
	padding: 18px 20px 20px;
	border: 1px solid var(--aj-border);
	border-top: 3px solid var(--aj-brand);
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg);
}

.aj-post-card--search {
	background: var(--aj-bg-subtle);
}

.aj-post-card__title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--aj-text);
}

.aj-post-card__form {
	display: grid;
	gap: 10px;
}

.aj-post-card__form input[type="search"] {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--aj-border);
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg);
	font: inherit;
	font-size: 15px;
	color: var(--aj-text);
}

.aj-post-card__form input[type="search"]:focus-visible {
	outline: 2px solid var(--aj-brand);
	outline-offset: 1px;
	border-color: var(--aj-brand);
}

.aj-post-card__form .aj-button {
	width: 100%;
	min-height: 44px;
}

.aj-post-card__form .aj-button svg {
	width: 16px;
	height: 16px;
}

.aj-post-card__links {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
	font-size: 14px;
}

.aj-post-card__links a,
.aj-post-card__link {
	color: var(--aj-brand-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.aj-post-card__text {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--aj-text-muted);
}

.aj-post-card__button {
	width: 100%;
	min-height: 44px;
}

.aj-post-card__link {
	display: block;
	margin-top: 12px;
	font-size: 14px;
	text-align: center;
}

.aj-post-card__progress {
	height: 8px;
	margin: 0 0 14px;
	border-radius: 4px;
	background: var(--aj-brand-light);
	overflow: hidden;
}

.aj-post-card__progress span {
	display: block;
	height: 100%;
	border-radius: 0 4px 4px 0;
	background: var(--aj-brand);
}

/* Where the jobs are (only once the listings are representative). ------- */

.aj-post-market {
	margin-top: var(--aj-section-padding);
}

.aj-post-market h2 {
	margin: 0 0 6px;
	padding-top: 14px;
	border-top: 2px solid var(--aj-text);
	font-size: 22px;
	font-weight: 800;
}

.aj-post-market__note {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-post-market__bars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	max-width: var(--aj-post-main);
}

.aj-post-market__bars li {
	display: grid;
	grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 40px;
	align-items: center;
	gap: 14px;
	font-size: 14px;
}

.aj-post-market__name {
	color: var(--aj-text);
	font-weight: 600;
}

.aj-post-market__name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aj-post-market__track {
	display: block;
	height: 10px;
}

.aj-post-market__track span {
	display: block;
	height: 100%;
	border-radius: 0 4px 4px 0;
	background: var(--aj-brand);
}

.aj-post-market__count {
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--aj-text);
}

/* After the article ---------------------------------------------------- */

.aj-post-kb {
	max-width: var(--aj-content-max);
	margin: 0 auto;
	padding: var(--aj-section-padding) 24px 0;
}

.aj-post-kb__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0 0 24px;
}

.aj-post-kb__header h2 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
}

.aj-post-related-jobs {
	padding-top: var(--aj-section-padding);
}

.aj-post .aj-blog-related {
	padding-bottom: var(--aj-section-padding);
}

/* Archived article notice (Article details > Archive). */
.aj-post-archived {
	margin: 0 0 28px;
	padding: 14px 18px;
	border-left: 3px solid var(--aj-accent);
	border-radius: 0 var(--aj-radius-sm) var(--aj-radius-sm) 0;
	background: var(--aj-accent-light);
	font-size: 15px;
	line-height: 1.55;
	color: var(--aj-text);
}

.aj-post-archived a {
	color: var(--aj-text);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Questions readers ask: related FAQs in the site's FAQ accordion. */
.aj-post-faqs {
	margin: 48px 0 0;
}

.aj-post-faqs__title {
	margin: 0 0 14px;
	padding-top: 14px;
	border-top: 2px solid var(--aj-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aj-post-faqs__more {
	margin: 12px 0 0;
	font-size: 14px;
}

.aj-post-faqs__more a,
.aj-faq__more a {
	color: var(--aj-brand-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.aj-faq__more {
	margin: 8px 0 0;
}

.aj-post-tags--skills {
	margin-top: 10px;
}

/* One FAQ answer at its own address (single-aj_faq.php). */
.aj-faq-single {
	max-width: var(--aj-post-main, 720px);
	margin: 0 auto;
	padding: 24px 24px var(--aj-section-padding);
	box-sizing: content-box;
}

.aj-faq-single__question {
	margin: 0 0 24px;
	font-size: clamp(28px, 1rem + 2vw, 44px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.aj-faq-single__answer.aj-page-content {
	max-width: none;
	margin: 0 0 24px;
	padding: 20px 0 0;
	border-top: 2px solid var(--aj-text);
}

.aj-faq-single__answer p,
.aj-faq-single__answer li {
	font-size: clamp(17px, 1rem + 0.2vw, 19px);
	line-height: 1.7;
}

.aj-faq-single__more {
	margin: 0 0 28px;
}

.aj-faq-single__sources {
	margin: 32px 0 0;
}

.aj-faq-single__label {
	margin: 0 0 12px;
	padding-top: 14px;
	border-top: 1px solid var(--aj-border);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aj-text-muted);
}

.aj-faq-single__checked {
	margin: 0;
	font-size: 14px;
	color: var(--aj-text-muted);
}

.aj-faq-single__related {
	margin: 36px 0 0;
}

.aj-faq-single__related ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aj-faq-single__related li {
	border-bottom: 1px solid var(--aj-border);
}

.aj-faq-single__related a {
	display: block;
	padding: 12px 0;
	font-weight: 600;
	color: var(--aj-text);
}

.aj-faq-single__related a:hover {
	color: var(--aj-brand-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aj-faq-single .aj-related-content {
	margin-top: 40px;
}

.aj-faq-single__help {
	margin: 40px 0 0;
	padding: 16px 20px;
	border-radius: var(--aj-radius-sm);
	background: var(--aj-bg-subtle);
	font-size: 15px;
}

.aj-faq-single__help p {
	margin: 0 0 6px;
}

.aj-faq-single__help p:last-child {
	margin: 0;
	color: var(--aj-text-muted);
}

.aj-faq-single__help a {
	color: var(--aj-brand-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media print {
	.aj-post-progress,
	.aj-post-body__rail,
	.aj-post-body__toc,
	.aj-post-share,
	.aj-post-market,
	.aj-post-kb,
	.aj-post-related-jobs,
	.aj-blog-related {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------
 * Breadcrumbs: the same space under the site header on every page that
 * opens with them (blog posts, FAQ answers, Knowledge Base articles,
 * candidate profiles). Skill guides and company pages already have it.
 * ------------------------------------------------------------------- */
.aj-container > .aj-breadcrumbs:first-child:not(.aj-skill-guide__breadcrumbs) {
	margin-top: 28px;
}

@media (max-width: 599px) {
	.aj-container > .aj-breadcrumbs:first-child:not(.aj-skill-guide__breadcrumbs) {
		margin-top: 20px;
	}

	.aj-breadcrumbs {
		margin-bottom: 20px;
	}
}

/* Featured employer's latest jobs under an article (single.php). Same
 * section rule as "Questions readers ask"; the cards are the site's own. */
.aj-post-jobs {
	margin: 48px 0 0;
}

.aj-post-jobs__title {
	margin: 0 0 18px;
	padding-top: 14px;
	border-top: 2px solid var(--aj-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aj-post-jobs__list {
	gap: 16px;
}

@media (min-width: 1200px) {
	.aj-post-jobs__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.aj-post-jobs__more {
	margin: 16px 0 0;
	font-size: 14px;
}

.aj-post-jobs__more a {
	color: var(--aj-brand-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}