/*
Theme Name: SafeJob Theme
Theme URI: https://rubinny.co.il
Author: Diamond Rubinny Technion - Safety Unit
Description: ערכת נושא RTL נגישה (WCAG 2.1 AA / ת"י 5568) עבור מערכת "תיק תפקיד" — ממשק עובדים לניהול ידע ארגוני.
Version: 1.16.15
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: safejob-theme
*/

:root {
	--sj-navy: #002147;
	--sj-navy-light: #0a3565;
	--sj-gold: #D6A329;
	--sj-bg: #f4f6f9;
	--sj-text: #1a2733;
	--sj-muted: #5a6472;
	--sj-border: #d9dee7;
	--sj-font-scale: 1;
}

* { box-sizing: border-box; }

html { font-size: calc(100% * var(--sj-font-scale)); }

body {
	margin: 0;
	font-family: "Rubik", "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif;
	background: var(--sj-bg);
	color: var(--sj-text);
	line-height: 1.6;
	direction: rtl;
}

a { color: var(--sj-navy-light); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--sj-gold);
	outline-offset: 2px;
}

/* Skip link — visible on focus. */
.sj-skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	background: var(--sj-navy);
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 8px 8px;
	z-index: 1000;
}
.sj-skip-link:focus { inset-inline-start: 12px; top: 0; }

/* Header */
.sj-site-header {
	background: var(--sj-navy);
	color: #fff;
	padding: 0 16px;
}
.sj-header-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 64px;
	flex-wrap: wrap;
}
.sj-site-title { font-size: 1.25em; font-weight: 700; color: #fff; text-decoration: none; }
.sj-site-title:hover { color: var(--sj-gold); }
.sj-main-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; flex-wrap: wrap; }
.sj-main-nav a {
	display: block; color: #fff; text-decoration: none;
	padding: 10px 14px; border-radius: 8px;
}
.sj-main-nav a:hover, .sj-main-nav .current-menu-item a { background: rgba(255,255,255,.14); }

/* Accessibility toolbar */
.sj-a11y-toggle {
	background: var(--sj-gold); color: #1a1a1a; border: 0; border-radius: 8px;
	padding: 8px 14px; font-size: 1em; cursor: pointer; font-weight: 600;
}
.sj-a11y-panel {
	position: fixed; top: 72px; inset-inline-end: 12px; z-index: 999;
	background: #fff; border: 1px solid var(--sj-border); border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0,0,0,.2); padding: 16px; width: 260px;
}
.sj-a11y-panel[hidden] { display: none; }
.sj-a11y-panel h2 { margin: 0 0 10px; font-size: 1.05em; }
.sj-a11y-panel button {
	display: block; width: 100%; text-align: start; background: #eef1f6;
	border: 1px solid var(--sj-border); border-radius: 8px; padding: 10px 12px;
	margin-bottom: 8px; font-size: 1em; cursor: pointer;
}
.sj-a11y-panel button[aria-pressed="true"] { background: var(--sj-navy); color: #fff; }

/* A11y modes */
body.sj-contrast { background: #000; color: #fff; }
body.sj-contrast .sj-card, body.sj-contrast .sj-a11y-panel, body.sj-contrast .sj-site-main { background: #000; color: #fff; border-color: #fff; }
body.sj-contrast a { color: #ffd75e; }
body.sj-underline a { text-decoration: underline !important; }
body.sj-no-motion *, body.sj-no-motion *::before, body.sj-no-motion *::after {
	animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
body.sj-readable { font-family: Arial, "Noto Sans Hebrew", sans-serif; letter-spacing: .02em; wosj-spacing: .08em; }

/* Main */
.sj-site-main { max-width: 1100px; margin: 24px auto; padding: 0 16px; min-height: 55vh; }
.sj-page-title { color: var(--sj-navy); margin-top: 0; }
.sj-entry-content img { max-width: 100%; height: auto; }

/* Footer */
.sj-site-footer {
	background: var(--sj-navy); color: #dfe6f0; margin-top: 40px;
	padding: 22px 16px; font-size: .95em;
}
.sj-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sj-site-footer a { color: #fff; }

/* 404 */
.sj-404 { text-align: center; padding: 60px 0; }
.sj-404 h1 { font-size: 3em; color: var(--sj-navy); margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
	.sj-header-inner { padding: 10px 0; }
	.sj-a11y-panel { inset-inline-end: 6px; width: calc(100vw - 24px); }
}

/* ===== v1.1.0 — logo, home page ===== */
.sj-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sj-logo-img { width: 42px; height: 42px; display: block; }
.sj-brand .sj-site-title { display: block; line-height: 1.15; }
.sj-brand .sj-site-tag { display: block; font-size: .74em; color: #dce6f2; font-weight: 500; }

.sj-hero {
	background: linear-gradient(135deg, var(--sj-navy) 0%, #0a3565 100%);
	color: #fff; border-radius: 16px; padding: 40px 28px; margin-bottom: 26px;
	display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.sj-hero-logo { width: 110px; height: 110px; flex: 0 0 auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.sj-hero h1 { margin: 0 0 8px; color: #fff; font-size: 1.9em; }
.sj-hero p { margin: 0 0 14px; color: #dfe6f0; max-width: 46em; }
.sj-hero .sj-btn { background: var(--sj-gold); color: #1a1a1a; font-weight: 700; }
.sj-hero .sj-btn:hover, .sj-hero .sj-btn:focus-visible { background: #e9b437; }

.sj-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 10px 0 30px; }
.sj-quick-card {
	display: block; background: #fff; border: 1px solid var(--sj-border); border-radius: 12px;
	padding: 20px; text-decoration: none; color: var(--sj-text);
	transition: box-shadow .15s ease, transform .15s ease;
}
.sj-quick-card:hover, .sj-quick-card:focus-visible { box-shadow: 0 6px 18px rgba(0,33,71,.16); transform: translateY(-2px); }
.sj-quick-card .sj-quick-icon { font-size: 1.9em; display: block; margin-bottom: 8px; }
.sj-quick-card h3 { margin: 0 0 4px; color: var(--sj-navy); }
.sj-quick-card p { margin: 0; color: var(--sj-muted); font-size: .92em; }

.sj-recent { background: #fff; border: 1px solid var(--sj-border); border-radius: 12px; padding: 20px; }
.sj-recent h2 { margin-top: 0; color: var(--sj-navy); }
.sj-recent ul { list-style: none; margin: 0; padding: 0; }
.sj-recent li { padding: 10px 0; border-bottom: 1px solid #eef1f6; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sj-recent li:last-child { border-bottom: 0; }
.sj-recent .sj-recent-meta { color: var(--sj-muted); font-size: .88em; }

body.sj-no-motion .sj-quick-card { transition: none; }
@media (max-width: 640px) {
	.sj-hero { padding: 26px 18px; }
	.sj-hero-logo { width: 84px; height: 84px; }
}


.sj-site-header .sj-unit-logo,
img.sj-unit-logo {
	height: 40px;
	max-height: 40px;
	width: auto;
	max-width: 140px;
	flex: 0 0 auto;
	object-fit: contain;
	margin-inline-start: 12px;
	padding-inline-start: 12px;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
	align-self: center;
}

@media screen and (max-width: 700px) {
	.sj-site-header .sj-unit-logo,
	img.sj-unit-logo {
		height: 30px;
		max-height: 30px;
		max-width: 100px;
		margin-inline-start: 8px;
		padding-inline-start: 8px;
	}
}


.sj-avatar-menu {
	position: relative;
	margin-inline-start: 10px;
	align-self: center;
}

.sj-avatar-menu > summary {
	list-style: none;
	cursor: pointer;
	display: block;
	line-height: 0;
	border-radius: 50%;
}

.sj-avatar-menu > summary::-webkit-details-marker {
	display: none;
}

.sj-avatar-menu > summary:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.sj-avatar-img {
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.6);
	display: block;
}

.sj-avatar-menu[open] .sj-avatar-img {
	border-color: #fff;
}

.sj-avatar-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	background: #fff;
	color: #1d2327;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
	min-width: 200px;
	padding: 8px;
	z-index: 90;
	display: flex;
	flex-direction: column;
}

.sj-avatar-name {
	font-weight: 700;
	padding: 8px 10px;
	border-bottom: 1px solid #eceef0;
	margin-bottom: 4px;
}

.sj-avatar-dropdown a {
	display: block;
	padding: 9px 10px;
	border-radius: 6px;
	color: #1d2327;
	text-decoration: none;
}

.sj-avatar-dropdown a:hover,
.sj-avatar-dropdown a:focus-visible {
	background: #f0f4f8;
	outline: none;
}

.sj-avatar-logout {
	color: #b32d2e !important;
	border-top: 1px solid #eceef0;
	margin-top: 4px;
}


.sj-footer-credit {
	display: block;
	opacity: 0.75;
	font-size: 0.9em;
	margin-top: 6px;
}


.sj-bell {
	position: relative;
	align-self: center;
	margin-inline-start: 8px;
}

.sj-bell > summary {
	list-style: none;
	cursor: pointer;
	font-size: 20px;
	position: relative;
	padding: 4px;
	border-radius: 8px;
}

.sj-bell > summary::-webkit-details-marker { display: none; }

.sj-bell > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sj-bell-badge {
	position: absolute;
	top: -2px;
	inset-inline-end: -4px;
	background: #d63638;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	border-radius: 999px;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	padding: 0 3px;
}

.sj-bell-panel {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	background: #fff;
	color: #1d2327;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
	width: min(320px, 88vw);
	padding: 12px;
	z-index: 95;
}

.sj-bell-panel h4 { margin: 0 0 8px; }

.sj-bell-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 320px;
	overflow-y: auto;
}

.sj-bell-list li {
	padding: 8px 10px;
	border-radius: 6px;
	margin-bottom: 2px;
	font-size: 0.92em;
}

.sj-bell-list li.sj-bell-unread { background: #eef4fa; font-weight: 600; }

.sj-bell-list a { color: #1d2327; text-decoration: none; }
.sj-bell-list a:hover { text-decoration: underline; }

.sj-bell-time {
	display: block;
	color: #787c82;
	font-size: 0.82em;
	font-weight: 400;
	margin-top: 2px;
}

.sj-bell-empty { color: #787c82; }

.sj-bell-clear {
	background: none;
	border: none;
	color: #2271b1;
	cursor: pointer;
	padding: 6px 0 0;
	font-weight: 600;
}

/* Ticker. */

.sj-ticker {
	background: #0b1f3a;
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

.sj-ticker-track {
	display: flex;
	width: max-content;
	animation: sj-ticker-scroll 30s linear infinite;
}

.sj-ticker:hover .sj-ticker-track,
.sj-ticker:focus-within .sj-ticker-track {
	animation-play-state: paused;
}

.sj-ticker-row {
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding: 8px 0;
}

.sj-ticker-row > * { margin-inline-end: 28px; }

.sj-ticker a { color: #ffd75e; text-decoration: none; }
.sj-ticker a:hover, .sj-ticker a:focus-visible { text-decoration: underline; }
.sj-ticker-sep { opacity: 0.5; }

@keyframes sj-ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(50%); } /* RTL: track flows rightward. */
}

@media (prefers-reduced-motion: reduce) {
	.sj-ticker-track { animation: none; flex-wrap: wrap; width: auto; }
	.sj-ticker-row { white-space: normal; flex-wrap: wrap; }
	.sj-ticker-row[aria-hidden="true"] { display: none; }
}


/* Unit logo lockup: emblem + crisp text (replaces the rasterized PNG). */
.sj-unit-lockup {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-inline-start: 14px;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
	align-self: center;
}

.sj-unit-emblem {
	width: 42px;
	height: auto;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.sj-unit-words { display: flex; flex-direction: column; line-height: 1.15; }

.sj-unit-he {
	font-weight: 700;
	font-size: 15px;
	color: #fff;
	letter-spacing: 0.02em;
}

.sj-unit-en {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.22em;
	color: var(--sj-gold);
	direction: ltr;
	text-align: end;
}

.sj-unit-logo { display: none; } /* Legacy PNG retired. */

/* Technion-gold ring around the header avatar. */
.sj-avatar-menu > summary { border-radius: 999px; }

.sj-avatar-menu .sj-avatar-img,
.sj-avatar-menu > summary img {
	border-radius: 999px;
	border: 2px solid var(--sj-gold);
	box-shadow: 0 0 0 2px rgba(213, 159, 15, 0.25);
	box-sizing: border-box;
	background: #fff;
}

.sj-avatar-menu > summary:hover img,
.sj-avatar-menu > summary:focus-visible img {
	box-shadow: 0 0 0 3px rgba(213, 159, 15, 0.45);
}

/* Bell: sits with the header controls; gold to match. */
.sj-bell > summary { color: var(--sj-gold); }

/* Bell panel: never clipped. Desktop: anchored dropdown with sane
   z-index; mobile: fixed sheet spanning the viewport width. */
.sj-site-header, .sj-header-inner { overflow: visible; }

.sj-bell { position: relative; z-index: 210; }

.sj-bell-panel { z-index: 220; }

@media (max-width: 782px) {
	.sj-bell-panel {
		position: fixed;
		top: auto;
		inset-block-start: 12vh;
		inset-inline: 10px;
		width: auto;
		max-height: 70vh;
		overflow-y: auto;
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
	}
}

/* Ops-tab edit line. */
.sj-ops-editline { text-align: end; margin: 0 0 8px; }


.sj-site-header {
	background:
		radial-gradient(1200px 300px at 85% -80px, rgba(213, 159, 15, 0.14), transparent 60%),
		linear-gradient(180deg, #041a38 0%, var(--sj-navy) 70%, #01152e 100%);
	border-bottom: 1px solid rgba(213, 159, 15, 0.28);
	box-shadow: 0 6px 24px rgba(0, 10, 30, 0.35);
}

.sj-header-inner {
	display: block;
	padding: 10px clamp(12px, 3vw, 28px) 12px;
	max-width: 1200px;
	margin-inline: auto;
}

/* --- Row 1: brand + unit identity. --- */

.sj-header-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-block: 6px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sj-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }

.sj-brand .sj-logo-img {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.10);
	padding: 5px;
	box-sizing: border-box;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	transition: transform 0.18s ease;
}

.sj-brand:hover .sj-logo-img { transform: translateY(-1px) scale(1.03); }

.sj-site-title { font-size: 21px; font-weight: 800; letter-spacing: 0.01em; }

.sj-site-tag {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.72);
	letter-spacing: 0.03em;
}

.sj-unit-lockup {
	border-inline-start: 0;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 14px;
	backdrop-filter: blur(4px);
}

.sj-unit-emblem {
	width: 38px;
	background: #fff;
	border-radius: 999px;
	padding: 3px;
	box-sizing: content-box;
	box-shadow: 0 0 0 2px rgba(213, 159, 15, 0.55);
}

.sj-unit-he { font-size: 14.5px; }

/* --- Row 2: nav pills + actions cluster. --- */

.sj-header-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 10px;
}

.sj-main-nav ul, .sj-main-nav { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }

.sj-main-nav a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	position: relative;
	transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sj-main-nav a:hover {
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
	transform: translateY(-1px);
}

.sj-main-nav a:focus-visible {
	outline: 2px solid var(--sj-gold);
	outline-offset: 2px;
}

.sj-main-nav .current-menu-item > a,
.sj-main-nav a[aria-current="page"] {
	background: rgba(213, 159, 15, 0.16);
	color: var(--sj-gold);
	box-shadow: inset 0 0 0 1px rgba(213, 159, 15, 0.35);
}

/* Actions cluster: bell + avatar in one tight group, flush to the end. */

.sj-header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-inline-start: auto;
	flex-shrink: 0;
}

.sj-header-actions .sj-bell,
.sj-header-actions .sj-avatar-menu {
	margin: 0;
}

.sj-a11y-toggle {
	background: linear-gradient(135deg, var(--sj-gold), #b8890c);
	color: #06213f;
	border: 0;
	border-radius: 999px;
	padding: 9px 18px;
	font-weight: 800;
	font-size: 14.5px;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(213, 159, 15, 0.35);
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.sj-a11y-toggle:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(213, 159, 15, 0.5); }

.sj-a11y-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sj-bell > summary {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 19px;
	transition: background 0.16s ease, transform 0.16s ease;
}

.sj-bell > summary:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-1px); }

.sj-bell[open] > summary { background: rgba(213, 159, 15, 0.2); }

.sj-avatar-menu > summary {
	display: inline-grid;
	place-items: center;
	transition: transform 0.16s ease;
}

.sj-avatar-menu > summary:hover { transform: translateY(-1px); }

.sj-avatar-menu .sj-avatar-img,
.sj-avatar-menu > summary img {
	width: 42px;
	height: 42px;
}

/* Mobile: tighten and center. */
@media (max-width: 640px) {
	.sj-header-top { justify-content: center; text-align: center; }
	.sj-header-bottom { justify-content: center; }
	.sj-main-nav { justify-content: center; }
	.sj-main-nav a { padding: 8px 13px; font-size: 14.5px; }
	.sj-site-title { font-size: 19px; }
}

/* Color anchors — independent of legacy rules. */
.sj-brand, .sj-site-title { color: #fff; }
.sj-main-nav a { color: rgba(255, 255, 255, 0.88); }
.sj-header-top .sj-unit-he { color: #fff; }

@media (max-width: 640px) {
	.sj-main-nav { width: 100%; row-gap: 6px; }
	.sj-header-bottom { row-gap: 10px; }
}


/* One row, always: brand and unit card sit next to each other and
   shrink instead of stacking. */
.sj-header-top {
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.sj-brand { flex: 0 0 auto; min-width: 0; }

.sj-unit-lockup {
	flex: 0 1 auto;
	min-width: 0;
	margin-inline-start: 4px;
}

.sj-unit-mark {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--sj-gold), #b8890c);
	color: #06213f;
	font-size: 17px;
	box-shadow: 0 0 0 2px rgba(213, 159, 15, 0.3);
	flex: 0 0 auto;
}

.sj-unit-words { min-width: 0; }

.sj-unit-he, .sj-unit-en { white-space: nowrap; }

@media (max-width: 640px) {
	.sj-header-top { justify-content: center; gap: 10px; }
	.sj-site-title { font-size: 17px; }
	.sj-site-tag { font-size: 10.5px; }
	.sj-brand .sj-logo-img { width: 38px; height: 38px; }
	.sj-unit-lockup { padding: 5px 10px; gap: 7px; }
	.sj-unit-he { font-size: 12.5px; }
	.sj-unit-en { font-size: 8px; letter-spacing: 0.16em; }
	.sj-unit-mark { width: 28px; height: 28px; font-size: 14px; }
}

@media (max-width: 380px) {
	.sj-unit-en { display: none; }
}


.sj-unit-lockup { padding: 8px 14px; }

.sj-unit-logo-img {
	display: block;
	height: 54px;
	width: auto;
	max-width: min(190px, 42vw);
	object-fit: contain;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

@media (max-width: 640px) {
	.sj-unit-logo-img { height: 44px; }
	.sj-unit-lockup { padding: 6px 10px; }
}


.sj-site-footer {
	background:
		radial-gradient(700px 200px at 50% 120%, rgba(213, 159, 15, 0.12), transparent 65%),
		linear-gradient(180deg, #01152e, #041a38);
	border-top: 1px solid rgba(213, 159, 15, 0.3);
	padding: 28px 16px 22px;
	margin-top: 48px;
}

.sj-footer-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.sj-footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 16px;
}

.sj-footer-brand strong { font-weight: 800; }

.sj-footer-logo {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.1);
	padding: 4px;
	box-sizing: border-box;
}

.sj-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 6px;
	max-width: 640px;
}

.sj-footer-links a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 14px;
	transition: background 0.15s ease, color 0.15s ease;
}

.sj-footer-links a:hover,
.sj-footer-links a:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	color: var(--sj-gold);
	text-decoration: none;
}

.sj-footer-links a:focus-visible { outline: 2px solid var(--sj-gold); outline-offset: 2px; }

/* Hide the old dot separators the links helper prints. */
.sj-footer-links { font-size: 0; }
.sj-footer-links a { font-size: 14px; }

.sj-footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 10px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13.5px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 14px;
	width: min(720px, 100%);
}

.sj-footer-credit { display: none; } /* Legacy rule retired. */

@media (max-width: 480px) {
	.sj-footer-sep { display: none; }
	.sj-footer-legal { flex-direction: column; gap: 4px; }
}


/* Secondary buttons keep dark-on-light on hover, everywhere. */
.sj-btn.sj-btn-secondary:hover,
.sj-btn.sj-btn-secondary:focus-visible {
	background: #dbe3ee !important;
	color: #002147 !important;
}

/* Dark-surface links never fall back to the blue base link color. */
.sj-site-header a:hover, .sj-site-header a:focus-visible,
.sj-site-footer a:hover, .sj-site-footer a:focus-visible,
.sj-ticker a:hover, .sj-ticker a:focus-visible {
	color: var(--sj-gold);
}


.sj-unit-lockup {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Dark navy card wraps the safety-unit logo — masks noise, frames the emblem. */
.sj-unit-logo-card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.04);
	border-radius: 10px;
	padding: 6px 14px;
	border: 1px solid rgba(255,255,255,0.12);
}

.sj-unit-logo-img {
	display: block;
	width: 148px;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

.sj-technion-logo-img {
	display: block;
	width: 124px;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}


.sj-ticker { display: flex; align-items: center; }

.sj-ticker-toggle {
	flex: 0 0 auto;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 0;
	border-radius: 999px;
	width: 30px;
	height: 30px;
	margin-inline: 10px 4px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
}

.sj-ticker-toggle:hover { background: rgba(255, 255, 255, 0.22); }
.sj-ticker-toggle:focus-visible { outline: 2px solid var(--sj-gold); outline-offset: 2px; }

.sj-ticker.sj-ticker-paused .sj-ticker-track { animation-play-state: paused !important; }

/* Explicit user PLAY overrides both prefers-reduced-motion and the
   accessibility no-motion mode — a direct request wins. */
.sj-ticker.sj-ticker-usergo .sj-ticker-track,
.sj-a11y-no-motion .sj-ticker.sj-ticker-usergo .sj-ticker-track {
	animation: sj-ticker-scroll 30s linear infinite !important;
}

@media (prefers-reduced-motion: reduce) {
	.sj-ticker.sj-ticker-usergo .sj-ticker-track { flex-wrap: nowrap; width: max-content; }
	.sj-ticker.sj-ticker-usergo .sj-ticker-row { white-space: nowrap; flex-wrap: nowrap; }
	.sj-ticker.sj-ticker-usergo .sj-ticker-row[aria-hidden="true"] { display: flex; }
}

/* ============================================================
   SafeJob Theme v1.16.12 — Animations & User Theme Color
   ============================================================ */

/* --- Animated briefcase SVG logo --- */
.sj-logo-anim { position: relative; display: flex; align-items: center; justify-content: center; }

/* Docs hidden by default */
.sj-doc { opacity: 0; transform-origin: bottom center; }

/* Lid opens on hover */
.sj-brand:hover .sj-bc-lid {
	animation: sj-lid-open 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes sj-lid-open {
	0%   { transform-origin: center bottom; transform: rotate(0deg) translateY(0); }
	40%  { transform: rotate(-28deg) translateY(-3px); }
	100% { transform: rotate(-32deg) translateY(-4px); }
}

/* Handle bobs */
.sj-brand:hover .sj-bc-handle {
	animation: sj-handle-bob 0.5s ease-in-out forwards;
}
@keyframes sj-handle-bob {
	0%,100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}

/* Documents fly out */
.sj-brand:hover .sj-doc-3 { animation: sj-doc-fly 0.5s 0.1s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.sj-brand:hover .sj-doc-1 { animation: sj-doc-fly 0.5s 0.18s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.sj-brand:hover .sj-doc-2 { animation: sj-doc-fly 0.5s 0.26s cubic-bezier(0.34,1.56,0.64,1) forwards; }

@keyframes sj-doc-fly {
	0%   { opacity: 0; transform: translateY(10px) scale(0.6) rotate(0deg); }
	40%  { opacity: 1; }
	70%  { transform: translateY(-22px) scale(1) rotate(-8deg); }
	100% { opacity: 1; transform: translateY(-18px) scale(1) rotate(-5deg); }
}

/* Briefcase gentle pulse when idle */
.sj-briefcase-svg {
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
	transition: filter 0.2s;
}
.sj-brand:hover .sj-briefcase-svg { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45)); }

/* --- Color picker pill --- */
.sj-color-pill-form { display: flex; align-items: center; margin-right: 6px; }
.sj-color-pill {
	width: 20px; height: 20px; padding: 0; border: 2px solid rgba(255,255,255,0.4);
	border-radius: 50%; cursor: pointer; background: none;
	transition: transform 0.2s, border-color 0.2s;
}
.sj-color-pill:hover { transform: scale(1.3); border-color: #fff; }

/* --- Card hover animations --- */
.sj-card {
	transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.sj-card:hover {
	box-shadow: 0 6px 24px rgba(10,37,69,0.12);
	transform: translateY(-1px);
}

/* Quick-cards on front page */
.sj-quick-card {
	transition: box-shadow 0.22s ease, transform 0.18s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
}
.sj-quick-card:hover {
	transform: translateY(-5px) scale(1.02);
	box-shadow: 0 12px 32px rgba(10,37,69,0.18);
}

/* Nav links */
.sj-main-nav a {
	transition: background 0.15s ease, color 0.15s;
}

/* Buttons ripple */
.sj-btn {
	position: relative; overflow: hidden;
	transition: filter 0.15s, transform 0.1s;
}
.sj-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.sj-btn:active { transform: translateY(0); filter: brightness(0.95); }

/* Tabs animate */
.sj-tab-btn {
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}

/* Page entrance fade-in */
@keyframes sj-fade-in-up {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
.sj-main-content > * { animation: sj-fade-in-up 0.3s ease both; }
.sj-main-content > *:nth-child(2) { animation-delay: 0.05s; }
.sj-main-content > *:nth-child(3) { animation-delay: 0.10s; }
.sj-main-content > *:nth-child(4) { animation-delay: 0.15s; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}



/* Color reset button */
.sj-color-reset {
	background: none; border: 0; color: rgba(255,255,255,0.55);
	font-size: 15px; cursor: pointer; padding: 0 2px; margin-right: 2px;
	line-height: 1; transition: color 0.15s, transform 0.2s;
	vertical-align: middle;
}
.sj-color-reset:hover { color: #fff; transform: rotate(-180deg); }

/* ============================================================
   Header brand area — 1.16.14
   ============================================================ */

/* Brand area wraps the link + color picker together */
.sj-header-brand-area {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Color picker pill — subtle, non-intrusive */
.sj-color-pill-form {
	display: flex;
	align-items: center;
	gap: 4px;
	line-height: 1;
}
.sj-color-pill {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 2px solid rgba(255,255,255,0.35);
	border-radius: 50%;
	cursor: pointer;
	background: none;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
	-webkit-appearance: none;
	appearance: none;
	overflow: hidden;
}
.sj-color-pill::-webkit-color-swatch-wrapper { padding: 0; }
.sj-color-pill::-webkit-color-swatch { border: none; border-radius: 50%; }
.sj-color-pill::-moz-color-swatch { border: none; border-radius: 50%; }
.sj-color-pill:hover {
	transform: scale(1.3);
	border-color: rgba(255,255,255,0.7);
	box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}

/* Reset button — only shows when custom color active */
.sj-color-reset {
	background: none;
	border: 0;
	color: rgba(255,255,255,0.45);
	font-size: 14px;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: color 0.15s, transform 0.25s ease;
}
.sj-color-reset:hover {
	color: #fff;
	transform: rotate(-180deg);
}

/* Two-logo card: single rounded box, no double border */
.sj-unit-lockup {
	display: flex;
	align-items: center;
	gap: 0;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 12px;
	padding: 6px 12px;
}
/* Remove individual card borders — lockup is the single container */
.sj-unit-lockup .sj-unit-logo-card {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
}
/* Divider between logos */
.sj-unit-lockup .sj-unit-logo-card + .sj-unit-logo-card {
	border-inline-start: 1px solid rgba(255,255,255,0.18);
	padding-inline-start: 12px;
	margin-inline-start: 12px;
}


/* ============================================================
   Unified Design System — 1.16.15
   Hero SVG logo + consistent animation targets
   ============================================================ */

/* Hero logo wrapper matches header */
.sj-hero-logo-wrap {
	flex-shrink: 0;
	filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
	transition: filter 0.2s;
}
.sj-hero-svg { display: block; }

/* Shield pops on hover inside hero */
.sj-hero-logo-wrap:hover .sj-bc-shield {
	animation: sj-shield-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes sj-shield-pop {
	0%   { transform-origin: center; transform: scale(1); }
	50%  { transform: scale(1.15); }
	100% { transform: scale(1.08); }
}

/* Briefcase body — subtle bob idle animation */
.sj-briefcase-svg {
	animation: sj-bob 4s ease-in-out infinite;
}
@keyframes sj-bob {
	0%, 100% { transform: translateY(0px); }
	50%       { transform: translateY(-3px); }
}
.sj-brand:hover .sj-briefcase-svg,
.sj-hero-logo-wrap:hover .sj-briefcase-svg { animation-play-state: paused; }

/* Lid lift on hover (shared by header and hero) */
.sj-brand:hover .sj-bc-lid,
.sj-hero-logo-wrap:hover .sj-bc-handle {
	animation: sj-handle-lift 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes sj-handle-lift {
	0%   { transform: translateY(0); }
	40%  { transform: translateY(-8px); }
	100% { transform: translateY(-6px); }
}

/* Doc float out on hover */
.sj-brand:hover .sj-doc-3,
.sj-hero-logo-wrap:hover .sj-doc-3 { animation: sj-doc-fly 0.5s 0.08s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.sj-brand:hover .sj-doc-1,
.sj-hero-logo-wrap:hover .sj-doc-1 { animation: sj-doc-fly 0.5s 0.16s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.sj-brand:hover .sj-doc-2,
.sj-hero-logo-wrap:hover .sj-doc-2 { animation: sj-doc-fly 0.5s 0.24s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* Consistent card system */
.sj-card {
	border-radius: 12px;
	border: 1px solid #e4eaf2;
}
.sj-card:hover {
	border-color: #c8d8ee;
}