/* ZeroPOS WordPress theme — WP overrides + mobile (loads AFTER theme.css) */

html, body { background: #05080f !important; color: #e2e8f0; margin: 0; padding: 0; min-height: 100vh; }
body.admin-bar #site-nav { top: 32px !important; }
@media (max-width: 782px) { body.admin-bar #site-nav { top: 46px !important; } }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 0; top: 0; background: #000; color: #fff; padding: 8px 16px; z-index: 10000; }

/* Fixed nav */
#site-nav {
	position: fixed !important;
	top: 0; left: 0; right: 0;
	z-index: 100;
	padding: 16px 0;
	background: rgba(5, 8, 16, 0.55);
	backdrop-filter: saturate(160%) blur(16px);
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	border-bottom: 1px solid rgba(255,255,255,0.04);
	transition: padding 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
#site-nav.is-scrolled { padding: 10px 0; background: rgba(5, 8, 16, 0.85); box-shadow: 0 6px 20px rgba(0,0,0,0.35); border-bottom: 1px solid rgba(255,255,255,0.06); }
#site-nav .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
#site-nav .nav-inner { display: flex !important; align-items: center; justify-content: space-between; gap: 20px; }

/* Logo */
#site-nav .logo { display: inline-flex !important; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #fff !important; text-decoration: none; }
#site-nav .logo:hover { color: #fff !important; }
#site-nav .logo-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: #60a5fa; }
#site-nav .logo-icon svg { width: 36px; height: 36px; display: block; }
#site-nav .logo-text em { color: #60a5fa; font-style: normal; }
#site-nav .logo-custom .custom-logo,
#site-nav .logo-custom img { max-height: 44px; width: auto; display: block; }
#site-nav .logo-custom a { display: block; line-height: 0; }

/* Primary menu — normalise UL/LI from wp_nav_menu */
#site-nav .nav-links { display: flex; align-items: center; gap: 36px; margin: 0 auto; }
#site-nav .nav-links ul,
#site-nav .nav-links-list,
#site-nav .nav-links .menu {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
#site-nav .nav-links li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#site-nav .nav-links li::before, #site-nav .nav-links li::marker { content: none !important; }
#site-nav .nav-links a { color: rgba(255,255,255,0.72) !important; font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.18s ease; padding: 6px 0; }
#site-nav .nav-links a:hover,
#site-nav .nav-links .current-menu-item > a,
#site-nav .nav-links .current_page_item > a { color: #fff !important; }

/* CTA buttons */
#site-nav .nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#site-nav .btn-ghost,
#site-nav .btn-primary { font-size: 13px; padding: 8px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; transition: all 0.18s ease; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#site-nav .btn-ghost { color: rgba(255,255,255,0.75); background: transparent; border: 1px solid rgba(255,255,255,0.12); }
#site-nav .btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.22); }
#site-nav .btn-primary { color: #fff; background: linear-gradient(135deg, #3b82f6, #2563eb); border: 1px solid transparent; box-shadow: 0 4px 14px rgba(59,130,246,0.35); }
#site-nav .btn-primary:hover { background: linear-gradient(135deg, #60a5fa, #3b82f6); box-shadow: 0 8px 22px rgba(59,130,246,0.45); }

.site-content { min-height: 60vh; }

/* Hamburger */
.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 10px;
	cursor: pointer; padding: 0;
	align-items: center; justify-content: center;
	flex-direction: column; gap: 5px;
	transition: all 0.2s ease;
}
.nav-toggle:hover { background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.40); }
.nav-toggle-bar { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.25s ease; }
body.menu-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu {
	position: fixed; top: 0; right: 0; bottom: 0;
	width: min(88vw, 360px);
	background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
	border-left: 1px solid rgba(255,255,255,0.06);
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 9999;
	overflow-y: auto; -webkit-overflow-scrolling: touch;
	box-shadow: -20px 0 50px rgba(0,0,0,0.5);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-inner { padding: 20px 24px 32px; display: flex; flex-direction: column; min-height: 100%; }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.mobile-menu-head .logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 18px; }
.mobile-menu-head .logo-icon { color: #60a5fa; width: 30px; height: 30px; }
.mobile-menu-head .logo-icon svg { width: 30px; height: 30px; }
.mobile-menu-head .logo-text em { color: #60a5fa; font-style: normal; }
.mobile-menu-close { width: 40px; height: 40px; background: transparent; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: all 0.2s ease; }
.mobile-menu-close:hover { background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.40); }
.mobile-menu-nav { flex: 1; padding: 12px 0; }
.mobile-menu-list,
.mobile-menu .menu { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column; gap: 2px; }
.mobile-menu-list li,
.mobile-menu .menu li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.mobile-menu-list a,
.mobile-menu .menu a { display: block !important; padding: 14px 12px !important; color: rgba(255,255,255,0.78) !important; text-decoration: none !important; font-size: 15px; font-weight: 500; border-radius: 10px; transition: all 0.18s ease; }
.mobile-menu-list a:hover,
.mobile-menu .menu a:hover { background: rgba(59,130,246,0.10) !important; color: #fff !important; padding-left: 16px !important; }
.mobile-menu-cta { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.btn-block { width: 100%; justify-content: center; }
.mobile-menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 9998; }
body.menu-open .mobile-menu-backdrop { opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }

/* Collapse desktop nav on narrow screens */
@media (max-width: 960px) {
	#site-nav .nav-links,
	#site-nav .nav-cta { display: none !important; }
	.nav-toggle { display: flex !important; }
	#site-nav .container { padding: 0 20px; }
}

/* Hero + section mobile tuning */
@media (max-width: 640px) {
	.hero { padding: 110px 0 60px; }
	.hero-title  { font-size: clamp(36px, 9vw, 56px) !important; line-height: 1.05 !important; }
	.hero-subtitle { font-size: 16px !important; }
	.hero-actions { flex-direction: column; gap: 10px; width: 100%; }
	.hero-actions .btn-lg { width: 100%; justify-content: center; }
	.hero-trust { gap: 10px 14px; font-size: 12px; }
	.hero-badge { font-size: 11px; padding: 6px 12px; }
	.section-title { font-size: clamp(28px, 7vw, 40px) !important; }
	.section-desc  { font-size: 15px !important; }
	.stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
	.stat-num   { font-size: 36px !important; }
	.features-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
	.feature-large, .feature-wide { grid-column: auto !important; }
	.steps { grid-template-columns: 1fr !important; gap: 14px !important; }
	.showcase-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
	.pricing-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
	.footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
	.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
	.container { padding: 0 18px; }
	.footer-grid { grid-template-columns: 1fr !important; }
	.mockup-frame { transform: scale(0.92); transform-origin: top center; }
}

/* Site footer */
.site-footer { background: linear-gradient(180deg, #0b1220 0%, #080d18 100%); border-top: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.65); padding: 64px 0 32px; margin-top: 60px; }
.site-footer .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.site-footer .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.site-footer .footer-brand .logo { margin-bottom: 16px; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; }
.site-footer .footer-brand .logo-icon { color: #60a5fa; }
.site-footer .footer-blurb { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.55); max-width: 340px; }
.site-footer .footer-col h4 { color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 14px; }
.site-footer .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer .footer-col li { list-style: none; }
.site-footer .footer-col a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.site-footer .footer-col a:hover { color: #60a5fa; }
.site-footer .footer-small { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.55); margin: 0; }
.site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: 12px; color: rgba(255,255,255,0.35); flex-wrap: wrap; gap: 12px; }

/* WC + generic pages */
.wc-wrap, .page-wrap { padding: 140px 0 80px; color: #e2e8f0; }
.wc-wrap .container, .page-wrap .container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.wc-main, .page-wrap .page-card { color: #0f172a; background: #fff; border-radius: 20px; padding: 40px 44px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.wc-main a, .page-wrap a { color: #2563eb; }
.wc-main h1, .wc-main h2, .page-wrap h1, .page-wrap h2, .page-wrap h3 { color: #0f172a; }
.page-wrap h1 { font-size: clamp(32px, 5vw, 44px); margin: 0 0 18px; }
.page-wrap h2 { font-size: 22px; margin: 28px 0 12px; }
.page-wrap h3 { font-size: 17px; margin: 22px 0 10px; }
.page-wrap p, .page-wrap li { font-size: 16px; line-height: 1.7; color: #334155; }
.page-wrap ol, .page-wrap ul { padding-left: 22px; }
.page-wrap code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 14px; color: #0f172a; }
.page-wrap pre { background: #0f172a; color: #e2e8f0; padding: 16px; border-radius: 10px; overflow: auto; }
@media (max-width: 640px) {
	.wc-wrap, .page-wrap { padding: 110px 0 60px; }
	.wc-main, .page-wrap .page-card { padding: 26px 22px; border-radius: 16px; }
}

/* Docs / Guide pages */
.docs-page { padding: 140px 0 80px; color: #e2e8f0; }
.docs-page .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.docs-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.docs-sidebar { position: sticky; top: 100px; background: #fff; color: #0f172a; border-radius: 14px; padding: 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); max-height: calc(100vh - 120px); overflow-y: auto; }
.docs-sidebar h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #64748b; margin: 0 0 12px; }
.docs-sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.docs-sidebar-nav a { padding: 8px 10px; border-radius: 8px; color: #475569; font-size: 14px; text-decoration: none; transition: all 0.18s ease; }
.docs-sidebar-nav a:hover { background: rgba(59,130,246,0.08); color: #2563eb; }
.docs-sidebar-cta { padding-top: 16px; border-top: 1px solid #e2e8f0; }
.docs-content { background: #fff; color: #0f172a; border-radius: 16px; padding: 44px 48px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.docs-content h1 { font-size: clamp(32px, 5vw, 44px); margin: 0 0 12px; color: #0f172a; }
.docs-content h1 em { color: #2563eb; font-style: normal; }
.docs-content h2 { font-size: 24px; color: #0f172a; margin: 44px 0 14px; scroll-margin-top: 100px; }
.docs-content h3 { font-size: 17px; color: #0f172a; margin: 26px 0 10px; }
.docs-content p, .docs-content li { font-size: 16px; line-height: 1.75; color: #334155; }
.docs-content ul, .docs-content ol { padding-left: 24px; margin: 0 0 18px; }
.docs-content code { background: #f1f5f9; color: #2563eb; padding: 2px 6px; border-radius: 4px; font-size: 14px; font-family: 'JetBrains Mono', monospace; }
.docs-content pre { background: #0f172a; color: #e2e8f0; padding: 16px; border-radius: 10px; overflow: auto; margin: 16px 0; }
.docs-content a { color: #2563eb; text-decoration: underline; }
.docs-content blockquote { border-left: 4px solid #2563eb; padding: 10px 18px; background: rgba(59,130,246,0.04); border-radius: 0 8px 8px 0; margin: 18px 0; }
@media (max-width: 960px) { .docs-layout { grid-template-columns: 1fr; gap: 20px; } .docs-sidebar { position: static; max-height: none; } }
@media (max-width: 640px) { .docs-page { padding: 110px 0 60px; } .docs-content { padding: 28px 22px; border-radius: 14px; } .docs-content h1 { font-size: 30px; } .docs-content h2 { font-size: 20px; } }

/* ─── Reveal safety: if JS is slow/blocked, elements become visible after 2s anyway ─── */
@keyframes zpos-force-reveal { to { opacity: 1; transform: translateY(0); } }
.feature, .step, .stat, .pricing-card, .faq-item {
	animation: zpos-force-reveal 0.6s ease 2s forwards;
}
/* When IO adds .in-view, just ensure they end visible (overrides animation delay). */
.feature.in-view, .step.in-view, .stat.in-view, .pricing-card.in-view, .faq-item.in-view {
	opacity: 1 !important;
	transform: translateY(0) !important;
	animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.feature, .step, .stat, .pricing-card, .faq-item {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}