/* =========================================================
   VacancyCall Premium UI — design system
   Loads on top of the existing theme (Astra/GeneratePress/etc.)
   Everything is scoped under body.vc-premium-ui so it never
   leaks into wp-admin or other plugins.
   ========================================================= */

body.vc-premium-ui {
	--vc-primary: #2954E0;
	--vc-primary-dark: #1B3FBD;
	--vc-primary-light: #EAF0FF;
	--vc-accent: #FF7A45;
	--vc-accent-dark: #E8632E;
	--vc-success: #16A34A;
	--vc-star: #F5A524;
	--vc-bg: #F6F8FC;
	--vc-surface: #FFFFFF;
	--vc-text: #171B2E;
	--vc-text-muted: #5B6478;
	--vc-border: #E7EAF3;
	--vc-radius: 14px;
	--vc-radius-sm: 8px;
	--vc-shadow: 0 4px 20px rgba(23, 32, 70, 0.07);
	--vc-shadow-hover: 0 14px 34px rgba(23, 32, 70, 0.14);
	--vc-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	background: var(--vc-bg);
	color: var(--vc-text);
	font-family: var(--vc-font);
}

body.vc-premium-ui,
body.vc-premium-ui p,
body.vc-premium-ui li,
body.vc-premium-ui span,
body.vc-premium-ui div {
	font-family: var(--vc-font);
}

body.vc-premium-ui h1,
body.vc-premium-ui h2,
body.vc-premium-ui h3,
body.vc-premium-ui h4,
body.vc-premium-ui h5,
body.vc-premium-ui h6 {
	font-family: var(--vc-font);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--vc-text);
}

body.vc-premium-ui a {
	color: var(--vc-primary);
	transition: color 0.2s ease;
}
body.vc-premium-ui a:hover {
	color: var(--vc-primary-dark);
}

/* ---------------------------------------------------------
   Header — sticky glass bar
   --------------------------------------------------------- */
body.vc-premium-ui .site-header,
body.vc-premium-ui header.site-header,
body.vc-premium-ui #masthead {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--vc-border);
	box-shadow: 0 2px 16px rgba(23, 32, 70, 0.05);
}

body.vc-premium-ui.vc-sticky-header .site-header,
body.vc-premium-ui.vc-sticky-header header.site-header,
body.vc-premium-ui.vc-sticky-header #masthead {
	position: sticky;
	top: 0;
	z-index: 999;
}

body.vc-premium-ui .site-header .main-navigation a,
body.vc-premium-ui .site-header nav a,
body.vc-premium-ui #masthead nav a {
	font-weight: 600;
	font-size: 15px;
	padding: 8px 14px;
	border-radius: 999px;
	transition: background 0.2s ease, color 0.2s ease;
}
body.vc-premium-ui .site-header .main-navigation a:hover,
body.vc-premium-ui .site-header nav a:hover,
body.vc-premium-ui #masthead nav a:hover {
	background: var(--vc-primary-light);
	color: var(--vc-primary-dark);
}

body.vc-premium-ui .site-header .custom-logo,
body.vc-premium-ui .site-logo img,
body.vc-premium-ui .site-header img {
	transition: transform 0.25s ease;
}
body.vc-premium-ui .site-header a:hover img {
	transform: scale(1.04);
}

/* Reading progress bar (injected by JS on single posts) */
#vc-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, var(--vc-primary), var(--vc-accent));
	z-index: 10000;
	transition: width 0.1s ease-out;
}

/* ---------------------------------------------------------
   Job / blog cards — grid listings on home & archive
   --------------------------------------------------------- */
body.vc-premium-ui article,
body.vc-premium-ui .vc-job-card {
	background: var(--vc-surface);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius);
	box-shadow: var(--vc-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	overflow: hidden;
}
body.vc-premium-ui article:hover,
body.vc-premium-ui .vc-job-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--vc-shadow-hover);
	border-color: rgba(41, 84, 224, 0.25);
}

body.vc-premium-ui article img,
body.vc-premium-ui .vc-job-card img {
	border-radius: 0;
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.4s ease;
}
body.vc-premium-ui article:hover img,
body.vc-premium-ui .vc-job-card:hover img {
	transform: scale(1.05);
}

body.vc-premium-ui article .entry-title,
body.vc-premium-ui article h2 a,
body.vc-premium-ui .vc-job-card h2 a {
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--vc-text);
}
body.vc-premium-ui article .entry-title a:hover,
body.vc-premium-ui .vc-job-card h2 a:hover {
	color: var(--vc-primary);
}

body.vc-premium-ui .entry-meta,
body.vc-premium-ui .posted-on,
body.vc-premium-ui .cat-links {
	color: var(--vc-text-muted);
	font-size: 0.82rem;
	font-weight: 500;
}

/* Category / city pill badges */
body.vc-premium-ui .cat-links a,
body.vc-premium-ui .tags-links a {
	display: inline-block;
	background: var(--vc-primary-light);
	color: var(--vc-primary-dark);
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
}

/* ---------------------------------------------------------
   Buttons — CTAs, "Get Started", "Apply Now"
   --------------------------------------------------------- */
body.vc-premium-ui .wp-block-button__link,
body.vc-premium-ui a.button,
body.vc-premium-ui button:not(.wp-block-search__button):not(#vc-back-to-top),
body.vc-premium-ui input[type="submit"] {
	background: linear-gradient(135deg, var(--vc-accent), var(--vc-accent-dark));
	color: #fff !important;
	border: none;
	border-radius: 999px;
	padding: 12px 28px;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	box-shadow: 0 8px 20px rgba(255, 122, 69, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}
body.vc-premium-ui .wp-block-button__link:hover,
body.vc-premium-ui a.button:hover,
body.vc-premium-ui button:hover:not(.wp-block-search__button):not(#vc-back-to-top),
body.vc-premium-ui input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(255, 122, 69, 0.38);
	color: #fff !important;
}

body.vc-premium-ui .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--vc-primary) !important;
	border: 2px solid var(--vc-primary);
	box-shadow: none;
}

/* ---------------------------------------------------------
   Blog post body (.entry-content) typography
   --------------------------------------------------------- */
body.vc-premium-ui .entry-content {
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--vc-text);
}
body.vc-premium-ui .entry-content h2 {
	font-size: 1.5rem;
	margin-top: 2.4em;
	position: relative;
	padding-left: 16px;
	border-left: 4px solid var(--vc-primary);
}
body.vc-premium-ui .entry-content h3 {
	font-size: 1.2rem;
	margin-top: 1.8em;
	color: var(--vc-primary-dark);
}
body.vc-premium-ui .entry-content img {
	border-radius: var(--vc-radius);
	box-shadow: var(--vc-shadow);
}
body.vc-premium-ui .entry-content blockquote {
	background: var(--vc-primary-light);
	border-left: 4px solid var(--vc-primary);
	border-radius: var(--vc-radius-sm);
	padding: 18px 22px;
	font-style: italic;
	color: var(--vc-text);
}
body.vc-premium-ui .entry-content table {
	border-collapse: collapse;
	width: 100%;
	border-radius: var(--vc-radius-sm);
	overflow: hidden;
	box-shadow: var(--vc-shadow);
}
body.vc-premium-ui .entry-content table th {
	background: var(--vc-primary);
	color: #fff;
	padding: 10px 14px;
}
body.vc-premium-ui .entry-content table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--vc-border);
}
body.vc-premium-ui .entry-content table tr:nth-child(even) {
	background: var(--vc-bg);
}
body.vc-premium-ui .entry-content code {
	background: var(--vc-primary-light);
	color: var(--vc-primary-dark);
	padding: 2px 6px;
	border-radius: 6px;
	font-size: 0.9em;
}
body.vc-premium-ui .entry-content pre {
	background: #171B2E;
	color: #EAF0FF;
	border-radius: var(--vc-radius-sm);
	padding: 18px;
	overflow-x: auto;
}

/* ---------------------------------------------------------
   Testimonials
   --------------------------------------------------------- */
body.vc-premium-ui .wp-block-quote,
body.vc-premium-ui .testimonial,
body.vc-premium-ui .vc-testimonial {
	background: var(--vc-surface);
	border-radius: var(--vc-radius);
	box-shadow: var(--vc-shadow);
	padding: 26px;
	position: relative;
}
body.vc-premium-ui .vc-testimonial::before {
	content: "\201C";
	font-size: 3.5rem;
	color: var(--vc-primary-light);
	position: absolute;
	top: 8px;
	left: 16px;
	line-height: 1;
	font-family: Georgia, serif;
}

/* Star ratings (★★★★★ text nodes) get a warm gold tint */
body.vc-premium-ui .vc-star-rating,
body.vc-premium-ui p:has(> :first-child) {
	/* graceful no-op fallback for browsers without :has() — stars styled via inline JS class instead */
}
body.vc-premium-ui .vc-stars {
	color: var(--vc-star);
	letter-spacing: 2px;
}

/* ---------------------------------------------------------
   Forms & inputs
   --------------------------------------------------------- */
body.vc-premium-ui input[type="text"],
body.vc-premium-ui input[type="email"],
body.vc-premium-ui input[type="search"],
body.vc-premium-ui input[type="tel"],
body.vc-premium-ui textarea,
body.vc-premium-ui select {
	border: 1.5px solid var(--vc-border);
	border-radius: var(--vc-radius-sm);
	padding: 12px 16px;
	font-family: var(--vc-font);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	background: var(--vc-surface);
}
body.vc-premium-ui input:focus,
body.vc-premium-ui textarea:focus,
body.vc-premium-ui select:focus {
	border-color: var(--vc-primary);
	box-shadow: 0 0 0 4px var(--vc-primary-light);
	outline: none;
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
body.vc-premium-ui .site-footer,
body.vc-premium-ui footer.site-footer,
body.vc-premium-ui #colophon {
	background: linear-gradient(180deg, #171B2E, #0F1223);
	color: #C7CCDD;
	padding-top: 48px;
}
body.vc-premium-ui .site-footer a,
body.vc-premium-ui footer.site-footer a,
body.vc-premium-ui #colophon a {
	color: #C7CCDD;
}
body.vc-premium-ui .site-footer a:hover,
body.vc-premium-ui footer.site-footer a:hover,
body.vc-premium-ui #colophon a:hover {
	color: #fff;
}

/* ---------------------------------------------------------
   Back to top button
   --------------------------------------------------------- */
#vc-back-to-top {
	position: fixed;
	bottom: 28px;
	right: 28px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--vc-primary);
	color: #fff;
	border: none;
	box-shadow: var(--vc-shadow-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: all 0.3s ease;
	z-index: 9999;
}
#vc-back-to-top.vc-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#vc-back-to-top:hover {
	background: var(--vc-primary-dark);
}

/* ---------------------------------------------------------
   Scroll-in fade animations
   --------------------------------------------------------- */
body.vc-premium-ui.vc-animations-on .vc-fade-up {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
body.vc-premium-ui.vc-animations-on .vc-fade-up.vc-in-view {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	body.vc-premium-ui .vc-fade-up {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---------------------------------------------------------
   Responsive tightening
   --------------------------------------------------------- */
@media (max-width: 782px) {
	body.vc-premium-ui .entry-content { font-size: 1rem; }
	#vc-back-to-top { bottom: 18px; right: 18px; width: 42px; height: 42px; }
}