/* Custom CSS to match Tailwind design system with Bootstrap */

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

:root {
    /* Navy/Slate base palette */
    --background: hsl(220, 25%, 97%);
    --foreground: hsl(222, 47%, 11%);
    
    --card: hsl(0, 0%, 100%);
    --card-foreground: hsl(222, 47%, 11%);
    
    --popover: hsl(0, 0%, 100%);
    --popover-foreground: hsl(222, 47%, 11%);
    
    /* Deep navy primary */
    --primary: hsl(222, 47%, 15%);
    --primary-foreground: hsl(0, 0%, 100%);
    
    /* Light slate secondary */
    --secondary: hsl(220, 20%, 96%);
    --secondary-foreground: hsl(222, 47%, 15%);
    
    /* Muted tones */
    --muted: hsl(220, 15%, 91%);
    --muted-foreground: hsl(220, 10%, 45%);
    
    /* Coral/Orange accent for CTAs */
    --accent: hsl(16, 90%, 55%);
    --accent-foreground: hsl(0, 0%, 100%);
    
    /* Teal for success/features */
    --success: hsl(170, 75%, 40%);
    --success-foreground: hsl(0, 0%, 100%);
    
    --destructive: hsl(0, 84%, 60%);
    --destructive-foreground: hsl(0, 0%, 100%);
    
    --border: hsl(220, 20%, 88%);
    --input: hsl(220, 20%, 88%);
    --ring: hsl(16, 90%, 55%);
    
    --radius: 0.75rem;
    
    /* Custom design tokens */
    --hero-gradient: linear-gradient(135deg, hsl(222, 47%, 11%) 0%, hsl(222, 47%, 20%) 50%, hsl(210, 50%, 25%) 100%);
    --cta-gradient: linear-gradient(135deg, hsl(16, 90%, 55%) 0%, hsl(25, 95%, 50%) 100%);
    --cta-hover-gradient: linear-gradient(135deg, hsl(16, 90%, 50%) 0%, hsl(25, 95%, 45%) 100%);
    --card-gradient: linear-gradient(180deg, hsl(0, 0%, 100%) 0%, hsl(220, 25%, 98%) 100%);
    --glow-accent: 0 0 60px hsla(16, 90%, 55%, 0.3);
    --glow-success: 0 0 40px hsla(170, 75%, 40%, 0.2);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px hsla(222, 47%, 11%, 0.05);
    --shadow-md: 0 4px 12px hsla(222, 47%, 11%, 0.08);
    --shadow-lg: 0 8px 30px hsla(222, 47%, 11%, 0.12);
    --shadow-xl: 0 20px 50px hsla(222, 47%, 11%, 0.15);
    --shadow-cta: 0 8px 30px hsla(16, 90%, 55%, 0.35);
}

* {
    border-color: var(--border);
}

html {
    scroll-behavior: smooth;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.025em;
}

/* Utility Classes */
.hero-gradient {
    background: var(--hero-gradient);
}

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

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

.card-gradient {
    background: var(--card-gradient);
}

.text-gradient {
    background: linear-gradient(135deg, hsl(16, 90%, 55%) 0%, hsl(25, 95%, 50%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.glow-accent {
    box-shadow: var(--glow-accent);
}

.glow-success {
    box-shadow: var(--glow-success);
}

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

/* Custom Button Styles */
.btn-cta {
    background: var(--cta-gradient) !important;
    color: var(--accent-foreground) !important;
    border: none !important;
    box-shadow: var(--shadow-cta);
    transition: all 0.2s;
}

.btn-cta:hover {
    background: var(--cta-hover-gradient) !important;
    box-shadow: 0 12px 40px hsla(16, 90%, 55%, 0.4);
    transform: scale(1.02);
    color: var(--accent-foreground) !important;
}

.btn-cta:active {
    transform: scale(0.98);
}

.btn-hero {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--primary-foreground) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
}

.btn-hero:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--primary-foreground) !important;
}

.btn-hero-accent {
    background: var(--cta-gradient) !important;
    color: var(--accent-foreground) !important;
    border: none !important;
    box-shadow: var(--shadow-cta);
    transition: all 0.2s;
}

.btn-hero-accent:hover {
    background: var(--cta-hover-gradient) !important;
    box-shadow: 0 12px 40px hsla(16, 90%, 55%, 0.4);
    transform: scale(1.02);
    color: var(--accent-foreground) !important;
}

.btn-hero-accent:active {
    transform: scale(0.98);
}

/* Card Styles */
.card-custom {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Section Spacing */
.section-padding {
    padding: 6rem 0;
}

/* Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* Header Styles */
header {
    background: var(--primary) !important;
    transition: all 0.3s;
}

header .navbar {
    background: transparent;
}

header.header-scrolled {
    background: var(--primary) !important;
    box-shadow: var(--shadow-lg);
}

header.header-scrolled .navbar {
    background: transparent;
}

header .logo-text {
    color: white !important;
}

header .logo-text .text-accent {
    color: var(--accent) !important;
}

header .nav-link-text {
    color: white !important;
    opacity: 0.9;
}

header .nav-link-text:hover {
    color: white !important;
    opacity: 1;
}

header #menu-icon {
    color: white !important;
}

header.header-scrolled .logo-text {
    color: white !important;
}

header.header-scrolled .nav-link-text {
    color: white !important;
    opacity: 0.9;
}

header.header-scrolled .nav-link-text:hover {
    color: white !important;
    opacity: 1;
}

header.header-scrolled #menu-icon {
    color: white !important;
}

/* Ensure navbar displays horizontally */
.navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.navbar-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.navbar-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-nav.flex-row .nav-item {
    margin: 0;
}

.navbar-nav.flex-row .nav-link {
    padding: 0.5rem 0;
}

/* Ensure mobile menu is hidden on desktop */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row !important;
    }
    
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    
    #mobileMenu {
        display: none !important;
    }
    
    .navbar-toggler {
        display: none !important;
    }
}

/* Mobile menu styling */
@media (max-width: 991.98px) {
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1000;
    }
    
    .mobile-menu {
        background: var(--card);
        border-radius: 1rem;
        box-shadow: var(--shadow-xl);
        margin: 0 1rem;
    }
}

/* Mobile Menu */
.mobile-menu {
    background: var(--card);
    border-radius: 1rem;
    box-shadow: var(--shadow-xl);
}

/* Accordion Styles */
.accordion-custom .accordion-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.accordion-custom .accordion-button {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: var(--foreground);
    background: transparent;
    box-shadow: none;
}

.accordion-custom .accordion-button:not(.collapsed) {
    color: var(--accent);
    background: transparent;
    box-shadow: none;
}

.accordion-custom .accordion-body {
    color: var(--muted-foreground);
}

/* Background Decorations */
.bg-decoration {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.1;
}

/* Text Colors */
.text-accent {
    color: var(--accent) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-destructive {
    color: var(--destructive) !important;
}

.text-muted {
    color: var(--muted-foreground);
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5);
}

.border-white-10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Background Colors */
.bg-primary-custom {
    background-color: var(--primary) !important;
}

.bg-secondary-custom {
    background-color: var(--secondary) !important;
}

.bg-success-light {
    background-color: hsla(170, 75%, 40%, 0.05);
    border-color: hsla(170, 75%, 40%, 0.2);
}

.bg-destructive-light {
    background-color: hsla(0, 84%, 60%, 0.05);
    border-color: hsla(0, 84%, 60%, 0.2);
}

.bg-accent-light {
    background-color: hsla(16, 90%, 55%, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-padding {
        padding: 4rem 0;
    }
}