/*
 * Zaposlenje (Jobs) — listing Page + single CPT post.
 *
 * Loaded AFTER services.css + news.css so the layout primitives
 * (.service-hero, .service-content, .service-section, .service-faq,
 * .service-sidebar, .service-poslovnice) are already styled. This file
 * only owns:
 *   - overlay-header rules keyed to .page-template-page-jobs AND to
 *     .single-zaposlenje (the body class WP generates for CPT singles),
 *   - .jobs-listing card list shown below the Page content,
 *   - small tweaks to the hero / WYSIWYG content block specific to this
 *     surface.
 */

/* --------------------------------------------------------------
 * Overlay header — listing Page + every single zaposlenje post.
 * -------------------------------------------------------------- */
.page-template-page-jobs .site-header,
.single-zaposlenje .site-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
}

.page-template-page-jobs .site-main,
.single-zaposlenje .site-main {
	margin-top: 0;
	overflow-x: clip;
}

/* --------------------------------------------------------------
 * Hero — overrides only what differs from .service-hero.
 *
 * Figma 90:111 lays the title at Tahoma Bold 40/53 with 2px tracking;
 * .service-hero__title from services.css runs at 56px which suits the
 * service hero but feels too heavy for this shorter hero. Scale down.
 * -------------------------------------------------------------- */
.jobs-hero {
	min-height: 630px;
	padding: 220px 0 96px;
}

.jobs-hero .service-hero__title {
	max-width: 760px;
	font-size: 40px;
	line-height: 1.3;
	letter-spacing: 2px;
}

.jobs-hero .service-hero__text {
	max-width: 558px;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 0.5px;
}

/* --------------------------------------------------------------
 * WYSIWYG body — the Page / post content rendered between the hero
 * and the FAQ. Mirrors .single-post and .service-intro typography
 * so any editorial copy reads consistently across inner pages.
 * -------------------------------------------------------------- */
.jobs-content__body {
	color: var(--color-text-muted, #565656);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 28px;
}

.jobs-content__body > *:first-child {
	margin-top: 0;
}

.jobs-content__body > *:last-child {
	margin-bottom: 0;
}

.jobs-content__body h2,
.jobs-content__body h3,
.jobs-content__body h4 {
	margin: 32px 0 16px;
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-ink, #0a0a0a);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.jobs-content__body h2 {
	font-size: 22px;
	line-height: 30px;
	letter-spacing: 2px;
	color: var(--color-brand-red, #bb2548);
}

.jobs-content__body h3 {
	font-size: 18px;
	line-height: 28px;
	color: #0a0a0a;
}

.jobs-content__body h4 {
	font-size: 16px;
	line-height: 24px;
	color: var(--color-brand-red, #bb2548);
}

.jobs-content__body p {
	margin: 0 0 16px;
}

.jobs-content__body ul,
.jobs-content__body ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.jobs-content__body ul li,
.jobs-content__body ol li {
	margin-bottom: 8px;
}

.jobs-content__body ul {
	list-style: none;
	padding-left: 0;
}

.jobs-content__body ul li {
	position: relative;
	padding-left: 28px;
}

.jobs-content__body ul li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #0a0a0a;
}

.jobs-content__body a {
	color: var(--color-brand-red, #bb2548);
	text-decoration: underline;
}

.jobs-content__body a:hover,
.jobs-content__body a:focus {
	color: var(--color-brand-red-dark, #8e1c39);
}

/* Strong / bold text at the start of a paragraph reads as the lead-in
 * highlight from Figma ("Agent plus širi svoj tim - …"): red, bold,
 * no underline regardless of whether it's inside an <a>. */
.jobs-content__body p > strong:first-child,
.jobs-content__body p > b:first-child,
.jobs-content__body p > a > strong,
.jobs-content__body p > strong > a {
	color: var(--color-brand-red, #bb2548);
	font-weight: 700;
	text-decoration: none;
}

/* --------------------------------------------------------------
 * Content panel — white card wrapping the post body, with a red
 * title header at the top (the post title — e.g. "MENADŽER
 * LOGISTIKE (M/Ž) NOVI SAD"). Figma anchors: panel 90:272 (769×?,
 * radius 10px, hairline border #c3c3c3, white bg), title bar 90:?
 * red #bb2548 with 67px height, title 90:274 Tahoma Bold ~22/24
 * with letter-spacing ~1px, uppercase, white.
 * -------------------------------------------------------------- */
.jobs-panel {
	background: #fff;
	border: 1px solid #c3c3c3;
	border-radius: var(--radius-md, 10px);
	overflow: hidden;
	margin-bottom: 72px;
}

.jobs-panel__header {
	padding: 20px 36px;
	background: var(--color-brand-red, #bb2548);
}

.jobs-panel__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
}

.jobs-panel__body {
	padding: 32px 36px 40px;
}

.jobs-panel__body .jobs-content__body > *:first-child {
	margin-top: 0;
}

/* Bold red call-out line above the apply CTA ("Možda baš vas
 * tražimo! Pošaljite nam vašu prijavu."). */
.jobs-panel__tagline {
	margin: 32px 0 24px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #0a0a0a;
}

.jobs-panel__cta {
	margin: 0;
}

/* "+" / arrow icon used by the apply CTA — distinct from the
 * default .cta__icon chevron. CSS-only cross icon over a slight
 * baseline offset. */
.cta__icon--plus {
	position: relative;
	width: 14px;
	height: 14px;
	background: none;
}

.cta__icon--plus::before,
.cta__icon--plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
}

.cta__icon--plus::before {
	width: 14px;
	height: 2px;
}

.cta__icon--plus::after {
	width: 2px;
	height: 14px;
}

/* --------------------------------------------------------------
 * Listing — open positions rendered as a stacked card list.
 *
 * Each card is a flat block (no chrome) with a red post title that
 * doubles as a link, a 2-line excerpt and a chevron text-link.
 * -------------------------------------------------------------- */
.jobs-listing__title {
	margin-bottom: 32px;
}

.jobs-listing__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.jobs-listing__item {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 10px;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.jobs-listing__item:hover,
.jobs-listing__item:focus-within {
	border-color: var(--color-brand-red, #bb2548);
	box-shadow: 0 8px 24px rgba(187, 37, 72, 0.08);
}

.jobs-listing__item-link {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 22px 28px;
	color: inherit;
	text-decoration: none;
}

.jobs-listing__item-link:hover,
.jobs-listing__item-link:focus {
	color: inherit;
	text-decoration: none;
}

.jobs-listing__item-text {
	flex: 1 1 auto;
	min-width: 0;
}

.jobs-listing__item-title {
	margin: 0 0 6px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 26px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #0a0a0a;
	transition: color 160ms ease;
}

.jobs-listing__item:hover .jobs-listing__item-title,
.jobs-listing__item:focus-within .jobs-listing__item-title {
	color: var(--color-brand-red, #bb2548);
}

.jobs-listing__item-date {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #6b6b6b;
}

/* Round "+" icon button (Figma — circle, hairline border, red plus
 * stroke; flips to filled red on hover/focus). */
.jobs-listing__item-plus {
	position: relative;
	flex: 0 0 auto;
	display: inline-block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-brand-red, #bb2548);
	background: transparent;
	transition: background-color 160ms ease, transform 160ms ease;
}

.jobs-listing__item-plus::before,
.jobs-listing__item-plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--color-brand-red, #bb2548);
	transform: translate(-50%, -50%);
	transition: background-color 160ms ease;
}

.jobs-listing__item-plus::before {
	width: 16px;
	height: 2px;
}

.jobs-listing__item-plus::after {
	width: 2px;
	height: 16px;
}

.jobs-listing__item:hover .jobs-listing__item-plus,
.jobs-listing__item:focus-within .jobs-listing__item-plus {
	background: var(--color-brand-red, #bb2548);
	transform: rotate(90deg);
}

.jobs-listing__item:hover .jobs-listing__item-plus::before,
.jobs-listing__item:hover .jobs-listing__item-plus::after,
.jobs-listing__item:focus-within .jobs-listing__item-plus::before,
.jobs-listing__item:focus-within .jobs-listing__item-plus::after {
	background: #fff;
}

.jobs-listing__empty {
	margin: 0;
	padding: 32px 30px;
	background: #fff;
	border: 1px solid #c3c3c3;
	border-radius: 10px;
	color: #565656;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 26px;
}

/* --------------------------------------------------------------
 * Responsive — match the existing global.css breakpoint ladder.
 * -------------------------------------------------------------- */
@media screen and (max-width: 1499px) {
	.jobs-hero {
		min-height: 560px;
		padding: 200px 0 80px;
	}
}

@media screen and (max-width: 991px) {
	.jobs-hero {
		min-height: 480px;
		padding: 180px 0 72px;
	}

	.jobs-hero .service-hero__title {
		font-size: 32px;
	}

	.jobs-hero .service-hero__text {
		font-size: 16px;
		line-height: 26px;
	}

	.jobs-content__body h2 {
		font-size: 20px;
		line-height: 28px;
	}

	.jobs-listing__item-link {
		padding: 18px 22px;
		gap: 18px;
	}

	.jobs-listing__item-plus {
		width: 40px;
		height: 40px;
	}
}

@media screen and (max-width: 599px) {
	.jobs-hero {
		min-height: 420px;
		padding: 160px 0 56px;
	}

	.jobs-hero .service-hero__title {
		font-size: 26px;
		line-height: 1.25;
	}

	.jobs-hero .service-hero__text {
		font-size: 15px;
		line-height: 24px;
	}

	.jobs-listing__list {
		gap: 22px;
	}

	.jobs-listing__item-link {
		padding: 16px 18px;
		gap: 14px;
	}

	.jobs-listing__item-title {
		font-size: 16px;
		line-height: 24px;
	}

	.jobs-listing__item-plus {
		width: 36px;
		height: 36px;
	}

	.jobs-listing__item-plus::before {
		width: 14px;
	}

	.jobs-listing__item-plus::after {
		height: 14px;
	}
}