/*
 * ABNOVA Digital — shared page components.
 *
 * Small, purpose-built styles used by the page templates (About, Process,
 * Services and Home sections). Everything references tokens.css —
 * edit a token there and every page follows.
 *
 * Loaded globally after brand.css (see functions.php).
 */

/* ---------- Breadcrumbs ---------- */
.abnova-crumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--abnova-font-mono);
	font-size: var(--abnova-text-xs);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--abnova-text-dim);
}
.abnova-crumbs a {
	color: var(--abnova-text-dim);
	text-decoration: none;
	transition: color 0.2s var(--abnova-ease);
}
.abnova-crumbs a:hover {
	color: var(--abnova-text);
}
.abnova-crumbs .sep {
	opacity: 0.6;
}
.abnova-crumbs .cur {
	color: var(--abnova-cyan);
}

/* ---------- Buttons ---------- */
.abnova-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem 1.75rem;
	font-family: var(--abnova-font-display);
	font-size: var(--abnova-text-base);
	font-weight: 700;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background 0.25s var(--abnova-ease), box-shadow 0.25s var(--abnova-ease), color 0.2s, border-color 0.2s;
}
.abnova-btn--solid {
	background: var(--abnova-cyan);
	color: var(--abnova-navy);
}
.abnova-btn--solid:hover {
	background: var(--abnova-cyan-light);
	box-shadow: 0 0 36px var(--abnova-glow);
}
.abnova-btn--outline {
	background: transparent;
	border: 1px solid var(--abnova-border);
	color: var(--abnova-text-muted);
	font-weight: 600;
}
.abnova-btn--outline:hover {
	border-color: rgba(57, 211, 242, 0.6);
	color: var(--abnova-cyan);
}
.abnova-btn .arr {
	transition: transform 0.3s var(--abnova-ease);
}
.abnova-btn:hover .arr {
	transform: translateX(0.25rem);
}

/* ---------- Section kickers ---------- */
.abnova-kicker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--abnova-font-mono);
	font-size: var(--abnova-text-xs);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--abnova-cyan);
}
.abnova-kicker::before {
	content: "";
	width: 2.5rem;
	height: 1px;
	background: rgba(57, 211, 242, 0.6);
	flex-shrink: 0;
}

/* ---------- Timeline bars (process page) ---------- */
.abnova-timeline-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.25rem;
	border-bottom: 1px solid var(--abnova-border);
}
.abnova-timeline-row:last-child {
	border-bottom: none;
}
.abnova-timeline-name {
	width: 100%;
	font-family: var(--abnova-font-display);
	font-size: var(--abnova-text-base);
	font-weight: 600;
	color: var(--abnova-text);
}
@media (min-width: 640px) {
	.abnova-timeline-name {
		width: 12rem;
	}
}
.abnova-timeline-bar {
	height: 0.375rem;
	flex: 1;
	min-width: 8rem;
	overflow: hidden;
	background: var(--abnova-navy);
}
.abnova-timeline-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--abnova-cyan), var(--abnova-blue));
}
.abnova-timeline-weeks {
	font-family: var(--abnova-font-mono);
	font-size: var(--abnova-text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--abnova-cyan);
	white-space: nowrap;
}

/* ---------- Generic content band ---------- */
.abnova-band {
	border-top: 1px solid var(--abnova-border);
	border-bottom: 1px solid var(--abnova-border);
	background: rgba(10, 16, 30, 0.3);
}
.abnova-cta-panel {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(57, 211, 242, 0.4);
	background: var(--abnova-navy);
	padding: clamp(2rem, 5vw, 3.5rem);
}
.abnova-cta-panel::before {
	content: "";
	position: absolute;
	top: -5rem;
	right: -5rem;
	width: 18rem;
	height: 18rem;
	background: radial-gradient(closest-side, rgba(57, 211, 242, 0.1), transparent 70%);
	pointer-events: none;
}

/* ---------- Responsive helpers ---------- */
@media (max-width: 640px) {
}

@media (prefers-reduced-motion: reduce) {
	.abnova-btn .arr {
		transition: none;
	}
}