/*
Theme Name: WebZentics AI
Theme URI: https://webzentics.com
Author: WebZentics
Description: Webzentics marketing theme — branding tokens in inc/branding.php
Version: 0.3.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.2
Text Domain: webzentics
*/

/* Tokens mirror inc/branding.php + Vercel Geist (--ds-*) for marketing chrome */
:root {
	--ds-background-100: #FAFAFA;
	--ds-background-200: #FFFFFF;
	--ds-gray-1000: #000000;
	--ds-gray-900: #171717;
	--ds-gray-600: #666666;
	--ds-gray-200: #EAEAEA;
	--wz-bg: var(--ds-background-100);
	--wz-surface: var(--ds-background-200);
	--wz-text: var(--ds-gray-900);
	--wz-black: var(--ds-gray-1000);
	--wz-muted: var(--ds-gray-600);
	--wz-border: var(--ds-gray-200);
	--wz-link: #3c9020;
	--link: var(--wz-link);
	--wz-purple: var(--wz-link);
	--wz-purple-soft: #6bc742;
	--wz-font: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--wz-container: 1140px;
	--wz-header: 72px;
	--wz-page-banner-height: 300px;
	/* Jet-black buttons (see Documents/branding.md) */
	--wz-btn-jet: #0a0a0a;
	--wz-btn-jet-hover: #171717;
	--wz-btn-text: #ffffff;
	--wz-btn-shine: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 38%, transparent 52%);
	--wz-btn-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14);
	--wz-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	--wz-btn-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.32);
	/* Homepage section rhythm (see Documents/branding.md) */
	--wz-section-y: 4rem;
	--wz-section-y-compact: 3rem;
	--wz-section-header-gap: 3rem;
	--wz-section-stack: 2rem;
	--wz-section-cta-gap: 2rem;
	--wz-section-media-gap: 2rem;
	--wz-section-grid-gap: 3rem;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	z-index: 10000;
	padding: 0.5rem 1rem;
	background: var(--wz-purple);
	color: #fff;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* WordPress primary menu → nav-pill styling */
.header .primary-menu {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.header .primary-menu > .menu-item > a {
	display: inline-flex;
	padding: 0.5rem 0.85rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text, #333);
	text-decoration: none;
}
.header .primary-menu > .menu-item > a:hover,
.header .primary-menu > .menu-item.current-menu-item > a {
	background: var(--grad-pill, linear-gradient(135deg, #f9fafb 0%, #eceef1 100%));
	color: var(--black, #111);
}
.header .menu-item-has-children {
	position: relative;
}
.header .submenu-toggle {
	display: none;
}
.header .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #fff;
	border: 1px solid var(--wz-border);
	border-radius: 12px;
	box-shadow: var(--shadow-md, 0 8px 28px rgba(17, 17, 17, 0.06));
	padding: 0.5rem;
	list-style: none;
	margin: 0.35rem 0 0;
	z-index: 50;
}
.header .menu-item-has-children:hover .sub-menu,
.header .menu-item-has-children:focus-within .sub-menu {
	display: block;
}
.header .sub-menu a {
	display: block;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: var(--text, #333);
	text-decoration: none;
	border-radius: 8px;
}
.header .sub-menu a:hover {
	background: var(--wz-surface);
}

/* Inner page banner — 300px */
.page-banner {
	min-height: var(--wz-page-banner-height);
	display: flex;
	align-items: center;
	background: var(--grad-soft, linear-gradient(180deg, #fafafa 0%, #ffffff 100%));
	border-bottom: 1px solid var(--wz-border);
	position: relative;
	overflow: hidden;
}
.page-banner::after {
	content: '';
	position: absolute;
	right: -10%;
	top: 50%;
	transform: translateY(-50%);
	width: 40%;
	height: 120%;
	background: linear-gradient(145deg, transparent 0%, rgba(124, 58, 237, 0.06) 100%);
	pointer-events: none;
}
.page-banner .container {
	position: relative;
	z-index: 1;
}
.page-banner__eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wz-purple);
	margin-bottom: 0.5rem;
}
.page-banner__title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	color: var(--wz-black);
	letter-spacing: -0.03em;
	margin: 0 0 0.75rem;
	line-height: 1.15;
}
.page-banner__subtitle {
	font-size: 1.05rem;
	color: var(--wz-muted);
	max-width: 42rem;
	margin: 0;
	line-height: 1.6;
}

/* Blog */
.blog-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
	padding: 2rem 0 3rem;
}
.blog-card {
	border: 1px solid var(--wz-border);
	border-radius: var(--radius, 18px);
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.blog-card:hover {
	box-shadow: var(--shadow-md, 0 8px 28px rgba(17, 17, 17, 0.06));
	transform: translateY(-2px);
}
.blog-card__image {
	aspect-ratio: 16/10;
	object-fit: cover;
	width: 100%;
	display: block;
}
.blog-card__body {
	padding: 1.25rem;
}
.blog-card__title {
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
}
.blog-card__title a {
	color: var(--wz-black);
	text-decoration: none;
}
.blog-card__meta {
	font-size: 0.8rem;
	color: var(--wz-muted);
}
.wz-post-body {
	max-width: 720px;
	margin: 0 auto;
	padding: 2rem 1.5rem 3rem;
	font-size: 1.05rem;
	line-height: 1.75;
}
.wz-post-body h2,
.wz-post-body h3 {
	color: var(--wz-black);
	margin-top: 2rem;
}

/* Fluent Forms */
.fluentform .ff-el-form-control,
.fluentform select.ff-el-form-control {
	border: 1px solid var(--wz-border);
	border-radius: 6px;
	padding: 0.4rem 0.65rem;
	font-family: var(--wz-font);
	font-size: 0.8125rem;
	width: 100%;
	background: #fff;
	color: var(--wz-text);
}
.fluentform .ff-btn-submit,
.fluentform button[type="submit"],
.fluentform .ff_submit_btn_wrapper button {
	background-color: var(--wz-btn-jet, #0a0a0a) !important;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 38%, transparent 52%) !important;
	color: var(--wz-btn-text, #fff) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 6px !important;
	padding: 0.4rem 1rem !important;
	font-weight: 600 !important;
	font-size: 0.8125rem !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
	transition: background-color 150ms ease, background-image 150ms ease, box-shadow 150ms ease, transform 150ms ease !important;
}
.fluentform .ff-btn-submit:hover {
	background-color: var(--wz-btn-jet-hover, #171717) !important;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 38%, transparent 52%) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 14px rgba(0, 0, 0, 0.32) !important;
	transform: translateY(-1px);
}
.form-block {
	padding: var(--section-y, 2.75rem) 0;
	background: var(--grad-soft-reverse);
}
.form-block .container {
	max-width: 640px;
}

.wz-thank-you-message {
	font-size: 1.15rem;
	color: var(--wz-muted);
	max-width: 40rem;
}

@media (max-width: 768px) {
	.header .primary-menu {
		display: none;
		flex-direction: column;
		align-items: stretch;
		position: absolute;
		top: 100%;
		left: 1rem;
		right: 1rem;
		background: #fff;
		border: 1px solid var(--wz-border);
		border-radius: 16px;
		padding: 0.75rem;
		box-shadow: var(--shadow-lg);
	}
	.header .primary-menu.is-open {
		display: flex;
	}
	.header .sub-menu {
		position: static;
		box-shadow: none;
		border: none;
		padding-left: 0.5rem;
	}
}

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