/*
Theme Name: Count — OpenAI Ads Pixel
Theme URI: https://usecount.app
Author: Count
Author URI: https://usecount.app
Description: Marketing theme for Count, the OpenAI Ads server-side pixel for Shopify. Pixel-faithful conversion of the Count design (home + managed services + qualification quiz). Classic theme, no page builders, no jQuery.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: count
*/

/* =========================================================================
   BASE / RESET  (from source <helmet>)
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #FAFAFC;
	font-family: 'Inter', sans-serif;
	color: #16161D;
}
img { max-width: 100%; height: auto; }
a { color: #4338CA; text-decoration: none; }
a:hover { color: #372FA8; }
input { font-family: 'Inter', sans-serif; }

/* =========================================================================
   KEYFRAMES  (ported from both source files)
   ========================================================================= */
@keyframes feedIn      { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseDot    { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.45); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }
@keyframes pulseDotCoral { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,74,0.45); } 50% { box-shadow: 0 0 0 6px rgba(255,107,74,0); } }
@keyframes floatY      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes tickerFlash { 0% { color: #FF6B4A; } 100% { color: #16161D; } }
@keyframes marqueeX    { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Coral pulse dot variant (services hero) uses this helper class */
.count-dot-coral { animation: pulseDotCoral 2s ease-in-out infinite !important; }

/* Scroll-reveal initial state is applied by JS; this is a graceful no-JS fallback */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

/* =========================================================================
   HOVER / FOCUS STATES
   (converted from style-hover / style-focus attributes; !important is needed
    to override the element's inline base styles)
   ========================================================================= */
.count-navlink:hover        { color: #4338CA !important; }

.hv-indigo:hover            { background: #372FA8 !important; color: #FFFFFF !important; }
.hv-indigo-lift:hover       { background: #372FA8 !important; color: #FFFFFF !important; transform: translateY(-2px) !important; }
.hv-coral:hover             { background: #E5522F !important; color: #FFFFFF !important; }
.hv-coral-lift:hover        { background: #E5522F !important; color: #FFFFFF !important; transform: translateY(-2px) !important; }
.hv-outline-indigo:hover    { border-color: #4338CA !important; color: #4338CA !important; }
.hv-outline-coral:hover     { border-color: #FF6B4A !important; color: #FF6B4A !important; }
.hv-lift:hover              { transform: translateY(-2px) !important; }
.hv-lift-indigo:hover       { transform: translateY(-2px) !important; color: #4338CA !important; }

.card-lift:hover            { transform: translateY(-4px) !important; box-shadow: 0 12px 32px rgba(30,27,75,0.10) !important; }

.faq-head:hover             { color: #4338CA !important; }
.footer-link:hover          { color: #4338CA !important; }

/* Quiz */
.quiz-close:hover           { border-color: #4338CA !important; color: #4338CA !important; }
.quiz-option:hover          { border-color: #4338CA !important; background: #F7F7FE !important; transform: translateX(3px) !important; }
.quiz-input:focus           { border-color: #4338CA !important; }
.quiz-back:hover            { color: #4338CA !important; }

/* Interactive cursor helpers */
.count-clickable { cursor: pointer; }

/* =========================================================================
   MOBILE NAV (hamburger)
   ========================================================================= */
.count-nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	border: 1px solid #E0E0EA;
	border-radius: 10px;
	background: #FFFFFF;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: #16161D;
}
.count-nav-toggle svg { display: block; }

/* =========================================================================
   RESPONSIVE
   Desktop look is preserved (inline styles). These queries only kick in on
   smaller screens and use !important to win over inline styles.
   ========================================================================= */

/* --- Tablet / small desktop --- */
@media (max-width: 1000px) {
	.grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
	.grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- Below 900px: stack layouts, enable hamburger --- */
@media (max-width: 900px) {
	.count-container { padding-left: 20px !important; padding-right: 20px !important; }

	.count-nav-toggle { display: inline-flex; }

	.count-nav-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 4px !important;
		background: #FFFFFF;
		border-bottom: 1px solid #E9E9F0;
		box-shadow: 0 16px 40px rgba(30,27,75,0.12);
		padding: 12px 20px 18px !important;
	}
	.count-nav-menu.is-open { display: flex !important; }
	.count-nav-menu > a,
	.count-nav-menu > .count-nav-cta {
		padding: 12px 8px !important;
		text-align: left !important;
	}
	.count-nav-cta { display: inline-block; }

	/* Hero + two-column sections -> stacked */
	.hero-grid,
	.hero-grid-services,
	.grid-2,
	.services-teaser,
	.offer-grid,
	.case-grid {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	/* Section vertical padding trimmed */
	.section-pad { padding-top: 56px !important; padding-bottom: 56px !important; }

	/* Comparison table scrolls horizontally instead of squashing */
	.compare-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
	.compare-scroll > * { min-width: 760px; }
}

/* --- Below 700px: single-column grids, smaller type --- */
@media (max-width: 700px) {
	.grid-3 { grid-template-columns: 1fr !important; }
	.grid-4 { grid-template-columns: 1fr !important; }
	.count-apply-grid { grid-template-columns: 1fr !important; }

	.fluid-xl { font-size: 38px !important; }
	.fluid-lg { font-size: 28px !important; }

	.hero-pad { padding-top: 56px !important; padding-bottom: 64px !important; }

	/* Case study stat trio can stay 3-up but shrink; keep readable */
	.case-stats { gap: 10px !important; }
}

/* --- Below 480px: tighten further --- */
@media (max-width: 480px) {
	.fluid-xl { font-size: 32px !important; }
	.count-container { padding-left: 16px !important; padding-right: 16px !important; }

	.hero-cta-row { flex-wrap: wrap !important; }
	.hero-cta-row > a,
	.hero-cta-row > .count-clickable { width: 100%; text-align: center; }

	.pad-lg { padding: 32px 20px !important; }
	.footer-inner { flex-direction: column !important; align-items: flex-start !important; }
}

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