/**
 * EnableU theme — styles not emitted in the Next.js Tailwind bundle
 * (e.g. bg-blue-light, testimonial-*). Keeps parity with the backup UI.
 */

/* WordPress admin bar offset for fixed header and gradient overlay */
body.admin-bar .fixed.top-0 {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .fixed.top-0 {
		top: 46px;
	}
}

/* Poppins applies site-wide; Next layout pairs __variable_51684b with font-sans.
   Override Tailwind's --font-sans / --default-font-family so every element
   that references them (including .font-sans utility) resolves to Poppins. */
:root {
	--font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--default-font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
body.font-sans {
	font-family: Poppins, "Poppins Fallback", ui-sans-serif, system-ui, sans-serif;
}

/* Used on homepage testimonials section; token was referenced in React but not in @theme */
.bg-blue-light {
	background-color: color-mix(in oklch, var(--primary) 6%, var(--background));
}

/* Testimonial slider (class names from components/testimonial-slider.tsx) */
.testimonial-card {
	border-radius: 1rem;
	border: 1px solid color-mix(in oklch, var(--border), transparent 30%);
	background: color-mix(in oklch, var(--card), transparent 5%);
	box-shadow: 0 10px 40px -10px color-mix(in oklch, var(--primary), transparent 85%);
}

.testimonial-quote-icon {
	color: color-mix(in oklch, var(--accent), transparent 35%);
}

.testimonial-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	padding: 0;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.testimonial-dot-active {
	background-color: var(--accent);
	transform: scale(1.15);
}

.testimonial-dot-inactive {
	background-color: color-mix(in oklch, var(--muted-foreground), transparent 60%);
}

.testimonial-dot-inactive:hover {
	background-color: color-mix(in oklch, var(--muted-foreground), transparent 30%);
}

.testimonial-nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	border: 1px solid color-mix(in oklch, var(--border), transparent 20%);
	background: var(--card);
	color: var(--foreground);
	box-shadow: 0 4px 12px color-mix(in oklch, var(--foreground), transparent 92%);
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.testimonial-nav-btn:hover {
	background: color-mix(in oklch, var(--primary), transparent 94%);
	box-shadow: 0 6px 16px color-mix(in oklch, var(--foreground), transparent 88%);
}

/* Product dropdown panel (Radix → static HTML) */
.enableu-product-panel {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 0.5rem;
	width: min(480px, calc(100vw - 2rem));
	padding: 1.5rem;
	border-radius: 0.75rem;
	border: 1px solid color-mix(in oklch, var(--border), transparent 30%);
	background: var(--popover);
	color: var(--popover-foreground);
	box-shadow: 0 10px 40px -10px color-mix(in oklch, var(--foreground), transparent 80%);
	z-index: 60;
}

.enableu-product-panel[hidden] {
	display: none !important;
}

.enableu-dropdown-wrap {
	position: relative;
}

/* Scroll-reveal animation (matches Next.js useScrollAnimation hook).
   Scoped to html.js-scroll-reveal so content stays visible if JS fails. */
html.js-scroll-reveal [data-scroll-reveal] {
	opacity: 0;
	transform: translateY(2rem);
	transition: opacity 1s ease-out, transform 1s ease-out;
}

html.js-scroll-reveal [data-scroll-reveal].enableu-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	html.js-scroll-reveal [data-scroll-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* WordPress block / classic content inside main */
.enableu-page-content .alignwide {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
}

.enableu-page-content > *:first-child {
	margin-top: 0;
}

.enableu-page-content > *:last-child {
	margin-bottom: 0;
}

/* Blog hub — image ratios and hover (prebuilt Tailwind may omit arbitrary values) */
.enableu-blog-thumb {
	aspect-ratio: 16 / 10;
}

.enableu-blog-thumb--lg {
	aspect-ratio: 2 / 1;
	min-height: 12.5rem;
}

.enableu-blog-thumb--sm {
	aspect-ratio: 4 / 3;
}

.enableu-blog-card:hover .enableu-blog-thumb-img {
	transform: scale(1.02);
}

.enableu-blog-badge-label {
	font-size: 0.6875rem;
	line-height: 1rem;
}

/* Blog hero — title gradient + filter pills (avoid native button / bg-card “grey box” behind label text) */
.enableu-blog-title-gradient {
	display: inline-block;
	background-image: linear-gradient(
		90deg,
		color-mix(in oklch, var(--primary), white 5%),
		var(--accent)
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.enableu-blog-filters {
	justify-content: center;
}

.enableu-blog-filter {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: none;
	box-shadow: none;
	font-family: inherit;
	line-height: 1.25;
	flex-shrink: 0;
	white-space: nowrap;
}

.enableu-blog-filter--inactive {
	background-color: var(--card);
	color: color-mix(in oklch, var(--muted-foreground), transparent 0%);
	border-color: color-mix(in oklch, var(--border), transparent 0%);
}

.enableu-blog-filter--inactive:hover {
	color: var(--foreground);
	border-color: color-mix(in oklch, var(--primary), transparent 50%);
}

.enableu-blog-filter--active {
	background-color: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
	box-shadow: 0 4px 6px -1px color-mix(in oklch, var(--primary), transparent 70%);
}

/* Blog bottom CTA — large two-line headline, gradient on line 2 */
.enableu-blog-cta-headline {
	font-size: clamp(1.75rem, 4.5vw, 3rem);
	letter-spacing: -0.02em;
}

.enableu-blog-cta-gradient-line {
	background-image: linear-gradient(90deg, #2e5b9a 0%, #2bb673 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ── Single post .entry-content — restore prose styling reset by Tailwind preflight ── */

.entry-content h2 {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	color: var(--foreground);
}

.entry-content h3 {
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	color: var(--foreground);
}

.entry-content h4 {
	font-size: 1.125rem;
	line-height: 1.625rem;
	font-weight: 600;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
	color: var(--foreground);
}

.entry-content p {
	margin-bottom: 1.25rem;
	line-height: 1.75;
}

.entry-content ul,
.entry-content ol {
	margin-top: 0.5rem;
	margin-bottom: 1.25rem;
	padding-left: 1.75rem;
}

.entry-content ul {
	list-style-type: disc;
}

.entry-content ol {
	list-style-type: decimal;
}

.entry-content li {
	margin-bottom: 0.375rem;
	line-height: 1.7;
	color: color-mix(in oklch, var(--foreground), var(--muted-foreground) 40%);
}

.entry-content li::marker {
	color: var(--primary);
}

.entry-content figure.wp-block-image {
	margin: 2rem 0;
}

.entry-content figure.wp-block-image img {
	max-width: 100%;
	height: auto;
	border-radius: 0.75rem;
	border: 1px solid color-mix(in oklch, var(--border), transparent 40%);
}

.entry-content figure.wp-block-image figcaption {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--muted-foreground);
	text-align: center;
}

.entry-content a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

.entry-content a:hover {
	color: color-mix(in oklch, var(--primary), black 15%);
}

.entry-content blockquote {
	border-left: 3px solid var(--primary);
	padding-left: 1.25rem;
	margin: 1.5rem 0;
	color: var(--muted-foreground);
	font-style: italic;
}

.entry-content strong {
	font-weight: 600;
	color: var(--foreground);
}

.entry-content code {
	font-size: 0.875em;
	background: color-mix(in oklch, var(--muted), transparent 50%);
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
}

.entry-content hr {
	margin: 2rem 0;
	border: none;
	border-top: 1px solid var(--border);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.9375rem;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--border);
	padding: 0.625rem 0.75rem;
	text-align: left;
}

.entry-content th {
	background: color-mix(in oklch, var(--muted), transparent 40%);
	font-weight: 600;
	color: var(--foreground);
}

.entry-content td {
	color: var(--muted-foreground);
}

@media (min-width: 768px) {
	.entry-content h2 {
		font-size: 1.75rem;
		line-height: 2.25rem;
	}
	.entry-content h3 {
		font-size: 1.375rem;
		line-height: 2rem;
	}
}

/* Pricing tier colors (not in compiled Tailwind bundle) */
.bg-purple-100 { background-color: #f3e8ff; }
.bg-purple-600 { background-color: #9333ea; }
.text-purple-700 { color: #7e22ce; }
.bg-amber-50 { background-color: #fffbeb; }
.border-amber-300\/60 { border-color: rgb(252 211 77 / 0.6); }
.text-amber-500 { color: #f59e0b; }
.text-amber-800 { color: #92400e; }
.text-orange-500 { color: #f97316; }