/*
This file works WITH Tailwind CSS.
It uses @layer components to define reusable classes like .form-input
and also includes the helper classes for animations and the scroll-to-top button.
*/

/* Import Tailwind's base, components, and utilities */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Define custom reusable components */
@layer components {
    .form-input {
        @apply block w-full rounded-lg border-gray-600 bg-gray-700 px-4 py-3 text-white shadow-sm transition duration-300 placeholder:text-gray-400 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/50;
    }

    .form-submit-button {
        @apply w-full cursor-pointer rounded-lg bg-primary-600 px-8 py-3.5 text-lg font-semibold text-white shadow-lg transition-all transform hover:scale-105 hover:bg-primary-700 disabled:opacity-50 disabled:cursor-wait;
    }

    .form-error-text {
        @apply mt-1.5 text-sm text-red-400;
    }
}

/* Base HTML styles */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Offset for sticky header */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
}

main {
    flex-grow: 1;
}

/* Scroll-on-Reveal Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .fade-in-up.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Scroll-to-Top Button */
#scroll-to-top {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

    #scroll-to-top.is-visible {
        opacity: 1;
        visibility: visible;
    }

/* Mobile Sidebar */
#mobile-sidebar {
    transition: transform 0.3s ease-in-out;
}

#sidebar-overlay {
    transition: opacity 0.3s ease-in-out;
}

/* Fix for ASP.NET validation messages (if not using spans) */
.validation-summary-errors ul {
    list-style-type: none;
    padding-left: 0;
}

.field-validation-error,
.validation-summary-errors {
    color: #f87171; /* red-400 */
    font-size: 0.875rem; /* text-sm */
    margin-top: 0.25rem; /* mt-1 */
}

/* Tailwind Prose Overrides for Privacy Page */
.prose-invert h2 {
    color: white !important;
}

.prose-invert ul > li::before {
    background-color: #3b82f6 !important; /* primary-500 */
}