/* ========================================
   Revled Foundation - Custom Styles
   ======================================== */

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

/* ========================================
   COLOR VARIABLES & ROOT
   ======================================== */

:root {
    --deep-blue: #003f87;
    --warm-orange: #ff6b35;
    --soft-cream: #faf8f3;
    --text-dark: #1a1a1a;
    --text-light: #666666;
    --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 10px 30px rgba(0, 63, 135, 0.15);
}

html {
    scroll-behavior: smooth;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    line-height: 1.65;
    color: var(--text-dark);
    text-wrap: pretty;
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--soft-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--warm-orange);
    border-radius: 5px;
}

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

/* ========================================
   FORM ELEMENTS
   ======================================== */

input[type="text"],
input[type="email"],
textarea,
select {
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    border-color: var(--warm-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

/* ========================================
   IMAGE OPTIMIZATION
   ======================================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   RESPONSIVE TEXT
   ======================================== */

@media (max-width: 768px) {
    body {
        font-size: 15px;
        line-height: 1.7;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.15 !important;
        letter-spacing: -0.03em;
        text-wrap: balance;
    }

    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.7rem !important; }
    h3 { font-size: 1.35rem !important; }

    p,
    li {
        font-size: 0.98rem;
        line-height: 1.75;
    }

    .card {
        padding: 16px;
    }

    .btn-primary,
    .btn-secondary {
        padding: 12px 22px;
    }

    .hero-heading {
        font-size: 2rem !important;
        line-height: 1.08;
    }

    .feedback-modal-card {
        padding: 24px;
        border-radius: 24px;
    }

    .feedback-modal-title {
        font-size: 1.6rem;
    }

    [class*="px-6"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    [class*="mx-6"] {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    [class*="pt-40"] {
        padding-top: 7.75rem !important;
    }

    [class*="pt-32"] {
        padding-top: 7rem !important;
    }

    [class*="pt-24"] {
        padding-top: 6.5rem !important;
    }

    [class*="pb-24"] {
        padding-bottom: 4rem !important;
    }

    [class*="pb-20"] {
        padding-bottom: 3.5rem !important;
    }

    [class*="py-32"] {
        padding-top: 4.5rem !important;
        padding-bottom: 4.5rem !important;
    }

    [class*="py-24"] {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    [class*="py-20"] {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    [class*="gap-20"] {
        gap: 2.5rem !important;
    }

    [class*="gap-16"] {
        gap: 2rem !important;
    }

    [class*="gap-12"] {
        gap: 1.5rem !important;
    }

    [class*="p-12"] {
        padding: 1.5rem !important;
    }

    [class*="p-10"] {
        padding: 1.25rem !important;
    }

    [class*="rounded-[4rem]"],
    [class*="rounded-[3.5rem]"],
    [class*="rounded-[3rem]"] {
        border-radius: 2rem !important;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.55rem !important; }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    [class*="text-6xl"],
    [class*="text-7xl"],
    [class*="text-8xl"] {
        font-size: 2.1rem !important;
        line-height: 1.08 !important;
    }

    [class*="text-5xl"] {
        font-size: 1.9rem !important;
        line-height: 1.12 !important;
    }

    [class*="text-4xl"] {
        font-size: 1.6rem !important;
        line-height: 1.18 !important;
    }
}

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

.transition-all {
    transition: all 0.3s ease;
}

.no-select {
    user-select: none;
}

.text-center {
    text-align: center;
}

.mt-12 {
    margin-top: 3rem;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

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

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

@media print {
    body {
        background: white;
    }
    nav,
    footer {
        display: none;
    }
    a {
        text-decoration: underline;
    }
}