/**
 * SNAhelper Landing Page - Main Styles
 * =====================================
 * Custom CSS utilities and base styles
 * Most styling is handled by Tailwind CSS
 */

/* ========================================
   UTILITY CLASSES
   ======================================== */

/**
 * Hide scrollbar utility
 * Used for horizontal scrolling elements
 */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ========================================
   GLASSMORPHISM EFFECTS
   ======================================== */

/**
 * Glass effect for navigation
 * Creates frosted glass appearance
 */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ========================================
   HERO SECTION
   ======================================== */

/**
 * Hero glow effect
 * Subtle blue radial gradient behind hero content
 */
.hero-glow {
    background: radial-gradient(
        circle at 50% 0%,
        rgba(59, 130, 246, 0.15) 0%,
        rgba(255, 255, 255, 0) 50%
    );
}

/* ========================================
   BACKGROUND PATTERNS
   ======================================== */

/**
 * Subtle grid pattern
 * Creates tech/modern feel in hero section
 */
.bg-grid-pattern {
    background-image:
        linear-gradient(to right, #f1f5f9 1px, transparent 1px),
        linear-gradient(to bottom, #f1f5f9 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ========================================
   BRAND COLORS
   ======================================== */

/**
 * Brand blue background
 * Used for buttons and accent elements
 */
.brand-blue {
    background-color: #0066FF;
}

/* ========================================
   NAVIGATION HIDE/SHOW ON SCROLL
   ======================================== */

/**
 * Hidden navigation state
 * Slides nav out of view when scrolling down
 */
.nav-hidden {
    transform: translateY(-100%);
}

/**
 * Scrolled navigation state
 * Adds shadow when page is scrolled
 */
.nav-scrolled {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}