/* 
 * public-compact.css - Compact public page styles
 * Replaces public.css with mobile-optimized hero section
 */

/* ==========================================================================
   MOBILE-OPTIMIZED HERO SECTION
   ========================================================================== */

.hero-section {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-sage) 100%);
    /* background-position: center;
    background-size: cover;
    background-repeat: no-repeat; */
    padding: 2rem 0; /* More compact base padding */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Add subtle texture overlay to hero */
.hero-section::before {

    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.08) 0%, transparent 50%);
    pointer-events: none;
}

.hero-logo {
    margin-bottom: 1rem !important; /* Compact mobile spacing */
    position: relative;
    z-index: 1;
}

.hero-logo-img {
    max-height: 100px; /* Smaller on mobile */
    width: auto;
    max-width: 100%;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

.hero-subtitle {
    font-size: 1rem; /* Smaller mobile text */
    line-height: 1.4;
    max-width: 650px;
    margin: 0 auto 1.5rem auto !important; /* Compact bottom margin */
    position: relative;
    z-index: 1;
    color: white;
}

.hero-cta {
    margin-top: 0 !important; /* Remove extra top margin */
    position: relative;
    z-index: 1;
    gap: 0.75rem !important;
}

/* Compact mobile buttons */
.hero-cta .btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    flex: 0 0 auto; /* Don't grow to full width */
}

/* Responsive text for buttons */
@media (max-width: 576px) {
    .hero-cta {
        flex-direction: row !important; /* Keep horizontal on mobile */
        justify-content: center;
        gap: 0.5rem !important;
    }
    
    /* Hide long text, show short text */
    .btn-text-long {
        display: none;
    }
    
    .btn-text-short {
        display: inline;
    }
    
    .hero-cta .btn {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.85rem !important;
    }
}

/* Desktop improvements */
@media (min-width: 577px) {
    .btn-text-long {
        display: inline;
    }
    
    .btn-text-short {
        display: none;
    }
}

@media (min-width: 768px) {
    .hero-section {
        padding: 3rem 0; /* More generous desktop padding */
    }
    
    .hero-logo {
        margin-bottom: 1.5rem !important;
    }
    
    .hero-logo-img {
        max-height: 120px;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
        margin-bottom: 2rem !important;
    }
    
    .hero-cta {
        margin-top: 0.5rem !important;
    }
    
    .hero-cta .btn {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }
}

@media (min-width: 1200px) {
    .hero-section {
        padding: 4rem 0;
    }
    
    .hero-logo-img {
        max-height: 140px;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
}

/* ==========================================================================
   FEATURE ICONS (borrowed from public.css)
   ========================================================================== */

.feature-icon {
    width: 60px; /* Smaller base size */
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--brand-sage), var(--brand-gold));
    color: white;
    box-shadow: 0 4px 16px rgba(71, 149, 82, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(71, 149, 82, 0.4);
}

/* Specific icon color variations */
.feature-icon.bg-success {
    background: linear-gradient(135deg, var(--brand-sage), #3e8449) !important;
}

.feature-icon.bg-primary {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-sage)) !important;
}

.feature-icon.bg-warning {
    background: linear-gradient(135deg, var(--brand-gold), var(--brand-brown)) !important;
}

@media (min-width: 768px) {
    .feature-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
}

/* ==========================================================================
   ENHANCED CARD STYLING (borrowed from public.css)
   ========================================================================== */

.card.shadow-sm {
    transition: all 0.3s ease;
    border: 0;
}

.card.shadow-sm:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.card.border-2 {
    transition: all 0.3s ease;
}

.card.border-2:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15) !important;
}

/* ==========================================================================
   FLOATING CONTROLS ENHANCEMENT (borrowed from public.css)
   ========================================================================== */

.position-fixed .btn {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.position-fixed .btn.bg-white {
    background-color: rgba(255,255,255,0.95) !important;
}

/* ==========================================================================
   SMOOTH SCROLL FOR ANCHOR LINKS
   ========================================================================== */

html {
    scroll-behavior: smooth;
}