/**
 * AiToolGems Child Theme — Consolidated Base Styles
 * Extracted from inline <style> blocks in all templates.
 * Enqueued globally via functions.php
 */

/* === Reset GP Defaults === */
.site-header, .site-footer { display: none !important; }
body { font-family: 'Inter', sans-serif; background-color: #ffffff; color: #0F172A; padding-top: 0 !important; }

/* === Typography === */
.font-headline,
h1, h2, h3, h4, h5, h6 { font-family: 'Manrope', sans-serif !important; }

/* === Material Symbols === */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* === Shared Utility Classes === */
.hero-pattern { background-image: radial-gradient(#e2e8f0 0.5px, transparent 0.5px); background-size: 24px 24px; }
.section-padding { padding-top: 100px; padding-bottom: 100px; }
.gradient-text { background: linear-gradient(135deg, #0F172A 0%, #06B6D4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient { background: linear-gradient(135deg, #0F172A 0%, #06B6D4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); }
.card-glass { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.2); }
.jump-links { position: sticky; top: 80px; z-index: 50; }

/* === Premium Shadows === */
.shadow-premium { box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.08); }
.shadow-glass { box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07); }

/* === WP Content Styles === */
.wp-content p { margin-bottom: 1.5rem; }
.wp-content h2 { font-size: 2.25rem; font-weight: 900; margin-top: 3rem; margin-bottom: 1.5rem; letter-spacing: -0.05em; font-family: 'Manrope', sans-serif; }
.wp-content h3 { font-size: 1.875rem; font-weight: 800; margin-top: 2rem; margin-bottom: 1rem; letter-spacing: -0.025em; font-family: 'Manrope', sans-serif; }
.wp-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.wp-content ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.wp-content li { margin-bottom: 0.5rem; }
.wp-content [data-takeaway] { background-color: #ecfeff; border-left: 4px solid #06b6d4; padding: 1rem; margin: 1.5rem 0; border-radius: 0 0.25rem 0.25rem 0; color: #0f172a; font-size: 0.875rem; font-weight: 700; line-height: 1.5; }

/* === Dark Section WP Content Override === */
.dark-section .wp-content h2,
.dark-section .wp-content h3,
.dark-section .wp-content h4 { color: #f8fafc !important; font-weight: 900; margin-top: 2rem; margin-bottom: 1rem; line-height: 1.3; font-family: inherit; }
.dark-section .wp-content h2 { font-size: 1.75rem; }
.dark-section .wp-content h3 { font-size: 1.25rem; }
.dark-section .wp-content strong,
.dark-section .wp-content b { color: #e2e8f0; font-weight: 700; }
.dark-section .wp-content p { margin-bottom: 1rem; }
.dark-section .wp-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.dark-section .wp-content li { margin-bottom: 0.5rem; }

/* === Mobile TOC === */
.mobile-toc { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: rgba(15,23,42,0.95); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,0.1); padding: 0; }
.mobile-toc-inner { display: flex; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; gap: 0; }
.mobile-toc-inner::-webkit-scrollbar { display: none; }
.mobile-toc a { flex-shrink: 0; padding: 14px 16px; font-size: 12px; font-weight: 700; color: #94a3b8; text-decoration: none; white-space: nowrap; transition: color 0.2s; }
.mobile-toc a:hover, .mobile-toc a.active { color: #06B6D4; }

/* === Scrollbar Hide Utility === */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* === Editorial Grid (Homepage) === */
.editorial-grid { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; }
@media (max-width: 1024px) { .editorial-grid { grid-template-columns: 1fr; } }

/* === Step Connector (How We Test page) === */
.step-connector { position: relative; }
.step-connector::before { content: ''; position: absolute; left: 28px; top: 72px; bottom: -32px; width: 2px; background: linear-gradient(to bottom, rgba(6,182,212,0.3), rgba(6,182,212,0.05)); }
.step-connector:last-child::before { display: none; }

/* === 404 Page Animations === */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* === Motion & Micro-interactions (Skill: Animate) === */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
.animate-marquee { display: flex; width: max-content; animation: marquee 25s linear infinite; }
.pause-on-hover:hover .animate-marquee { animation-play-state: paused; }

.hover-lift { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -12px rgba(6, 182, 212, 0.3); }

/* === Prose Content Styles (page.php) === */
.prose h1, .prose h2, .prose h3, .prose h4 { color: #0F172A !important; font-family: 'Manrope', sans-serif !important; font-weight: 800; }
.prose p, .prose li { color: #475569 !important; }
.prose a { color: #06B6D4 !important; text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose strong { color: #0F172A; }
.prose blockquote { border-left-color: #06B6D4; color: #334155; background: rgba(6, 182, 212, 0.05); padding: 1rem; border-radius: 0 0.5rem 0.5rem 0; }

/* === Form Input Styles (contact, submit pages) === */
.prose-inputs input, .prose-inputs select, .prose-inputs textarea {
    width: 100%; background: #F8FAFC; border: 1px solid #e2e8f0 !important; border-radius: 0.5rem; padding: 1rem; color: #0F172A;
    margin-top: 0.5rem; margin-bottom: 1.5rem; outline: none;
}
.prose-inputs input:focus, .prose-inputs select:focus, .prose-inputs textarea:focus {
    box-shadow: 0 0 0 2px #06B6D4 !important; border-color: #06B6D4 !important;
}
.prose-inputs label { font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; }
.prose-inputs button[type="submit"], .prose-inputs input[type="submit"] {
    width: 100%; background: #06B6D4; padding: 1rem; border-radius: 0.5rem;
    font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; border: none;
}
.prose-inputs button[type="submit"]:hover { background: #0891B2; }

/* === Mobile Overrides === */
@media (max-width: 767px) {
    .section-padding { padding-top: 48px; padding-bottom: 48px; }
    .wp-content h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; }
    .wp-content h3 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.75rem; }
    body { padding-bottom: 52px; } /* space for mobile TOC */
}