/* styles.css */

/* Global Styles */
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 18px; /* Increased for readability */
    color: #333;
    line-height: 1.6;
    background-color: #f9f9f9;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

h1, h2, h3 {
    color: #007BFF; /* Primary blue */
}

h1 {
    font-size: 3rem; /* Adjusted for main headings */
    font-weight: 700;
}

h2 {
    font-size: 2.5rem; /* Larger size for standout impact */
    font-weight: 700; /* Bold for emphasis */
}

.cta-button {
    background-color: #28A745; /* Accent green */
    color: white;
    padding: 15px 30px; /* Matched to email-button for size consistency */
    text-decoration: none;
    border-radius: 10px; /* Larger rounded edges to match */
    font-size: 1.2em;
    transition: background-color 0.3s;
    display: inline-block; /* Ensure consistent display */
    margin: 20px 0; /* Added to match email-button spacing */
    max-width: 300px; /* Reasonable max-width to keep compact */
}

.cta-button:hover {
    background-color: #218838;
}

.email-button {
    display: inline-block;
    background-color: #28A745; /* Accent green */
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 10px; /* Larger rounded edges */
    font-size: 1.2em;
    margin: 20px 0;
    transition: background-color 0.3s;
    max-width: 300px; /* Reasonable max-width to keep compact */
}

.email-button:hover {
    background-color: #218838;
}

.learn-more {
    color: #007BFF;
    text-decoration: none;
}

/* Header */
.header {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    width: 50px;
    height: auto;
    margin-right: 10px;
}

.nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav a {
    color: #333;
    text-decoration: none;
}

.hamburger {
    display: none;
    cursor: pointer;
}

/* Hero */
.hero {
    background-color: #1e3a8a; /* Dark blue background for premium, AI-inspired feel */
    min-height: 400px; /* Ensures height for impact */
    color: white; /* White text for high contrast */
}

.hero .container {
    display: flex;
    align-items: center;
    min-height: 400px; /* Matches hero height */
    padding: 0 20px; /* Aligns with menu */
}

.hero-content {
    max-width: 800px; /* Matches about section's text column width */
    text-align: left;
}

.hero h1,
.hero p {
    color: white; /* Explicit white for headings and paragraphs */
}

/* About */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

.about-img {
    border-radius: 50%;
    width: 100%;
    max-width: 300px;
}

.about ul {
    list-style-type: disc; /* Ensures bullets are visible */
    margin-left: 20px; /* Adds indentation for better readability */
}

/* Services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
/* Services */
.service-card svg {
    width: 60px;
    height: auto;
    display: block;
    margin: 0 auto 10px; /* Keeps centering and spacing */
    fill: #007BFF; /* Matches your primary blue for brand consistency; adjust as needed */
}

.service-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
}

.service-card img {
    display: block;
    margin: 0 auto 10px; /* Ensures centering and spacing */
    width: 60px;
    height: auto;
}

.service-card ul {
    list-style-type: disc; /* Ensures bullets are visible */
    margin-left: 20px; /* Adds indentation for better readability */
    text-align: left; /* Left-aligns the list for natural flow */
}

/* Projects */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Projects */
.project-card svg {
    width: 100px;
    height: auto;
    display: block;
    margin: 0 auto 10px; /* Keeps centering and spacing */
    fill: #007BFF; /* Matches your primary blue for brand consistency; adjust as needed */
}

.project-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
}

.project-card img {
    display: block;
    margin: 0 auto 10px; /* Ensures centering and spacing */
    width: 100px;
    height: auto;
}

.projects .cta-button {
    display: block;
    margin: 20px auto;
    max-width: 300px; /* Reasonable width to prevent full-page span */
}

/* Book */
.book-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

.book-img {
    width: 100%;
    max-width: 300px;
}

/* Contact */
.contact {
    background-color: #007BFF;
    color: white;
    text-align: center;
}

/* Footer */
.footer {
    background-color: #1e3a8a; /* Deep blue for premium feel */
    color: white;
    text-align: center;
    padding: 1rem 0;
}

.social-icons {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
}

.social-link {
    color: #14b8a6; /* Teal accent */
    margin: 0 0.5rem;
    text-decoration: none;
}

.social-link:hover {
    color: #f0fdfa; /* Lighter teal on hover */
}

.icon-svg {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
}

/* Blog Styles (Added) */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.post-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.post-card h3 {
    margin-top: 0;
}

.search-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.post-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: white;
    }

    .nav ul.show {
        display: flex;
    }

    .hamburger {
        display: block;
    }

    .about-grid, .book-grid {
        grid-template-columns: 1fr;
    }

    .hero .container {
        padding: 40px 20px; /* Adjust for mobile */
        text-align: center; /* Center text on mobile */
    }

    .hero-content {
        max-width: 100%; /* Full width on mobile */
    }

    .email-button,
    .cta-button {
        padding: 20px 40px; /* Larger on mobile for easy tapping, applied to both for consistency */
        font-size: 1.4em;
    }
}

/* Performance Optimizations: Lazy loading for images */
img {
    loading: lazy;
}

<!-- Python script: generate_blog.py -->
# generate_blog.py
# Run this script whenever you add new .md files to the blog_posts/ folder.
# Requires: pip install markdown
# Assumes .md files named like yyyy-mm-dd-slug.md, with first line # Title
# Creates blog.html with list, and blog/slug.html for each post.
# Also generates sitemap.xml

import os
import re
from datetime import datetime
import markdown

DOMAIN = "https://www.spoonerai.com/"  # Replace with your domain

# Paths
BLOG_POSTS_DIR = 'blog_posts'
BLOG_DIR = 'blog'
BLOG_HTML = 'blog.html'
TEMPLATE_DIR = '.'  # Assuming blog.html template is in current dir

# Load blog.html template
with open(BLOG_HTML, 'r') as f:
    blog_template = f.read()

def extract_title_and_body(md_content):
    title_match = re.search(r'^# (.+)', md_content, re.MULTILINE)
    title = title_match.group(1).strip() if title_match else ''
    body = re.sub(r'^# .+\n?', '', md_content).strip()
    return title, body

# Get all .md files
md_files = [f for f in os.listdir(BLOG_POSTS_DIR) if f.endswith('.md')]
posts = []

for filename in md_files:
    date_str = filename[:10]
    try:
        post_date = datetime.strptime(date_str, '%Y-%m-%d')
    except ValueError:
        continue  # Skip invalid dates
    slug = filename[11:-3]
    with open(os.path.join(BLOG_POSTS_DIR, filename), 'r') as f:
        md_content = f.read()
    title, md_body = extract_title_and_body(md_content)
    if not title:
        title = slug.replace('-', ' ').title()
    html_body = markdown.markdown(md_body)
    summary = re.sub('<.*?>', '', html_body)[:150] + '...'  # Strip HTML for summary
    posts.append({
        'slug': slug,
        'title': title,
        'date': date_str,
        'html_body': html_body,
        'summary': summary
    })

# Sort by date descending
posts.sort(key=lambda p: p['date'], reverse=True)

# Generate post cards for blog.html
post_cards = ''
for post in posts:
    post_cards += f'''
    <div class="post-card">
        <h3><a href="{BLOG_DIR}/{post['slug']}.html">{post['title']}</a></h3>
        <p>{post['date']}</p>
        <p>{post['summary']}</p>
    </div>
    '''