/**
 * 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%;
	overflow-x: hidden;
}

body {
	margin: 0;
	overflow-x: hidden;
	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;
}

.esm-site-brand {
	text-decoration: none;
	display: flex;
	align-items: center;
	min-width: 0;
}

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

.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;
}

.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 {
	font-size: 20px;
	line-height: 1;
}

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

/* 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;
}

@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%;
}

.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-final-cta h2 {
	text-align: center;
	font-size: 24px;
	margin-bottom: 28px;
}

.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 {
		padding: 72px 16px;
	}

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

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

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

/* ==========================================================
   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;
	}
}