/* --- 1. Global Styles & Variables --- */
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Roboto Mono", monospace;
    --font-slab: "Roboto Slab", serif;

    /* Softer, elegant color palette */
    --color-text: #333333; /* Dark gray instead of pure black */
    --color-background: #fdfdfd; /* Slightly off-white */
    --color-primary: #0056b3; /* A muted, professional blue for links/accents */
    --color-border: #dddddd; /* Lighter border color */
    --color-meta: #666666; /* For less important text like dates/tags */
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6; /* Increased line-height for readability */
    font-size: 16px; /* Set a base font size */
}

/* --- 2. Layout --- */
.layout {
    max-width: 800px; /* Narrower max-width for better readability on large screens */
    margin: 0 auto;
    padding: 0 24px; /* Add horizontal padding for smaller screens */
}

/* --- 3. Header --- */
header {
    display: flex; /* Use flexbox to align title and nav */
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow items to wrap on small screens */
    padding: 32px 0 8px 0; /* Changed from '32px 0'. This reduces the space before the line. */
    border-bottom: 1px solid var(--color-border); /* Subtle separator */
    margin-bottom: 16px; /* Changed from '48px'. This moves the title up. */
}

header nav ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex; /* Use flexbox for the nav items */
    gap: 24px; /* Space between nav items */
}

header nav ul > li {
    /* Removed all the border styling */
    display: inline-block;
}

header nav ul > li > a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    padding-bottom: 4px;
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transition */
    border-bottom: 2px solid transparent; /* Prepare for hover effect */
}

header nav ul > li > a:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary); /* Elegant hover effect */
}

.site-identity {
    display: flex;
    align-items: center;
    gap: 20px; /* Adjust the space between your name and the icons */
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 18px; /* A little more space between icons */
}

/* Styling for each individual icon link */
.social-icons a {
  display: inline-block;
  color: var(--color-meta); /* Use a defined variable for a subtle look */
  font-size: 1.7rem; /* Control icon size with font-size */
  transition: transform 0.2s ease-out, color 0.2s ease-out; /* Smoother transition */
}

/* The cool hover effect */
.social-icons a:hover {
  color: var(--color-primary); /* Use your primary color on hover */
  transform: scale(1.2) translateY(-2px); /* Make it pop and lift slightly */
}

/* --- 4. Footer --- */
footer {
    margin-top: 64px;
    padding: 32px 0;
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-meta);
}

footer .made-with {
    margin-top: 24px;
    font-size: 0.8rem;
}

footer .made-with a {
    color: var(--color-meta);
}

/* --- 5. Article & Typography --- */
article {
    font-size: 1.1rem; /* Slightly larger for comfort */
    line-height: 1.7;
    text-align: left;
}

article a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--color-primary);
}

article a:hover {
    background-color: #eef5ff; /* Subtle background highlight on hover */
}

article p {
  /* Increase this value from 24px to something larger.
       Using 'em' is great because it scales with the font size. */
    margin-bottom: 1.5em; /* Roughly 26.4px, a noticeable increase */
}

/* ... keep your well-defined article h1-h6, table, blockquote styles ... */
/* You may want to adjust their colors to use your new variables */
article h1, article h2, article h3, article h4, article h5, article h6 {
    font-family: var(--font-slab);
    color: var(--color-text);
}

article table {
    margin: 64px auto;
    border-collapse: collapse;
    width: 100%; /* Make tables responsive */
    min-width: 0; /* Override previous min-width */
}

article th,
article td {
    border: 1px solid var(--color-border); /* Use new border color */
    padding: 8px 12px;
}

/* Refined Tags Style */
.tags li {
    display: inline-block;
    margin-right: 8px;
    color: var(--color-meta);
    background-color: #f0f0f0;
    padding: 4px 8px;
    border-radius: 4px; /* Rounded corners for a softer look */
    font-size: 0.85rem;
    font-weight: 500;
}

.tags li::before {
    content: "#";
    color: #999999;
    margin-right: 2px;
}

/* Refined Date Style */
.date {
    border: 1px solid var(--color-border); /* Softer border */
    text-align: center;
}

.date .day {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 8px 12px;
    background-color: #f9f9f9;
}

.date .month, .date .year {
    font-size: 0.8rem;
    padding: 4px 12px;
    color: var(--color-meta);
    text-transform: uppercase;
}

.date .month {
    border-top: 1px solid var(--color-border);
}

.date .year {
    border-top: 1px solid var(--color-border);
    background-color: #f9f9f9;
}

.profile-picture {
  float: right;
  width: 35%; /* Adjust the size as you like */
  max-width: 275px; /* Adjust the size as you like */
  margin: 0 0 15px 20px; /* Adds space around the image */
  border-radius: 8px; /* Optional: gives the photo rounded corners */
  height: auto;
}