/* =============================================================================
   Crobim Careers – stylesheet
   Matches VirtualnaTvornica (Divi child) theme
   Primary accent : #00adee
   Secondary      : #003eee
   ============================================================================= */

/* ── Remove Divi sidebar on career singles ─────────────────────────────────── */
.career-single ~ #sidebar { display: none; }
.career-single { width: 100%; }

/* =============================================================================
   LISTING SHORTCODE  [careers_listing]
   ============================================================================= */

.careers-listing {
	margin: 0 0 40px;
}

.career-item {
	padding: 22px 0 22px 28px;
	border-left: 1px solid #00adee;
	margin-bottom: 38px;
}

.career-title {
	font-size: 26px;
	font-weight: 500;
	line-height: 1.3;
	color: #222;
	margin: 0 0 10px;
	letter-spacing: 0;
}

.career-excerpt {
	font-size: 16px;
	line-height: 1.65;
	color: #555;
	margin-bottom: 16px;
}

.career-excerpt p { margin: 0; }

/* "INFO I PRIJAVA" link – matches theme's .custom-button style */
.career-link {
	display:         inline-block;
	font-size:       12px;
	font-weight:     600;
	letter-spacing:  1.5px;
	text-transform:  uppercase;
	color:           #333 !important;
	text-decoration: none !important;
	border-bottom:   1px solid #00adee;
	padding-bottom:  3px;
	position:        relative;
	transition:      color 0.25s linear;
}

.career-link::after {
	content:          "";
	display:          block;
	width:            100%;
	height:           1px;
	background-color: #003eee;
	position:         absolute;
	left:             0;
	bottom:           -1px;
	transform-origin: left;
	transform:        scale(0);
	transition:       0.25s linear;
}

.career-link:hover {
	color: #00adee !important;
}

.career-link:hover::after {
	transform: scale(1);
}

.careers-no-jobs {
	color:       #888;
	font-style:  italic;
}

/* =============================================================================
   SINGLE CAREER PAGE
   ============================================================================= */

.career-single {
	padding: 50px 0 80px;
}

/* ── Header / Title ── */
.career-single-header {
	text-align:    center;
	margin-bottom: 55px;
}

.career-single-title {
	font-size:   52px;
	font-weight: 300;
	color:       #222;
	line-height: 1.15;
	margin:      0;
}

/* ── Two-column body ── */
.career-single-body {
	display:     flex;
	gap:         60px;
	align-items: flex-start;
	margin-bottom: 80px;
}

/* Left – image */
.career-single-image {
	flex:      0 0 42%;
	max-width: 42%;
}

.career-image-wrap {
	position: relative;
}

/* Decorative grey box behind the image (as in the design) */
.career-image-wrap::before {
	content:                   "";
	display:                   block;
	position:                  absolute;
	top:                       -14px;
	right:                     -14px;
	width:                     88%;
	height:                    92%;
	background:                #e5e5e5;
	border-top-right-radius:   30px;
	border-bottom-left-radius: 30px;
	z-index:                   0;
}

.career-image-wrap img {
	position:                  relative;
	z-index:                   1;
	width:                     100%;
	height:                    auto;
	display:                   block;
	border-top-right-radius:   30px;
	border-bottom-left-radius: 30px;
	box-shadow:                1px 1px 20px rgba(0,0,0,0.08);
}

/* Right – text */
.career-single-text {
	flex:        1;
	font-size:   16px;
	line-height: 1.75;
	color:       #555;
}

.career-single-text p { margin-bottom: 18px; }
.career-single-text p:last-child { margin-bottom: 0; }

/* Full-width variant when there's no featured image */
.career-single-text--full {
	max-width: 820px;
	margin:    0 auto;
}

/* =============================================================================
   CONTACT FORM SECTION
   ============================================================================= */

.career-single-form {
	border-top:  1px solid #ebebeb;
	padding-top: 55px;
}

.career-form-title {
	font-size:    30px;
	font-weight:  400;
	color:        #222;
	margin-bottom: 30px;
	border-left:  2px solid #00adee;
	padding-left: 22px;
}

/* CF7 inputs – transparent with bottom border (matches .contact-form in theme) */
.career-single-form .wpcf7-form input[type="text"],
.career-single-form .wpcf7-form input[type="email"],
.career-single-form .wpcf7-form input[type="tel"],
.career-single-form .wpcf7-form input[type="url"],
.career-single-form .wpcf7-form textarea {
	background-color: transparent;
	border:           none;
	border-bottom:    1px solid #000;
	border-radius:    0;
	padding:          8px 0;
	width:            100%;
	font-size:        16px;
	outline:          none;
	box-shadow:       none;
	transition:       border-color 0.25s linear;
}

.career-single-form .wpcf7-form input[type="text"]:focus,
.career-single-form .wpcf7-form input[type="email"]:focus,
.career-single-form .wpcf7-form input[type="tel"]:focus,
.career-single-form .wpcf7-form input[type="url"]:focus,
.career-single-form .wpcf7-form textarea:focus {
	border-bottom-color: #00adee;
}

/* Submit button */
.career-single-form .wpcf7-form input[type="submit"] {
	background:      transparent;
	border:          none;
	border-bottom:   1px solid #00adee;
	color:           #333;
	font-size:       12px;
	font-weight:     600;
	letter-spacing:  1.5px;
	text-transform:  uppercase;
	padding:         8px 0;
	cursor:          pointer;
	position:        relative;
	transition:      color 0.25s linear, border-color 0.25s linear;
}

.career-single-form .wpcf7-form input[type="submit"]:hover {
	color:              #00adee;
	border-bottom-color: #003eee;
}

/* CF7 validation messages */
.career-single-form .wpcf7-response-output {
	margin-top:    20px;
	border-radius: 3px;
	font-size:     14px;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 980px) {

	.career-single-body {
		flex-direction: column;
		gap: 35px;
	}

	.career-single-image {
		flex:      0 0 100%;
		max-width: 100%;
	}

	.career-single-title {
		font-size: 38px;
	}

	.career-item {
		padding-left: 20px;
	}

	.career-title {
		font-size: 22px;
	}
}

@media (max-width: 767px) {

	.career-single {
		padding: 30px 0 50px;
	}

	.career-single-title {
		font-size: 28px;
	}

	.career-single-body {
		margin-bottom: 50px;
	}

	.career-form-title {
		font-size: 24px;
	}

	.career-image-wrap::before {
		display: none; /* hide decorative box on small screens */
	}
}