/* ==========================================================================
   3L1A — Global theme stylesheet
   Loaded on every page. Block-specific styles live under
   blocks/<slug>/style.css and are enqueued on demand by WordPress.
   ========================================================================== */

:root {
	--3l1a-bg: #fcf9f8;
	--3l1a-on-surface: #1b1c1c;
	--3l1a-surface-low: #f6f3f2;
	--3l1a-surface-high: #eae7e7;
	--3l1a-primary: #0072ce;
	--3l1a-secondary: #F06221;
	--3l1a-outline: #c1c7d4;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* Prevent accidental horizontal scroll (and white bands on mobile) from oversized
	   absolute decoratives inside blocks. `clip` keeps position: sticky working. */
	overflow-x: clip;
}

body {
	font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--3l1a-on-surface);
	background: var(--3l1a-bg);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	width: 100%;
	max-width: 100%;
}

/* Accessible focus ring */
:focus-visible {
	outline: 2px solid var(--3l1a-primary);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

/* Material Symbols — used in the header (mobile menu), hero, services and faq. */
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	display: inline-block;
	line-height: 1;
	font-feature-settings: 'liga';
	user-select: none;
}

/* Brand gradient text — used in the header, footer and inside several blocks. */
.brand-gradient-text {
	background: linear-gradient(to right, #F06221 0%, #FBB040 35%, #41B6E6 75%, #0072CE 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Editorial 12-col grid helper — atomic layout utility shared across blocks. */
.editorial-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}

/* Services mega-menu — editorial hover panel docked to the sticky header. */
.services-megamenu {
	will-change: opacity, transform;
}
.services-megamenu__column {
	position: relative;
	padding-top: 1.25rem;
}
.services-megamenu__column::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient( to right, #F06221, #0072CE );
	transition: width 300ms ease;
}
.services-megamenu__column:hover::before {
	width: 40%;
}
.services-megamenu__child {
	position: relative;
	padding-left: 14px;
}
.services-megamenu__child::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 1px;
	background: currentColor;
	opacity: 0.3;
	transition: width 180ms ease, opacity 180ms ease;
}
.services-megamenu__child:hover::before {
	width: 10px;
	opacity: 0.8;
}

/* Blog single — editorial long-form content. `prose` comes from the Tailwind
   Typography plugin loaded in the CDN query string (/?plugins=…,typography).
   These tweaks align it with the editorial brand tokens. */
.blog-single .prose {
	--tw-prose-body: #414752;
	--tw-prose-headings: #1b1c1c;
	--tw-prose-links: #0072ce;
	--tw-prose-bold: #1b1c1c;
	--tw-prose-quotes: #1b1c1c;
	--tw-prose-quote-borders: #fc7728;
	--tw-prose-bullets: #c1c7d4;
	--tw-prose-captions: #717783;
}
.blog-single .prose > :where(h2, h3, h4) {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #1b1c1c;
}
.blog-single .prose > h2 { font-size: 1.875rem; margin-top: 4rem; margin-bottom: 1.5rem; }
.blog-single .prose > h3 { font-size: 1.5rem;   margin-top: 3rem;   margin-bottom: 1rem; }
.blog-single .prose > :where(p, ul, ol) {
	font-size: 1.125rem;
	line-height: 1.8;
}
.blog-single .prose > :first-child,
.blog-single .prose > p:first-of-type {
	font-size: 1.25rem;
	font-weight: 500;
	color: #1b1c1c;
	line-height: 1.5;
}
.blog-single .prose blockquote {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.5;
	padding: 1rem 0 1rem 2rem;
	margin: 3rem 0;
	background: rgba( 246, 243, 242, 0.6 );
	border-left: 4px solid #fc7728;
	color: #1b1c1c;
}

/* Line-clamp fallback (Tailwind core may not ship it depending on version). */
.line-clamp-2,
.line-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

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