/* ═══════════ CSS VARIABLES — matches Lovable index.css ═══════════ */
:root {
    --background: 40 30% 97%;
    --foreground: 220 20% 12%;
    --card: 40 25% 95%;
    --card-foreground: 220 20% 12%;
    --popover: 40 30% 97%;
    --popover-foreground: 220 20% 12%;
    --primary: 14 80% 50%;
    --primary-foreground: 40 30% 97%;
    --secondary: 160 40% 25%;
    --secondary-foreground: 40 30% 97%;
    --muted: 40 15% 90%;
    --muted-foreground: 220 10% 45%;
    --accent: 45 90% 55%;
    --accent-foreground: 220 20% 12%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    --border: 40 15% 85%;
    --input: 40 15% 85%;
    --ring: 14 80% 50%;
    --radius: 0.5rem;

    --hero-gradient: linear-gradient(135deg, hsl(14, 80%, 50%) 0%, hsl(0, 70%, 40%) 50%, hsl(160, 40%, 20%) 100%);
    --section-gradient: linear-gradient(180deg, hsl(40, 30%, 97%) 0%, hsl(40, 25%, 93%) 100%);
    --cta-gradient: linear-gradient(135deg, hsl(14, 80%, 50%) 0%, hsl(25, 85%, 55%) 100%);
    --dark-gradient: linear-gradient(135deg, hsl(220, 20%, 12%) 0%, hsl(160, 30%, 15%) 100%);

    --shadow-warm: 0 4px 20px -4px hsl(14 80% 50% / 0.2);
    --shadow-deep: 0 8px 40px -8px hsl(220 20% 12% / 0.15);
}

/* ═══════════ BASE STYLES ═══════════ */
* {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
}

.font-display {
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
}

.font-body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ═══════════ GRADIENT BACKGROUNDS ═══════════ */
/* These are custom utilities not generated by Tailwind */
.bg-hero-gradient {
    background: var(--hero-gradient);
}

.bg-section-gradient {
    background: var(--section-gradient);
}

.bg-cta-gradient {
    background: var(--cta-gradient);
}

.bg-dark-gradient {
    background: var(--dark-gradient);
}

.text-gradient-hero {
    background: var(--cta-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════ SHADOWS ═══════════ */
.shadow-warm {
    box-shadow: var(--shadow-warm);
}

.shadow-deep {
    box-shadow: var(--shadow-deep);
}

/* ═══════════ NAVBAR ═══════════ */
#site-header {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#site-header.scrolled {
    box-shadow: 0 1px 3px hsl(var(--foreground) / 0.1);
}

/* Nav menu links — match Lovable Navbar */
.menu-item a {
    display: inline-block;
    padding: 0.5rem 0;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
    background: none;
    border-radius: 0;
}

.menu-item a:hover,
.menu-item.current-menu-item a,
.menu-item.current_page_item a {
    color: hsl(var(--primary));
    background-color: transparent;
}

/* Mobile menu */
#mobile-menu .menu-item a {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    border-radius: 0;
}

/* ═══════════ MOBILE MENU ANIMATION ═══════════ */
#mobile-menu.open {
    display: block;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════ BUTTONS ═══════════ */
/* Hero button — matches Lovable variant="hero" size="lg" with text-base px-8 py-6 */
.btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    background: var(--cta-gradient);
    color: hsl(var(--primary-foreground));
    box-shadow: var(--shadow-warm);
    padding: 1.5rem 2rem;
    transition: all 0.3s;
}

.btn-hero:hover {
    box-shadow: var(--shadow-deep);
    transform: scale(1.02);
}

/* Hero outline button — matches Lovable variant="heroOutline" size="lg" with text-base px-8 py-6 */
.btn-hero-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    border: 2px solid hsl(var(--primary-foreground) / 0.3);
    color: hsl(var(--primary-foreground));
    background: transparent;
    padding: 1.5rem 2rem;
    transition: all 0.3s;
}

.btn-hero-outline:hover {
    background-color: hsl(var(--primary-foreground) / 0.1);
}

/* Outline button — matches Lovable variant="outline" size="lg" */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    padding: 0.75rem 2rem;
    transition: all 0.2s;
}

.btn-outline:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

/* Nav join button — matches Lovable Button size="sm" variant="hero" */
.btn-nav-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    background: var(--cta-gradient);
    color: hsl(var(--primary-foreground));
    box-shadow: var(--shadow-warm);
    height: 2.25rem;
    padding: 0 0.75rem;
    transition: all 0.3s;
}

.btn-nav-join:hover {
    box-shadow: var(--shadow-deep);
    transform: scale(1.02);
}

/* ═══════════ COUNTDOWN TIMER ═══════════ */
.countdown-item {
    min-width: 60px;
}

@media (min-width: 640px) {
    .countdown-item {
        min-width: 80px;
    }
}

/* ═══════════ ANIMATIONS ═══════════ */
.animate-fade-in {
    animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-count-pulse {
    animation: countPulse 1s ease-in-out infinite alternate;
}

@keyframes countPulse {
    from { opacity: 0.9; }
    to { opacity: 1; }
}

/* Scroll animations */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════ LINE CLAMP ═══════════ */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═══════════ WORDPRESS OVERRIDES ═══════════ */
/* Override WP block library defaults that conflict with our theme */
:where(body) {
    margin: 0;
    padding: 0;
}

/* Pagination */
.nav-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-links a,
.nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    transition: all 0.2s;
}

.nav-links a:hover {
    border-color: hsl(var(--primary));
    color: hsl(var(--primary));
}

.nav-links .current {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* Polylang language switcher */
.pll-parent-menu-item ul {
    display: flex;
    gap: 0.5rem;
}

.pll-parent-menu-item a {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    text-transform: uppercase;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--foreground) / 0.15);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--foreground) / 0.25);
}

/* ═══════════ PROSE OVERRIDES ═══════════ */
.prose a {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: hsl(var(--primary) / 0.8);
}

/* ═══════════ MISSING TAILWIND OPACITY VARIANTS ═══════════ */
/* These classes are used in WP templates but not in the React source, so they're missing from compiled tailwind.css */

/* bg-primary with opacity */
.bg-primary\/10 { background-color: hsl(var(--primary) / 0.1); }
.bg-primary\/20 { background-color: hsl(var(--primary) / 0.2); }
.bg-primary\/90 { background-color: hsl(var(--primary) / 0.9); }

/* bg-secondary with opacity */
.bg-secondary\/10 { background-color: hsl(var(--secondary) / 0.1); }
.bg-secondary\/20 { background-color: hsl(var(--secondary) / 0.2); }
.bg-secondary\/90 { background-color: hsl(var(--secondary) / 0.9); }

/* bg-accent with opacity */
.bg-accent\/20 { background-color: hsl(var(--accent) / 0.2); }
.bg-accent\/30 { background-color: hsl(var(--accent) / 0.3); }

/* bg-muted with opacity */
.bg-muted\/30 { background-color: hsl(var(--muted) / 0.3); }

/* bg-background with opacity */
.bg-background\/85 { background-color: hsl(var(--background) / 0.85); }

/* text with opacity */
.text-primary\/80 { color: hsl(var(--primary) / 0.8); }
.text-secondary\/80 { color: hsl(var(--secondary) / 0.8); }
.text-foreground\/60 { color: hsl(var(--foreground) / 0.6); }
.text-foreground\/70 { color: hsl(var(--foreground) / 0.7); }
.text-foreground\/80 { color: hsl(var(--foreground) / 0.8); }
.text-muted-foreground\/50 { color: hsl(var(--muted-foreground) / 0.5); }
.text-muted-foreground\/70 { color: hsl(var(--muted-foreground) / 0.7); }
.text-primary-foreground\/50 { color: hsl(var(--primary-foreground) / 0.5); }
.text-primary-foreground\/70 { color: hsl(var(--primary-foreground) / 0.7); }
.text-primary-foreground\/80 { color: hsl(var(--primary-foreground) / 0.8); }

/* border with opacity */
.border-primary\/20 { border-color: hsl(var(--primary) / 0.2); }
.border-primary\/30 { border-color: hsl(var(--primary) / 0.3); }
.border-primary\/50 { border-color: hsl(var(--primary) / 0.5); }
.border-secondary\/30 { border-color: hsl(var(--secondary) / 0.3); }

/* ═══════════ THEME COLOR UTILITIES (ensure they work with HSL vars) ═══════════ */
.bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-accent { background-color: hsl(var(--accent)); }

.text-foreground { color: hsl(var(--foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-secondary { color: hsl(var(--secondary)); }
.text-muted { color: hsl(var(--muted)); }
.text-accent { color: hsl(var(--accent)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }

.border-border { border-color: hsl(var(--border)); }
.border-primary { border-color: hsl(var(--primary)); }
.border-input { border-color: hsl(var(--input)); }

/* ═══════════ MISSING HOVER / ARBITRARY UTILITIES ═══════════ */
.group:hover .group-hover\:bg-primary { background-color: hsl(var(--primary)); }
.group:hover .group-hover\:text-primary { color: hsl(var(--primary)); }
.group:hover .group-hover\:text-primary-foreground { color: hsl(var(--primary-foreground)); }
.hover\:border-primary\/30:hover { border-color: hsl(var(--primary) / 0.3); }
.hover\:text-foreground:hover { color: hsl(var(--foreground)); }
.hover\:text-primary:hover { color: hsl(var(--primary)); }
.hover\:bg-muted:hover { background-color: hsl(var(--muted)); }
.hover\:bg-primary\/20:hover { background-color: hsl(var(--primary) / 0.2); }

/* Arbitrary values */
.leading-\[0\.95\] { line-height: 0.95; }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }

/* Gap fractional */
.gap-1\.5 { gap: 0.375rem; }

/* ═══════════ MORE MISSING HOVER/FOCUS UTILITIES ═══════════ */
.focus\:border-primary\/50:focus { border-color: hsl(var(--primary) / 0.5); }
.focus\:outline-none:focus { outline: none; }
.group:hover .group-hover\:text-secondary { color: hsl(var(--secondary)); }
.hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); }
.hover\:bg-secondary\/90:hover { background-color: hsl(var(--secondary) / 0.9); }
.hover\:border-primary\/20:hover { border-color: hsl(var(--primary) / 0.2); }
.hover\:border-secondary\/30:hover { border-color: hsl(var(--secondary) / 0.3); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:shadow-deep:hover { box-shadow: var(--shadow-deep); }
.hover\:shadow-warm:hover { box-shadow: var(--shadow-warm); }
.hover\:text-primary-foreground:hover { color: hsl(var(--primary-foreground)); }
.hover\:text-primary\/80:hover { color: hsl(var(--primary) / 0.8); }
.hover\:text-secondary\/80:hover { color: hsl(var(--secondary) / 0.8); }

/* Transition for scale */
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

/* ═══════════ ARBITRARY RADIAL GRADIENTS ═══════════ */
.bg-\[radial-gradient\(circle_at_30\%_50\%\,rgba\(255\,255\,255\,0\.08\)\,transparent_70\%\)\] {
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08), transparent 70%);
}
.bg-\[radial-gradient\(circle_at_80\%_20\%\,rgba\(255\,200\,100\,0\.06\)\,transparent_50\%\)\] {
    background: radial-gradient(circle at 80% 20%, rgba(255,200,100,0.06), transparent 50%);
}
.bg-\[radial-gradient\(circle_at_50\%_0\%\,rgba\(255\,255\,255\,0\.1\)\,transparent_60\%\)\] {
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.1), transparent 60%);
}