/*
 * ACX Audio visual foundation.
 * Scope: global colors, typography rhythm, buttons, cards, forms, Blocksy compatibility.
 */

:root {
	--acx-green: #65c829;
	--acx-green-bright: #8ceb3f;
	--acx-green-dark: #246b32;

	--acx-bg: #070a08;
	--acx-surface: #111611;
	--acx-surface-2: #1a211a;
	--acx-surface-3: #202820;

	--acx-text: #f5f8f2;
	--acx-text-muted: #aeb8aa;
	--acx-text-soft: #d8dfd2;

	--acx-border: rgba(101, 200, 41, 0.18);
	--acx-border-strong: rgba(101, 200, 41, 0.42);
	--acx-glow: 0 0 28px rgba(101, 200, 41, 0.28);

	--acx-radius-sm: 10px;
	--acx-radius-md: 16px;
	--acx-radius-lg: 24px;

	--acx-transition: 180ms ease;
}

/* Base surface ------------------------------------------------------------ */

html {
	background: var(--acx-bg);
}

body.acx-site {
	color: var(--acx-text);
	background:
		radial-gradient(circle at 50% -10%, rgba(101, 200, 41, 0.12), transparent 38rem),
		linear-gradient(180deg, #080d08 0%, var(--acx-bg) 42%, #050705 100%);
}

body.acx-site,
body.acx-site button,
body.acx-site input,
body.acx-site select,
body.acx-site textarea {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.acx-site .site-main {
	position: relative;
	isolation: isolate;
}

/* Typography -------------------------------------------------------------- */

body.acx-site h1,
body.acx-site h2,
body.acx-site h3,
body.acx-site h4,
body.acx-site h5,
body.acx-site h6 {
	color: var(--acx-text);
	letter-spacing: -0.035em;
}

body.acx-site p,
body.acx-site li {
	color: var(--acx-text-muted);
}

body.acx-site a {
	color: var(--acx-green);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--acx-transition), opacity var(--acx-transition);
}

body.acx-site a:hover,
body.acx-site a:focus {
	color: var(--acx-green-bright);
}

/* Selection and focus ----------------------------------------------------- */

body.acx-site ::selection {
	color: #061006;
	background: var(--acx-green-bright);
}

body.acx-site :focus-visible {
	outline: 2px solid var(--acx-green);
	outline-offset: 3px;
}

/* Blocksy compatibility --------------------------------------------------- */

body.acx-site [data-header*='type-1'] .ct-header [data-row*='middle'] {
	border-bottom: 1px solid rgba(101, 200, 41, 0.12);
	backdrop-filter: blur(14px);
}

body.acx-site .ct-header a {
	transition: color var(--acx-transition), opacity var(--acx-transition);
}

body.acx-site .ct-header [class*='menu'] > li > a:hover,
body.acx-site .ct-header [class*='menu'] > li.current-menu-item > a,
body.acx-site .ct-header [class*='menu'] > li.current-menu-ancestor > a {
	color: var(--acx-green);
}

body.acx-site .ct-footer {
	border-top: 1px solid rgba(101, 200, 41, 0.14);
	background:
		radial-gradient(circle at 50% 0%, rgba(101, 200, 41, 0.1), transparent 34rem),
		var(--acx-bg);
}

/* Buttons ---------------------------------------------------------------- */

body.acx-site .wp-block-button__link,
body.acx-site .ct-button,
body.acx-site .button,
body.acx-site button[type='submit'],
body.acx-site input[type='submit'] {
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.01em;
	transition:
		transform var(--acx-transition),
		box-shadow var(--acx-transition),
		background-color var(--acx-transition),
		border-color var(--acx-transition),
		color var(--acx-transition);
}

body.acx-site .wp-block-button:not(.is-style-outline) .wp-block-button__link,
body.acx-site .ct-button,
body.acx-site .button,
body.acx-site button[type='submit'],
body.acx-site input[type='submit'] {
	color: #061006;
	background: var(--acx-green);
	border: 1px solid var(--acx-green);
	box-shadow: 0 10px 34px rgba(101, 200, 41, 0.18);
}

body.acx-site .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
body.acx-site .ct-button:hover,
body.acx-site .button:hover,
body.acx-site button[type='submit']:hover,
body.acx-site input[type='submit']:hover {
	color: #061006;
	background: var(--acx-green-bright);
	border-color: var(--acx-green-bright);
	box-shadow: var(--acx-glow);
	transform: translateY(-1px);
}

body.acx-site .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--acx-text);
	background: rgba(101, 200, 41, 0.04);
	border: 1px solid rgba(101, 200, 41, 0.36);
}

body.acx-site .wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: var(--acx-green-bright);
	border-color: var(--acx-green);
	box-shadow: 0 0 22px rgba(101, 200, 41, 0.16);
	transform: translateY(-1px);
}

/* Cards and panels -------------------------------------------------------- */

body.acx-site .acx-panel,
body.acx-site .acx-card,
body.acx-site .wp-block-group.is-style-acx-panel {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--acx-border);
	border-radius: var(--acx-radius-lg);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 46%),
		var(--acx-surface);
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

body.acx-site .acx-card {
	transition:
		transform var(--acx-transition),
		border-color var(--acx-transition),
		box-shadow var(--acx-transition);
}

body.acx-site .acx-card:hover {
	border-color: var(--acx-border-strong);
	box-shadow: 0 22px 76px rgba(0, 0, 0, 0.36), var(--acx-glow);
	transform: translateY(-3px);
}

body.acx-site .acx-card::after,
body.acx-site .wp-block-group.is-style-acx-panel::after {
	position: absolute;
	inset: auto 18px 0;
	height: 1px;
	content: '';
	background: linear-gradient(90deg, transparent, rgba(140, 235, 63, 0.68), transparent);
	opacity: 0.55;
	pointer-events: none;
}

/* Utility classes --------------------------------------------------------- */

body.acx-site .acx-kicker {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	color: var(--acx-green);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body.acx-site .acx-kicker::before {
	width: 0.48rem;
	height: 0.48rem;
	content: '';
	border-radius: 999px;
	background: var(--acx-green);
	box-shadow: 0 0 16px rgba(101, 200, 41, 0.75);
}

body.acx-site .acx-muted {
	color: var(--acx-text-muted);
}

body.acx-site .acx-gradient-text {
	color: transparent;
	background: linear-gradient(90deg, var(--acx-text), var(--acx-green-bright));
	-webkit-background-clip: text;
	background-clip: text;
}

body.acx-site .acx-signal-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(101, 200, 41, 0.56), transparent);
}

/* Forms ------------------------------------------------------------------ */

body.acx-site input[type='text'],
body.acx-site input[type='email'],
body.acx-site input[type='url'],
body.acx-site input[type='tel'],
body.acx-site input[type='number'],
body.acx-site input[type='search'],
body.acx-site textarea,
body.acx-site select {
	color: var(--acx-text);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(101, 200, 41, 0.2);
	border-radius: var(--acx-radius-sm);
	transition: border-color var(--acx-transition), box-shadow var(--acx-transition);
}

body.acx-site input:focus,
body.acx-site textarea:focus,
body.acx-site select:focus {
	border-color: var(--acx-green);
	box-shadow: 0 0 0 3px rgba(101, 200, 41, 0.16);
}

/* Tables ----------------------------------------------------------------- */

body.acx-site table {
	border-color: rgba(101, 200, 41, 0.18);
}

body.acx-site th {
	color: var(--acx-text);
	background: rgba(101, 200, 41, 0.08);
}

body.acx-site td {
	color: var(--acx-text-muted);
}

/* Motion safety ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.acx-site *,
	body.acx-site *::before,
	body.acx-site *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Mobile polish ----------------------------------------------------------- */

@media (max-width: 689px) {
	body.acx-site h1,
	body.acx-site h2,
	body.acx-site h3 {
		letter-spacing: -0.025em;
	}

	body.acx-site .acx-panel,
	body.acx-site .acx-card,
	body.acx-site .wp-block-group.is-style-acx-panel {
		border-radius: var(--acx-radius-md);
	}
}