/**
 * ============================================================
 *  Single Job Page CSS
 * ============================================================
 *  Styles for the shared job detail template (/job/{slug}/):
 *  breadcrumb, hero with chips + actions, overview facts grid,
 *  description, requirements checklist, benefit pills, sticky
 *  apply sidebar, related jobs list.
 *
 *  Accent via --wjs-accent on .wjs-job (default cyan #29abe2).
 *
 *  Loaded by: includes/class-wjs-categories.php (wp_enqueue_style)
 *  Handle:    wjs-single-job
 * ============================================================
 */

.wjs-job{padding:28px 0 70px;background:#f7f9fb}
.wjs-job *{box-sizing:border-box}
.wjs-job__inner{max-width:1160px;margin:0 auto;padding:0 20px}

/* ── Breadcrumb ───────────────────────────────────────────── */
.wjs-job__crumbs{font-size:13px;color:#888;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wjs-job__crumbs a{color:var(--wjs-accent) !important;text-decoration:none !important}
.wjs-job__crumbs a:hover{text-decoration:underline !important}
.wjs-job__crumb-current{color:#555}

/* ── Hero ─────────────────────────────────────────────────── */
.wjs-job__hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
	background:#fff;border-radius:14px;padding:28px;box-shadow:0 3px 14px rgba(0,0,0,.06);margin:0 0 24px}
.wjs-job__eyebrow{font-size:12px !important;font-weight:800 !important;letter-spacing:.12em !important;
	text-transform:uppercase !important;color:var(--wjs-accent) !important;margin:0 0 6px !important}
.wjs-job__title{font-size:34px !important;font-weight:800 !important;color:#333 !important;
	margin:0 0 14px !important;padding:0 !important;line-height:1.15 !important;text-transform:none !important}
.wjs-job__chips{display:flex;flex-wrap:wrap;gap:10px}
.wjs-job__chip{display:inline-block;background:#f1f4f7;color:#555 !important;font-size:13px !important;
	font-weight:600;border-radius:999px;padding:6px 14px;line-height:1.4}
.wjs-job__chip--accent{background:rgba(41,171,226,.13);color:var(--wjs-accent) !important}
.wjs-job__chip--company{background:#333;color:#fff !important}
.wjs-job__hero-actions{display:flex;gap:12px;flex:none}

/* ── Buttons ──────────────────────────────────────────────── */
.wjs-job .wjs-job__btn,
.wjs-job a.wjs-job__btn,
.wjs-job button.wjs-job__btn{
	appearance:none !important;-webkit-appearance:none !important;cursor:pointer !important;
	display:inline-block !important;text-align:center;border-radius:6px !important;
	padding:13px 26px !important;font-family:inherit !important;font-size:14px !important;
	font-weight:700 !important;line-height:1 !important;text-decoration:none !important;
	text-transform:none !important;letter-spacing:normal !important;text-shadow:none !important;
	transition:all .15s ease;box-shadow:none !important;margin:0 !important}
.wjs-job .wjs-job__btn--primary{background:var(--wjs-accent) none !important;color:#fff !important;border:1px solid var(--wjs-accent) !important}
.wjs-job .wjs-job__btn--primary:hover{background:#1c86b5 none !important;border-color:#1c86b5 !important;color:#fff !important}
.wjs-job .wjs-job__btn--ghost{background:#fff none !important;color:#333 !important;border:1px solid #e0e4e8 !important}
.wjs-job .wjs-job__btn--ghost:hover,.wjs-job .wjs-job__btn--ghost[aria-pressed="true"]{
	border-color:var(--wjs-accent) !important;color:var(--wjs-accent) !important}
.wjs-job .wjs-job__btn--outline{background:#fff none !important;color:var(--wjs-accent) !important;border:1px solid var(--wjs-accent) !important}
.wjs-job .wjs-job__btn--outline:hover{background:rgba(41,171,226,.08) none !important}
.wjs-job .wjs-job__btn--block{display:block !important;width:100%}
.wjs-job .wjs-job__btn--block + .wjs-job__btn--block{margin-top:10px !important}

/* ── Layout ───────────────────────────────────────────────── */
.wjs-job__layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.wjs-job__side{position:sticky;top:24px;display:flex;flex-direction:column;gap:24px}

/* ── Cards ────────────────────────────────────────────────── */
.wjs-job__card{background:#fff;border-radius:14px;padding:26px 28px;box-shadow:0 3px 14px rgba(0,0,0,.06);
	margin:0 0 24px !important;overflow:hidden;position:relative;z-index:1}
.wjs-job__main .wjs-job__card:last-child,.wjs-job__side .wjs-job__card{margin-bottom:0 !important}
.wjs-job__side .wjs-job__card + .wjs-job__card{margin-top:0}
.wjs-job__card-title{font-size:19px !important;font-weight:700 !important;color:#333 !important;
	margin:0 0 18px !important;padding:0 0 12px !important;border-bottom:1px solid #eef1f4;
	text-transform:none !important}
.wjs-job__card-title + .wjs-job__card-title{margin-top:22px !important}

/* Overview facts — hard reset: the jobbank theme floats dt/dd globally,
   which jams labels into values and collapses the card height (making the
   next card overlap). Force block flow and clear everything. */
.wjs-job__facts{display:grid !important;grid-template-columns:repeat(2,1fr);gap:18px 32px;
	margin:0 !important;padding:0 !important;background:none !important;border:0 !important}
.wjs-job__facts::after{content:"";display:table;clear:both}
.wjs-job__fact{display:block !important;float:none !important;margin:0 !important;padding:0 !important;
	background:none !important;border:0 !important;text-align:left !important;overflow:hidden}
.wjs-job__fact dt{display:block !important;float:none !important;width:auto !important;
	font-size:11px !important;font-weight:800 !important;letter-spacing:.1em !important;
	text-transform:uppercase !important;color:#98a2ad !important;margin:0 0 4px !important;
	padding:0 !important;text-align:left !important;background:none !important;line-height:1.4 !important}
.wjs-job__fact dd{display:block !important;float:none !important;width:auto !important;
	font-size:15px !important;font-weight:600 !important;color:#333 !important;
	margin:0 !important;padding:0 !important;text-align:left !important;line-height:1.5 !important}

/* Description */
.wjs-job__content{color:#555 !important;font-size:15px !important;line-height:1.75 !important}
.wjs-job__content p{margin:0 0 14px}
.wjs-job__content img{max-width:100%;height:auto;border-radius:8px}

/* Requirements checklist */
.wjs-job__checklist{list-style:none !important;margin:0 !important;padding:0 !important}
.wjs-job__checklist li{position:relative;padding:0 0 0 30px !important;margin:0 0 12px !important;
	color:#555 !important;font-size:15px !important;line-height:1.55 !important}
.wjs-job__checklist li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;
	border-radius:50%;background:rgba(41,171,226,.14)}
.wjs-job__checklist li::after{content:"";position:absolute;left:6px;top:6px;width:5px;height:9px;
	border:solid var(--wjs-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Pills (benefits / endorsements) */
.wjs-job__pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.wjs-job__pill{display:inline-block;background:#f1f4f7;color:#555 !important;font-size:13px !important;
	font-weight:600;border-radius:999px;padding:8px 16px;line-height:1.3}
.wjs-job__pill--accent{background:rgba(41,171,226,.13);color:var(--wjs-accent) !important}

/* Apply sidebar */
.wjs-job__salary{font-size:24px !important;font-weight:800 !important;color:#333 !important;
	margin:0 0 16px !important;text-align:center}
.wjs-job__share{margin-top:16px;padding-top:14px;border-top:1px solid #eef1f4;
	display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px}
.wjs-job__share span{color:#98a2ad;font-weight:700}
.wjs-job__share a{color:var(--wjs-accent) !important;text-decoration:none !important;font-weight:600}
.wjs-job__share a:hover{text-decoration:underline !important}
.wjs-job__copy{appearance:none !important;background:none !important;border:0 !important;padding:0 !important;
	cursor:pointer !important;color:var(--wjs-accent) !important;font-size:13px !important;font-weight:600;
	font-family:inherit !important}
.wjs-job__copy:hover{text-decoration:underline}

/* Related jobs */
.wjs-job__related{list-style:none !important;margin:0 !important;padding:0 !important}
.wjs-job__related li{padding:12px 0 !important;margin:0 !important;border-bottom:1px solid #eef1f4}
.wjs-job__related li:last-child{border-bottom:0}
.wjs-job__related-title{display:block;color:var(--wjs-accent) !important;font-size:14px !important;
	font-weight:700;text-decoration:none !important;margin-bottom:3px}
.wjs-job__related-title:hover{text-decoration:underline !important}
.wjs-job__related-meta{display:block;color:#888 !important;font-size:12.5px !important;line-height:1.5}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:1024px){
	.wjs-job__layout{grid-template-columns:1fr}
	.wjs-job__side{position:static}
	.wjs-job__title{font-size:28px !important}
}
@media(max-width:640px){
	.wjs-job{padding:18px 0 46px}
	.wjs-job__hero{flex-direction:column;padding:22px 20px}
	.wjs-job__hero-actions{width:100%}
	.wjs-job__hero-actions .wjs-job__btn{flex:1}
	.wjs-job__facts{grid-template-columns:1fr}
	.wjs-job__card{padding:20px 18px}
	.wjs-job__title{font-size:24px !important}
}

/* ── Responsive: tablet refinement (641–1024px handled above) ─ */
@media(max-width:900px){
	.wjs-job__hero{padding:24px 22px}
	.wjs-job__title{font-size:26px !important}
}

/* ── Responsive: small phones ─────────────────────────────── */
@media(max-width:400px){
	.wjs-job__inner{padding:0 14px}
	.wjs-job__title{font-size:21px !important}
	.wjs-job__chips{gap:7px}
	.wjs-job__chip{font-size:12px !important;padding:5px 11px}
	.wjs-job__card{padding:18px 15px;border-radius:12px}
	.wjs-job__card-title{font-size:17px !important}
	.wjs-job__salary{font-size:20px !important}
	.wjs-job__crumbs{font-size:12px}
	.wjs-job .wjs-job__btn{padding:12px 16px !important;font-size:13px !important}
	.wjs-job__share{gap:8px;font-size:12px}
}

/* ── Content resilience: long words, embedded media, tables ── */
.wjs-job__title,.wjs-job__crumb-current,.wjs-job__jobtitle,
.wjs-job__related-title,.wjs-job__fact dd{overflow-wrap:break-word;word-break:break-word}
.wjs-job__content{overflow-wrap:break-word}
.wjs-job__content iframe,.wjs-job__content video,.wjs-job__content embed{max-width:100%}
.wjs-job__content table{display:block;width:100%;overflow-x:auto}
.wjs-job__crumbs .wjs-job__crumb-current{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){
	.wjs-job__crumbs .wjs-job__crumb-current{max-width:180px}
}

/* ══ Embedded company card (.wjs-employer-widget inside the description) ══
   The widget ships its own inline styles; these scoped overrides fix its
   mobile behavior on the job page: header alignment, stacked full-width
   buttons instead of wrapping text blobs, tidy meta rows. */

/* All sizes: long company names must never blob the buttons */
.wjs-job .wjs-ew-actions{display:flex;flex-wrap:wrap;gap:12px}
.wjs-job .wjs-ew-btn-primary,
.wjs-job .wjs-ew-btn-secondary{
	flex:1 1 220px;box-sizing:border-box;text-align:center;
	white-space:normal;line-height:1.35;
	display:inline-flex;align-items:center;justify-content:center}

@media(max-width:640px){
	.wjs-job .wjs-employer-widget{padding:20px 16px;border-radius:16px;margin-top:24px}
	/* Header: logo + name aligned, name wraps cleanly */
	.wjs-job .wjs-ew-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
	.wjs-job .wjs-ew-logo{flex:none}
	.wjs-job .wjs-ew-logo img,.wjs-job .wjs-ew-logo .wjs-ew-avatar{width:52px;height:52px;border-radius:12px}
	.wjs-job .wjs-ew-info{min-width:0;flex:1}
	.wjs-job .wjs-ew-name{font-size:1.05rem;line-height:1.25;margin:0 0 5px;overflow-wrap:break-word}
	.wjs-job .wjs-ew-industry{display:inline-block;font-size:.72rem;padding:3px 9px}
	/* Meta: one aligned column */
	.wjs-job .wjs-ew-meta-row{flex-direction:column;gap:8px;margin-bottom:14px}
	.wjs-job .wjs-ew-meta-item{font-size:.85rem}
	.wjs-job .wjs-ew-desc{font-size:.88rem;margin-bottom:14px}
	.wjs-job .wjs-ew-perks{gap:6px;margin-bottom:18px}
	.wjs-job .wjs-ew-perk-tag{font-size:.72rem;padding:3px 10px}
	/* Actions: stacked, full-width, centered — no more two-line blobs */
	.wjs-job .wjs-ew-actions{flex-direction:column;gap:10px}
	.wjs-job .wjs-ew-btn-primary,
	.wjs-job .wjs-ew-btn-secondary{
		flex:none;display:flex;width:100%;
		font-size:.85rem;padding:13px 14px;border-radius:10px}
}