/* --- 1. Global & Variables --- */
:root {
    --font-serif: 'Ubuntu', 'Georgia', serif;
    --font-sans: 'Ubuntu', 'Roboto', sans-serif;
    /* --color-background: #F8F6F1; /* Soft cream */
  	--color-background: #eeffee;
    --color-text: #1A1A1A;      /* Charcoal */
    /* --color-primary: #337ab7;   A clean blue for links */
  	--color-primary: #408000;
    --color-line-grey: #CCCCCC; /* Subtle grey for timeline */
    --color-card-background: white;
}

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

h1, h2 {
    font-family: var(--font-sans);
    line-height: 1.2;
}

a {
    color: var(--color-primary);
  	font-weight: 700;
    text-decoration: none;
}

a:hover {
    color: red;
  	font-weight: 700;
    text-decoration: underline;
}

/* --- 2. Header and Footer Styling --- */
.site-header {
    text-align: center;
    padding: 20px;
    background-color: var(--color-card-background);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.site-header nav a {
    margin: 0 15px;
    font-family: var(--font-sans);
    font-weight: 500;
}

/*=================================================*/
/*=====           POST  NAVIGATION            =====*/
/*=================================================*/
.post-navigation {
  	display: flex;
  	justify-content: space-between; /* Push the logo and the ul list to opposite ends */
    align-items: center; /* Vertically align items */
	max-width: 30%;
    margin: 0 auto;
    margin-bottom: 1.15rem;
    padding: .25rem 1.15rem;
    border: 4px solid var(--color-card-background);
}

.post-navigation h2 {
	font-size: .9rem;  
}

.posts-navigation {
  	display: flex;
  	justify-content: space-between; /* Push the logo and the ul list to opposite ends */
    align-items: center; /* Vertically align items */
	max-width: 30%;
    margin: 0 auto;
    margin-bottom: 1.15rem;
    padding: .25rem 1.15rem;
    border: 4px solid var(--color-card-background);
}

.posts-navigation h2 {
   	/* display: none; */
  	font-size: .9rem;
}
 
img {
    margin: 0 auto;
    padding: 1rem 0;
    max-width: 100%;
    height: auto;
    border-radius: 25px;
 }
 
.site-footer {
    text-align: center;
    padding: 20px;
    margin-top: 50px;
    color: #666;
  	background-color: var(--color-card-background);
    font-size: 0.9em;
}

/* --- 3. Timeline Container & Line --- */
.timeline-container {
    position: relative; /* Crucial for positioning the line */
    width: 90%;
    max-width: 900px;
    margin: 40px auto;
    padding: 20px 0;
}

/* The Central Vertical Line */
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: var(--color-line-grey);
    transform: translateX(-50%);
}

/* --- 4. Individual Timeline Entries --- */
.timeline-entry {
    position: relative;
    width: 45%; /* Takes up nearly half the width */
    margin-bottom: 50px; /* Space between entries */
    padding: 10px 0;
}

/* Positioning the Left and Right Cards */
.timeline-entry.is-right {
    /* Pushes the entry card to the right side of the timeline line */
    margin-left: 55%; 
}

.timeline-entry.is-left {
    /* Positions the entry card on the left side */
    margin-left: 0;
}

/* The Post Card Styling */
.content-card {
    background-color: var(--color-card-background);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.content-card a {
  	text-align: right;
}

.align-right {
	text-align: right;
}

.content-card:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px); /* Subtle lift on hover */
}

/* --- 5. Date Marker & Alignment Dot --- */
.date-marker {
    position: absolute;
    top: 35px; /* Aligns vertically with the top of the card */
    font-family: var(--font-sans);
    font-weight: bold;
    color: var(--color-text);
    padding: 5px 10px;
    z-index: 10;
}

/* Positioning the date marker relative to the line */
.timeline-entry.is-right .date-marker {
    left: -110px; /* Positions marker on the left of the right card */
}

.timeline-entry.is-left .date-marker {
    right: -110px; /* Positions marker on the right of the left card */
}

/* The Sentiment Dot (the small circle on the line) */
.date-marker::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-line-grey);
    top: 5px;
    z-index: 11; /* Ensure dot is above the line */
    border: 3px solid var(--color-background); /* Creates a cutout effect */
}

/* Position the dot on the line */
.timeline-entry.is-right .date-marker::after {
    right: -25px; /* Adjust to sit exactly on the line */
}

.timeline-entry.is-left .date-marker::after {
    left: -25px; /* Adjust to sit exactly on the line */
}

/* Apply specific sentiment colors to the dot */
.timeline-entry.sentiment-joyful .date-marker::after { background-color: #4CAF50; } /* Green */
.timeline-entry.sentiment-pensive .date-marker::after { background-color: #3F51B5; } /* Indigo */
.timeline-entry.sentiment-tired .date-marker::after { background-color: #FF9800; } /* Orange */


/* --- 7. Single Entry Page Layout --- */

.single-entry-container {
    /* Define a comfortable reading width, centered */
    max-width: 750px; 
    margin: 40px auto;
    padding: 0 20px; /* Padding for small screens */
}

.journal-post {
    padding: 40px;
    background-color: var(--color-card-background);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.post-header {
    border-bottom: 1px solid #EEEEEE;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.post-title {
    font-size: 2.5em;
    margin: 10px 0 0;
    color: var(--color-text);
}

.post-metadata {
    font-family: var(--font-sans);
    font-size: 0.9em;
    color: #666;
    margin: 0;
}

/* --- 8. Content Styling for Readability --- */

.post-content p {
    margin-bottom: 1.5em;
    font-size: 1.1em; /* Slightly larger text for main content */
    line-height: 1.7; /* Increased line height for easy scanning */
}

/* Blockquotes for quoted text or focused thoughts */
.post-content blockquote {
    border-left: 4px solid var(--color-primary);
    margin: 30px 0;
    padding: 15px 20px;
    background-color: #FDFDFC;
    font-style: italic;
    color: #555;
}

.post-content blockquote footer {
    display: block;
    margin-top: 10px;
    font-size: 0.9em;
    color: #999;
}

/* Sentiment Tag Styling (used in metadata) */
.sentiment {
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

.sentiment-joyful {
    background-color: #EAFDF0; /* Light green */
    color: #4CAF50; /* Green text */
}

/* Add other sentiment colors (pensive, tired, etc.) here as needed */


/* --- 9. Post Footer --- */

.post-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #EEEEEE;
    text-align: center;
}

.back-link {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 500;
    margin-bottom: 15px;
}

.edit-note {
    font-size: 0.8em;
    color: #999;
}

/* Ensure the timeline-specific marker styles don't accidentally appear here */
.single-entry-container .date-marker {
    display: none;
}


/* --- 6. Basic Responsiveness for smaller screens --- */
@media (max-width: 768px) {
    
    .timeline-entry {
        width: 45%;
        margin-left: 0;
        padding-left: -5px; /* Space for the date marker and line */
    }

  	.post-navigation {
      	max-width: 90%;
  	}

  	.posts-navigation {
      	max-width: 90%;
  	}

}