/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* Custom Animations */
@keyframes pulse-custom {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.2; 
    }
    50% { 
        transform: scale(1.05); 
        opacity: 0.3; 
    }
}

.pulse-custom {
    animation: pulse-custom 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Design System Colors */
:root {
    --color-gold-metallic: #D4AF37;
    --color-gold-warm-start: #B88A2B;
    --color-gold-warm-end: #E8C76B;
    --color-deep-black: #000000;
    --color-charcoal: #1A1A1A;
    --color-soft-white: #F8F8F8;
    --color-light-gray: #CCCCCC;
    --color-background: #FFFFFF;
    --color-background-alt: #F8F8F8;
    --color-text-primary: #1A1A1A;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;
    --color-border: #E5E5E5;
    --color-border-light: #F0F0F0;
}

/* Base Styles */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Gold Gradient Background */
.gradient-gold {
    background: linear-gradient(135deg, #B88A2B 0%, #D4AF37 50%, #E8C76B 100%);
}

.gradient-gold-nav {
    background: linear-gradient(to left, #c29638, #d4af37, #e5c158, #f0d580) !important;
}

/* Prevent navigation flash on page load */
/* All nav elements should have the same base styling */
nav,
nav#mainNavigation,
nav#nav-placeholder,
nav#navigation-placeholder {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    height: 80px !important;
    background: linear-gradient(to left, #c29638, #d4af37, #e5c158, #f0d580) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Gold Glow Effect */
.glow-gold {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* Smooth Transitions */
.transition-smooth {
    transition: all 0.3s ease;
}

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

::-webkit-scrollbar-track {
    background: #F8F8F8;
}

::-webkit-scrollbar-thumb {
    background: var(--color-gold-metallic);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #E8C76B;
}

/* Navigation Active State */
.nav-active {
    color: white !important;
    border-color: white !important;
}

/* Fix Navigation Bar Layout Shift - CRITICAL FIX */
/* Target all navigation links in the gold nav bar - BASE RULE */
nav .gradient-gold-nav a.nav-link,
nav .bg-gradient-to-l a.nav-link,
nav [class*="gradient"] a.nav-link {
    box-sizing: border-box !important;
    /* CRITICAL: Always have a 2px border - base is transparent */
    border: 2px solid transparent !important;
    border-width: 2px !important;
    border-style: solid !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 10px !important;
    border-radius: 0.5rem !important;
    min-width: fit-content !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.5 !important;
    transition: color 0.3s ease, border-color 0.3s ease !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    position: relative !important;
    margin: 0 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

/* Active state - white border and white text */
nav .gradient-gold-nav a.nav-link[class*="border-white"],
nav .bg-gradient-to-l a.nav-link[class*="border-white"],
nav [class*="gradient"] a.nav-link[class*="border-white"] {
    border-color: white !important;
    border-width: 2px !important;
    border-style: solid !important;
    color: white !important;
}

/* Inactive state - transparent border and dark text */
nav .gradient-gold-nav a.nav-link[class*="border-transparent"],
nav .bg-gradient-to-l a.nav-link[class*="border-transparent"],
nav [class*="gradient"] a.nav-link[class*="border-transparent"] {
    border-color: transparent !important;
    border-width: 2px !important;
    border-style: solid !important;
    color: #1A1A1A !important;
}

/* Hover state for inactive links - keep text visible */
nav .gradient-gold-nav a.nav-link[class*="border-transparent"]:hover,
nav .bg-gradient-to-l a.nav-link[class*="border-transparent"]:hover,
nav [class*="gradient"] a.nav-link[class*="border-transparent"]:hover {
    color: white !important;
    border-color: white !important;
}

/* New navigation link classes */
.nav-link-item {
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

.active-nav-link {
    color: white !important;
    border-color: white !important;
}

.inactive-nav-link {
    color: #1A1A1A !important;
    border-color: transparent !important;
}

.inactive-nav-link:hover {
    color: white !important;
    border-color: white !important;
}

/* Ensure navigation container is stable - NO MOVEMENT */
nav .gradient-gold-nav {
    position: relative !important;
    width: 100% !important;
    /* Prevent any container shifts */
    overflow: visible !important;
    /* Ensure gold gradient is always visible */
    background: linear-gradient(to left, #c29638, #d4af37, #e5c158, #f0d580) !important;
}

/* Lock the entire nav element */
nav.fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 50 !important;
}

nav .gradient-gold-nav > div:first-child,
nav[id="mainNavigation"] .gradient-gold-nav > div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    position: relative !important;
    /* Prevent any layout shifts */
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    /* Force stable layout - prevent any recalculation */
    contain: layout style paint !important;
    /* GPU acceleration for stability */
    transform: translateZ(0) !important;
    will-change: auto !important;
    /* Prevent font rendering differences */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    /* Lock the navigation menu container width */
    min-width: 0 !important;
    /* Prevent any margin/padding shifts */
    margin: 0 !important;
    padding: 0 !important;
}

/* Lock the navigation menu container to prevent shifting */
nav .gradient-gold-nav .hidden.lg\:flex {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Prevent flex container from shifting - CRITICAL - KEEP FLEX BUT LOCK IT - DESKTOP ONLY */
@media (min-width: 1024px) {
    nav .gradient-gold-nav .hidden.lg\:flex,
    nav .gradient-gold-nav .flex.items-center[class*="gap-8"],
    nav .gradient-gold-nav .flex.items-center {
        display: flex !important; /* KEEP FLEX - don't break the layout */
        align-items: center !important;
        gap: 2rem !important;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
        /* Prevent any layout shifts */
        position: relative !important;
        width: auto !important;
        min-width: 0 !important;
        /* Lock the gap - prevent recalculation */
        column-gap: 2rem !important;
        row-gap: 0 !important;
        /* Ensure stable layout - prevent any recalculation */
        contain: layout style paint !important;
        /* Force GPU acceleration for stability */
        transform: translateZ(0) !important;
        will-change: auto !important;
        /* Prevent font rendering differences */
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
}

/* Ensure each navigation link maintains exact position - NO MOVEMENT - DESKTOP ONLY */
@media (min-width: 1024px) {
    nav .gradient-gold-nav .hidden.lg\:flex a,
    nav .gradient-gold-nav .flex.items-center[class*="gap-8"] a,
    nav .gradient-gold-nav .flex.items-center a {
        /* Already handled in base rule, but ensure no overrides */
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        /* No margin - parent gap handles spacing */
        margin: 0 !important;
        /* Prevent text from causing shifts */
        text-align: center !important;
        /* Lock position */
        position: relative !important;
        /* Ensure consistent font rendering */
        font-kerning: none !important;
        text-rendering: optimizeLegibility !important;
        /* Prevent any transform or translate */
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        will-change: auto !important;
    }
}

/* CRITICAL: Ensure mobile menu is properly hidden on desktop */
/* Mobile menu should NEVER show on desktop */
@media (min-width: 1024px) {
    #mobileMenu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        top: -9999px !important;
    }
}

/* Mobile menu visibility on mobile devices */
@media (max-width: 1023px) {
    #mobileMenu.hidden {
        display: none !important;
    }
    
    #mobileMenu:not(.hidden) {
        display: block !important;
    }
}

/* Text wrapping and overflow prevention */
.break-words {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Prevent text overflow in results page */
#traitsList button,
#traitsList span,
#traitsList p,
#traitsList div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Button Styles */
.btn-gold {
    background-color: #D4AF37;
    color: white;
    transition: all 0.3s ease;
}

.btn-gold:hover {
    background-color: #B88A2B;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.25);
}

/* Card Styles */
.card-shadow {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.card-shadow:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Text Colors */
.text-gold {
    color: #D4AF37;
}

.text-charcoal {
    color: #1A1A1A;
}

.text-secondary {
    color: #666666;
}

/* Background Colors */
.bg-soft-white {
    background-color: #F8F8F8;
}

/* Responsive Utilities for Mobile */
@media (max-width: 640px) {
    /* Ensure navigation logo doesn't overflow */
    nav .gradient-gold-nav .bg-white {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.5rem !important;
        white-space: nowrap !important;
    }
    
    /* Navigation container padding on mobile */
    nav .gradient-gold-nav {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Navigation height on mobile */
    nav .gradient-gold-nav > div:first-child {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
    }
    
    /* Make sure buttons are full width on mobile */
    button[type="submit"] {
        width: 100% !important;
    }
    
    /* Reduce padding on mobile */
    .container-custom {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Ensure forms are readable on mobile */
    input, select, textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* Tablet and Mobile Navigation */
@media (max-width: 1023px) {
    /* Ensure mobile menu button is visible */
    #mobileMenuBtn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hide desktop menu on mobile - MUST override all other rules */
    nav .hidden.lg\:flex,
    nav div.hidden.lg\:flex,
    nav .gradient-gold-nav .hidden.lg\:flex,
    nav .gradient-gold-nav div.hidden.lg\:flex {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* Ensure proper spacing on all screen sizes */
@media (min-width: 1024px) {
    /* Desktop: show desktop menu */
    nav .hidden.lg\:flex,
    nav div.hidden.lg\:flex,
    div.hidden.lg\:flex {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Desktop: hide mobile menu button */
    #mobileMenuBtn {
        display: none !important;
    }
    
    /* Desktop: ensure mobile menu is hidden */
    #mobileMenu {
        display: none !important;
    }
}

/* Mobile Navigation Improvements */
@media (max-width: 1023px) {
    /* Mobile navigation bar - compact height */
    nav .gradient-gold-nav > div:first-child {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
    }
    
    /* Ensure mobile menu button is visible and properly styled */
    #mobileMenuBtn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 60 !important;
        cursor: pointer !important;
        min-width: 44px !important;
        min-height: 44px !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    /* Hide desktop menu completely on mobile - ONLY in mobile media query */
    nav .hidden.lg\:flex,
    nav div.hidden.lg\:flex,
    div.hidden.lg\:flex {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Ensure logo is appropriately sized on mobile */
    nav .gradient-gold-nav a .bg-white {
        font-size: 0.9rem !important;
        padding: 6px 10px !important;
    }
    
    /* Mobile menu container - positioned absolutely below nav */
    #mobileMenu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: white !important;
        border-top: 1px solid #E5E5E5 !important;
        z-index: 50 !important;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
        transform-origin: top !important;
    }
    
    /* Hidden state */
    #mobileMenu.hidden {
        display: none !important;
        opacity: 0 !important;
        transform: translateY(-10px) !important;
        pointer-events: none !important;
    }
    
    /* Active/Visible state */
    #mobileMenu:not(.hidden),
    #mobileMenu.active {
        display: block !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
    
    /* Mobile menu links styling - ensure dark text on white background */
    #mobileMenu a {
        display: block !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: auto !important;
        color: #1A1A1A !important; /* Dark text by default */
        background-color: transparent !important;
    }
    
    /* Active link styling */
    #mobileMenu a.bg-\[#D4AF37\],
    #mobileMenu a[style*="background-color: #D4AF37"],
    #mobileMenu a[style*="background-color:#D4AF37"] {
        color: white !important;
        background-color: #D4AF37 !important;
    }
    
    /* Hover state for inactive links */
    #mobileMenu a:hover:not(.bg-\[#D4AF37\]):not([style*="background-color: #D4AF37"]) {
        color: white !important;
        background-color: #D4AF37 !important;
    }
    
    /* Ensure all mobile menu links are visible */
    #mobileMenu .space-y-1 a,
    #mobileMenu .space-y-2 a,
    #mobileMenu div a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #1A1A1A !important; /* Force dark text */
    }
    
    /* Ensure navigation container has proper positioning */
    nav .gradient-gold-nav {
        position: relative !important;
    }
    
    /* Mobile navigation collapse on scroll */
    #mainNavigation {
        transition: transform 0.3s ease-in-out !important;
        will-change: transform !important;
    }
    
    /* Ensure navigation doesn't jump when collapsing */
    body {
        padding-top: 0 !important;
    }
}

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