/*
Theme Name: Arreaux
Theme URI: https://arreaux.com
Author: Arreaux IT Solutions
Description: Custom block theme for Arreaux IT Solutions — networking, AI, and security for Lafayette businesses.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: arreaux
*/

/* ---- utility classes used by page content ---- */

.arx-card {
	background: #ffffff;
	border: 1px solid #dce5ef;
	border-radius: 14px;
	padding: 1.75rem !important;
	transition: box-shadow .2s ease, transform .2s ease;
	height: 100%;
	box-shadow: 0 1px 2px rgba(10, 34, 57, .05), 0 10px 28px -14px rgba(10, 34, 57, .18);
}
.arx-card:hover {
	box-shadow: 0 2px 4px rgba(10, 34, 57, .06), 0 18px 40px -12px rgba(10, 34, 57, .28);
	transform: translateY(-2px);
}
/* single-word headings in cards must never split mid-word */
.arx-card h2, .arx-card h3 { overflow-wrap: normal; }
.arx-card-dark {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	padding: 1.75rem !important;
	height: 100%;
}
.arx-eyebrow {
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #1a73d8;
}
/* centered eyebrows must be block-level for text-align to position them */
p.arx-eyebrow.has-text-align-center { display: block; }

/* dark sections own their text colors — independent of WP preset classes,
   identical in light and dark mode */
.arx-hero h1, .arx-hero h2, .arx-hero h3,
.arx-band-grid h1, .arx-band-grid h2, .arx-band-grid h3,
.arx-cta-grad h1, .arx-cta-grad h2 {
	color: #ffffff !important;
}
.arx-hero p:not(.arx-eyebrow), .arx-band-grid p:not(.arx-eyebrow) {
	color: #bcd7f5 !important;
}
.arx-cta-grad p { color: #eaf3fd !important; }
.arx-hero .wp-block-button__link, .arx-band-grid .wp-block-button__link,
.arx-cta-grad .wp-block-button__link {
	color: #ffffff;
}
.arx-hero .is-style-outline .wp-block-button__link {
	color: #ffffff !important;
	border-color: #ffffff;
}
.arx-cta-grad .wp-block-button__link {
	color: #ffffff !important;
	background-color: #071a2c;
}

/* footer owns its colors the same way */
.arx-footer { background-color: #071a2c; color: #ffffff; }
.arx-footer h1, .arx-footer h2, .arx-footer h3 { color: #ffffff !important; }
.arx-footer p { color: #9db8d4 !important; }
.arx-footer a { color: #7cb8f2 !important; }
.arx-footer .wp-block-site-title a { color: #ffffff !important; }

/* no page-background strips between full-bleed sections */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > * + * { margin-block-start: 0 !important; }
.arx-eyebrow-on-dark { color: #7cb8f2; }

/* nav */
.wp-block-navigation a { font-weight: 600; }
.wp-block-navigation a:hover { color: #1a73d8; text-decoration: none; }

/* buttons */
.wp-block-button__link { transition: background .15s ease, transform .15s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }
.is-style-outline .wp-block-button__link:hover { background: rgba(26, 115, 216, .08); }

/* keep long headings from overflowing small screens (the old site's bug) */
h1, h2, h3 { overflow-wrap: break-word; }

/* ---- rich backgrounds ---- */

/* dark hero: layered glows over deep navy, slow drift */
.arx-hero {
	position: relative;
	overflow: hidden;
	background-color: #071a2c;
	background-image:
		radial-gradient(900px 480px at 18% 8%, rgba(26, 115, 216, .38), transparent 62%),
		radial-gradient(700px 420px at 85% 90%, rgba(70, 197, 189, .22), transparent 60%),
		radial-gradient(540px 320px at 70% 18%, rgba(124, 184, 242, .16), transparent 65%);
	animation: arx-drift 18s ease-in-out infinite alternate;
}
@keyframes arx-drift {
	from { background-position: 0 0, 0 0, 0 0; }
	to   { background-position: 60px 30px, -50px -30px, 40px -20px; }
}

/* constellation svg sits behind hero content */
.arx-net-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: .55;
	pointer-events: none;
}
.arx-net-wrap svg { width: 100%; height: 100%; }
.arx-hero > *:not(.arx-net-wrap) { position: relative; z-index: 1; }

/* dark band with faint circuit grid */
.arx-band-grid {
	background-color: #0a2239;
	background-image:
		radial-gradient(640px 360px at 80% 0%, rgba(26, 115, 216, .25), transparent 60%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M44 .5H.5V44' fill='none' stroke='%23ffffff' stroke-opacity='.05'/%3E%3Ccircle cx='.5' cy='.5' r='1.2' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E");
}

/* light section with soft mesh */
.arx-mesh-light {
	background-color: #eef3f9;
	background-image:
		radial-gradient(700px 420px at 12% 0%, rgba(26, 115, 216, .14), transparent 60%),
		radial-gradient(600px 380px at 95% 100%, rgba(70, 197, 189, .14), transparent 65%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M44 .5H.5V44' fill='none' stroke='%230a2239' stroke-opacity='.04'/%3E%3C/svg%3E");
	border-top: 1px solid #e2eaf3;
	border-bottom: 1px solid #e2eaf3;
}

/* gradient cta band */
.arx-cta-grad {
	background-image: linear-gradient(120deg, #0d4d9e 0%, #1a73d8 55%, #115da8 100%);
}

/* service card icons */
.arx-icon {
	display: inline-flex;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: rgba(26, 115, 216, .1);
	color: #1a73d8;
	margin-bottom: .35rem;
}
.arx-icon svg { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
	.arx-hero { animation: none; }
	.arx-net-wrap svg * { animation: none !important; }
}

/* ---- dark mode (follows system preference) ----
   `base` stays white: it is the text color inside dark bands.
   Only background USAGES and ink/border variables flip. */
@media (prefers-color-scheme: dark) {
	body {
		--wp--preset--color--surface: #0e1d2e;
		--wp--preset--color--text: #e7eef6;
		--wp--preset--color--muted: #9db2c6;
		--wp--preset--color--border: #223850;
		background-color: #0b1622;
		color: var(--wp--preset--color--text);
	}
	.has-base-background-color { background-color: #0b1622 !important; }
	.has-surface-background-color { background-color: var(--wp--preset--color--surface) !important; }
	:root body a:where(:not(.wp-element-button)) { color: #6fb0f0; }
	:root body a:where(:not(.wp-element-button)):hover { color: #9cc8f5; }
	.arx-card {
		background: #101f30;
		border-color: #223850;
	}
	.arx-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
	.arx-mesh-light { background-color: #0e1d2e; border-color: #1b2f45; }
	.arx-card { box-shadow: none; }
	.arx-icon { background: rgba(111, 176, 240, .12); color: #6fb0f0; }
	.wp-block-navigation a:hover { color: #6fb0f0; }
	.is-style-outline .wp-block-button__link:hover { background: rgba(111, 176, 240, .12); }
}