/* Single job page (EdouJob template): theme colors and container width. Front-end only.
   EdouJob's single-job.css draws everything from --ej-* variables (blue by default):
   they now follow the theme palette (--edou-*, set in the theme customizer, gold).
   Selectors are prefixed with body.single-edoujob so they win over single-job.css. */

body.single-edoujob {
	--ej-primary:       var(--edou-primary, #ab871d);
	--ej-primary-dark:  var(--edou-primary-dark, #907114);
	--ej-primary-light: rgba(var(--edou-primary-rgb, 171, 135, 29), .12);
	--ej-text:          var(--edou-dark, #0f182d);
	--ej-text-muted:    var(--edou-gray, #6b7280);
	--ej-border:        var(--edou-border, #e5e7eb);
	--ej-bg:            var(--edou-light, #f9fafb);
	--ej-radius:        12px;
	--ej-radius-sm:     var(--edou-btn-radius, 8px);
	--ej-font:          var(--edou-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* Container: theme width (1320px), like Find Jobs and the account pages */
body.single-edoujob .edoujob-single-wrap {
	max-width: 1320px;
	margin: 40px auto;
	padding: 0 12px 64px;
}
body.single-edoujob .edoujob-single-layout {
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 32px;
}

/* Buttons: same as the theme's (Post a Job / Login) */
body.single-edoujob .edoujob-btn {
	border-radius: var(--edou-btn-radius, 8px);
	transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
body.single-edoujob .edoujob-btn--primary {
	background: var(--edou-btn-bg, var(--ej-primary));
	border-color: var(--edou-btn-border, var(--ej-primary));
	color: var(--edou-btn-color, #fff);
}
body.single-edoujob .edoujob-btn--primary:hover,
body.single-edoujob .edoujob-btn--primary:focus-visible {
	background: var(--edou-btn-bg-hover, var(--ej-primary-dark));
	border-color: var(--edou-btn-border-hover, var(--ej-primary-dark));
	color: var(--edou-btn-color-hover, #fff);
	box-shadow: 0 4px 12px rgba(var(--edou-primary-rgb, 171, 135, 29), .35);
	transform: translateY(-1px);
}
body.single-edoujob .edoujob-btn--secondary {
	background: transparent;
	border-color: var(--ej-primary);
	color: var(--ej-primary);
}
body.single-edoujob .edoujob-btn--secondary:hover,
body.single-edoujob .edoujob-btn--secondary:focus-visible {
	background: var(--ej-primary);
	color: #fff;
	transform: translateY(-1px);
}
body.single-edoujob .edoujob-btn:focus-visible {
	outline: 3px solid rgba(var(--edou-primary-rgb, 171, 135, 29), .35);
	outline-offset: 2px;
}

/* Header card: navy title, gold accent bar */
body.single-edoujob .edoujob-job-header {
	position: relative;
	border-color: var(--ej-border);
}
body.single-edoujob .edoujob-job-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--ej-primary), var(--edou-accent, #f59e0b));
}
body.single-edoujob .edoujob-job-title { color: var(--edou-heading, #0f182d); }
body.single-edoujob .edoujob-company-logo--placeholder span { color: var(--ej-primary); }

/* Apply box: navy band, gold buttons */
body.single-edoujob .edoujob-sidebar-box--apply {
	border: 0;
	background: var(--edou-dark, #0f182d);
	color: rgba(255, 255, 255, .8);
}
body.single-edoujob .edoujob-sidebar-box--apply .edoujob-login-cta__divider,
body.single-edoujob .edoujob-sidebar-box--apply .edoujob-login-cta__note,
body.single-edoujob .edoujob-sidebar-box--apply .edoujob-apply-alt { color: rgba(255, 255, 255, .7); }
body.single-edoujob .edoujob-sidebar-box--apply .edoujob-login-cta__divider::before,
body.single-edoujob .edoujob-sidebar-box--apply .edoujob-login-cta__divider::after { background: rgba(255, 255, 255, .2); }
body.single-edoujob .edoujob-sidebar-box--apply a:not(.edoujob-btn) { color: #e9c46a; }
body.single-edoujob .edoujob-sidebar-box--apply .edoujob-btn--secondary {
	border-color: #e9c46a;
	color: #e9c46a;
}
body.single-edoujob .edoujob-sidebar-box--apply .edoujob-btn--secondary:hover,
body.single-edoujob .edoujob-sidebar-box--apply .edoujob-btn--secondary:focus-visible {
	background: #e9c46a;
	color: var(--edou-dark, #0f182d);
}

/* Sidebar titles: gold bar, like the blog sidebar */
body.single-edoujob .edoujob-sidebar-box__title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--edou-heading, #0f182d);
}
body.single-edoujob .edoujob-sidebar-box__title::before {
	content: "";
	width: 4px;
	height: 16px;
	border-radius: 2px;
	background: var(--ej-primary);
}

/* Share buttons: navy, gold on hover */
body.single-edoujob .edoujob-share-btn {
	background: var(--edou-dark, #0f182d);
	border-radius: var(--edou-btn-radius, 8px);
	opacity: 1;
}
body.single-edoujob .edoujob-share-btn:hover,
body.single-edoujob .edoujob-share-btn:focus-visible {
	background: var(--ej-primary);
	opacity: 1;
}

@media (max-width: 1100px) {
	body.single-edoujob .edoujob-single-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
}
@media (max-width: 900px) {
	body.single-edoujob .edoujob-single-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	body.single-edoujob .edoujob-single-wrap { margin: 24px auto; padding: 0 16px 48px; }
}

/* Mobile (up to 900px, where EdouJob stacks its columns): see class-deira-single-job-mobile.php.
   Key facts in the header, description first, one fixed "Apply Now" button. Desktop unchanged. */
.deira-sj-keys,
.deira-sj-bar { display: none; }

@media (max-width: 900px) {
	/* Right column below the description (EdouJob puts it first) */
	body.single-edoujob .edoujob-single-sidebar { order: 0; }

	/* Header: salary + up to 3 tags; they include the job types, shown once */
	body.single-edoujob .edoujob-job-header .deira-sj-keys { display: block; margin-top: 12px; }
	body.single-edoujob .deira-sj-has-keys .edoujob-job-header__types { display: none; }
	body.single-edoujob .deira-sj-keys__salary {
		margin: 0 0 10px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.4;
		color: var(--ej-text);
	}
	body.single-edoujob .deira-sj-keys__tags {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	body.single-edoujob .deira-sj-keys__tag {
		padding: 4px 10px;
		border-radius: 999px;
		background: var(--ej-primary-light);
		color: var(--ej-primary-dark);
		font-size: 12px;
		font-weight: 600;
		line-height: 1.4;
	}

	/* One Apply button: the fixed bar replaces EdouJob's (only once the script has turned it on) */
	body.deira-sj-bar-on .edoujob-sidebar-box--apply,
	body.deira-sj-bar-on .edoujob-apply-below-desc { display: none; }

	/* The end of the page stays reachable above the bar: spacer in the footer's own color */
	body.deira-sj-bar-on #colophon::after {
		content: "";
		display: block;
		height: calc(var(--deira-sj-bar-h, 72px) + 16px);
	}
	body.deira-sj-bar-on:not(:has(#colophon)) { padding-bottom: calc(var(--deira-sj-bar-h, 72px) + 16px); }

	/* The theme's "back to top" button goes above the bar (back down while the bar is hidden) */
	body.deira-sj-bar-on:not(.deira-sj-bar-hidden) #edou-back-to-top { bottom: calc(var(--deira-sj-bar-h, 72px) + 12px); right: 16px; }
	/* ...and hidden with the bar when an ad reaches the bottom of the screen (it would cover it) */
	body.deira-sj-bar-hidden #edou-back-to-top { visibility: hidden; }

	.deira-sj-bar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
		background: #fff;
		border-top: 1px solid var(--ej-border, #e5e7eb);
		box-shadow: 0 -6px 20px rgba(15, 24, 45, .08);
		transition: transform .2s ease;
	}
	.deira-sj-bar[hidden] { display: none; }
	/* Hidden at once (never over an ad), shown with a slide */
	.deira-sj-bar.is-hidden { transform: translateY(110%); visibility: hidden; transition: none; }
	.deira-sj-bar__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		min-height: 48px;
		box-sizing: border-box;
		border: 1px solid var(--edou-btn-border, var(--ej-primary));
		border-radius: var(--edou-btn-radius, 8px);
		background: var(--edou-btn-bg, var(--ej-primary));
		color: var(--edou-btn-color, #fff);
		font-family: var(--ej-font);
		font-size: 16px;
		font-weight: 700;
		text-decoration: none;
		cursor: pointer;
	}
	.deira-sj-bar__btn:hover,
	.deira-sj-bar__btn:focus-visible {
		background: var(--edou-btn-bg-hover, var(--ej-primary-dark));
		border-color: var(--edou-btn-border-hover, var(--ej-primary-dark));
		color: var(--edou-btn-color-hover, #fff);
		text-decoration: none;
	}
	.deira-sj-bar__btn:focus-visible { outline: 3px solid var(--edou-dark, #0f182d); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
	.deira-sj-bar { transition: none; }
}