/**
 * Gruma Carsonal — front-end styles.
 *
 * Everything is scoped under `.gruma-carsonal` so the theme is never touched,
 * and every visual decision routes through a custom property declared on that
 * wrapper. To restyle for Gruma CI you should only need to override the token
 * block below — see readme.md, "Restyling for Gruma CI".
 *
 * Naming: BEM. Block `gruma-carsonal`, elements `__element`, modifiers
 * `--modifier`.
 */

/* ==========================================================================
   Design tokens — override these to rebrand
   ========================================================================== */

.gruma-carsonal {
	/*
	 * Gruma / Mercedes-Benz corporate identity.
	 *
	 * Sampled directly from https://mb-gruma.de (the live site this plugin
	 * runs on) rather than guessed: the theme exposes its own design tokens
	 * as CSS custom properties (--g-blau-*, --g-grau-*, --g-font-*), and
	 * these values are copied from there so this stylesheet stays visually
	 * identical to the rest of the site rather than merely "close enough".
	 *   --g-blau-2 (#008dfc) is the real accent — confirmed by 24 live
	 *     instances across nav, links and active states, not a guess.
	 *   --g-blau-3 (#00477e) is the deeper blue used on solid buttons.
	 *   --g-font-text / --g-font-title are the two real corporate typefaces
	 *     (MBCorpo Text for body/UI copy, MBCorpo Title for headings) —
	 *     already loaded site-wide by the theme, so referencing the same
	 *     font-family names here picks them up for free with no extra
	 *     @font-face needed. Falls back to sans-serif if unavailable.
	 * If Gruma's CI changes, update the values below — everything else in
	 * this file reads through these tokens, nothing is hardcoded elsewhere.
	 */

	/* Brand
	 *
	 * --g-blau-2 (#008dfc), the site's brighter blue, is used for plain
	 * links elsewhere on mb-gruma.de but fails WCAG AA text contrast
	 * (3.4:1) as a solid button fill with white text. The site's own
	 * cookie-consent widget avoids exactly this by filling its "accept"
	 * button with the deeper --g-blau-3 (#00477e) instead — so buttons and
	 * other solid/white-on-accent fills here follow that same real
	 * convention rather than reproducing a contrast failure.
	 */
	--gc-color-accent: #00477e;
	--gc-color-accent-contrast: #ffffff;
	--gc-color-accent-hover: color-mix(in srgb, #00477e 85%, black);
	--gc-color-accent-tint: #f1f9ff;

	/* Surfaces
	 *
	 * --gc-color-bg defaults to the same white as --gc-color-surface, not to
	 * transparent. It used to be transparent, on the assumption that the
	 * surrounding theme page is always white — true on this site's archive
	 * template, false on its single-job template, whose real background is
	 * black. With black heading text that combination is fully invisible,
	 * not just low-contrast. Every page-level wrapper (.gruma-carsonal and
	 * its --archive/--single/--apply variants) must establish its own
	 * opaque surface rather than trust an assumption about what it's
	 * embedded in — individual cards already do exactly this. Override
	 * --gc-color-bg back to transparent only if you have confirmed the
	 * specific page this renders on is already a light/white surface.
	 */
	--gc-color-bg: #ffffff;
	--gc-color-surface: #ffffff;
	--gc-color-surface-alt: #f7f7f7;
	--gc-color-border: #e3e8ef;

	/* Text */
	--gc-color-text: #4a5568;
	--gc-color-text-muted: #718096;
	--gc-color-heading: #000000;

	/* Feedback */
	--gc-color-error: #b3261e;
	--gc-color-error-bg: #fdecea;
	--gc-color-success: #1b7a3d;
	--gc-color-success-bg: #eaf6ee;
	--gc-color-warning: #8a6100;
	--gc-color-warning-bg: #fff6e0;
	--gc-color-info: #00477e;
	--gc-color-info-bg: #f1f9ff;

	/* Typography — the site's two real corporate typefaces */
	--gc-font-family: "MBCorpo Text", "DaimlerCS-Regular", sans-serif;
	--gc-font-family-heading: "MBCorpo Title", "DaimlerCAC-Regular", sans-serif;
	--gc-font-size-base: 1rem;
	--gc-font-size-sm: 0.875rem;
	--gc-font-size-xs: 0.75rem;
	--gc-font-size-title: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
	--gc-font-size-detail-title: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
	--gc-font-weight-normal: 400;
	--gc-font-weight-bold: 700;
	--gc-line-height: 1.6;

	/* Space */
	--gc-space-xs: 0.25rem;
	--gc-space-sm: 0.5rem;
	--gc-space-md: 1rem;
	--gc-space-lg: 1.5rem;
	--gc-space-xl: 2.5rem;

	/* Shape — the site's own buttons use a sharp 2px radius, not a soft one */
	--gc-radius: 2px;
	--gc-radius-pill: 999px;
	--gc-border-width: 1px;

	/* Motion */
	--gc-duration: 180ms;
	--gc-ease: cubic-bezier(0.2, 0, 0.2, 1);

	/* Layout */
	--gc-grid-gap: 1.5rem;
	--gc-card-min: 280px;

	box-sizing: border-box;
	color: var(--gc-color-text);
	font-family: var(--gc-font-family);
	font-size: var(--gc-font-size-base);
	line-height: var(--gc-line-height);
	background: var(--gc-color-bg);
}

.gruma-carsonal *,
.gruma-carsonal *::before,
.gruma-carsonal *::after {
	box-sizing: inherit;
}

/* ==========================================================================
   Listings grid
   ========================================================================== */

.gruma-carsonal__heading {
	margin: 0 0 var(--gc-space-lg);
	color: var(--gc-color-heading);
	font-family: var(--gc-font-family-heading);
}

.gruma-carsonal__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--gc-card-min), 1fr));
	gap: var(--gc-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Column caps. `auto-fill` keeps things fluid; these only set the ceiling. */
.gruma-carsonal__list--cols-1 {
	grid-template-columns: 1fr;
}

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

@media (min-width: 640px) and (max-width: 1023px) {
	.gruma-carsonal__list--cols-3,
	.gruma-carsonal__list--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.gruma-carsonal__list--cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}

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

/* ==========================================================================
   Job card
   ========================================================================== */

/*
 * Flat, static box — deliberately matching the detail page's own boxed
 * sections (.gruma-carsonal__facts, .gruma-carsonal__apply-section: a plain
 * border + radius, no shadow, no hover motion) rather than a distinct
 * "card" treatment. No transform/shadow/border-color transition on hover —
 * the detail page has no equivalent animation, so the card doesn't invent
 * one. Image sizing/cropping below (aspect-ratio, object-fit) is unrelated
 * to this and stays as-is; only its hover zoom is removed alongside the
 * rest of the card's hover motion.
 */
.gruma-carsonal__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--gc-color-surface);
	border: var(--gc-border-width) solid var(--gc-color-border);
	border-radius: var(--gc-radius);
}

.gruma-carsonal__card-media {
	margin: 0;
	overflow: hidden;
	background: var(--gc-color-surface-alt);
	aspect-ratio: 3 / 2;
}

.gruma-carsonal__card-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gruma-carsonal__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--gc-space-sm);
	padding: var(--gc-space-lg);
}

.gruma-carsonal__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gc-space-xs);
}

.gruma-carsonal__badge {
	display: inline-block;
	padding: 0.2em 0.75em;
	color: var(--gc-color-text-muted);
	font-size: var(--gc-font-size-xs);
	font-weight: var(--gc-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--gc-color-surface-alt);
	border-radius: var(--gc-radius-pill);
}

.gruma-carsonal__badge--category {
	color: var(--gc-color-accent);
	background: var(--gc-color-accent-tint);
}

.gruma-carsonal__card-title {
	margin: 0;
	color: var(--gc-color-heading);
	font-family: var(--gc-font-family-heading);
	font-size: var(--gc-font-size-title);
	line-height: 1.3;
}

.gruma-carsonal__card-link {
	color: inherit;
	text-decoration: none;
}

/* No hover color change on the title, by request — the detail page's own
   title is plain static text, so the card title stays the same color at
   rest and on hover. Keyboard focus still needs *some* visible indicator
   (removing it entirely would be an accessibility regression), so
   focus-visible gets an outline instead of the old color/underline swap —
   invisible on hover/mouse click, present only when tabbed to. */
.gruma-carsonal__card-link:focus-visible {
	outline: 2px solid var(--gc-color-accent);
	outline-offset: 2px;
}

/* Make the whole card clickable while keeping the button independently
   focusable and the title the accessible name. */
.gruma-carsonal__card-link::after {
	position: absolute;
	inset: 0;
	content: "";
}

.gruma-carsonal__card {
	position: relative;
}

.gruma-carsonal__card-actions {
	position: relative;
	z-index: 1;
}

.gruma-carsonal__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gc-space-xs) var(--gc-space-md);
	margin: 0;
	padding: 0;
	color: var(--gc-color-text-muted);
	font-size: var(--gc-font-size-sm);
	list-style: none;
}

.gruma-carsonal__meta-item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
}

.gruma-carsonal__meta-item + .gruma-carsonal__meta-item::before {
	color: var(--gc-color-border);
	content: "·";
}

.gruma-carsonal__meta-company {
	opacity: 0.75;
}

.gruma-carsonal__card-excerpt {
	margin: 0;
	color: var(--gc-color-text-muted);
	font-size: var(--gc-font-size-sm);
}

.gruma-carsonal__card-actions {
	margin: auto 0 0;
	padding-top: var(--gc-space-sm);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/*
 * This class renders on both <a> (card CTA, external-application link) and
 * <button type="submit"> (the application form's submit). Those two tags
 * carry different browser/theme UA defaults (font, margin, box-shadow,
 * native "appearance" chrome) unless explicitly reset, which is exactly the
 * kind of thing that can make a button look subtly different page to page
 * even though both share this one class — so every property below is
 * stated explicitly rather than left to inherit, guaranteeing the two tags
 * render pixel-identically.
 */
.gruma-carsonal__button {
	display: inline-block;
	margin: 0;
	padding: 0.7em 1.5em;
	font-family: inherit;
	font-size: var(--gc-font-size-sm);
	font-weight: var(--gc-font-weight-bold);
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	background-clip: padding-box;
	border: var(--gc-border-width) solid transparent;
	border-radius: 20px 0px;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition:
		background-color var(--gc-duration) var(--gc-ease),
		border-color var(--gc-duration) var(--gc-ease),
		color var(--gc-duration) var(--gc-ease);
}

.gruma-carsonal__button--primary {
	color: var(--gc-color-accent-contrast);
	background: black;
	border-color: black;
}

.gruma-carsonal__button--primary:hover,
.gruma-carsonal__button--primary:focus-visible {
	color: var(--gc-color-accent-contrast);
	background: var(--gc-color-accent);
	border-color: var(--gc-color-accent);
}

.gruma-carsonal__button--secondary {
	color: var(--gc-color-accent);
	background: transparent;
	border-color: var(--gc-color-border);
}

.gruma-carsonal__button--secondary:hover,
.gruma-carsonal__button--secondary:focus-visible {
	border-color: var(--gc-color-accent);
}

.gruma-carsonal__button:focus-visible {
	outline: 2px solid var(--gc-color-accent);
	outline-offset: 2px;
}

.gruma-carsonal__button[disabled],
.gruma-carsonal__button[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ==========================================================================
   Empty state and notices
   ========================================================================== */

.gruma-carsonal__empty {
	padding: var(--gc-space-xl) var(--gc-space-lg);
	text-align: center;
	background: var(--gc-color-surface-alt);
	border: var(--gc-border-width) dashed var(--gc-color-border);
	border-radius: var(--gc-radius);
}

.gruma-carsonal__empty-text {
	margin: 0;
	color: var(--gc-color-text-muted);
}

/* Shown only when the empty listing is the result of an active filter. */
.gruma-carsonal__empty-actions {
	margin: var(--gc-space-lg) 0 0;
}

.gruma-carsonal__notice {
	margin: 0 0 var(--gc-space-lg);
	padding: var(--gc-space-md) var(--gc-space-lg);
	border-left: 4px solid var(--gc-color-info);
	border-radius: var(--gc-radius);
	background: var(--gc-color-info-bg);
}

.gruma-carsonal__notice > :first-child {
	margin-top: 0;
}

.gruma-carsonal__notice > :last-child {
	margin-bottom: 0;
}

.gruma-carsonal__notice--warning {
	border-left-color: var(--gc-color-warning);
	background: var(--gc-color-warning-bg);
}

.gruma-carsonal__notice--error {
	border-left-color: var(--gc-color-error);
	background: var(--gc-color-error-bg);
}

.gruma-carsonal__notice--success {
	border-left-color: var(--gc-color-success);
	background: var(--gc-color-success-bg);
}

/* ==========================================================================
   Archive header, taxonomy filter and pagination
   ========================================================================== */

.gruma-carsonal__archive-header {
	margin-bottom: var(--gc-space-lg);
}

.gruma-carsonal__archive-description {
	max-width: 65ch;
	color: var(--gc-color-text-muted);
}

.gruma-carsonal__filter {
	margin-bottom: var(--gc-space-lg);
}

.gruma-carsonal__filter-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gc-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sharp 2px radius, not the pill shape these used to have — the active
   filter chip fills solid with the same --gc-color-accent as a primary
   button, so a different corner radius read as a second, competing
   "button style" on the same page instead of one consistent design. */
.gruma-carsonal__filter-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 1em;
	color: var(--gc-color-text-muted);
	font-size: var(--gc-font-size-sm);
	text-decoration: none;
	background: var(--gc-color-surface);
	border: var(--gc-border-width) solid var(--gc-color-border);
	border-radius: var(--gc-radius);
	transition:
		color var(--gc-duration) var(--gc-ease),
		border-color var(--gc-duration) var(--gc-ease),
		background-color var(--gc-duration) var(--gc-ease);
}

.gruma-carsonal__filter-link:hover,
.gruma-carsonal__filter-link:focus-visible {
	color: var(--gc-color-accent);
	border-color: var(--gc-color-accent);
}

.gruma-carsonal__filter-link.is-active {
	color: var(--gc-color-accent-contrast);
	background: var(--gc-color-accent);
	border-color: var(--gc-color-accent);
}

.gruma-carsonal__filter-count {
	font-size: var(--gc-font-size-xs);
	opacity: 0.7;
}

.gruma-carsonal__pagination {
	margin-top: var(--gc-space-xl);
}

.gruma-carsonal__pagination .page-numbers {
	display: inline-block;
	padding: 0.4em 0.9em;
	color: var(--gc-color-text-muted);
	text-decoration: none;
	border: var(--gc-border-width) solid var(--gc-color-border);
	border-radius: var(--gc-radius);
}

.gruma-carsonal__pagination .page-numbers.current,
.gruma-carsonal__pagination .page-numbers:hover {
	color: var(--gc-color-accent-contrast);
	background: var(--gc-color-accent);
	border-color: var(--gc-color-accent);
}

/* ==========================================================================
   Detail view
   ========================================================================== */

.gruma-carsonal__back {
	margin: 0 0 var(--gc-space-md);
}

.gruma-carsonal__back-link {
	color: var(--gc-color-text-muted);
	font-size: var(--gc-font-size-sm);
	text-decoration: none;
}

.gruma-carsonal__back-link:hover,
.gruma-carsonal__back-link:focus-visible {
	color: var(--gc-color-accent);
	text-decoration: underline;
}

.gruma-carsonal__detail-media {
	margin: 0 0 var(--gc-space-lg);
	overflow: hidden;
	border-radius: var(--gc-radius);
	aspect-ratio: 5 / 2;
	background: var(--gc-color-surface-alt);
}

.gruma-carsonal__detail-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gruma-carsonal__detail-title {
	margin: 0 0 var(--gc-space-lg);
	color: var(--gc-color-heading);
	font-family: var(--gc-font-family-heading);
	font-size: var(--gc-font-size-detail-title);
	line-height: 1.15;
}

.gruma-carsonal__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--gc-space-md);
	margin: 0 0 var(--gc-space-xl);
	padding: var(--gc-space-lg);
	background: var(--gc-color-surface-alt);
	border-radius: var(--gc-radius);
}

.gruma-carsonal__fact {
	margin: 0;
}

.gruma-carsonal__fact-label {
	margin: 0 0 var(--gc-space-xs);
	color: var(--gc-color-text-muted);
	font-size: var(--gc-font-size-xs);
	font-weight: var(--gc-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.gruma-carsonal__fact-value {
	margin: 0;
	font-weight: var(--gc-font-weight-bold);
}

.gruma-carsonal__section {
	margin: 0 0 var(--gc-space-xl);
}

.gruma-carsonal__section-title {
	margin: 0 0 var(--gc-space-md);
	color: var(--gc-color-heading);
	font-family: var(--gc-font-family-heading);
}

.gruma-carsonal__section-content > :first-child {
	margin-top: 0;
}

.gruma-carsonal__section-content > :last-child {
	margin-bottom: 0;
}

.gruma-carsonal__section-content ul,
.gruma-carsonal__section-content ol {
	padding-left: 1.25em;
}

.gruma-carsonal__section-content li {
	margin-bottom: var(--gc-space-xs);
}

.gruma-carsonal__contact {
	display: flex;
	flex-direction: column;
	gap: var(--gc-space-xs);
	font-style: normal;
}

.gruma-carsonal__contact-name {
	font-weight: var(--gc-font-weight-bold);
}

.gruma-carsonal__contact-phone,
.gruma-carsonal__contact-email {
	color: var(--gc-color-accent);
	text-decoration: none;
	width: fit-content;
}

.gruma-carsonal__contact-phone:hover,
.gruma-carsonal__contact-email:hover,
.gruma-carsonal__contact-phone:focus-visible,
.gruma-carsonal__contact-email:focus-visible {
	text-decoration: underline;
}

/* ==========================================================================
   Application form
   ========================================================================== */

.gruma-carsonal__apply-section {
	padding: var(--gc-space-xl);
	background: var(--gc-color-surface);
	border: var(--gc-border-width) solid var(--gc-color-border);
	border-radius: var(--gc-radius);
}

.gruma-carsonal__fieldset {
	margin: 0 0 var(--gc-space-xl);
	padding: 0;
	border: 0;
}

.gruma-carsonal__legend {
	margin: 0 0 var(--gc-space-md);
	padding: 0;
	color: var(--gc-color-heading);
	font-size: var(--gc-font-size-base);
	font-weight: var(--gc-font-weight-bold);
}

.gruma-carsonal__field {
	margin: 0 0 var(--gc-space-md);
	flex: 1 1 220px;
}

.gruma-carsonal__field--narrow {
	flex: 0 1 130px;
}

.gruma-carsonal__field-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gc-space-md);
}

.gruma-carsonal__label {
	display: block;
	margin-bottom: var(--gc-space-xs);
	font-size: var(--gc-font-size-sm);
	font-weight: var(--gc-font-weight-bold);
}

.gruma-carsonal__required {
	color: var(--gc-color-error);
}

.gruma-carsonal__input,
.gruma-carsonal__select,
.gruma-carsonal__textarea,
.gruma-carsonal__file {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0.65em 0.85em;
	color: var(--gc-color-text);
	font-family: inherit;
	font-size: var(--gc-font-size-base);
	background: var(--gc-color-surface);
	border: var(--gc-border-width) solid var(--gc-color-border);
	border-radius: var(--gc-radius);
	transition:
		border-color var(--gc-duration) var(--gc-ease),
		box-shadow var(--gc-duration) var(--gc-ease);
}

.gruma-carsonal__textarea {
	resize: vertical;
}

.gruma-carsonal__input:focus,
.gruma-carsonal__select:focus,
.gruma-carsonal__textarea:focus,
.gruma-carsonal__file:focus {
	outline: none;
	border-color: var(--gc-color-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-color-accent) 20%, transparent);
}

.gruma-carsonal__input[aria-invalid="true"],
.gruma-carsonal__select[aria-invalid="true"],
.gruma-carsonal__textarea[aria-invalid="true"] {
	border-color: var(--gc-color-error);
}

.gruma-carsonal__field-error {
	display: block;
	margin-top: var(--gc-space-xs);
	color: var(--gc-color-error);
	font-size: var(--gc-font-size-sm);
}

.gruma-carsonal__field--checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--gc-space-sm);
}

.gruma-carsonal__checkbox {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.25em;
	accent-color: var(--gc-color-accent);
}

.gruma-carsonal__checkbox-label {
	font-size: var(--gc-font-size-sm);
	line-height: 1.5;
}

.gruma-carsonal__hint {
	margin: var(--gc-space-xs) 0 0;
	color: var(--gc-color-text-muted);
	font-size: var(--gc-font-size-xs);
}

.gruma-carsonal__form-actions {
	margin: var(--gc-space-lg) 0 0;
}

.gruma-carsonal__form-feedback {
	margin: 0 0 var(--gc-space-lg);
	padding: var(--gc-space-md) var(--gc-space-lg);
	border-left: 4px solid var(--gc-color-error);
	border-radius: var(--gc-radius);
	background: var(--gc-color-error-bg);
	color: var(--gc-color-error);
}

.gruma-carsonal__form-feedback--success {
	border-left-color: var(--gc-color-success);
	background: var(--gc-color-success-bg);
	color: var(--gc-color-success);
}

.gruma-carsonal__form-feedback[hidden] {
	display: none;
}

/* Honeypot: hidden from humans but not via `display:none`, which some bots
   detect. Kept out of the tab order and off the accessibility tree. */
.gruma-carsonal__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gruma-carsonal__form--busy {
	opacity: 0.7;
	pointer-events: none;
}

/* Success panel replacing the form after submission. */
.gruma-carsonal__success {
	padding: var(--gc-space-xl);
	text-align: center;
	background: var(--gc-color-success-bg);
	border: var(--gc-border-width) solid var(--gc-color-success);
	border-radius: var(--gc-radius);
}

.gruma-carsonal__success-title {
	margin: 0 0 var(--gc-space-sm);
	color: var(--gc-color-success);
}

.gruma-carsonal__success-reference {
	margin: var(--gc-space-md) 0 0;
	color: var(--gc-color-text-muted);
	font-size: var(--gc-font-size-sm);
}

/* Screen-reader-only text, in case the theme does not provide it. */
.gruma-carsonal .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gruma-carsonal *,
	.gruma-carsonal *::before,
	.gruma-carsonal *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 599px) {
	.gruma-carsonal__apply-section {
		padding: var(--gc-space-lg);
	}

	.gruma-carsonal__facts {
		padding: var(--gc-space-md);
	}

	.gruma-carsonal__field-row {
		gap: 0;
	}

	.gruma-carsonal__field--narrow {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   Single job page — dark scope
   ========================================================================== */

/*
 * The single-job page's real background (the theme content area behind
 * this plugin's markup) is black, unlike the archive/listing page, which
 * sits on a white panel. The base .gruma-carsonal rule assumes a light
 * surface and forces an opaque white background, which is correct for the
 * archive — but on this page the brief was to go transparent again and
 * make text white to match the real black background, rather than fight it.
 *
 * This scope re-themes every token that assumes a light background, not
 * just the page-level one — the facts grid and the application form panel
 * are "boxed" elements with their own background, and if left on their
 * default light-grey they would show newly-white text on a light box: the
 * same invisible-text failure that started this, just smaller and inside a
 * box. Every text/background pairing below was checked against WCAG AA
 * (4.5:1 for normal text) before being picked, the same way the site-wide
 * accent colour was earlier in this file.
 *
 * Scoped to both --single (this plugin's own single-job template) and
 * --apply (the [gruma_carsonal_apply] shortcode, e.g. if a theme builder
 * embeds it directly instead of using the bundled template) so this holds
 * regardless of which one is actually rendering the page.
 */
.gruma-carsonal--single,
.gruma-carsonal--apply {
	--gc-color-bg: transparent;
	--gc-color-heading: #ffffff;
	--gc-color-text: #ffffff;
	--gc-color-text-muted: #94a3b8;
	--gc-color-surface: #1a1a1a;
	--gc-color-surface-alt: #222222;
	--gc-color-border: rgba(255, 255, 255, 0.15);

	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding: 50px 20px;
}

/* --gc-color-accent stays the deep navy blue everywhere — it is only ever
   paired with a white fill (buttons), which stays legible on any
   background. These three components use it as plain text/border colour
   instead, which needs the brighter, equally on-brand blue to read on
   black (6.2:1 on black, 5.2:1 on the dark surface below — both pass AA). */
.gruma-carsonal--single .gruma-carsonal__back-link:hover,
.gruma-carsonal--single .gruma-carsonal__back-link:focus-visible,
.gruma-carsonal--single .gruma-carsonal__contact-phone,
.gruma-carsonal--single .gruma-carsonal__contact-email,
.gruma-carsonal--single .gruma-carsonal__button--secondary,
.gruma-carsonal--apply .gruma-carsonal__back-link:hover,
.gruma-carsonal--apply .gruma-carsonal__back-link:focus-visible,
.gruma-carsonal--apply .gruma-carsonal__contact-phone,
.gruma-carsonal--apply .gruma-carsonal__contact-email,
.gruma-carsonal--apply .gruma-carsonal__button--secondary {
	color: #008dfc;
}

.gruma-carsonal--single .gruma-carsonal__button--secondary:hover,
.gruma-carsonal--single .gruma-carsonal__button--secondary:focus-visible,
.gruma-carsonal--apply .gruma-carsonal__button--secondary:hover,
.gruma-carsonal--apply .gruma-carsonal__button--secondary:focus-visible {
	border-color: #008dfc;
}

/* Form fields deliberately keep their standard light appearance regardless
   of the dark page theme — a white field with dark typed text is the
   safest, most universally legible pattern, and this is the application
   form: not the place to experiment with contrast. Without this override
   they would inherit the dark --gc-color-surface above and render
   dark-on-dark while someone is trying to fill them in. */
.gruma-carsonal--single .gruma-carsonal__input,
.gruma-carsonal--single .gruma-carsonal__select,
.gruma-carsonal--single .gruma-carsonal__textarea,
.gruma-carsonal--single .gruma-carsonal__file,
.gruma-carsonal--apply .gruma-carsonal__input,
.gruma-carsonal--apply .gruma-carsonal__select,
.gruma-carsonal--apply .gruma-carsonal__textarea,
.gruma-carsonal--apply .gruma-carsonal__file {
	background: #ffffff;
	color: #1a1d21;
}

@media (max-width: 599px) {
	.gruma-carsonal--single,
	.gruma-carsonal--apply {
		padding: 50px 20px;
	}
}

/* ==========================================================================
   Archive/listing page — transparent scope
   ========================================================================== */

/*
 * Narrower than the single-job dark scope above: only the page background
 * and the "Stellenangebote" heading go dark-theme here, per instruction.
 * Cards keep their own opaque fill (nudged slightly off-white below) and
 * stay fully self-contained regardless of what's behind them, same as
 * before. Filter chips already have their own white pill background, and
 * pagination's muted-grey text already clears AA against black (5.2:1),
 * so neither needs a change.
 *
 * One addition beyond what was asked: .gruma-carsonal__archive-description
 * (the taxonomy term description, shown on filtered archive views like
 * /karriere/standort/landshut/) inherits the default body-text colour,
 * which fails badly against black (2.8:1) — fixed to a light grey here so
 * a filtered view doesn't quietly reproduce the same invisible-text bug on
 * a page nobody would think to check.
 */
.gruma-carsonal--archive {
	--gc-color-bg: transparent;

	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
	padding: 50px 20px;
}

.gruma-carsonal--archive .gruma-carsonal__heading {
	color: #ffffff;
}

.gruma-carsonal--archive .gruma-carsonal__archive-description {
	color: #94a3b8;
}

/*
 * Grey tile per Gruma's request, matching the tone used for the employee
 * cards on /mitarbeiter/ — sampled directly from that page rather than
 * guessed: #4a5568, the theme's own --g-grau-6 token. Every text-bearing
 * token is redeclared here, not just the background, because descendants
 * (title, meta, excerpt, badges) otherwise inherit --gc-color-heading:
 * #000000 and --gc-color-text-muted:#718096 from the base .gruma-carsonal
 * rule, and both fail WCAG AA against this grey (2.8:1 and 3.4:1) — the
 * same invisible-text failure the dark single-job scope above exists to
 * avoid. Values below were checked against WCAG AA (4.5:1) before picking:
 * white heading (7.5:1), #e2e8f0 muted text (6.1:1 on the card, 4.8:1 on
 * the lighter badge surface below).
 */
.gruma-carsonal--archive .gruma-carsonal__card {
	--gc-color-heading: #ffffff;
	--gc-color-text: #ffffff;
	--gc-color-text-muted: #e2e8f0;
	--gc-color-border: rgba(255, 255, 255, 0.15);
	--gc-color-surface-alt: #5b6578;
	background: #4a5568;
}

@media (max-width: 599px) {
	.gruma-carsonal--archive {
		padding: 50px 20px;
	}
}