/* Define base font families */
body {
    font-family: 'Inter', sans-serif; /* Default sans-serif font for body text */
    background-color: #f9fafb; /* Light gray background - clean and simple */
    color: #374151; /* Default text color (Tailwind gray-700) */
}

h1, .font-playfair { 
    font-family: 'Playfair Display', serif; /* Serif font for main headings */
}

/* Style for the form inputs to use Inter font and consistent transitions */
.form-input-custom,
.form-textarea-custom,
.form-select-custom {
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Logo Styling */
.logo-image-header {
    height: 2rem; /* Approx 32px. H1 font-size is 1.875rem (30px) on small, 2.25rem (36px) on sm+. This will be smaller. */
    width: auto;  /* Maintain aspect ratio */
    display: block; /* To allow mx-auto to work effectively */
}

/* Improved mobile styles */
@media (max-width: 640px) {
    h1 {
        font-size: 1.875rem; /* 30px */
        line-height: 2.25rem; /* 36px */
    }
    
    .container {
        padding: 1.25rem; /* 20px */
    }

    .logo-image-header {
        height: 1.75rem; /* Approx 28px, to be definitively smaller than mobile H1 font size */
    }
}

/* Ensure links and other elements use intended colors */
.text-gray-900 { color: #111827; } /* Tailwind gray-900 */
.text-gray-800 { color: #1f2937; } /* Tailwind gray-800 */
.text-gray-700 { color: #374151; } /* Tailwind gray-700 */
.text-gray-500 { color: #6b7280; } /* Tailwind gray-500 */
.border-gray-200 { border-color: #e5e7eb; } /* Tailwind gray-200 */
.border-gray-300 { border-color: #d1d5db; } /* Tailwind gray-300 */

/* Accent color for focus rings and specific elements - RED #DD3347 */
.focus\:ring-\[\#DD3347\]:focus {
    --tw-ring-color: #DD3347;
     box-shadow: 0 0 0 2px var(--tw-ring-color); /* Simplified focus ring */
}
.focus\:border-\[\#DD3347\]:focus {
    border-color: #DD3347;
}
.text-\[\#DD3347\] {
    color: #DD3347;
}
.bg-\[\#DD3347\] {
    background-color: #DD3347;
}
.hover\:bg-\[\#c02a3a\]:hover { /* Darker red for hover */
    background-color: #c02a3a;
}

/* For the loading spinner on the button */
.button-loading-spinner svg {
    animation: spin 1s linear infinite; /* Ensure Tailwind's animate-spin is applied or define here */
}