/* /---- Master Blog Post Stylesheet ----/ */

/* --- General Page and Body Setup --- */
body {
    background-color: #bee9d8;
    font-family: 'Lora', serif;
    color: #044531;
    padding: 2rem;
    margin: 0;
}


/*.blog-container {
    max-width: 70%;
    width: 900px;
    background-color: whitesmoke;
    padding: 2.5rem 3rem;
    border-radius: 30px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2),
                -10px -10px 20px rgba(255, 255, 255, 0.5);
    margin: 2rem auto;
    position: relative; /* ADD THIS LINE 
}*/
h1 {
    color: #035139; /* Darker green for the main heading */
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center; /* Centers the main heading */
}

h4 {
    color: #165707;
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: left; /* Add this line to center the text */
    font-size: 1.5rem;
    }

h3 {
        color: #165707;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
        text-align: left; /* Add this line to center the text */
        font-size: 1.2rem;
        }
    

p, li {
    line-height: 1.6;
    font-size: 1.1rem;
    color: #1d7655; /* Dark grey for readable body text */
    font-weight: 600;
    
}

/* --- Meta Info (Tags & Date) --- */
.blog-meta {
    margin-bottom: 1rem;
    text-align: center;
}

.blog-tag {
    display: inline-block;
    background-color: #e0eafc;
    color: #3b5998;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-right: 8px;
}

.blog-date {
    color: #666;
    margin-bottom: 2rem;
    text-align: center;
}


/* --- Image & Figure Styles --- */
figure {
    margin: 0;
    padding: 0;
}

figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

figcaption {
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #555;
    font-style: italic;
}

.featured-image {
    width: 75%;
    margin: 2rem auto 3rem auto;
}


/* --- Image Grid Layouts --- */
.image-layout-diamond {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

.grid-col-span-center {
    grid-column: 1 / -1;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.grid-col-span-center1 {
    grid-column: 1 / -1;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.prev-blog-link {
    color: #035139; /* Dark green to match your theme */
    font-weight: bold;
    text-decoration: underline;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.prev-blog-link:hover {
    color: #049a6c; /* Lighter green on hover */
    background-color: rgba(3, 81, 57, 0.1); /* Subtle highlight */
    text-decoration: none;
    border-radius: 3px;
    padding: 2px 4px; /* Slight padding so highlight looks better */
}

/* --- Author Links (GitHub, LinkedIn, etc.) --- */
/* In blog-style.css */


/* In blog-style.css */

/* --- Top Corner Links --- */
/* In blog-style.css */

/* --- Top Corner Links --- */

/* This positions the email link in the TOP-LEFT */

/* In blog-style.css */

/* --- Top Corner Links --- */

/* This rule for the TOP-LEFT email link is unchanged */
.email-link {
    position: absolute;
    top: 2.5rem;
    left: 3rem;
}

/* This rule for the TOP-RIGHT links is UPDATED */


/* --- Styling for ALL links in both containers --- */

.email-link a,
.author-links a {
    text-decoration: none;
    color: #1d7655; /* Your preferred green color */
    font-size: 1.1rem;
    font-family: sans-serif;
    transition: color 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    text-decoration: underline;
    font-weight: bold;
}

.email-link a:hover,
.author-links a:hover {
    color: #035139;
}

/* This adds vertical space between the stacked links in the top right */
.author-links a {
    margin-bottom: 0.5rem;
}


/* --- NEW rule for underlining specific links --- */
.link-underline {
    text-decoration: underline;
}

/* Optional: Removes the underline on hover for a clean effect */
.link-underline:hover {
    text-decoration: none;
}


/* --- Icon Sizing (unchanged) --- */
.author-links a i {
    font-size: 1.8rem;
    margin-right: 8px;
}


/* --- Styling for the ICON-ONLY social links --- */

/* New rule to style the icons within the links */



/* --- Icon Sizing --- */

/* Style for the email SVG icon */
.email-link a svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    margin-right: 8px;
}
/* This new rule positions the email link in the TOP-LEFT */




/* This existing rule keeps the other icons in the TOP-RIGHT */


/* --- Styling for ALL links in both containers --- */

/* --- Icon Sizing --- */

/* Style for the email SVG icon */


/* Style for the Devicon icons */

/* New rule to style the SVG icon */
.author-links a svg {
    width: 1.5rem; /* Slightly smaller icon to balance the text */
    height: 1.5rem;
    fill: currentColor;
    vertical-align: middle;
    margin-right: 8px; /* ADD THIS LINE for spacing */
}

/* In blog-style.css */

/* --- Top Corner Links --- */

/* This rule makes the container a flex row */
.author-links {
    position: absolute;
    top: 2.5rem;
    right: 3rem;
    display: flex; /* Aligns items horizontally */
    align-items: center; /* Aligns items vertically */
    gap: 1rem; /* Space between the text and the icons */
}

/* This new rule stacks the icons vertically */
.social-icons {
    display: flex;
    flex-direction: column; /* Stacks the icons */
    gap: 0.5rem; /* Space between the icons */
}

/* This styles the text link */
.author-links > a {
    color: #1d7655;
    font-size: 1.1rem;
    font-family: sans-serif;
    text-decoration: none;
}

/* This styles the icon links */
.social-icons a {
    font-size: 1.8rem;
    color: #333; /* Default dark color for icons */
    transition: color 0.2s ease-in-out;
}

.social-icons a:hover {
    color: #035139; /* Hover color for icons */
}
/* --- Final Project Link at the bottom of the post --- */
.project-link {
    text-align: center;
    margin-top: 3rem; /* Adds space above the link */
    padding-top: 2rem; /* Adds space below the separator line */
    border-top: 1px solid #ddd; /* Adds a separator line */
}

.project-link a {
    color: #035139; /* Your dark green theme color */
    font-weight: bold;
    text-decoration: underline;
}

.project-link a:hover {
    text-decoration: none; /* Removes underline on hover */
}



.project-link2 a {
    color: #035139; /* Your dark green theme color */
    font-weight: bold;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.project-link2 a:hover {
    text-decoration: none; /* Removes underline on hover */
    color: #049a6c; /* Optional: lighter green on hover */
}


/* In blog-style.css */

/* --- Top Corner Links --- */

/* This rule for the TOP-LEFT email link is unchanged */
.email-link {
    position: absolute;
    top: 2.5rem;
    left: 3rem;
}

/* This new rule handles the entire TOP-RIGHT section */
/* In blog-style.css */

/* This new rule handles the entire TOP-RIGHT section */
/* In blog-style.css */

/* --- Top Corner Links --- */

/* In blog-style.css */

/* --- Top Corner Links --- */

/* This is the main container in the top-right */
/* In blog-style.css */

/* --- Top Corner Links using CSS Grid --- */

/* This is the main container in the top-right */
/* In blog-style.css */

/* --- Top Corner Links using CSS Grid --- */

.project-links {
    position: absolute;
    top: 2.5rem;
    right: 3rem;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 0 1rem;
    align-items: center;
}

/* --- Placing each link on the grid (UPDATED) --- */

.project-text {
    /* MOVED to the second column */
    grid-row: 1 / 3;
    grid-column: 2; 
}

.project-github-icon {
    /* MOVED to the first column */
    grid-row: 1;
    grid-column: 1;
}

.project-linkedin-icon {
    /* MOVED to the first column */
    grid-row: 2;
    grid-column: 1;
}


/* --- Styling for the links and icons (no changes needed here) --- */
.project-text {
    font-family: sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d7655;
    text-decoration: underline;
}

.project-github-icon,
.project-linkedin-icon {
    font-size: 1.8rem;
    color: #333;
    text-decoration: none;
    text-align: center;
}

/* Hover effects */
.project-text:hover,
.project-github-icon:hover,
.project-linkedin-icon:hover {
    color: #035139;
}
.blog-container {
    max-width: 70%;
    width: 900px;
    background-color: whitesmoke;
    padding: 2.5rem 4rem;
    border-radius: 30px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2),
                -10px -10px 20px rgba(255, 255, 255, 0.5);
    margin: 2rem auto;
    position: relative; /* This is essential for corner positioning */
}

/* --- NEW: Header Links in Top-Right Corner --- */
.header-links {
    position: absolute;
    top: 2.5rem;   /* Aligns to the top padding */
    right: 3rem;  /* Aligns to the right padding */
    display: flex;
    gap: 1.5rem;    /* Space between the icons */
}

.header-links a {
    text-decoration: none;
    font-size: 1.8rem; /* Icon size */
    color: #555;      /* Muted, professional color */
    transition: color 0.2s ease-in-out;
}

.header-links a:hover {
    color: #035139; /* Your dark green hover color */
}
/* In blog-style.css */

/* =================================== */
/* --- Responsive Styles for Mobile --- */
/* =================================== */

@media (max-width: 600px) {
    body {
        padding: 0.5rem;
    }

    .blog-container {
        width: 100%;
        max-width: 100%;
        padding: 1.5rem;
        padding-top: 6rem; /* Add space at the top for the links */
    }
    
    /* Change the header links to stack vertically and center */
    .header-links {
        top: 1.5rem;
        left: 50%;
        transform: translateX(-50%); /* Center the container */
        width: auto;
        gap: 1rem;
    }

    .email-link {
        /* Remove corner positioning for mobile */
        position: static;
        text-align: center;
        margin-bottom: 1rem;
    }

    h1 {
        font-size: 1.8rem;
    }

    .image-layout-diamond {
        grid-template-columns: 1fr;
    }

    .grid-col-span-center {
        width: 80%;
    }
    
}