/* Ported from the original src/index.css (Google AI Studio build) */

/* IMPORTANT: these base defaults must live inside @layer base, matching
   Tailwind's own cascade layers. Tailwind puts utility classes (like
   text-white, text-emerald-600) in @layer utilities, which always beats
   @layer base regardless of selector specificity. If these rules are
   left unlayered, they out-rank EVERY color utility on every heading
   site-wide — which is exactly what caused headings like "1/2 Truck
   Load" to render invisible-dark on dark backgrounds. */
@layer base {
	body {
		font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
		background-color: #f8fafc;
		color: #1e293b;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
		color: #0f172a;
	}
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
	background: #16a34a;
}

/* Glassmorphism & clean panel utility classes */
.glass-panel {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(226, 232, 240, 0.9);
}

.glass-panel-dark {
	background: rgba(15, 23, 42, 0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.text-gradient-emerald {
	background: linear-gradient(135deg, #15803d 0%, #16a34a 50%, #22c55e 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-gradient-gold {
	background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* 3-second subtle CTA glow animation (1% scale + 360-degree halo glow) */
@keyframes ctaGlowPulse {
	0%, 100% {
		box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.25);
		transform: scale(1);
	}
	50% {
		box-shadow: 0 0 20px 6px rgba(16, 185, 129, 0.65), 0 0 0 4px rgba(16, 185, 129, 0.35);
		transform: scale(1.01);
	}
}

.animate-cta-glow {
	animation: ctaGlowPulse 3s ease-in-out infinite;
}

/* Simple scroll-reveal used in place of the original framer-motion fades */
.naztas-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.naztas-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Body padding so fixed header + mobile bottom bar never overlap content */
body.naztas-body {
	padding-bottom: 84px;
}
@media (min-width: 768px) {
	body.naztas-body {
		padding-bottom: 0;
	}
}

/* Mobile drawer menu open/close (mirrors the React conditional render) */
#naztas-mobile-menu {
	display: none;
}
#naztas-mobile-menu.is-open {
	display: block;
}

/* Items-we-take accordion */
.naztas-accordion-panel {
	display: none;
}
.naztas-accordion-panel.is-open {
	display: block;
}
.naztas-accordion-icon-plus,
.naztas-accordion-icon-minus {
	display: none;
}
.naztas-accordion-item.is-open .naztas-accordion-icon-minus {
	display: block;
}
.naztas-accordion-item:not(.is-open) .naztas-accordion-icon-plus {
	display: block;
}

/* Truck load estimator widget panels */
.naztas-load-panel {
	display: none;
}
.naztas-load-panel.is-active {
	display: block;
}

/* Reviews carousel slides */
.naztas-review-slide {
	display: none;
}
.naztas-review-slide.is-active {
	display: block;
}

/* Junk estimator modal */
#naztas-estimator-modal {
	display: none;
}
#naztas-estimator-modal.is-open {
	display: flex;
}