/* Careers page.

   Scoped under .ij-careers so the other ~521 Beaver Builder pages are
   untouched. Layout lives in the template's inline styles, as on every
   other redesigned page; this file carries only what an inline style
   attribute cannot express — hover and focus states, and the breakpoints. */

.ij-careers { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }
.ij-careers a { color: var(--color-link); text-decoration: none; }

/* ---- Parent-theme overrides ---------------------------------------------
   bb-theme/css/base.min.css underlines every link on hover and paints a
   system-blue ring on focus, and Beaver Builder's generated skin carries
   `.fl-page-content a:hover { text-decoration: underline }` — which wraps
   this <main>. That selector scores 0-2-1 and both sheets load after this
   one, so a bare `.ij-careers a:hover` would TIE and lose on load order.
   The leading `body` adds the element that settles it. Same reasoning, and
   the same arithmetic, as the block in tokens.css. */
body .ij-careers a:hover, body .ij-careers a:focus { text-decoration: none; }
body .ij-careers a:focus { outline: none; }

/* The design specifies no focus styling. Reproducing that literally would
   leave keyboard users with nothing, so the blue ring is replaced with the
   theme's focus-visible convention rather than simply deleted. */
.ij-careers a:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- Prose links ---------------------------------------------------------
   The hero intro and the empty state each carry one mailto link. They
   inherit the paragraph's colour, so the underline is what marks them as
   links at all. Both rules state their own colour: without it, `color`
   falls through to the link hover colour and paints them brand-orange. */
.ij-careers .cintro a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ij-careers .cintro a:hover,
.ij-careers .cintro a:focus-visible {
	color: var(--brand-green-dark);
	text-decoration: underline;
}

/* ---- Role cards ---------------------------------------------------------- */

.ij-careers .crole-cta {
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Colour restated alongside the background: the anchor's own inline
   `color:#fff` protects it, but stating it here means the rule does not
   depend on that inline style surviving an edit to the template. */
.ij-careers .crole-cta:hover,
.ij-careers .crole-cta:focus-visible {
	background: var(--brand-green-dark);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.ij-careers .crole-cta { transition: none; }
}

/* ---- Breakpoints ---------------------------------------------------------
   The grid is auto-fit with a 420px floor, so it collapses to one column on
   its own. What needs stating is the card's own layout below that: at narrow
   widths the title, pills and button stop fitting on one line, and a button
   left floating against the right edge under a wrapped title reads as
   detached from it. */

@media (max-width: 720px) {
	.ij-careers .croles { grid-template-columns: minmax(0, 1fr) !important; }

	.ij-careers .crole {
		align-items: flex-start !important;
		gap: 24px !important;
	}

	.ij-careers .crole-cta {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 560px) {
	.ij-careers .ij-careers-h1 {
		font-size: 38px !important;
		letter-spacing: -1.2px !important;
	}

	.ij-careers h2 {
		font-size: 32px !important;
		letter-spacing: -1px !important;
	}

	.ij-careers .crole { padding: 24px !important; }
	.ij-careers .crole-empty { padding: 40px 24px !important; }
}