/* * blog.css 
 * This file is for small, custom style overrides or non-Tailwind-specific rules.
 * The primary styling (layout, colors, spacing) comes from Tailwind utility classes.
 */

/* 1. Global typography consistency (Optional, if not set in your main stylesheet) */
body {
    /* Provide a consistent font stack */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: #374151; /* Default text color (gray-700 equivalent) */
    line-height: 1.6;
}

/* 2. Custom style for the main article wrapper */
/* This adds a subtle floating effect on hover to the entire blog card */
.blog-article {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.blog-article:hover {
    transform: translateY(-4px); /* Moves card up 4px */
    /* Deeper shadow on hover */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
}

/* 3. Consistency for headings */
.prose h1, .prose h2, .prose h3 {
    color: #0f766e; /* Consistent teal-700 color */
}

/* IMPORTANT: If you upload this file, ensure the link in your header.php includes a version parameter
   (e.g., href="/blog.css?v=2") to prevent browser caching from stopping the new styles from loading. */