/* ============================================================
   APPEALARMOR DESIGN ENHANCEMENT v1.0

   AESTHETIC: "Professional Medical Advocacy"
   - Clean, trustworthy, authoritative
   - Light mode with warm undertones (not clinical/cold)
   - Clear visual hierarchy - users know exactly where to look
   - Buttons that DEMAND to be clicked
   - Subtle motion that guides, not distracts

   PALETTE:
   - Primary: Deep forest green (#166534) - Trust, growth, success
   - Secondary: Warm navy (#1e3a5f) - Authority, expertise
   - Accent: Vibrant emerald (#22c55e) - Action, hope
   - Background: Warm off-white (#fefdfb) - Approachable, not clinical
   - Text: Near-black (#18181b) - Maximum readability
   ============================================================ */

/* ============================================================
   FOUNDATION: Typography & Base Styles
   ============================================================ */

:root {
    /* Color System */
    --aa-green-dark: #166534;
    --aa-green-primary: #16a34a;
    --aa-green-bright: #22c55e;
    --aa-green-light: #dcfce7;
    --aa-navy: #1e3a5f;
    --aa-navy-light: #3b5a7f;
    --aa-blue-accent: #2563eb;
    --aa-bg-warm: #fefdfb;
    --aa-bg-section: #f8fafc;
    --aa-text-primary: #18181b;
    --aa-text-secondary: #3f3f46;
    --aa-text-muted: #71717a;
    --aa-border: #e4e4e7;
    --aa-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --aa-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --aa-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --aa-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

    /* Spacing rhythm */
    --aa-space-xs: 0.25rem;
    --aa-space-sm: 0.5rem;
    --aa-space-md: 1rem;
    --aa-space-lg: 1.5rem;
    --aa-space-xl: 2rem;
    --aa-space-2xl: 3rem;
    --aa-space-3xl: 4rem;

    /* Timing */
    --aa-transition-fast: 150ms ease;
    --aa-transition-medium: 250ms ease;
    --aa-transition-slow: 400ms ease;
}

/* Warm, inviting background */
body {
    background: linear-gradient(180deg, var(--aa-bg-warm) 0%, #f8f7f4 100%) !important;
    color: var(--aa-text-primary) !important;
}

/* ============================================================
   HERO SECTION: Maximum Impact
   ============================================================ */

#heroSection {
    position: relative;
    overflow: hidden;
}

/* Subtle background texture for depth */
#heroSection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(22, 163, 74, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(37, 99, 235, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

#heroSection > * {
    position: relative;
    z-index: 1;
}

/* Hero headline styling */
#heroSection h1 {
    color: var(--aa-text-primary) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
}

/* Subheadline - empathetic tone */
#heroSection .text-xl,
#heroSection .text-2xl {
    color: var(--aa-text-secondary) !important;
    font-weight: 500 !important;
}

/* ============================================================
   CTA BUTTONS: UNMISTAKABLY CLICKABLE
   3D effect, shadows, hover lift, press feedback
   ============================================================ */

/* Primary CTA - The main "Start Appeal" button */
#startAppealBtn,
button.bg-green-600,
button.bg-green-700,
.bg-green-600[onclick],
.bg-green-700[onclick] {
    /* 3D button with depth */
    background: linear-gradient(180deg,
        #22c55e 0%,
        #16a34a 50%,
        #15803d 100%) !important;
    border: none !important;
    border-radius: 16px !important;

    /* The shadow creates the 3D effect */
    box-shadow:
        0 6px 0 #14532d,
        0 8px 16px rgba(22, 101, 52, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;

    /* Text styling */
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;

    /* Interaction */
    cursor: pointer !important;
    transform: translateY(0) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;

    /* Positioning for pseudo-elements */
    position: relative !important;
    overflow: visible !important;
}

/* Hover: Button lifts up */
#startAppealBtn:hover,
button.bg-green-600:hover,
button.bg-green-700:hover,
.bg-green-600[onclick]:hover,
.bg-green-700[onclick]:hover {
    background: linear-gradient(180deg,
        #4ade80 0%,
        #22c55e 50%,
        #16a34a 100%) !important;
    transform: translateY(-4px) !important;
    box-shadow:
        0 10px 0 #14532d,
        0 14px 24px rgba(22, 101, 52, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Active: Button presses down */
#startAppealBtn:active,
button.bg-green-600:active,
button.bg-green-700:active,
.bg-green-600[onclick]:active,
.bg-green-700[onclick]:active {
    transform: translateY(4px) !important;
    box-shadow:
        0 2px 0 #14532d,
        0 4px 8px rgba(22, 101, 52, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.05s ease, box-shadow 0.05s ease !important;
}

/* Focus ring for accessibility */
#startAppealBtn:focus-visible,
button.bg-green-600:focus-visible,
button.bg-green-700:focus-visible {
    outline: 3px solid rgba(34, 197, 94, 0.5) !important;
    outline-offset: 4px !important;
}

/* Arrow animation on hover */
#startAppealBtn i.fa-arrow-right,
button.bg-green-600 i.fa-arrow-right,
button.bg-green-700 i.fa-arrow-right {
    transition: transform var(--aa-transition-fast) !important;
}

#startAppealBtn:hover i.fa-arrow-right,
button.bg-green-600:hover i.fa-arrow-right,
button.bg-green-700:hover i.fa-arrow-right {
    transform: translateX(6px) !important;
}

/* Gentle pulse animation that doesn't interfere */
@keyframes cta-glow {
    0%, 100% {
        box-shadow:
            0 6px 0 #14532d,
            0 8px 16px rgba(22, 101, 52, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow:
            0 6px 0 #14532d,
            0 8px 16px rgba(22, 101, 52, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 0 0 12px rgba(34, 197, 94, 0);
    }
}

#startAppealBtn.pulse-animation {
    animation: cta-glow 2.5s ease-in-out infinite !important;
}

#startAppealBtn.pulse-animation:hover {
    animation: none !important;
}

/* ============================================================
   FOUNDER BOX: Blue background with WHITE text
   ============================================================ */

.founder-box,
#heroSection .bg-blue-50.rounded-2xl {
    background: linear-gradient(135deg,
        var(--aa-navy) 0%,
        var(--aa-navy-light) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: var(--aa-shadow-lg) !important;
}

.founder-box *,
#heroSection .bg-blue-50.rounded-2xl * {
    color: #ffffff !important;
}

.founder-box .text-green-600,
#heroSection .bg-blue-50.rounded-2xl .text-green-600 {
    color: #4ade80 !important;
}

.founder-box .bg-gray-200,
#heroSection .bg-blue-50.rounded-2xl .bg-gray-200 {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ============================================================
   SECTION CARDS: Clean, elevated appearance
   ============================================================ */

/* White cards with subtle elevation */
.bg-white.rounded-2xl,
.bg-white.rounded-xl {
    background: #ffffff !important;
    border: 1px solid var(--aa-border) !important;
    box-shadow: var(--aa-shadow-md) !important;
    transition: box-shadow var(--aa-transition-medium), transform var(--aa-transition-medium) !important;
}

.bg-white.rounded-2xl:hover,
.bg-white.rounded-xl:hover {
    box-shadow: var(--aa-shadow-lg) !important;
}

/* Gradient section backgrounds */
.bg-gradient-to-br.from-green-50.to-blue-50 {
    background: linear-gradient(135deg,
        rgba(220, 252, 231, 0.5) 0%,
        rgba(219, 234, 254, 0.5) 100%) !important;
    border: 1px solid rgba(34, 197, 94, 0.1) !important;
}

/* Amber "Why We Built This" box */
.bg-amber-50 {
    background: linear-gradient(135deg,
        #fef3c7 0%,
        #fde68a 100%) !important;
    border-left: 4px solid #f59e0b !important;
}

.bg-amber-50 h3,
.bg-amber-50 p {
    color: var(--aa-text-primary) !important;
}

/* ============================================================
   STATS & METRICS: Eye-catching numbers
   ============================================================ */

/* Big stat numbers */
.text-3xl.font-bold.text-blue-600,
.text-3xl.font-bold.text-red-600,
.text-3xl.font-bold.text-green-600 {
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
}

.text-3xl.font-bold.text-blue-600 {
    color: var(--aa-blue-accent) !important;
}

.text-3xl.font-bold.text-red-600 {
    color: #dc2626 !important;
}

.text-3xl.font-bold.text-green-600 {
    color: var(--aa-green-primary) !important;
}

/* ============================================================
   PROCESS STEPS: Clear visual flow
   ============================================================ */

/* Step icons - Make them feel interactive */
.bg-blue-100.rounded-full,
.bg-purple-100.rounded-full,
.bg-green-100.rounded-full,
.bg-yellow-100.rounded-full {
    transition: transform var(--aa-transition-fast), box-shadow var(--aa-transition-fast) !important;
}

.bg-blue-100.rounded-full:hover,
.bg-purple-100.rounded-full:hover,
.bg-green-100.rounded-full:hover,
.bg-yellow-100.rounded-full:hover {
    transform: scale(1.1) !important;
    box-shadow: var(--aa-shadow-md) !important;
}

/* Numbered steps */
.bg-gray-100.rounded-full {
    background: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%) !important;
    border: 2px solid var(--aa-border) !important;
    transition: all var(--aa-transition-fast) !important;
}

.bg-gray-100.rounded-full:hover {
    background: linear-gradient(135deg, var(--aa-green-light) 0%, #bbf7d0 100%) !important;
    border-color: var(--aa-green-primary) !important;
}

/* Flow arrows between steps */
.text-gray-400.text-2xl {
    color: var(--aa-green-primary) !important;
    opacity: 0.6;
}

/* ============================================================
   TRUST HEADER BAR
   ============================================================ */

.bg-green-600.text-white {
    background: linear-gradient(90deg,
        var(--aa-green-dark) 0%,
        var(--aa-green-primary) 50%,
        var(--aa-green-dark) 100%) !important;
    box-shadow: 0 2px 8px rgba(22, 101, 52, 0.3) !important;
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */

header.bg-white {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid var(--aa-border) !important;
}

/* ============================================================
   TYPOGRAPHY REFINEMENTS
   ============================================================ */

/* Section headings */
h2.text-2xl,
h2.text-3xl,
h3.text-2xl {
    color: var(--aa-text-primary) !important;
    font-weight: 700 !important;
}

/* Body text - ensure readability */
p.text-gray-600 {
    color: var(--aa-text-secondary) !important;
}

p.text-gray-700 {
    color: var(--aa-text-primary) !important;
}

/* Small helper text */
.text-sm.text-gray-600 {
    color: var(--aa-text-muted) !important;
}

/* ============================================================
   MICRO-INTERACTIONS: Subtle engagement
   ============================================================ */

/* Smooth scrolling */
html {
    scroll-behavior: smooth !important;
}

/* Link hover effects */
a:not(.bg-green-600):not(.bg-green-700) {
    transition: color var(--aa-transition-fast) !important;
}

/* Icon hover pulse */
.fas, .far, .fab {
    transition: transform var(--aa-transition-fast) !important;
}

/* ============================================================
   STAGGERED REVEAL ANIMATION
   Page elements fade in sequentially on load
   ============================================================ */

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#heroSection h1 {
    animation: fadeSlideUp 0.6s ease-out 0.1s both !important;
}

#heroSection .text-xl,
#heroSection .text-2xl {
    animation: fadeSlideUp 0.6s ease-out 0.2s both !important;
}

#startAppealBtn {
    animation: fadeSlideUp 0.6s ease-out 0.3s both, cta-glow 2.5s ease-in-out 1s infinite !important;
}

#heroSection .founder-box,
#heroSection .bg-blue-50.rounded-2xl {
    animation: fadeSlideUp 0.6s ease-out 0.4s both !important;
}

#heroSection .bg-amber-50 {
    animation: fadeSlideUp 0.6s ease-out 0.5s both !important;
}

/* ============================================================
   MOBILE OPTIMIZATIONS
   ============================================================ */

@media (max-width: 768px) {
    /* Larger touch targets */
    #startAppealBtn,
    button.bg-green-600,
    button.bg-green-700 {
        padding: 1.25rem 2rem !important;
        font-size: 1.1rem !important;
        border-radius: 14px !important;
        /* Slightly smaller 3D effect on mobile */
        box-shadow:
            0 4px 0 #14532d,
            0 6px 12px rgba(22, 101, 52, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }

    #startAppealBtn:hover,
    button.bg-green-600:hover,
    button.bg-green-700:hover {
        transform: translateY(-2px) !important;
        box-shadow:
            0 6px 0 #14532d,
            0 8px 16px rgba(22, 101, 52, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }

    #startAppealBtn:active,
    button.bg-green-600:active,
    button.bg-green-700:active {
        transform: translateY(2px) !important;
        box-shadow:
            0 2px 0 #14532d,
            0 3px 6px rgba(22, 101, 52, 0.2) !important;
    }

    /* Reduce animation intensity on mobile */
    #startAppealBtn.pulse-animation {
        animation: none !important;
    }
}

/* ============================================================
   ACCESSIBILITY: Reduced Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
    body {
        background: white !important;
    }

    #startAppealBtn,
    button.bg-green-600,
    button.bg-green-700 {
        box-shadow: none !important;
        border: 2px solid var(--aa-green-primary) !important;
    }
}