/* GatorTop Roofing — custom CSS (loaded after compiled Tailwind in includes/head.php).
 * Holds keyframes, scroll-reveal, hover effects, hero gradient, and other site-specific styles
 * that aren't expressible as Tailwind utilities. Edit this file directly — no build step. */

/* === Accessibility === */
.skip-link { position:absolute; top:-40px; left:0; background:#E8603C; color:#fff; padding:8px 16px; z-index:9999; font-weight:bold; text-decoration:none; transition:top 0.2s; }
.skip-link:focus { top:0; outline:3px solid #1B6B3A; outline-offset:2px; }
/* Global keyboard-focus indicator for all interactive elements. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid #1B6B3A; outline-offset: 2px; border-radius: 2px; }
/* iOS Safari zooms in on form fields with computed font-size < 16px. Force 16px on every form control. */
input, select, textarea { font-size: 16px !important; }
/* Visually-hidden utility for screen-reader-only labels. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hp-field { position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0; z-index:-1; }

/* === Global resets / smoothing === */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100vw; overflow-x: hidden; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-break: break-word; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }
@media (max-width: 374px) {
    .font-display { letter-spacing: -0.03em; }
}

/* === Scroll-reveal animations === */
.reveal { opacity: 0; transform: translateY(35px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* === Card hover effects === */
.service-card { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px -15px rgba(27, 107, 58, 0.15); }
.gallery-item { overflow: hidden; }
.gallery-item img { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.gallery-item:hover img { transform: scale(1.08); }
.price-card { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.price-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -15px rgba(27, 107, 58, 0.12); }
.contact-card { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 15px 40px -10px rgba(27, 107, 58, 0.12); }
.stat-card { position: relative; overflow: hidden; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, #1B6B3A, #2A9D54); transform:scaleX(0); transition:transform 0.5s ease; transform-origin:left; }
.stat-card:hover::before { transform:scaleX(1); }

/* === Layout pieces === */
.nav-solid { background: rgba(249, 246, 241, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.hero-gradient { background: linear-gradient(135deg, #0a3318 0%, #0F4D28 40%, #1B6B3A 100%); }
.hero-photo { background-image: url('/assets/images/hero-bg.webp'); background-size: cover; background-position: center 30%; }
.grain::after { content:''; position:absolute; inset:0; opacity:0.03; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events:none; }

/* === Form inputs === */
.form-input { transition: all 0.3s ease; }
.form-input:focus { border-color: #1B6B3A; box-shadow: 0 0 0 3px rgba(27, 107, 58, 0.1); outline: none; }

/* === Tabs (pricing page legacy + city pages) === */
.tab-btn { transition: all 0.3s ease; }
.tab-btn.active { background: #1B6B3A; color: white; box-shadow: 0 4px 15px rgba(27, 107, 58, 0.3); }
.tab-content { display: none; animation: fadeUp 0.4s ease; }
.tab-content.active { display: block; }

/* === Custom scrollbar === */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:#F9F6F1; }
::-webkit-scrollbar-thumb { background:#1B6B3A; border-radius:3px; }

/* === Animations / keyframes === */
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
.float-anim { animation: float 4s ease-in-out infinite; }
.cta-pulse { animation: ctaPulse 2.5s infinite; }
@keyframes ctaPulse { 0%{box-shadow:0 0 0 0 rgba(27,107,58,0.3);} 70%{box-shadow:0 0 0 12px rgba(27,107,58,0);} 100%{box-shadow:0 0 0 0 rgba(27,107,58,0);} }
@keyframes fadeSlideIn { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.quiz-option { animation: fadeSlideIn 0.35s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }