/**
 * EventStaff App theme - assets/css/theme.css
 *
 * EXTENDS the plugin's existing design tokens (defined on .esm-wrap
 * in the plugin's own esm-frontend.css: --esm-color-primary,
 * --esm-color-success, --esm-color-error, --esm-color-warning,
 * --esm-color-border, --esm-color-text, --esm-color-muted,
 * --esm-radius) - never redefines them at the same selector, so no
 * matter which stylesheet loads first, both resolve consistently.
 * This file adds a few THEME-level tokens on :root for things the
 * plugin's own design system has no opinion about (page-level
 * spacing, shadows, breakpoints-as-comments, app-shell sizing) and
 * mirrors the 3 color tokens onto :root so marketing-page content
 * OUTSIDE any .esm-wrap (hero sections, homepage, landing pages)
 * still uses the same brand colors.
 *
 * Mobile-first throughout: base rules target ~320-479px, then layer
 * up via min-width media queries. Verified at: 320, 375, 390, 430,
 * 768, 1024, 1440px - see the Phase B.5 report for the exact QA
 * notes per breakpoint/component.
 */

/* ==========================================================
   1. Design tokens (theme-level, layered on top of the plugin's)
   ========================================================== */

:root {
	--esm-color-primary: #1d4ed8;
	--esm-color-primary-dark: #1e3a8a;
	--esm-color-success: #15803d;
	--esm-color-success-bg: #dcfce7;
	--esm-color-error: #b91c1c;
	--esm-color-error-bg: #fee2e2;
	--esm-color-warning: #b45309;
	--esm-color-warning-bg: #fef3c7;
	--esm-color-border: #e2e8f0;
	--esm-color-text: #1e293b;
	--esm-color-muted: #64748b;
	--esm-radius: 10px;

	--esm-app-secondary: #0f172a;
	--esm-app-accent: #15803d;
	--esm-app-surface: #ffffff;
	--esm-app-bg: #f8fafc;
	--esm-app-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
	--esm-app-shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.10);
	--esm-app-header-height: 64px;
	--esm-app-bottom-nav-height: 60px;
	--esm-app-max-width: 1100px;
	--esm-app-content-max-width: 720px; /* matches the plugin's own .esm-wrap */
	--esm-app-touch-target: 44px; /* minimum comfortable tap target */
}

/* ==========================================================
   2. Reset / base - mobile-first, no horizontal scroll
   ========================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* v1.30.1: overflow-x: hidden (any value other than 'visible', on
	   ANY axis) makes an element a scroll/clipping container - and a
	   position:sticky descendant sticks relative to its nearest such
	   container, not necessarily the viewport. On html/body specifically,
	   several browsers (Safari especially) then only re-evaluate the
	   sticky element's position on an actual scroll/reflow event of that
	   container, rather than continuously - which looks exactly like
	   "the sticky header doesn't follow scrolling until I scroll it
	   manually" (the reported bug). overflow-x: clip prevents the same
	   horizontal overflow/scrollbar WITHOUT establishing that scroll
	   container, so position:sticky on .esm-site-header/.esm-app-topbar
	   works normally again. */
	overflow-x: clip;
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--esm-app-bg);
	color: var(--esm-color-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--esm-color-primary);
}

h1, h2, h3, h4 {
	color: var(--esm-app-secondary);
	line-height: 1.25;
	margin: 0 0 0.5em;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* Generic buttons reused across marketing + app (plugin already
   defines .esm-btn/.esm-btn-primary/.esm-btn-secondary inside
   .esm-wrap - these rules extend the SAME class names so a button
   looks identical whether it's inside plugin content or theme
   markup, never a second competing button style). */
.esm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	min-height: var(--esm-app-touch-target);
	border-radius: var(--esm-radius);
	border: 1px solid transparent;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

.esm-btn:active {
	transform: scale(0.98);
}

.esm-btn-primary {
	background: var(--esm-color-primary);
	color: #fff;
}

.esm-btn-primary:hover {
	background: var(--esm-color-primary-dark);
	color: #fff;
}

.esm-btn-secondary {
	background: #fff;
	color: var(--esm-color-text);
	border-color: var(--esm-color-border);
}

.esm-btn-large {
	padding: 14px 28px;
	font-size: 16px;
}

/* ==========================================================
   3. Marketing site header/footer (hidden entirely on App Screen)
   ========================================================== */

.esm-site-header {
	background: #fff;
	border-bottom: 1px solid var(--esm-color-border);
	position: sticky;
	top: 0;
	z-index: 50;
}

.esm-site-header-inner {
	max-width: var(--esm-app-max-width);
	margin: 0 auto;
	padding: 0 16px;
	height: var(--esm-app-header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* v1.8.0: the brand wordmark (legacy Latin wordmark) is Latin script, so it
	   reads more naturally pinned to the left edge even on an
	   otherwise-RTL site - row-reverse flips the whole header's visual
	   order (brand -> left, nav toggle + menu -> right) without
	   touching source order, on both mobile and desktop. */
	flex-direction: row-reverse;
}

.esm-site-brand {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	/* v1.28.0 fix: this block sits at the LEFT edge of the header (see
	   the row-reverse comment above), but on an RTL page align-items:
	   flex-start means "align to the inline-start edge", which in RTL
	   is the RIGHT side of this box - so the logo and the (often wider)
	   tagline line were each hugging the box's right edge instead of
	   the page's actual left edge, making them look mismatched/offset
	   from one another. flex-end is the fix: it's the inline-END edge,
	   which in RTL is the LEFT side - true left alignment. */
	align-items: flex-end;
	justify-content: center;
	min-width: 0;
	line-height: 1.15;
}

.esm-site-brand-text {
	font-weight: 700;
	font-size: 18px;
	color: var(--esm-app-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
}

/* v1.7.0: when the site title is the legacy Latin wordmark, header.php splits it
   into two spans for readability - "JEMA" heavier/bold, "PO" lighter -
   instead of one flat weight for the whole word. Any other site title
   renders as plain text (.esm-site-brand-text alone), unaffected. */
.esm-brand-strong {
	font-weight: 800;
}

.esm-brand-light {
	font-weight: 500;
}

/* v1.25.0: small tagline under the brand name/logo - Customizer-
   editable, hidden entirely when left empty. */
.esm-site-brand-tagline {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--esm-color-muted, #64748b);
	white-space: nowrap;
	text-transform: uppercase;
}

.esm-site-brand img {
	max-height: 44px;
	width: auto;
}

.esm-nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: var(--esm-app-touch-target);
	height: var(--esm-app-touch-target);
	background: transparent;
	border: 1px solid var(--esm-color-border);
	border-radius: var(--esm-radius);
	cursor: pointer;
	padding: 0;
}

.esm-nav-toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	margin: 0 auto;
	background: var(--esm-app-secondary);
}

.esm-site-nav {
	position: fixed;
	inset: var(--esm-app-header-height) 0 0 0;
	background: #fff;
	padding: 16px;
	overflow-y: auto;
	transform: translateY(-8px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.esm-site-nav.esm-nav-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.esm-site-nav-list,
.esm-site-nav ul {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.esm-site-nav-list li,
.esm-site-nav ul li {
	border-bottom: 1px solid var(--esm-color-border);
}

.esm-site-nav-list a,
.esm-site-nav ul a {
	display: block;
	padding: 14px 4px;
	text-decoration: none;
	color: var(--esm-color-text);
	font-weight: 600;
	min-height: var(--esm-app-touch-target);
}

.esm-site-nav-cta {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.esm-site-footer {
	background: var(--esm-app-secondary);
	color: #cbd5e1;
	margin-top: 48px;
}

/*
 * v1.6.0: mobile bottom nav on ordinary (marketing) pages - homepage,
 * jobs listing, etc. Rendered by footer.php via
 * esm_theme_render_app_nav('marketing'), reusing the plugin's own
 * .esm-bottom-nav classes. Unlike the App Screen version (which stays
 * sticky/inline since those pages already sit inside the app shell),
 * this needs `position: fixed` to act as a real persistent bottom bar
 * across a long marketing page - `position: sticky` alone would just
 * scroll past the hero/features/etc. and only "stick" once its own
 * position in the DOM (end of the page) scrolled into view. Hidden
 * entirely at desktop widths, where the full site header already
 * provides navigation.
 */
.esm-bottom-nav-marketing {
	margin-top: 0;
	box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
}

@media (max-width: 639px) {
	.esm-bottom-nav-marketing {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 40;
	}

	body.esm-has-marketing-bottom-nav {
		padding-bottom: 64px;
	}
}

@media (min-width: 640px) {
	.esm-bottom-nav-marketing {
		display: none;
	}
}

.esm-site-footer-inner {
	max-width: var(--esm-app-max-width);
	margin: 0 auto;
	padding: 32px 16px;
}

.esm-site-footer a {
	color: #e2e8f0;
}

.esm-site-footer-brand strong {
	color: #fff;
	font-size: 18px;
}

.esm-site-footer-widgets {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 20px 0;
}

.esm-site-footer-copy {
	font-size: 13px;
	opacity: 0.7;
	margin-top: 16px;
}

@media (min-width: 768px) {
	.esm-nav-toggle {
		display: none;
	}

	.esm-site-nav {
		position: static;
		inset: auto;
		padding: 0;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		display: flex;
		align-items: center;
		gap: 20px;
		overflow: visible;
	}

	.esm-site-nav-list,
	.esm-site-nav ul {
		display: flex;
		gap: 20px;
		margin: 0;
	}

	.esm-site-nav-list li,
	.esm-site-nav ul li {
		border-bottom: none;
	}

	.esm-site-nav-list a,
	.esm-site-nav ul a {
		padding: 8px 0;
	}

	.esm-site-nav-cta {
		flex-direction: row;
	}

	.esm-site-footer-widgets {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================
   4. App shell - topbar (desktop) + bottom nav (mobile)
   ========================================================== */

.esm-app-topbar {
	display: none; /* mobile-first: hidden by default, shown from 768px - bottom nav covers mobile */
}

.esm-app-main {
	max-width: var(--esm-app-content-max-width);
	margin: 0 auto;
	padding: 16px 16px calc(var(--esm-app-bottom-nav-height) + 24px);
	min-height: 60vh;
}

/* Reuses the plugin's OWN .esm-bottom-nav/.esm-bottom-nav-item/
   .esm-bottom-nav-active classes (defined in the plugin's
   esm-frontend.css) - only ADDS the icon/label layout and fixed-
   position/safe-area handling on top; never redefines background/
   border/colors the plugin already set. */
.esm-bottom-nav.esm-app-nav {
	position: fixed;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 40;
	padding-bottom: env(safe-area-inset-bottom, 0);
	box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
}

.esm-bottom-nav.esm-app-nav .esm-bottom-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-height: var(--esm-app-touch-target);
	justify-content: center;
}

.esm-app-nav-icon-wrap {
	position: relative;
	display: inline-flex;
}

.esm-app-nav-icon {
	font-size: 20px;
	line-height: 1;
}

.esm-app-nav-label {
	font-size: 11px;
}

/* v1.8.0: unread-notifications badge - a small red pill on the bell
   icon (mobile bottom nav) or inline next to its label (desktop
   topbar). Count comes from the plugin's own ESM_Notification_Center -
   see esm_theme_unread_notifications_count() in inc/navigation.php. */
.esm-nav-badge {
	position: absolute;
	top: -4px;
	left: -10px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: #dc2626;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.esm-nav-badge-inline {
	position: static;
	display: inline-block;
	margin-inline-start: 4px;
	vertical-align: middle;
}

/* The plugin's own inline 2-item nav (still present in its dashboard
   templates for sites NOT using this theme) is superseded here by
   the complete, role-aware nav above - hidden rather than removed
   from the plugin, so the plugin stays fully self-sufficient without
   this theme. */
.esm-wrap .esm-bottom-nav:not(.esm-app-nav) {
	display: none;
}

@media (min-width: 768px) {
	.esm-app-topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		max-width: var(--esm-app-max-width);
		margin: 0 auto;
		padding: 0 16px;
		height: var(--esm-app-header-height);
		border-bottom: 1px solid var(--esm-color-border);
		background: #fff;
		position: sticky;
		top: 0;
		z-index: 50;
	}

	.esm-app-topbar-brand {
		text-decoration: none;
		font-weight: 700;
		color: var(--esm-app-secondary);
	}

	.esm-app-topbar-nav {
		display: flex;
		gap: 4px;
		flex: 1;
		justify-content: center;
	}

	.esm-app-topbar-link {
		padding: 10px 14px;
		border-radius: var(--esm-radius);
		text-decoration: none;
		color: var(--esm-color-muted);
		font-weight: 600;
		font-size: 14px;
	}

	.esm-app-topbar-link:hover {
		background: var(--esm-app-bg);
	}

	.esm-app-topbar-link-active {
		color: var(--esm-color-primary);
		background: var(--esm-color-info-bg, #dbeafe);
	}

	.esm-app-topbar-logout {
		font-size: 14px;
		color: var(--esm-color-muted);
		text-decoration: none;
	}

	/* Bottom nav only needed on mobile - the topbar above covers desktop. */
	.esm-bottom-nav.esm-app-nav {
		display: none;
	}

	.esm-app-main {
		padding-bottom: 32px;
	}
}

@media (min-width: 1024px) {
	.esm-app-main {
		max-width: 820px;
	}
}

/* ==========================================================
   5. Default/Full Width content wrappers
   ========================================================== */

.esm-content-wrap {
	max-width: var(--esm-app-max-width);
	margin: 0 auto;
	padding: 32px 16px;
}

.esm-content-wrap-fullwidth {
	max-width: none;
	padding: 0;
}

.esm-page-title {
	font-size: 26px;
	margin-bottom: 20px;
}

.esm-404 {
	text-align: center;
	padding-top: 56px;
	padding-bottom: 56px;
}

.esm-404-cta {
	max-width: 340px;
	margin: 20px auto 0;
}

@media (min-width: 768px) {
	.esm-content-wrap {
		padding: 48px 24px;
	}

	.esm-page-title {
		font-size: 32px;
	}
}

/* ==========================================================
   6. Landing page (minimal shell)
   ========================================================== */

.esm-landing-minimal-header {
	padding: 16px;
	border-bottom: 1px solid var(--esm-color-border);
	background: #fff;
}

.esm-landing-main {
	max-width: var(--esm-app-max-width);
	margin: 0 auto;
	padding: 0;
}

.esm-landing-minimal-footer {
	text-align: center;
	padding: 24px 16px;
	color: var(--esm-color-muted);
	font-size: 13px;
}

/* ==========================================================
   7. Homepage sections
   ========================================================== */

.esm-hero {
	background: linear-gradient(180deg, #eef2ff 0%, var(--esm-app-bg) 100%);
	padding: 48px 16px;
	text-align: center;
}

.esm-hero-inner {
	max-width: 760px;
	margin: 0 auto;
}

.esm-hero h1 {
	font-size: 30px;
}

.esm-hero-subtitle {
	font-size: 17px;
	color: var(--esm-color-muted);
	margin-bottom: 28px;
}

.esm-hero-cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}

.esm-hero-cta .esm-btn {
	width: 100%;
}

/* ==========================================================
   7b. Hero v3 - full-bleed background photo (v1.7.0)
   A single wide photo (real, uploaded by the site owner, or the
   bundled generic "bokeh event lights" image - see
   inc/customizer.php's esm_home_hero_bg_photo setting) behind
   centered white headline/subtitle/CTAs. Replaced the earlier
   photo-flanked v2 layout per a live design request.
   ========================================================== */

.esm-hero-v3 {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 56px 16px;
	text-align: center;
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.esm-hero-v3-inner {
	max-width: 720px;
	margin: 0 auto;
}

.esm-hero-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	padding: 5px 14px;
	margin-bottom: 14px;
}

.esm-hero-v3 h1 {
	font-size: 30px;
	line-height: 1.2;
	margin: 0 0 14px;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.esm-hero-v3 .esm-hero-subtitle {
	color: #f1f5f9;
}

.esm-hero-cta-pills {
	flex-direction: column;
}

.esm-hero-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
	width: 100%;
}

.esm-hero-pill:hover {
	transform: translateY(-2px);
}

.esm-hero-pill-orange {
	background: #f97316;
	color: #fff;
	box-shadow: 0 6px 16px rgba(249, 115, 22, 0.3);
}

.esm-hero-pill-blue {
	background: var(--esm-color-primary);
	color: #fff;
	box-shadow: 0 6px 16px rgba(29, 78, 216, 0.3);
}

/* Slim icon feature strip, shown right under the hero */
.esm-feature-strip {
	background: #fff;
	border-bottom: 1px solid var(--esm-color-border);
}

.esm-feature-strip-inner {
	padding: 20px 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.esm-feature-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--esm-color-muted);
	white-space: nowrap;
}

@media (min-width: 640px) {
	.esm-hero-cta-pills {
		flex-direction: row;
		justify-content: center;
	}

	.esm-hero-pill {
		width: auto;
	}
}

@media (min-width: 900px) {
	.esm-hero-v3 {
		min-height: 460px;
		padding: 72px 16px;
	}

	.esm-hero-v3 h1 {
		font-size: 44px;
	}
}

.esm-section-inner {
	max-width: var(--esm-app-max-width);
	margin: 0 auto;
	padding: 40px 16px;
}

.esm-how-it-works h2,
.esm-benefits h2,
.esm-jobs-preview h2,
.esm-connector h2,
.esm-final-cta h2 {
	text-align: center;
	font-size: 24px;
	margin-bottom: 12px;
}

/* Culinary "connector" visual - two nodes (worker / employer) meeting
   at a handshake hub, each stating the problem the other side solves.
   Deliberately CSS/emoji based rather than a hand-drawn SVG, so it
   renders crisply at any size with no image asset to maintain, and
   reuses the theme's own card/color tokens rather than introducing a
   parallel visual language.

   v1.23.0 visual pass: the section now reads as its own "landing page
   slab" rather than a plain white block between two others - a
   layered background (base gradient + two soft radial color blobs,
   one per side's brand color, kept behind everything via z-index so
   they never interfere with text contrast), nicer elevated cards with
   a gradient top accent and an icon badge instead of a bare emoji, a
   glowing hub, and (from 768px up, once the layout is the 3-column
   worker/hub/employer row) a faint connecting line running behind the
   three grid items so the "meeting in the middle" reads visually, not
   just via the arrow glyphs. Mobile-first: single column below
   768px, the arrows stay horizontal throughout (still legible as
   small flanking accents on the stacked layout, and consistent with
   how they read once the layout goes 3-column). */
.esm-connector {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #fff7ed 0%, var(--esm-app-bg) 100%);
}

.esm-connector::before,
.esm-connector::after {
	content: "";
	position: absolute;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.16;
	pointer-events: none;
	z-index: 0;
}

.esm-connector::before {
	top: -120px;
	inset-inline-start: -100px;
	background: var(--esm-color-primary);
}

.esm-connector::after {
	bottom: -120px;
	inset-inline-end: -100px;
	background: #ea580c;
}

.esm-connector-inner {
	position: relative;
	z-index: 1;
}

.esm-connector-subtitle {
	text-align: center;
	color: var(--esm-color-muted);
	max-width: 620px;
	margin: 0 auto 28px;
}

.esm-connector-diagram {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: center;
}

.esm-connector-node {
	position: relative;
	background: var(--esm-app-surface);
	border-radius: 16px;
	padding: 26px 20px 22px;
	text-align: center;
	box-shadow: var(--esm-app-shadow-lg);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.esm-connector-node::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 5px;
	border-radius: 16px 16px 0 0;
}

.esm-connector-node:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
}

.esm-connector-node h3 {
	margin: 4px 0 10px;
}

.esm-connector-quote {
	color: var(--esm-color-muted);
	font-size: 14px;
	font-style: italic;
	line-height: 1.6;
	margin: 0;
}

.esm-connector-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	font-size: 30px;
	margin-bottom: 6px;
}

.esm-connector-node-worker::before {
	background: linear-gradient(90deg, var(--esm-color-primary), var(--esm-color-primary-dark));
}

.esm-connector-node-worker .esm-connector-icon {
	background: rgba(29, 78, 216, 0.1);
}

.esm-connector-node-employer::before {
	background: linear-gradient(90deg, #ea580c, #c2410c);
}

.esm-connector-node-employer .esm-connector-icon {
	background: rgba(234, 88, 12, 0.1);
}

.esm-connector-hub {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 4px 0;
}

.esm-connector-hub-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--esm-app-surface);
	border: 2px dashed #ea580c;
	box-shadow: 0 0 0 8px rgba(234, 88, 12, 0.08), var(--esm-app-shadow);
	font-size: 24px;
}

.esm-connector-hub-arrow {
	font-size: 20px;
	color: #ea580c;
}

.esm-marketplace-embed .esm-connector-subtitle {
	margin-bottom: 20px;
}

.esm-steps-grid,
.esm-benefits-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.esm-step,
.esm-benefit-card {
	background: #fff;
	border: 1px solid var(--esm-color-border);
	border-radius: var(--esm-radius);
	padding: 20px;
	box-shadow: var(--esm-app-shadow);
}

.esm-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--esm-color-primary);
	color: #fff;
	font-weight: 700;
	margin-bottom: 10px;
}

.esm-benefit-card ul {
	margin: 0;
	padding-inline-start: 20px;
}

.esm-benefit-card li {
	margin-bottom: 8px;
}

.esm-final-cta {
	background: var(--esm-app-secondary);
	text-align: center;
}

.esm-final-cta h2 {
	color: #fff;
}

@media (min-width: 640px) {
	.esm-hero-cta {
		flex-direction: row;
		justify-content: center;
	}

	.esm-hero-cta .esm-btn {
		width: auto;
	}
}

@media (min-width: 768px) {
	/* .esm-hero-v3 (the current hero) sets its own, larger 900px
	   breakpoint above - these two rules apply only to the plain
	   .esm-hero fallback (no longer used by the default template, kept
	   only in case something else still renders the older markup). */
	.esm-hero:not(.esm-hero-v3) {
		padding: 72px 16px;
	}

	.esm-hero:not(.esm-hero-v3) h1 {
		font-size: 40px;
	}

	.esm-steps-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.esm-benefits-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.esm-connector-diagram {
		grid-template-columns: 1fr auto 1fr;
		gap: 24px;
	}

	.esm-connector-diagram::before {
		content: "";
		position: absolute;
		top: 50%;
		inset-inline: 12%;
		height: 2px;
		background: linear-gradient(90deg, var(--esm-color-primary), #ea580c);
		opacity: 0.18;
		z-index: 0;
	}
}

/* ==========================================================
   8. Scoped app CSS guard - never bleed into Elementor/other content.
   Everything above that targets marketing/app-shell structure only
   ever matches this theme's OWN class names (esm-site-*, esm-app-*,
   esm-hero, esm-benefit-card, etc.) - never a bare element selector
   like `section` or `.elementor-*`, so an Elementor-built page is
   never affected by this stylesheet.
   ========================================================== */

/* ==========================================================
   9. Forms, tables, modals - long Hebrew text safety
   ========================================================== */

table {
	width: 100%;
	border-collapse: collapse;
}

@media (max-width: 767px) {
	/* Any wide table (e.g. inside plugin admin-style markup reused on
	   the front end) scrolls horizontally WITHIN itself instead of
	   breaking the page layout - the single sanctioned exception to
	   "no horizontal scroll", scoped to the table only. */
	.esm-content-wrap table,
	.esm-app-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Long, unbroken Hebrew strings (e.g. a long business/job title) wrap
   instead of overflowing their container. */
.esm-app-content,
.esm-content-wrap {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Modal/dialog safety net, in case any current or future plugin
   markup uses a `.esm-modal` convention - centered, capped width,
   scrollable if content is taller than the viewport, never wider
   than the screen. */
.esm-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 100;
	padding: 0;
}

.esm-modal {
	background: #fff;
	border-radius: var(--esm-radius) var(--esm-radius) 0 0;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 20px;
	box-shadow: var(--esm-app-shadow-lg);
}

@media (min-width: 640px) {
	.esm-modal-overlay {
		align-items: center;
		padding: 16px;
	}

	.esm-modal {
		border-radius: var(--esm-radius);
		max-width: 480px;
	}
}

/* v1.28.0: minimal "embed" shell (?esm_embed=1 - see esm_theme_is_embed_screen())
   for pages meant to be shown inside an <iframe> on another page (e.g.
   the terms-of-service page embedded in the registration form) - no
   header/nav/footer, just readable padding around the content. */
.esm-embed-main {
	max-width: 720px;
	margin: 0 auto;
	padding: 16px 20px 32px;
}

/* v1.30.0: the Terms of Service page is deliberately dense/small - the
   full legal text stays present and scrollable, but small enough that
   it reads as long/formal rather than an inviting quick read. Scoped to
   .esm-terms-page (see esm_theme_body_classes()) so it never affects any
   other page's content, and applies equally whether the page is opened
   directly or shown inside the registration iframe (embed mode still
   outputs body_class()). */
.esm-terms-page .esm-page-content,
.esm-terms-page #esm-embed-main {
	font-size: 12px;
	line-height: 1.35;
	color: #4a4a4a;
}

.esm-terms-page .esm-page-content h1,
.esm-terms-page #esm-embed-main h1 {
	font-size: 18px;
	margin: 0.6em 0 0.4em;
}

.esm-terms-page .esm-page-content h2,
.esm-terms-page #esm-embed-main h2 {
	font-size: 14px;
	margin: 1em 0 0.3em;
}

.esm-terms-page .esm-page-content h3,
.esm-terms-page #esm-embed-main h3 {
	font-size: 12.5px;
	margin: 0.7em 0 0.2em;
	font-weight: 700;
}

.esm-terms-page .esm-page-content p,
.esm-terms-page .esm-page-content li,
.esm-terms-page #esm-embed-main p,
.esm-terms-page #esm-embed-main li {
	font-size: 12px;
	line-height: 1.35;
	margin: 0.25em 0;
}

.esm-terms-page .esm-page-content .esm-terms-consent-line,
.esm-terms-page #esm-embed-main .esm-terms-consent-line {
	font-size: 13px;
	margin-top: 1em;
}

.esm-terms-page .esm-page-content hr,
.esm-terms-page #esm-embed-main hr {
	margin: 0.8em 0;
	opacity: 0.4;
}

/* Also drop the page-title h1 to a matching small size on this page
   specifically (the theme normally renders it large via .esm-page-title). */
.esm-terms-page .esm-page-title {
	font-size: 18px;
}


/* v1.11.2 help/support navigation — compact, visible and touch-friendly. */
.esm-app-help-links{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.esm-app-help-links a{display:inline-flex;align-items:center;flex-direction:row-reverse;gap:6px;min-height:38px;padding:8px 12px;border:1px solid #dbe3ef;border-radius:999px;background:#fff;color:#334155;font-size:13px;font-weight:800;text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:.16s ease}
.esm-app-help-links a:hover,.esm-app-help-links a:focus-visible{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8;transform:translateY(-1px)}
.esm-mobile-assistance{display:none}
@media(max-width:767px){
 .esm-mobile-assistance{display:flex;position:fixed;z-index:39;left:12px;bottom:calc(var(--esm-app-bottom-nav-height, 76px) + 10px + env(safe-area-inset-bottom, 0px));direction:rtl;gap:6px;padding:5px;border:1px solid #dbe3ef;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 8px 24px rgba(15,23,42,.14);backdrop-filter:blur(8px)}
 .esm-mobile-assistance-link{display:flex;align-items:center;flex-direction:row-reverse;gap:5px;min-height:38px;padding:7px 10px;border-radius:11px;color:#334155;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap}
 .esm-mobile-assistance-link:first-child{background:#eff6ff;color:#1d4ed8}
 .esm-mobile-assistance-link:active{transform:scale(.98)}
 .esm-assistance-icon{font-size:16px;line-height:1}
}

/* v1.11.3: ensure mobile assistance is visible above bottom navigation on all app screens. */
@media(max-width:767px){
 body.esm-app-screen .esm-mobile-assistance, body.eventstaff-app .esm-mobile-assistance, .esm-mobile-assistance{display:flex!important;visibility:visible!important;opacity:1!important;right:12px;left:auto;bottom:calc(82px + env(safe-area-inset-bottom, 0px));}
}


/* v1.11.4: assistance belongs to the mobile bottom navigation itself.
   This avoids a second independently responsive/fixed component. */
.esm-bottom-assistance{display:none}
@media(max-width:767px){
 .esm-bottom-nav.esm-app-nav{overflow:visible}
 .esm-bottom-nav.esm-app-nav .esm-bottom-assistance{display:flex;position:absolute;right:12px;bottom:calc(100% + 8px);gap:6px;direction:rtl;padding:5px;border:1px solid #dbe3ef;border-radius:15px;background:rgba(255,255,255,.97);box-shadow:0 8px 24px rgba(15,23,42,.14);backdrop-filter:blur(8px);z-index:2}
 .esm-bottom-assistance a{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:7px 10px;border-radius:10px;color:#334155;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap}
 .esm-bottom-assistance a:first-child{background:#eff6ff;color:#1d4ed8}
}


/* v1.11.5 — one coherent authenticated app shell on every app page. */
.esm-bottom-assistance,.esm-mobile-assistance{display:none!important}
.esm-app-topbar{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--esm-color-border);height:64px;padding:0 16px;align-items:center;justify-content:space-between;gap:12px}
.esm-app-topbar-brand{display:flex;align-items:center;min-width:0;text-decoration:none;font-weight:900;color:var(--esm-app-secondary)}
.esm-app-menu-toggle{display:flex;width:44px;height:44px;flex:0 0 44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:1px solid #dbe3ef;border-radius:12px;background:#fff;cursor:pointer}
.esm-app-menu-toggle span{display:block;width:22px;height:2px;background:#172033;border-radius:2px}
.esm-app-secondary-nav{display:none;position:fixed;top:72px;right:12px;left:12px;z-index:70;padding:10px;border:1px solid #dbe3ef;border-radius:16px;background:#fff;box-shadow:0 16px 40px rgba(15,23,42,.18);max-height:calc(100vh - 160px);overflow:auto}
.esm-app-secondary-nav.esm-app-secondary-open{display:block}
.esm-app-secondary-title{padding:8px 10px;color:#64748b;font-size:12px;font-weight:800}
.esm-app-secondary-nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 12px;border-radius:11px;color:#172033;text-decoration:none;font-weight:800}
.esm-app-secondary-nav a:hover,.esm-app-secondary-nav a:focus-visible{background:#f1f5f9;color:#1d4ed8}
.esm-secondary-label{flex:1;text-align:right}
.esm-app-main{padding-top:20px}
.esm-mobile-logout{display:none!important}
@media (max-width:767px){
 .esm-app-topbar{display:flex}
 .esm-app-topbar-nav{display:none!important}
 .esm-app-main{padding-top:20px}
}
@media (min-width:768px){
 .esm-app-menu-toggle{display:none}
 .esm-app-secondary-nav{display:none!important}
}


/* v1.11.6 — compact authenticated mobile header, RTL-aware controls and central brand tagline. */
.esm-app-topbar-brand{flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.05}
.esm-app-brand-name{font-size:16px;font-weight:900;letter-spacing:.01em}
.esm-app-brand-tagline{display:block;margin-top:4px;color:#64748b;font-size:10px;font-weight:600;white-space:nowrap}
@media (max-width:767px){
 .esm-app-topbar{height:58px;padding:0 12px;direction:ltr}
 .esm-app-menu-toggle{order:2;width:42px;height:42px;flex-basis:42px}
 .esm-app-topbar-brand{order:1;margin-right:auto;direction:rtl;text-align:left;align-items:flex-start;max-width:calc(100% - 58px)}
 .esm-app-topbar-brand .custom-logo-link{display:flex;max-height:26px}
 .esm-app-topbar-brand .custom-logo{width:auto;max-width:150px;max-height:26px;object-fit:contain}
 .esm-app-brand-name{font-size:15px}
 .esm-app-brand-tagline{font-size:9px;max-width:190px;overflow:hidden;text-overflow:ellipsis}
 .esm-app-secondary-nav{top:64px;right:10px;left:auto;width:min(330px,calc(100vw - 20px));direction:rtl}
 .esm-app-main{padding-top:8px}
 .esm-app-main > :first-child{margin-top:0!important}
}
/* v1.11.9 — worker/mobile shell parity, true left-aligned text brand, no duplicate profile action. */
@media (max-width:767px){
  .esm-app-topbar{padding-left:12px!important;padding-right:12px!important}
  .esm-app-topbar-brand{position:relative!important;left:0!important;justify-content:center!important;align-items:flex-start!important;text-align:left!important;direction:ltr!important}
  .esm-app-brand-name,.esm-app-brand-tagline{display:block!important;width:100%!important;text-align:left!important;align-self:flex-start!important;direction:rtl!important}
  .esm-app-main{padding-top:4px!important}
  .esm-app-content #esm-worker-home.esm-wrap{padding-top:0!important}
  .esm-app-content #esm-worker-home .esm-dashboard-header{margin-top:0!important;margin-bottom:8px!important;gap:6px!important}
  .esm-app-content #esm-worker-home .esm-dashboard-greeting{margin-top:0!important;margin-bottom:6px!important}
  .esm-app-content #esm-worker-home .esm-worker-home-hero{margin-top:4px!important}
}


/* v1.11.10 — definitive mobile app-shell geometry.
   Header controls are pinned to physical edges; app content starts immediately
   below the sticky header with only a deliberate 6px breathing space. */
@media (max-width:767px){
  .esm-app-topbar{position:sticky!important;top:0!important;height:58px!important;padding:0 12px!important;direction:ltr!important}
  .esm-app-topbar-brand{position:absolute!important;left:12px!important;right:auto!important;top:50%!important;transform:translateY(-50%)!important;width:max-content!important;max-width:calc(100% - 78px)!important;margin:0!important;display:flex!important;align-items:flex-start!important;text-align:left!important;direction:ltr!important}
  .esm-app-brand-name,.esm-app-brand-tagline{width:auto!important;max-width:100%!important;align-self:flex-start!important;text-align:left!important;direction:ltr!important}
  .esm-app-menu-toggle{position:absolute!important;right:12px!important;left:auto!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important}
  .esm-app-main{padding-top:0!important}
  .esm-app-content>.esm-wrap,.esm-app-content>#esm-worker-home.esm-wrap{padding-top:6px!important}
  .esm-app-content>#esm-worker-home .esm-dashboard-header{margin-top:0!important;margin-bottom:6px!important}
  .esm-app-content>#esm-worker-home .esm-dashboard-greeting{margin-top:0!important;margin-bottom:4px!important}
  .esm-app-content>#esm-worker-home .esm-worker-home-hero{margin-top:2px!important}
}


/* v1.11.15 — unified ExtraTake responsive brand asset. */
.esm-brand-logo{display:block;width:auto;height:auto;object-fit:contain;object-position:left center}
.esm-site-brand{flex:0 1 auto;align-items:flex-start;direction:ltr}
.esm-site-brand .esm-brand-logo-site{width:clamp(155px,14vw,185px);max-width:100%;max-height:42px}
.esm-app-topbar-brand{direction:ltr!important;line-height:1!important}
.esm-app-topbar-brand .esm-brand-logo-app{width:clamp(150px,14vw,180px);max-width:100%;max-height:40px}
@media (max-width: 767px){
 .esm-site-header-inner{height:58px;padding-left:10px;padding-right:10px}
 .esm-site-brand{max-width:calc(100% - 58px)}
 .esm-site-brand .esm-brand-logo-site{width:155px;max-width:100%;max-height:36px}
 .esm-app-topbar-brand .esm-brand-logo-app{width:152px;max-width:100%;max-height:36px}
}
@media (max-width: 380px){
 .esm-site-brand .esm-brand-logo-site{width:145px}
 .esm-app-topbar-brand .esm-brand-logo-app{width:142px}
}


/* v1.11.20 - signed-in role menu in the marketing header. */
.esm-site-nav-role a[aria-current="page"]{color:var(--esm-color-primary,#1d4ed8)}
.esm-site-nav-icon{display:inline-block;width:1.4em;text-align:center}
.esm-site-nav-secondary{border-top:2px solid var(--esm-color-border);padding-top:4px}
.esm-site-nav-secondary a{font-weight:500}
@media (min-width: 768px){
	.esm-site-nav-secondary{display:none!important}
	.esm-site-nav-role .esm-site-nav-icon{display:none}
}


/* v1.11.21 - smart member navigation.
   Phone: bottom bar = main destinations; hamburger = secondary only.
   Desktop: main destinations inline + "עוד" dropdown with the secondary items. */
.esm-app-menu-label{display:none}
.esm-nav-more{display:none;position:relative}
.esm-site-nav-secondary-title{display:none}
@media (max-width:767px){
  .esm-site-nav-role{display:none!important}
  .esm-site-nav-cta-authed{display:none!important}
  .esm-site-nav-secondary{border-top:0;padding-top:0}
  .esm-site-nav-secondary-title{display:block;padding:6px 0 2px;color:#64748b;font-size:12px;font-weight:800}
}
@media (min-width:768px){
  .esm-site-nav-secondary-wrap{display:none!important}
  .esm-nav-more{display:block}
  .esm-nav-more-toggle{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border:1px solid var(--esm-color-border,#dbe3ef);border-radius:10px;background:#fff;color:inherit;font:inherit;font-weight:700;cursor:pointer}
  .esm-nav-more-toggle:hover,.esm-nav-more-toggle[aria-expanded="true"]{border-color:var(--esm-color-primary,#1d4ed8);color:var(--esm-color-primary,#1d4ed8)}
  .esm-nav-more-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:80;display:block;min-width:240px;margin:0;padding:8px;list-style:none;border:1px solid #dbe3ef;border-radius:14px;background:#fff;box-shadow:0 16px 40px rgba(15,23,42,.16)}
  .esm-nav-more-panel[hidden]{display:none}
  .esm-site-nav .esm-nav-more-panel{flex-direction:column;gap:0}
  .esm-nav-more-panel li{border:0}
  .esm-nav-more-panel a{display:flex!important;align-items:center;gap:8px;padding:10px 12px!important;border-radius:10px;color:#172033;text-decoration:none;font-weight:600;white-space:nowrap}
  .esm-nav-more-panel a:hover,.esm-nav-more-panel a:focus-visible{background:#f1f5f9;color:var(--esm-color-primary,#1d4ed8)}
  /* App screens: the secondary drawer becomes the same "עוד" dropdown. */
  .esm-app-topbar .esm-app-menu-toggle{display:inline-flex!important;order:3;flex:0 0 auto;width:auto;height:40px;padding:0 12px;flex-direction:row;gap:6px;border-radius:10px}
  .esm-app-topbar .esm-app-menu-bar{display:none}
  .esm-app-topbar .esm-app-menu-label{display:inline;font-size:15px;font-weight:700;color:#172033}
  .esm-app-topbar .esm-app-topbar-nav{order:2;margin-right:auto}
  .esm-app-secondary-nav{display:none!important}
  .esm-app-secondary-nav.esm-app-secondary-open{display:block!important;top:60px;left:16px;right:auto;width:300px}
}

/* v1.11.21: footer brand logo on dark background */
.esm-brand-logo-dark{display:block;width:220px;max-width:70vw;height:auto}
.esm-footer-logo-link{display:inline-block;margin-bottom:8px}
.esm-site-footer .esm-legal-links{padding:12px 0 0;text-align:inherit;color:rgba(255,255,255,.75)}
.esm-site-footer .esm-legal-links a{color:#fff}