/**
 * P3 Engineering - base styles and utilities.
 * Mirrors the Lovable build's @layer base + @layer utilities.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
	border-color: var(--border);
}

/* The hidden attribute always wins, even over display utilities. */
[hidden] {
	display: none !important;
}

/* Dark sections repaint themselves with the swapped variables. */
section.dark,
footer.dark {
	background: var(--background);
	color: var(--foreground);
}

/* Accent-colored word inside headings (the original text-logo-green). */
.green {
	color: oklch(0.55 0.15 118);
}

.dark .green,
.home-mfg .green {
	color: var(--accent-lime);
}

html {
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media (min-width: 768px) {
	html {
		font-size: 18px;
	}
}

body {
	margin: 0;
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	font-feature-settings: "ss01", "cv11";
	min-width: 0;
	line-height: 1.6;
}

html[lang^="en"] body {
	font-family: var(--font-sans-en);
}

h1, h2, h3, h4 {
	font-family: inherit;
	letter-spacing: -0.02em;
	overflow-wrap: break-word;
	word-break: break-word;
	line-height: 1.15;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-weight: 700; }

p { margin: 0 0 1em; }

a {
	color: inherit;
	text-decoration: none;
}

img, video, svg, canvas, iframe {
	max-width: 100%;
}

img, video {
	height: auto;
}

::selection {
	background-color: color-mix(in oklab, var(--accent-lime) 25%, transparent);
	color: var(--blueprint);
}

/* ---------- Layout ---------- */

.container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.section {
	padding-block: clamp(1.5rem, 3.5vw, 2.75rem);
}

/* Section eyebrow - the "05 // TECHNOLOGIES" numbering convention */
.eyebrow {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	color: var(--muted-foreground);
	display: block;
	margin-bottom: 0.75rem;
}

.dark .eyebrow {
	color: var(--accent-lime);
}

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

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
	background: var(--primary);
	color: var(--primary-foreground);
}

.btn-primary:hover {
	background: color-mix(in oklab, var(--primary) 88%, black);
}

.btn-accent {
	background: var(--accent-lime);
	color: var(--blueprint);
}

.btn-accent:hover {
	background: color-mix(in oklab, var(--accent-lime) 88%, white);
}

.btn-outline {
	background: transparent;
	border-color: var(--border);
	color: var(--foreground);
}

.btn-outline:hover {
	border-color: var(--foreground);
}

/* Arrow affordance - "←" in RTL, auto-flips for LTR */
.btn .arrow::before {
	content: "←";
}

html[dir="ltr"] .btn .arrow::before {
	content: "→";
}

/* ---------- Cards ---------- */

.card {
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
}

/* ---------- Blueprint background utilities (from the original) ---------- */

.blueprint-grid {
	background-image:
		linear-gradient(var(--blueprint-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
	background-size: 40px 40px;
}

.blueprint-grid-fine {
	background-image:
		linear-gradient(var(--blueprint-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
	background-size: 20px 20px;
}

.dot-grid {
	background-image: radial-gradient(var(--blueprint-line) 1px, transparent 1px);
	background-size: 24px 24px;
}

.diagonal-lines {
	background-image: repeating-linear-gradient(
		45deg,
		var(--blueprint-line) 0,
		var(--blueprint-line) 1px,
		transparent 1px,
		transparent 12px
	);
}

.bg-mesh {
	background-image:
		radial-gradient(at 20% 10%, color-mix(in oklab, var(--accent-lime) 18%, transparent) 0, transparent 45%),
		radial-gradient(at 85% 30%, color-mix(in oklab, var(--blueprint) 22%, transparent) 0, transparent 50%),
		radial-gradient(at 60% 90%, color-mix(in oklab, var(--accent-lime) 12%, transparent) 0, transparent 55%);
}

.bg-spotlight {
	background: radial-gradient(
		ellipse 80% 60% at 50% 0%,
		color-mix(in oklab, var(--accent-lime) 10%, transparent) 0%,
		transparent 70%
	);
}

/* ---------- Reveal-on-scroll (replaces framer-motion Reveal) ---------- */

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in oklab, var(--background) 92%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
}

.site-header-inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 4rem;
}

.site-logo-text {
	font-family: var(--font-mono);
	font-size: 1.4rem;
	font-weight: 700;
}

.site-logo-text .accent,
.footer-brand .accent {
	color: var(--accent-lime);
}

.site-nav {
	margin-inline-start: auto;
}

.nav-menu {
	display: flex;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu a {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--muted-foreground);
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a {
	color: var(--foreground);
}

.header-ctas {
	display: flex;
	gap: 0.6rem;
}

.nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
}

.nav-toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--foreground);
	margin-block: 5px;
}

@media (max-width: 960px) {
	.nav-toggle { display: block; order: 3; margin-inline-start: auto; }
	.header-ctas { display: none; }
	.site-nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--background);
		border-bottom: 1px solid var(--border);
		padding: 1rem 1.25rem;
	}
	.site-nav.is-open { display: block; }
	.nav-menu { flex-direction: column; gap: 0.75rem; }
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	background: var(--background);
	color: var(--foreground);
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	inset: 0;
	opacity: 0.25;
	pointer-events: none;
}

.hero-inner {
	position: relative;
	padding-block: clamp(4rem, 12vw, 8rem);
	max-width: 820px;
}

.hero-sub {
	font-size: 1.15rem;
	color: var(--muted-foreground);
	max-width: 34rem;
}

.hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--background);
	color: var(--foreground);
	border-top: 1px solid var(--border);
	padding-block: 3rem 1.5rem;
	margin-top: 2.5rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 2rem;
}

@media (max-width: 960px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
	.footer-grid { grid-template-columns: 1fr; }
}

.footer-title {
	font-size: 0.9rem;
	color: var(--muted-foreground);
	margin-bottom: 0.75rem;
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.footer-menu a {
	color: var(--muted-foreground);
	font-size: 0.95rem;
}

.footer-menu a:hover {
	color: var(--foreground);
}

.footer-contact a {
	color: var(--foreground);
}

/* Same logo asset as the header, scaled down for the footer column. */
.footer-logo {
	display: inline-block;
	line-height: 0;
	margin-block-end: 1rem;
}

.footer-logo img {
	height: 6.5rem;
	width: auto;
	max-width: 100%;
}

.footer-tagline,
.footer-supplier {
	color: var(--muted-foreground);
	font-size: 0.9rem;
}

.footer-bottom {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
}

/* ---------- Screen reader ---------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* Screen-reader-only elements must never extend the layout.
   WooCommerce injects .widget_shopping_cart_live_region as a direct child of
   <body>; nothing sets its inset, so it falls back to its static position -
   which in RTL lands just past the content edge and adds ~20px of horizontal
   overflow. Because RTL anchors scrolling to the right, that overflow shifts
   the whole page sideways on mobile. Pinning it to the start corner keeps it
   inside the viewport (it stays 1px and clipped, so it is still invisible).
   Scoped away from :focus so skip links can still reveal themselves. */
.screen-reader-text:not(:focus):not(:focus-within) {
	inset-inline-start: 0 !important;
	inset-block-start: 0 !important;
}

/* ---------- Accessibility: skip link + visible focus (IS 5568 / WCAG 2.0 AA) ---------- */

.skip-link {
	position: fixed;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	top: -100px;
	z-index: 2000;
	background: var(--foreground);
	color: var(--background);
	padding: 0.75rem 1.5rem;
	border-radius: 0 0 6px 6px;
	font-weight: 700;
	text-decoration: none;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: 0;
}

/* Consistent, high-visibility keyboard focus on every interactive element.
   The lime outline shows on dark sections; the dark ring shows on light ones. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.btn-block:focus-visible {
	outline: 2px solid var(--accent-lime);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px color-mix( in oklab, var(--foreground) 60%, transparent );
	border-radius: 3px;
}

/* ---------- Floating WhatsApp button ---------- */

.p3-wa-float {
	position: fixed;
	left: 22px;
	top: 62%;
	z-index: 45; /* below the sticky header (50) so an open mobile drawer covers it */
	display: inline-flex;
	align-items: center;
	height: 60px;
	min-width: 60px;
	border-radius: 999px;
	background: #25d366; /* WhatsApp green */
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	border: 2px solid #c7dc00; /* P3 lime accent */
	box-shadow: 0 6px 20px rgba(17, 24, 32, 0.22);
	transition: transform 0.2s ease, box-shadow 0.2s ease, min-width 0.28s ease;
	animation: p3wa-in 0.5s ease both 0.6s;
}

.p3-wa-icon {
	flex: 0 0 56px;
	display: grid;
	place-items: center;
	height: 56px;
}

.p3-wa-label {
	white-space: nowrap;
	font-weight: 700;
	font-size: 0.95rem;
	max-width: 0;
	opacity: 0;
	transition: max-width 0.28s ease, opacity 0.2s ease, padding 0.28s ease;
}

/* Gentle attention pulse (respects reduced-motion below). */
.p3-wa-float::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 999px;
	border: 2px solid #25d366;
	animation: p3wa-pulse 3.4s ease-out infinite;
	pointer-events: none;
}

@media (hover: hover) {
	.p3-wa-float:hover {
		transform: scale(1.05);
		box-shadow: 0 10px 26px rgba(17, 24, 32, 0.3);
	}
	.p3-wa-float:hover .p3-wa-label {
		max-width: 240px;
		opacity: 1;
		padding-inline-end: 20px;
	}
}

.p3-wa-float:focus-visible {
	outline: 3px solid #111820;
	outline-offset: 3px;
}

@keyframes p3wa-in {
	from { opacity: 0; transform: translateX(-20px) scale(0.9); }
	to   { opacity: 1; transform: none; }
}

@keyframes p3wa-pulse {
	0%   { transform: scale(1); opacity: 0.55; }
	70%  { transform: scale(1.4); opacity: 0; }
	100% { opacity: 0; }
}

/* Floating "call us" button - same shape as the WhatsApp one, stacked beneath
   it, in brand navy so the two actions stay visually distinct. */
.p3-tel-float {
	position: fixed;
	left: 22px;
	top: calc(62% + 74px);
	z-index: 45; /* same layer as the WhatsApp button */
	display: inline-flex;
	align-items: center;
	height: 60px;
	min-width: 60px;
	border-radius: 999px;
	background: var(--blueprint, #111820);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	border: 2px solid var(--accent-lime, #c7dc00);
	box-shadow: 0 6px 20px rgba(17, 24, 32, 0.22);
	transition: transform 0.2s ease, box-shadow 0.2s ease, min-width 0.28s ease;
	animation: p3wa-in 0.5s ease both 0.75s;
}

.p3-tel-icon {
	flex: 0 0 56px;
	display: grid;
	place-items: center;
	height: 56px;
}

.p3-tel-label {
	white-space: nowrap;
	font-weight: 700;
	font-size: 0.95rem;
	max-width: 0;
	opacity: 0;
	transition: max-width 0.28s ease, opacity 0.2s ease, padding 0.28s ease;
}

@media (hover: hover) {
	.p3-tel-float:hover {
		transform: scale(1.05);
		box-shadow: 0 10px 26px rgba(17, 24, 32, 0.3);
	}
	.p3-tel-float:hover .p3-tel-label {
		max-width: 240px;
		opacity: 1;
		padding-inline-end: 20px;
	}
}

.p3-tel-float:focus-visible {
	outline: 3px solid var(--accent-lime, #c7dc00);
	outline-offset: 3px;
}

@media (max-width: 768px) {
	.p3-wa-float {
		left: 16px;
		top: auto;
		bottom: 20px;
		height: 56px;
		min-width: 56px;
	}
	.p3-wa-icon { flex-basis: 52px; height: 52px; }
	.p3-wa-label { display: none; } /* no text on mobile */

	/* Sits directly above the WhatsApp button once both are bottom-anchored. */
	.p3-tel-float {
		left: 16px;
		top: auto;
		bottom: 86px;
		height: 56px;
		min-width: 56px;
	}
	.p3-tel-icon { flex-basis: 52px; height: 52px; }
	.p3-tel-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.p3-wa-float,
	.p3-wa-float::before { animation: none; }
	.p3-wa-float,
	.p3-tel-float { transition: none; animation: none; }
}