/* =========================================================================
   Turquia — "Industrial Precision" layer.
   Most styling is Tailwind utilities (inc/enqueue.php). This file carries the
   type system, blueprint textures, motion and a few component refinements that
   are awkward to express as utilities.
   ========================================================================= */

:root {
	--tq-brand: #1E5BB8;
	--tq-brand-dark: #10325F;
	--tq-ink: #0B1220;
	--tq-line: #E3E8F0;
	--tq-signal: #EE6A2B;
	--tq-paper: #FBFBFD;
}

/* ---- Base ---------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
	font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
	background-color: var(--tq-paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Headings take the technical display face automatically, so templates don't
   each need to opt in. Lighter weight + tight optical tracking reads more
   refined/modern than heavy black type. */
h1, h2, h3, h4, .font-display {
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.08;
	text-wrap: balance;
}
h1 { letter-spacing: -0.045em; }
h3, h4 { letter-spacing: -0.02em; line-height: 1.2; }

/* Slightly tighter, calmer body rhythm. */
p { text-wrap: pretty; }

::selection { background: var(--tq-brand); color: #fff; }

/* Refined scrollbar (WebKit). */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--tq-paper); }
::-webkit-scrollbar-thumb {
	background: #C7D2E0;
	border: 3px solid var(--tq-paper);
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #9FB2C9; }

/* ---- Blueprint textures -------------------------------------------------- */
/* Light engineering grid — for tinted sections. */
.tq-grid {
	background-image:
		linear-gradient(to right, rgba(16, 50, 95, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(16, 50, 95, 0.05) 1px, transparent 1px);
	background-size: 28px 28px;
}
/* Inverted grid for dark steel surfaces (hero, group banners). */
.tq-grid-dark {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 32px 32px;
}
/* Soft radial light used behind the hero headline. */
.tq-glow {
	background: radial-gradient(60% 60% at 25% 20%, rgba(30, 91, 184, 0.45), transparent 70%);
}

/* ---- Monospace technical label ------------------------------------------ */
.tq-label {
	font-family: 'Space Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.tq-label--dot::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 0.55em;
	border-radius: 1px;
	background: var(--tq-signal);
	vertical-align: middle;
}

/* Corner tick-marks — engineering-drawing detail for cards/panels. */
.tq-ticks { position: relative; }
.tq-ticks::before,
.tq-ticks::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.tq-ticks::before {
	top: 10px; left: 10px;
	border-top: 1.5px solid var(--tq-signal);
	border-left: 1.5px solid var(--tq-signal);
}
.tq-ticks::after {
	bottom: 10px; right: 10px;
	border-bottom: 1.5px solid var(--tq-signal);
	border-right: 1.5px solid var(--tq-signal);
}
.tq-ticks:hover::before,
.tq-ticks:hover::after { opacity: 1; }

/* ---- Animated nav underline --------------------------------------------- */
.tq-nav-link,
.tq-primary-menu > li > a { position: relative; }
.tq-nav-link::after,
.tq-primary-menu > li > a::after {
	content: '';
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.35rem;
	height: 2px;
	background: var(--tq-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s cubic-bezier(0.16, 0.84, 0.32, 1);
}
.tq-nav-link:hover::after,
.tq-nav-link[aria-current]::after,
.tq-primary-menu > li > a:hover::after,
.tq-primary-menu > li.current-menu-item > a::after { transform: scaleX(1); }

/* ---- Page-load reveal (honours reduced motion) -------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.tq-reveal { animation: tq-fade-up 0.8s cubic-bezier(0.16, 0.84, 0.32, 1) both; }
}
@keyframes tq-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---- Scroll reveal (IntersectionObserver adds .is-in) ------------------- */
@media (prefers-reduced-motion: no-preference) {
	[data-reveal] {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.32, 1), transform 0.7s cubic-bezier(0.16, 0.84, 0.32, 1);
		will-change: opacity, transform;
	}
	[data-reveal].is-in { opacity: 1; transform: none; }

	/* Stagger direct children of a container marked [data-reveal-children]. */
	[data-reveal-children] > * {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 0.65s cubic-bezier(0.16, 0.84, 0.32, 1), transform 0.65s cubic-bezier(0.16, 0.84, 0.32, 1);
	}
	[data-reveal-children].is-in > * { opacity: 1; transform: none; }
	[data-reveal-children].is-in > *:nth-child(1) { transition-delay: 0.04s; }
	[data-reveal-children].is-in > *:nth-child(2) { transition-delay: 0.10s; }
	[data-reveal-children].is-in > *:nth-child(3) { transition-delay: 0.16s; }
	[data-reveal-children].is-in > *:nth-child(4) { transition-delay: 0.22s; }
	[data-reveal-children].is-in > *:nth-child(5) { transition-delay: 0.28s; }
	[data-reveal-children].is-in > *:nth-child(6) { transition-delay: 0.34s; }
}

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

/* ---- Network radar / coverage animation --------------------------------- */
@keyframes tq-radar-sweep { to { transform: rotate(360deg); } }
@keyframes tq-ring-pulse {
	0%   { transform: scale(0.6); opacity: 0.9; }
	100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
	.tq-radar { animation: tq-radar-sweep 7s linear infinite; transform-origin: center; }
	.tq-ring { animation: tq-ring-pulse 2.8s ease-out infinite; }
}

/* ---- Utilities / components --------------------------------------------- */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.prose img { border-radius: 0.5rem; }

/* Products dropdown — CSS-driven (hover + keyboard focus-within). */
.tq-dropdown {
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 50;
}
.tq-has-dropdown:hover > .tq-dropdown,
.tq-has-dropdown:focus-within > .tq-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
.tq-has-dropdown:hover .tq-caret,
.tq-has-dropdown:focus-within .tq-caret { transform: rotate(180deg); }

/* Pagination (the_posts_pagination) */
.nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nav-links .page-numbers {
	display: inline-flex;
	min-width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: 0 0.85rem;
	border: 1px solid var(--tq-line);
	border-radius: 0.65rem;
	color: var(--tq-ink);
	font-family: 'Space Mono', monospace;
	font-size: 0.85rem;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.nav-links .page-numbers.current {
	background: var(--tq-brand);
	border-color: var(--tq-brand);
	color: #fff;
}
.nav-links a.page-numbers:hover { background: #EAF1FB; }