:root {
	--petra-red: #b00016;
	--petra-red-dark: #78000f;
	--petra-ink: #15171a;
	--petra-slate: #4d5562;
	--petra-mist: #f4f6f8;
	--petra-gold: #ffce73;
	--petra-border: #d9dee5;
	--petra-shadow: 0 1rem 3rem rgb(21 23 26 / 10%);
	--petra-radius: 1rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--petra-gold);
	outline-offset: 3px;
}

a:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.18em;
}

.petra-site-header {
	position: relative;
	z-index: 20;
	border-block-end: 1px solid var(--petra-border);
	background: #fff;
}

.petra-site-header::before {
	display: block;
	height: 0.35rem;
	background: var(--petra-red);
	content: "";
}

.petra-site-header__inner {
	min-height: 5rem;
	padding-block: 0.8rem;
}

.petra-site-title a {
	color: var(--petra-ink);
	font-weight: 800;
}

.petra-nav-cta a {
	border-radius: 0.55rem;
	background: var(--petra-red);
	color: #fff !important;
	padding: 0.65rem 1rem !important;
}

.petra-page-shell,
.petra-section {
	padding-block: clamp(3rem, 6vw, 6rem);
}

.petra-hero {
	position: relative;
	overflow: hidden;
	min-height: min(44rem, 78vh);
	display: grid;
	align-items: center;
	background:
		radial-gradient(circle at 82% 18%, rgb(255 206 115 / 32%), transparent 28rem),
		linear-gradient(125deg, #fff 0%, #f8f3f3 55%, #f1d9dc 100%);
}

[dir="rtl"] .petra-hero {
	background:
		radial-gradient(circle at 18% 18%, rgb(255 206 115 / 32%), transparent 28rem),
		linear-gradient(235deg, #fff 0%, #f8f3f3 55%, #f1d9dc 100%);
}

.petra-hero::after {
	position: absolute;
	inset-block: 0;
	inset-inline-end: -10%;
	width: min(38vw, 34rem);
	transform: skewX(-10deg);
	background: linear-gradient(155deg, rgb(176 0 22 / 95%), rgb(120 0 15 / 92%));
	content: "";
	opacity: 0.92;
}

[dir="rtl"] .petra-hero::after {
	transform: skewX(10deg);
}

.petra-hero__content {
	position: relative;
	z-index: 2;
	margin-inline-start: max(0px, calc((100vw - 1280px) / 2));
	margin-inline-end: auto;
	padding-block: clamp(4rem, 9vw, 8rem);
}

.petra-eyebrow {
	color: var(--petra-red);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

[dir="rtl"] .petra-eyebrow {
	letter-spacing: 0;
}

.petra-job-search {
	max-width: 46rem;
	padding: 0.65rem;
	border: 1px solid var(--petra-border);
	border-radius: 0.9rem;
	background: #fff;
	box-shadow: var(--petra-shadow);
}

.petra-job-search .wp-block-search__input {
	min-height: 3rem;
	border: 0;
}

.petra-job-search .wp-block-search__button {
	min-height: 3rem;
	padding-inline: 1.25rem;
}

.petra-card-grid .wp-block-post-template {
	gap: 1.25rem;
}

.petra-content-card,
.petra-job-card,
.petra-company-card {
	height: 100%;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border: 1px solid var(--petra-border);
	border-radius: var(--petra-radius);
	background: #fff;
	box-shadow: 0 0.35rem 1.4rem rgb(21 23 26 / 5%);
}

.petra-job-card {
	border-block-start: 0.28rem solid var(--petra-red);
}

.petra-job-card:hover,
.petra-company-card:hover {
	transform: translateY(-0.2rem);
	box-shadow: var(--petra-shadow);
}

.petra-company-card .wp-block-post-featured-image img {
	object-fit: contain;
}

.petra-callout {
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: var(--petra-radius);
}

.petra-site-footer {
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

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

@media (max-width: 900px) {
	.petra-hero::after {
		inset-block-start: auto;
		inset-block-end: 0;
		inset-inline: 0;
		width: 100%;
		height: 0.45rem;
		transform: none;
	}

	[dir="rtl"] .petra-hero::after {
		transform: none;
	}

	.petra-hero__content {
		margin-inline: auto;
	}
}

@media (max-width: 600px) {
	.petra-site-header__inner {
		min-height: 4.25rem;
	}

	.petra-job-search .wp-block-search__inside-wrapper {
		align-items: stretch;
		flex-direction: column;
	}

	.petra-job-search .wp-block-search__button {
		margin: 0.5rem 0 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.petra-job-card,
	.petra-company-card {
		transition: transform 180ms ease, box-shadow 180ms ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}