/**
 * Optimal Nexus Theme Styles
 *
 * Main theme stylesheet for header, navigation, footer, and sections.
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
	--onx-accent: #E50914;
}

/* ==========================================================================
   SKIP LINK
   ========================================================================== */

.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--onx-accent);
	color: var(--onx-text);
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	z-index: 100000;
}

.skip-link:focus {
	top: 0;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--onx-bg);
	border-bottom: 1px solid var(--onx-line);
	transition: box-shadow 0.3s ease;
}

.site-header.is-sticky {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 0;
}

/* ==========================================================================
   LOGO / BRANDING - ONX Enhanced
   ========================================================================== */

.site-branding {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

/* ONX: Enhanced logo link with hover effects */
.onx-logo {
	display: inline-block;
	color: var(--onx-text);
	text-decoration: none;
	line-height: 1;
	position: relative;
	transition: opacity 0.2s ease;
}

.onx-logo:hover {
	opacity: 0.9;
}

/* ONX: Animated red underline on hover */
.onx-logo:hover::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, #E50000, #900);
	animation: pulseLine 1.5s ease infinite;
}

@keyframes pulseLine {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}

/* Legacy support for .site-logo */
.site-logo {
	display: inline-block;
	color: var(--onx-text);
	text-decoration: none;
	line-height: 1;
}

/* ONX: Larger logo for better visibility (desktop: 160-180px) */
.logo-wordmark {
	display: block;
	height: auto;
	width: 100%;
	max-width: clamp(140px, 9vw, 180px);
}

/* ONX: Image logo sizing - increased from 40px to 160-180px */
.onx-logo-img {
	display: block;
	height: auto;
	width: 100%;
	max-width: clamp(140px, 9vw, 180px);
}

/* ONX: Ensure SVG logos scale properly */
.onx-logo svg {
	display: block;
	height: auto;
	width: 100%;
	max-width: clamp(140px, 9vw, 180px);
}

/* ==========================================================================
   MOBILE MENU TOGGLE
   ========================================================================== */

.mobile-menu-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--onx-text);
	padding: 0.5rem;
	cursor: pointer;
	z-index: 1001;
	position: relative;
}

.mobile-menu-toggle .close-icon {
	display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .menu-icon {
	display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .close-icon {
	display: block;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
	opacity: 0.8;
}

.mobile-menu-toggle svg {
	display: block;
}

/* ==========================================================================
   PRIMARY NAVIGATION
   ========================================================================== */

.primary-navigation {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin-left: auto;
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu li {
	margin: 0;
	padding: 0;
	position: relative;
}

.primary-menu a {
	color: var(--onx-text);
	text-decoration: none;
	font-weight: 500;
	font-size: 1rem;
	transition: color 0.2s ease;
	display: block;
	padding: 0.5rem 0;
}

.primary-menu a:hover,
.primary-menu a:focus {
	color: var(--onx-accent);
}

.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	color: var(--onx-accent);
}

/* Submenu */
.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--onx-line);
	border: 1px solid var(--onx-muted);
	border-radius: var(--onx-radius);
	min-width: 200px;
	padding: 0.5rem 0;
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-menu .sub-menu a {
	padding: 0.75rem 1.5rem;
}

/* ==========================================================================
   NAV CTA BUTTON
   ========================================================================== */

.nav-cta {
	flex-shrink: 0;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	border-radius: var(--onx-radius);
	transition: all 0.2s ease;
	cursor: pointer;
	border: none;
	text-align: center;
}

.button-primary {
	background-color: var(--onx-accent);
	color: var(--onx-text);
}

.button-primary:hover,
.button-primary:focus {
	background-color: color-mix(in srgb, var(--onx-accent) 85%, black);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--onx-accent) 30%, transparent);
}

.button-primary:active {
	transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.button-primary:hover,
	.button-primary:focus {
		transform: none;
	}
}

/* ==========================================================================
   FOCUS STATES
   ========================================================================== */

a:focus,
button:focus {
	outline: 2px solid var(--onx-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
	background-color: var(--onx-bg);
	border-top: 1px solid var(--onx-line);
	padding: 2rem 0;
	margin-top: 4rem;
}

.footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.footer-copyright p {
	margin: 0;
	color: var(--onx-muted);
	font-size: 0.875rem;
}

.footer-copyright a {
	color: var(--onx-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-copyright a:hover,
.footer-copyright a:focus {
	color: var(--onx-accent);
}

.footer-links ul {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links li {
	margin: 0;
}

.footer-links a {
	color: var(--onx-muted);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-links a:focus {
	color: var(--onx-text);
}

/* Social Links */
.onx-social {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.onx-social li {
	margin: 0;
}

.onx-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--onx-muted);
	transition: color 0.2s ease;
	padding: 0.5rem;
}

.onx-social a:hover,
.onx-social a:focus {
	color: var(--onx-accent);
}

.onx-social svg {
	display: block;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.section {
	padding: 4rem 0;
}

.section-inner {
	max-width: var(--onx-max);
	margin: 0 auto;
	padding: 0 var(--onx-spacing);
}

/* Features Grid */
.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.feature-card {
	background: var(--onx-line);
	padding: 2rem;
	border-radius: var(--onx-radius);
	border: 1px solid transparent;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.feature-card:hover {
	border-color: var(--onx-accent);
	transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.feature-card:hover {
		transform: none;
	}
}

.feature-icon {
	width: 48px;
	height: 48px;
	color: var(--onx-accent);
	margin-bottom: 1rem;
}

.feature-card h3 {
	margin: 0 0 0.5rem 0;
	font-size: 1.25rem;
}

.feature-card p {
	margin: 0;
	color: var(--onx-muted);
	line-height: 1.6;
}

/* CTA Section */
.section-cta {
	text-align: center;
	padding: 5rem 0;
	background: linear-gradient(135deg, rgba(229, 9, 20, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}

.section-cta h2 {
	font-size: 2.5rem;
	margin: 0 0 1rem 0;
}

.section-cta p {
	font-size: 1.25rem;
	color: var(--onx-muted);
	margin: 0 0 2rem 0;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   RESPONSIVE / MOBILE
   ========================================================================== */

@media (max-width: 768px) {
	/* ONX: Mobile logo sizing - smaller and balanced */
	.logo-wordmark,
	.onx-logo-img,
	.onx-logo svg {
		max-width: 120px;
		padding-bottom: 4px;
	}

	/* ONX: Tighter header spacing on mobile */
	.header-inner {
		gap: 1rem;
	}

	/* Show mobile menu toggle */
	.mobile-menu-toggle {
		display: block;
	}

	/* Hide navigation by default on mobile */
	.primary-navigation {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 80%;
		max-width: 300px;
		background: var(--onx-bg);
		border-left: 1px solid var(--onx-line);
		padding: 5rem 2rem 2rem;
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		overflow-y: auto;
	}

	.primary-navigation.is-open {
		transform: translateX(0);
	}

	.primary-menu {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 0;
	}

	.primary-menu li {
		width: 100%;
		border-bottom: 1px solid var(--onx-line);
	}

	.primary-menu a {
		padding: 1rem 0;
		width: 100%;
	}

	/* Submenu on mobile */
	.primary-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent;
		border: none;
		padding: 0 0 0 1rem;
		display: none;
	}

	.primary-menu li:hover > .sub-menu,
	.primary-menu li:focus-within > .sub-menu {
		display: block;
	}

	.nav-cta {
		width: 100%;
	}

	.nav-cta .button {
		width: 100%;
	}

	/* Footer stacks on mobile */
	.footer-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.footer-links ul {
		gap: 1rem;
	}

	/* Section adjustments */
	.section-cta h2 {
		font-size: 2rem;
	}

	.section-cta p {
		font-size: 1.125rem;
	}
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* Focus trap overlay when mobile menu is open */
.mobile-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s;
}

.mobile-menu-overlay.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
	overflow: hidden;
}

/* ==========================================================================
   CALENDLY POPUP ANIMATIONS
   ========================================================================== */

/* Smooth fade-in animation for Calendly overlay and popup */
.calendly-overlay {
	transition: opacity 0.25s ease-in-out !important;
}

.calendly-popup-content {
	transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out !important;
}

/* Close button hover effect */
.calendly-popup-close {
	transition: opacity 0.2s ease-in-out !important;
}

.calendly-popup-close:hover {
	opacity: 0.7 !important;
}

/* === ONX: Sections added === */
.onx-logos .onx-logos__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 1.25rem;
  opacity: .8;
}
.onx-logos__item {
  display: flex; align-items: center; justify-content: center;
  background: #111; border: 1px solid #1a1a1a; border-radius: 10px;
  padding: 14px; font-weight: 600; letter-spacing: .02em;
}

.onx-system .onx-grid--3 { display: grid; gap: 1.25rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
.onx-card { background:#111; border:1px solid #1a1a1a; border-radius:14px; padding:18px; }
.onx-actions { margin-top: 18px; }

.onx-case__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: center; }
.onx-case__stat { text-align: center; border-radius: 12px; background: linear-gradient(90deg, rgba(229,0,0,.2), transparent); padding: 2rem; }
.onx-case__stat h3 { font-size: 1.8rem; color: #E50000; margin-bottom: .5rem; }
.onx-case__details p { margin-bottom: 1rem; }

.onx-final-cta { text-align: center; padding: 5rem 1rem; border-top: 1px solid #1a1a1a; background: #0a0a0a; }
.onx-final-cta .button-primary { margin-top: 1.5rem; }

/* Responsive tweaks */
@media (max-width: 900px) {
  .onx-logos .onx-logos__list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .onx-system .onx-grid--3 { grid-template-columns: 1fr; }
  .onx-case__grid { grid-template-columns: 1fr; }
}

/* === ONX: Styleguide / Design System Demo === */
.onx-styleguide { --gap: 24px; --muted:#BDBDBD; --line:#1A1A1A; margin-top: 64px; }
.onx-styleguide__header { margin-bottom: 32px; }
.onx-styleguide__title { font-size: clamp(28px,4vw,44px); line-height: 1.1; margin: 0 0 8px; }
.onx-styleguide__sub { color: var(--muted); margin: 0; }
.onx-styleguide__block { padding: 24px 0; border-top: 1px solid var(--line); }
.onx-styleguide__heading { font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }

.onx-colorchips { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.onx-chip { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #0b0b0b; border: 1px solid var(--line); border-radius: 10px; }
.onx-chip__swatch { width: 28px; height: 28px; border-radius: 6px; background: var(--swatch); display: inline-block; }
.onx-chip__label code { color: var(--muted); }

.onx-kicker { color: #E50914; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; }
.onx-demo-h1 { font-size: clamp(28px,5vw,52px); line-height: 1.1; margin: 0 0 8px; }
.onx-demo-body { color: var(--muted); margin: 0; }

.onx-buttonrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.button-ghost { background: transparent; border: 1px solid var(--line); color: #fff; padding: 10px 16px; border-radius: 10px; }
.button-ghost:hover { border-color: #E50914; color: #fff; }

.onx-card { background: #0b0b0b; border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.onx-card__title { margin: 0 0 6px; font-weight: 600; }
.onx-card__body { margin: 0; color: var(--muted); }

.onx-space { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 6px 12px; margin: 0; padding: 0; list-style: none; }
.onx-space code { color: var(--muted); }

@media (max-width: 768px) {
  .onx-styleguide { margin-top: 40px; }
}

/* === ONX: New Modular Sections === */
.onx-logos__row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:16px}
.onx-logos__badge{display:flex;align-items:center;justify-content:center;background:var(--onx-card-bg,rgba(255,255,255,0.04));border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:12px 16px;color:#BDBDBD}

.onx-cards{display:grid;gap:16px}
.onx-cards--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.onx-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:20px}

.onx-metrics__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.onx-metric__value{display:block;font-size:32px;font-weight:700;color:#fff}
.onx-metric__label{display:block;color:#BDBDBD}

.onx-faq__list{display:grid;gap:12px}
.onx-faq__item{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px}
.onx-faq__item dt{font-weight:600;margin-bottom:6px}

@media (max-width: 768px){
  .onx-logos__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .onx-cards--three, .onx-metrics__grid{grid-template-columns:1fr}
}

/* Calendly popup overlay - ensure it displays on top */
.calendly-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999999 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.calendly-popup-content {
  z-index: 1000000 !important;
  position: relative !important;
}