/* ======================================================== */
/* THEME & COLOR DEFINITIONS */
/* ======================================================== */

:root {
    /* NEW: Font stack inspired by The Rookies */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --font-serif: Georgia, Times, serif; /* A good fallback for headings */
}

body.dark-theme {
    /* UPDATED: Colors inspired by The Rookies */
    --background-color: #201F1F; /* A softer, darker grey */
    --text-color: #979797;       /* Off-white for body text */
    --post-text-color: #FFFFFFBF;
    --title-color: #737373; 
    --heading-color: #73a0bd;   /*dfdfdf */ /* Pure white for main headings */
    --link-color: #a2e0d7;       /* Gold accent color */
    --link-hover-color: #ffffff;
    --border-color: #373737;
    --entry-meta-color: #5b5b5b; /* A lighter grey for metadata */
}

/* We can define light-theme later if needed */
body.light-theme {
    --background-color: #fff;
    --text-color: #111;
    --post-text-color: #FFFFFFBF;
    --title-color: #737373;
    --heading-color: #000;
    --link-color: #c5a141;
    --link-hover-color: #000;
    --border-color: #e1e1e1;
    --entry-meta-color: #717171;
}

/* ======================================================== */
/* GLOBAL STYLES */
/* ======================================================== */

body {
    /* UPDATED: Use the new system font stack */
    font-family: var(--font-sans);
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 18px; /* Slightly smaller base for better readability */
    line-height: 1.7;  /* Increased line height for better readability */
    text-rendering: optimizeLegibility;
}

main {
    font-size: inherit; /* Inherit font size from body */
}

a {
    color: var(--link-color);
    text-decoration: none; /* Removed underline by default */
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
    /* UPDATED: Use a serif font for headings to create contrast */
    font-family: var(--font-sans);
    color: var(--heading-color);
    margin: 0;
    line-height: 1.2;
    font-weight: 800; /* Bolder headings */
}

p {
    /* text-align: justify; */
}

/* ======================================================== */
/* LAYOUT */
/* ======================================================== */

.main-document {
    padding: 100px 32px 32px 32px; /* Added top padding for sticky header */
    max-width: 1200px; /* NEW: Constrain the max width */
    margin: 0 auto;
}

.main-doc-container {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.blog-container {
    /* UPDATED: Define a clear width for the content column */
    width: 100%;
    max-width: 720px; /* This is a standard width for readable blog content */
    padding: 0; /* Remove old padding */
    margin: 0; /* Remove old margin */
}

/* ======================================================== */
/* MAIN TITLE STYLING */
/* ======================================================== */

.blog-header {
    display: flex;             /* NEW: Turns this div into a flex container */
    justify-content: center;   /* NEW: Horizontally centers the items inside it */
    margin-bottom: 2rem;       /* Increased margin for better spacing */
}

/* Make the link and the h1 inherit the color from .blog-header */
.blog-header a,
.blog-header h1 {
    color: var(--title-color);
    text-decoration: none;
}

.blog-header a:hover h1 {
    color: var(--link-hover-color);
}

/* ======================================================== */
/* BLOG POST STYLING */
/* ======================================================== */

.entry {
    text-align: left; /* Justified text can be hard to read */
}

.entry h2 {
    /* Specific styling for post titles */
    font-weight: 700;
    font-size: 2.0rem; /* Large, impactful titles */
    /* margin-bottom: 0.5em; */
}

.entry h2 a {
    color: var(--heading-color);
    text-decoration: none;
}

.entry h2 a:hover {
    color: var(--link-color);
}

.entry-meta {
    /* UPDATED: Style for the "Date by Author" line */
    font-size: 0.6rem;
    font-family: var(--font-sans); /* Use sans-serif for metadata */
    color: var(--entry-meta-color);
    margin-bottom: 1.5em;
    margin-top: -.5em;
    opacity: 1; /* Remove old opacity */
}

.entry-meta-author {
    color: var(--link-color);
    font-weight: 600; /* Make the author's name slightly bolder */
    display: inline-block; /* Allows us to add spacing */
    margin: 0 1px; /* Adds a little space around the name */
}

/* ======================================================== */
/* FEATURED IMAGE STYLING */
/* ======================================================== */
.featured-image, .featured-image-banner {
    height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5em; 
    border-radius: 5px;
    background-color: #0a0a0a;
}

.featured-image img,
.featured-image-banner img {

    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.entry a:hover .featured-image img {
    transform: scale(1.05);
}


.entry-excerpt, .entry-content {
    font-family: var(--font-serif);
    font-size: 1.25rem; /* A comfortable reading size */
}

.entry-content>*+* {
    margin-bottom: 0;
    margin-top: max(3.2vmin, 24px);
}

.entry-content p {
    color: var(--post-text-color);
    word-break: break-word;

}

.entry-content strong {
    color: var(--heading-color);
}


.entry-excerpt {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    line-height: 1.5;
}

.entry-excerpt p {
    margin-bottom: 0px;
}

.read-more {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

hr {
    /* NEW: Style for the divider between posts */
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 3em auto; /* Generous spacing */
    width: 80%;
}

/* This removes the old divider style */
.entry + .entry {
    padding-top: 0;
    margin-top: 0;
    position: static;
}
.entry + .entry::before {
    display: none;
}

/* ======================================================== */
/* COPY LINK ICON STYLING */
/* ======================================================== */

.entry h2 a.copy-link-icon {
    display: inline-block;
    text-decoration: none;
    color: var(--entry-meta-color);
    font-size: .7rem;
    vertical-align: middle;
    transition: all 0.2s ease-in-out;
    opacity: 0.5;
}

.entry h2 a.copy-link-icon:hover {
    color: var(--link-color);
    text-decoration: none;
    transform: scale(1.1);
}





/* ======================================================== */
/* HEADER OVERRIDES FOR BLOG PAGES */
/* ======================================================== */

/* 
  This rule targets the <header> element, but ONLY if it is a sibling
  of the .main-document class. This makes it specific to internal pages
  and will not affect your main homepage hero header.
*/
.main-document + header, /* This is for older browsers */
header:has(+ .main-document) { /* This is the modern, powerful way */
    height: auto !important; /* Reset the height */
    background: none !important; /* Remove the gradient background */
    position: static !important; /* Remove fixed positioning if any */
}

/* 
  Additionally, target the .sticky class from your subheader.php
  to ensure it behaves correctly on the blog.
*/
.sticky {
    position: sticky; /* Use 'sticky' instead of 'fixed' for modern browsers */
    top: 0;
    left: 0;
    width: 100%;
    /* background-color: var(--background-color); /* Use our new theme color */ */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    z-index: 1000;
    height: 70px; /* Explicitly set the height of the nav bar */
}

/* Ensure the logo and nav links inside the sticky header are visible */
.sticky .logo,
.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
    color: var(--text-color);
}

.sticky .main-nav li a:hover,
.sticky .main-nav li a:active {
    color: var(--link-color);
    border-bottom: 2px solid var(--link-color); /* Add a hover effect */
}


/* ======================================================== */
/* RESPONSIVE DESIGN */
/* ======================================================== */

@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    .main-document {
        padding: 90px 20px 20px 20px; /* Top padding for sticky header on mobile */
    }

    .entry h2 {
        font-size: 2.2rem;
    }

    .entry-excerpt, .entry-content {
        font-size: 1.1rem;
    }
}