/*
 * Custom Stylesheet
 *
 * Use this file to add custom CSS that complements the Tailwind CSS framework.
 * This is useful for things like map container sizes, custom fonts, or
 * more complex component styles.
 */

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

/* --- General Body & Typography --- */
body {
    font-family: 'Inter', sans-serif;
    color: #333; /* A softer black for better readability */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

/* --- Map Container --- */
/*
 * Leaflet maps require a defined height to be visible.
 * This rule ensures our map container has a set size.
 */
#map {
    height: 450px;
    border-radius: 0.5rem; /* Match Tailwind's rounded corners */
    border: 1px solid #e2e8f0; /* A light border */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}


/* --- Component Styles --- */

/* A general-purpose card for displaying subdivisions or info blocks */
.content-card {
    @apply bg-white p-6 rounded-lg shadow-md border border-gray-200;
}

/* Style for the main agent call-to-action block */
.agent-profile-cta {
    @apply bg-gray-50 p-6 rounded-lg border border-gray-200 flex flex-col sm:flex-row items-center text-center sm:text-left;
}

.agent-profile-cta img {
    @apply rounded-full h-24 w-24 mr-0 sm:mr-6 mb-4 sm:mb-0;
}

/* --- Custom Button Style --- */
/* A custom button style to reuse for important actions */
.btn-primary {
    @apply inline-block bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-transform transform hover:scale-105 hover:bg-indigo-700;
}

.btn-primary:focus {
    @apply outline-none ring-2 ring-offset-2 ring-indigo-500;
}