/* Custom styles for InventoryOS marketing site */

:root {
    --app-dark: #1A1E26;
    --app-card: #2C3240;
    --app-light: #212630;
    --app-accent: #6366F1;
    --app-accent-light: #818CF8;
}

* {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Navigation - Simple links like Huntress */
.nav-link-simple {
    @apply text-white hover:text-app-accent-light transition-colors text-sm font-medium;
}

.nav-link {
    @apply text-slate-300 hover:text-white transition-colors py-2 text-sm font-medium;
}

.nav-dropdown {
    @apply relative;
}

.nav-dropdown > button {
    @apply flex items-center space-x-1;
}

/* Simple chevron for dropdown - more subtle */
.nav-dropdown > button.nav-link-simple::after {
    content: '';
    @apply inline-block w-0 h-0 ml-1.5 border-t-[4px] border-r-[4px] border-l-[4px] border-transparent border-t-white transition-transform;
}

.nav-dropdown:hover > button.nav-link-simple::after {
    @apply transform rotate-180 border-t-app-accent-light;
}

.dropdown-menu {
    @apply hidden absolute top-full left-0 mt-2 w-56 bg-app-card border border-app-light rounded-lg shadow-xl py-2 z-50 opacity-0 transition-opacity duration-200;
}

.nav-dropdown:hover .dropdown-menu {
    @apply block opacity-100;
}

.dropdown-item {
    @apply block px-4 py-2 text-sm text-slate-300 hover:bg-app-light hover:text-white transition-colors;
}

/* Buttons */
.btn-primary {
    @apply px-4 py-2 bg-app-accent hover:bg-app-accent-light text-white font-medium rounded-md transition-colors;
}

.btn-primary-lg {
    @apply px-6 py-3 bg-app-accent hover:bg-app-accent-light text-white font-semibold rounded-md transition-colors inline-flex items-center;
}

.btn-secondary {
    @apply px-4 py-2 bg-app-card hover:bg-app-light text-white font-medium rounded-md border border-app-light transition-colors;
}

.btn-secondary-lg {
    @apply px-6 py-3 bg-app-card hover:bg-app-light text-white font-semibold rounded-md border border-app-light transition-colors inline-flex items-center;
}

/* Free Trial Button - More prominent default, indigo-500 on hover */
.btn-free-trial {
    @apply px-8 py-3 bg-transparent border-2 border-indigo-500 text-indigo-400 hover:bg-indigo-500 hover:text-white font-bold rounded-lg transition-all duration-200 inline-flex items-center text-base;
    transform: translateY(0);
}

.btn-free-trial:hover {
    transform: translateY(-1px);
    border-color: indigo-500;
}

/* Feature Cards */
.feature-card {
    @apply bg-app-card border border-app-light rounded-lg p-6 hover:border-app-accent/50 transition-colors;
}

/* Solution Cards */
.solution-card {
    @apply bg-app-card border border-app-light rounded-lg p-8 hover:border-app-accent/50 transition-colors;
}

/* Pricing Cards */
.pricing-card {
    @apply bg-app-card border border-app-light rounded-lg p-8 hover:border-app-accent/50 transition-colors;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Mobile menu */
#mobile-menu {
    transition: max-height 0.3s ease-out;
}

#mobile-menu.hidden {
    max-height: 0;
    overflow: hidden;
}

/* Multi-layer header spacing - will be adjusted by JS based on alert visibility */

/* Smooth scrolling for anchor links - account for multi-layer header */
html {
    scroll-padding-top: 144px; /* Alert (40px) + Utility (40px) + Main (64px) */
}

/* Alert banner styling */
#alert-banner {
    transition: all 0.3s ease;
}

/* Utility nav styling */
#utility-nav {
    transition: top 0.3s ease;
}

/* Main nav styling */
#main-nav {
    transition: top 0.3s ease;
}

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

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

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