/* Custom styles for Master Plan 4 website */

/* Base typography */
body {
    @apply text-gray-800 leading-relaxed;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Prose styling for article content */
.prose {
    @apply max-w-none;
}

/* Make sure these styles are applied */
article.prose h2,
.prose h2 {
    @apply text-2xl font-bold mt-8 mb-4 text-gray-900;
    display: block !important;
}

article.prose h3,
.prose h3 {
    @apply text-xl font-semibold mt-6 mb-3 text-gray-800;
    display: block !important;
}

article.prose p,
.prose p {
    @apply my-4;
}

article.prose ul,
article.prose ol,
.prose ul,
.prose ol {
    @apply my-4 pl-6;
}

article.prose ul,
.prose ul {
    @apply list-disc;
}

article.prose ol,
.prose ol {
    @apply list-decimal;
}

article.prose li,
.prose li {
    @apply my-2;
}

article.prose .lead,
.prose .lead {
    @apply text-lg text-gray-700;
}

/* Ensure images are visible */
article.prose img,
.prose img {
    @apply my-4 rounded-lg shadow-md;
    max-width: 100%;
    height: auto;
}

/* Hero section */
.hero {
    @apply bg-gradient-to-r from-blue-600 to-blue-800 text-white py-20;
}

/* Buttons */
.btn {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors;
}

.btn-outline {
    @apply border border-gray-300 text-gray-700 bg-white hover:bg-gray-50;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .prose h2 {
        @apply text-xl;
    }
    
    .prose h3 {
        @apply text-lg;
    }
}