/* wp-content/themes/apexcx/assets/css/global.css */
/* Base typography, layout helpers, and the global site header + footer chrome. */

body {
	margin: 0;
	background: var(--apexcx-color-bg);
	color: var(--apexcx-color-ink);
	font-family: var(--apexcx-font-display);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

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

a { color: var(--apexcx-color-ink); text-decoration: none; }
a:hover { color: var(--apexcx-color-primary); }

::selection { background: rgba(40,56,145,.18); color: var(--apexcx-color-ink); }

:focus-visible { outline: 2px solid var(--apexcx-color-primary); outline-offset: 3px; }

.apexcx-disp {
	font-family: var(--apexcx-font-display);
	font-weight: var(--apexcx-weight-display);
	letter-spacing: var(--apexcx-tracking-tight);
	line-height: .96;
}

.apexcx-nar { font-family: var(--apexcx-font-narrow); }

.apexcx-kick {
	font-family: var(--apexcx-font-narrow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--apexcx-tracking-kick);
	font-size: var(--apexcx-text-kick);
}

.apexcx-tnum { font-variant-numeric: tabular-nums; }

.apexcx-container {
	max-width: var(--apexcx-container-max);
	margin: 0 auto;
	padding: 0 var(--apexcx-container-pad);
}

.apexcx-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--apexcx-font-narrow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 14px;
}
.apexcx-arrow span[data-apexcx-arrow] { transition: transform var(--apexcx-duration-base) var(--apexcx-ease-out); color: var(--apexcx-color-primary); }
.apexcx-arrow:hover span[data-apexcx-arrow-lead] { transform: translateX(-6px); }
.apexcx-arrow:hover span[data-apexcx-arrow-trail] { transform: translateX(4px); }

.apexcx-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--apexcx-font-narrow);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .12em;
	padding: 16px 30px;
	background: var(--apexcx-btn-bg);
	color: var(--apexcx-btn-color);
	border: none;
	cursor: pointer;
	transition: background var(--apexcx-duration-fast), transform .18s var(--apexcx-ease-out);
}
.apexcx-btn-primary:hover { background: var(--apexcx-btn-bg-hover); color: var(--apexcx-btn-color); }
.apexcx-btn-primary:active { transform: scale(0.97); }

.apexcx-mask-x {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* Reveal-on-scroll: base rule. Owned by apexcxRevealController in utilities.js */
[data-apexcx-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--apexcx-duration-slow) var(--apexcx-ease-out), transform var(--apexcx-duration-slow) var(--apexcx-ease-out);
}
[data-apexcx-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-apexcx-reveal] { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

@keyframes apexcx-marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes apexcx-marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes apexcx-dash-flow { to { stroke-dashoffset: -24; } }
@keyframes apexcx-core-float { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }

/* =============================================================== Site header */
/* Global chrome — rendered by template-parts/site-header.php via header.php on
   every page. Scroll state (.is-scrolled) is owned by initHeaderScroll and the
   mobile toggle by initMobileNav, both in utilities.js. */
.apexcx-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	border-bottom: 1px solid transparent;
	transition: background var(--apexcx-duration-base), border-color var(--apexcx-duration-base), backdrop-filter var(--apexcx-duration-base), box-shadow var(--apexcx-duration-base);
}
.apexcx-site-header.is-scrolled {
	background: rgba(255, 255, 255, .9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom-color: rgba(10, 13, 20, .12);
	box-shadow: 0 6px 24px rgba(10, 13, 20, .06);
}
.apexcx-header-inner {
	max-width: var(--apexcx-container-max);
	margin: 0 auto;
	padding: 0 var(--apexcx-container-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 76px;
	gap: 12px;
}
.apexcx-logo { display: inline-flex; align-items: center; }
.apexcx-logo img { height: 52px; width: auto; display: block; }
.apexcx-logo-text { font-size: 26px; color: var(--apexcx-color-ink); }

.apexcx-primary-nav {
	display: flex;
	gap: 20px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .11em;
}
.apexcx-navgroup { position: relative; display: flex; align-items: center; }
.apexcx-navgroup > a { color: var(--apexcx-color-ink); }
.apexcx-navgroup > a:hover { color: var(--apexcx-color-primary); }
.apexcx-navdrop {
	position: absolute;
	top: 100%;
	left: -16px;
	padding-top: 14px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s, transform .2s, visibility .2s;
	z-index: 60;
}
.apexcx-navgroup:hover .apexcx-navdrop,
.apexcx-navgroup:focus-within .apexcx-navdrop { opacity: 1; visibility: visible; transform: translateY(0); }
.apexcx-navdrop-inner {
	background: #fff;
	border: 1px solid rgba(10, 13, 20, .12);
	box-shadow: 0 20px 50px rgba(10, 15, 60, .14);
	min-width: 250px;
	padding: 8px 0;
}
.apexcx-navdrop-inner a {
	display: block;
	padding: 11px 20px;
	font-family: var(--apexcx-font-narrow);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--apexcx-color-ink);
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.apexcx-navdrop-inner a:hover { background: var(--apexcx-color-primary); color: #fff; }

.apexcx-header-actions { display: flex; align-items: center; gap: 16px; }
.apexcx-header-phone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--apexcx-font-narrow);
	font-weight: 700;
	font-size: 16px;
	color: var(--apexcx-color-ink);
	letter-spacing: .02em;
	white-space: nowrap;
}
.apexcx-header-phone:hover { color: var(--apexcx-color-primary); }
.apexcx-header-phone span { color: var(--apexcx-color-primary); font-size: 15px; }
.apexcx-header-cta {
	display: inline-flex;
	align-items: center;
	font-family: var(--apexcx-font-narrow);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .11em;
	padding: 11px 20px;
	background: var(--apexcx-color-primary);
	color: #fff;
	transition: background .2s, transform .18s var(--apexcx-ease-out);
}
.apexcx-header-cta:hover { background: var(--apexcx-color-ink); color: #fff; }
.apexcx-header-cta:active { transform: scale(0.97); }

.apexcx-menu-toggle {
	background: none;
	border: 1px solid rgba(10, 13, 20, .3);
	color: var(--apexcx-color-ink);
	padding: 11px 16px;
	font-family: var(--apexcx-font-narrow);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .11em;
	cursor: pointer;
	min-height: 44px;
}
.apexcx-mobile-nav {
	display: none;
	flex-direction: column;
	padding: 8px 28px 20px;
	background: #fff;
	border-top: 1px solid rgba(10, 13, 20, .12);
	max-height: calc(100vh - 76px);
	overflow-y: auto;
}
.apexcx-mobile-nav.is-open { display: flex; }
.apexcx-mobile-nav a {
	font-family: var(--apexcx-font-narrow);
	color: var(--apexcx-color-ink);
	font-size: 17px;
	font-weight: 700;
	padding: 10px 0;
	border-bottom: 1px solid rgba(10, 13, 20, .08);
}
.apexcx-mobile-nav .apexcx-kick { color: var(--apexcx-color-muted); padding: 14px 0 6px; font-size: 16px; border: 0; }
.apexcx-mobile-phone { display: inline-flex; justify-content: center; align-items: center; gap: 8px; color: var(--apexcx-color-primary) !important; margin-top: 16px; border: 0 !important; }
.apexcx-mobile-cta { display: inline-flex; justify-content: center; background: var(--apexcx-color-primary); color: #fff !important; text-transform: uppercase; letter-spacing: .11em; padding: 15px 24px !important; margin-top: 10px; border: 0 !important; }

/* Desktop / mobile visibility toggles driven by CSS (no JS layout thrash). */
.apexcx-desktop-only { display: flex; align-items: center; gap: 16px; }
.apexcx-mobile-only { display: none; }
@media (max-width: 860px) {
	.apexcx-desktop-only { display: none; }
	.apexcx-mobile-only { display: inline-flex; }
}

/* =================================================================== Footer */
.apexcx-site-footer { padding: 70px 0 40px; color: #AEB6C4; font-size: 14px; background: var(--apexcx-color-ink); }
.apexcx-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; }
.apexcx-site-footer img { height: 52px; width: auto; display: block; }
.apexcx-site-footer a { color: #AEB6C4; }
.apexcx-site-footer a:hover { color: var(--apexcx-color-accent-cyan); }
.apexcx-footer-col { display: flex; flex-direction: column; gap: 10px; }
.apexcx-footer-col h5 { margin: 0 0 6px; color: #fff; font-size: 14px; }
.apexcx-footer-phone { color: var(--apexcx-color-accent-cyan) !important; font-size: 19px; font-weight: 700; letter-spacing: .02em; }
.apexcx-footer-phone:hover { color: #fff !important; }
.apexcx-footer-bar {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 44px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.apexcx-footer-logo-text { color: #fff; font-size: 26px; }