/* style.css */
:root {
    --bg-color: #f9f9f9;
    --card-bg: #ffffff;
    --text-color: #333333;
    --accent-color: #2c7a7b; /* Teal */
    --code-bg: #f4f4f4;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --font-heading: "Georgia", serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* Layout container */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
/* Header */
header {
    display: flex;             /* Enables flexible layout */
    justify-content: space-between; /* Pushes Branding to left, Nav to right */
    align-items: center;       /* Vertically centers items */
    padding: 30px 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 40px;
}

/* Container for Logo + Title */
.branding {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between logo and text */
}

/* The Image Styling */
.site-logo {
    width: 50px;        /* Adjust size as needed */
    height: 50px;
    border-radius: 50%; /* Makes it a circle */
    object-fit: cover;  /* Ensures image doesn't stretch weirdly */
}

header h1 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.5rem; /* Slightly smaller to fit side-by-side */
}

header a { text-decoration: none; color: var(--text-color); }

/* Navigation */
nav a {
    margin-left: 20px; /* Space between links */
    font-weight: bold;
    color: var(--accent-color);
    text-decoration: none;
}
nav a:hover { text-decoration: underline; }

/* Blog Post Lists (Homepage) */
.post-summary {
    background: var(--card-bg);
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.post-summary h2 { margin-top: 0; }
.post-summary h2 a { text-decoration: none; color: var(--text-color); }
.post-summary h2 a:hover { color: var(--accent-color); }
.meta { color: #777; font-size: 0.9em; margin-bottom: 15px; display: block; }

/* Markdown Content Styling (For inside the posts) */
article {
    background: var(--card-bg);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

article h1, article h2, article h3 { font-family: var(--font-heading); margin-top: 1.5em; }
article h1 { margin-top: 0; font-size: 2.5rem; line-height: 1.2; }
article p { margin-bottom: 1.5em; font-size: 1.1rem; }
article a { color: var(--accent-color); }
article img { max-width: 100%; height: auto; border-radius: 4px; }

/* Markdown Blockquotes */
article blockquote {
    border-left: 4px solid var(--accent-color);
    margin: 20px 0;
    padding-left: 20px;
    font-style: italic;
    color: #555;
    background: #fdfdfd;
}

/* Markdown Code Blocks */
article pre {
    background: var(--code-bg);
    padding: 15px;
    overflow-x: auto;
    border-radius: 4px;
    font-size: 0.9em;
}
article code {
    background: var(--code-bg);
    padding: 2px 5px;
    border-radius: 3px;
    font-family: "Courier New", Courier, monospace;
}

/* Footer */
footer {
    text-align: center;
    padding: 40px;
    color: #777;
    font-size: 0.9rem;
}