/* style.css (Complete File - Centered Logo) */

/* Global Styles & Variables */
:root {
    --font-primary: 'Fraunces', sans-serif;
    --font-display: 'Fraunces', serif;
    --color-text: #333;
    --color-text-light: #555;
    --color-background: #f8f9fa;
    --color-card-bg: #ffffff;
    --color-primary: #007bff;
    --color-accent: #17a2b8;
    --color-border: #e0e0e0;
    --border-radius: 8px;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.1);
    --logo-gradient: linear-gradient(90deg, #acb627, #2aa19b);
}

/* Reset and Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; height: 100%; }
body {
    font-family: var(--font-primary);
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-background);
    font-size: 16px;
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto; 
}

/* Container */
.container { width: 90%; max-width: 1100px; margin: 0 auto; padding: 0 15px; }

 
/* ======================================================= */
/* === NEW STACKED HEADER & CENTERED LOGO/NAV STYLES === */
/* ======================================================= */

/* --- The Main Header Element --- */
.site-header { 
    background-color: var(--color-card-bg); 
    padding: 1.5rem 0; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
}

/* --- The New Stacking Container --- */
.header-stack-container {
    display: flex;
    flex-direction: column;
    align-items: center;    

    /* --- LEVER 2: SPACE BETWEEN LOGO & NAV --- */
    /* This creates the vertical space between the logo block and the nav block.
       Increase this value for more space. e.g., '2rem' */
    gap: 1.75rem;
}

/* --- Logo Wrapper & Centering --- */
.logo-wrapper {
    display: block;
}
.logo {
    display: flex;
    align-items: baseline;
    text-decoration: none;
    transition: transform 0.3s ease;

    /* --- LEVER 1A: OVERALL LOGO SIZE --- */
    /* By changing the font-size here on the parent, all the 'em' units
       inside the logo parts (.logo-square, .logo-the) will scale up proportionally.
       This is the easiest way to make the whole logo bigger. */
    font-size: 1.1rem; /* Was implicitly 1rem, now 10% larger. Try 1.2rem for even bigger. */
}
.logo:hover {
    transform: scale(1.05);
}


/* --- LOGO PART STYLES (These will now inherit the larger base size) --- */
.logo-the {
    font-family: 'Great Vibes', cursive;
    font-size: 1.5rem; 
    font-weight: 400;
    background: var(--logo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: 0.5em; 
    transform: translateY(-0.4em); 
}
.logo-square {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: var(--logo-gradient);
    margin-left: -0.2em;
    margin-right: 0.25em; 
}
.logo-thinker .logo-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem; 
    font-weight: 700;
    background: var(--logo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}
.logo-text::after {
    content: '.';
    position: absolute;
    right: -10px;
    top: -2px;
    color: var(--color-primary); 
    animation: blink 1.2s infinite step-end;
}
@keyframes blink { 
    0%, 100% { opacity: 1; } 
    50% { opacity: 0; } 
}


/* --- MAIN NAVIGATION STYLES (Now with more spacing) --- */
.main-nav {
    width: 100%;
}
.main-nav ul { 
    list-style: none; 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 

    /* --- LEVER 3: SPACE BETWEEN NAV ITEMS --- */
    /* This is the horizontal gap between each pill ('Society', 'Tutorials', etc.).
       Increase this value for more space. e.g., '1rem' */
    gap: 0.75rem; 
}

.main-nav a { 
    position: relative; 
    z-index: 1; 
    overflow: hidden; 
    font-weight: 500; 
    color: var(--color-text-light); 
    text-decoration: none; 
    padding: 0.6rem 1.25rem; 
    border-radius: 999px; 
    transition: background-color 0.4s ease, color 0.4s ease; 
}
.main-nav a::before { 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: linear-gradient(45deg, #D4AF37, #B5B35C, #F0E68C); 
    border-radius: inherit; 
    opacity: 0; 
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease; 
}
.main-nav a:hover, .main-nav a.active { 
    color: white; 
    background-color: #91d36b; 
    text-decoration: none; 
}

/* --- LEVER 4: REDUCED GLOW EFFECT --- */
/* By changing the blur radius here, you can control the "dispersion" of the glow.
   A smaller value makes the glow tighter and less dispersed. */
.main-nav a:hover::before, .main-nav a.active::before { 
    opacity: 1; 
    filter: blur(19.05rem); /* Was 15px, now it's a tighter glow. */
    transform: scale(1.1); 
}



/* ================================================== */
/* === WATERFALL DROPDOWN & SEPARATOR CONTROLS === */
/* ================================================== */


.main-nav .dropdown {
    position: relative;
}
.main-nav .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) translateX(-50%);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 15px;
    background: #f0f2f5; 
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    list-style: none;
    z-index: 1001;
    padding: 1.25rem;
}
.main-nav .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #f0f2f5;
}
.main-nav .dropdown-menu li {
    position: relative;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    margin-bottom: 0.75rem;
}
.main-nav .dropdown-menu li:last-child {
    margin-bottom: 0;
}
.main-nav .dropdown-menu li:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -0.4rem;
    left: 15%;
    width: 70%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
}
.main-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateX(-50%);
}
.main-nav .dropdown:hover .dropdown-menu li {
    opacity: 1;
    transform: translateY(0);
}
.main-nav .dropdown:hover .dropdown-menu li:nth-child(1) { transition-delay: 0.1s; }
.main-nav .dropdown:hover .dropdown-menu li:nth-child(2) { transition-delay: 0.2s; }
.main-nav .dropdown:hover .dropdown-menu li:nth-child(3) { transition-delay: 0.3s; }

/* The Dropdown Pills */
.main-nav .dropdown-menu li a {
    width: 90px; 
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-radius: 999px; 
    display: block; 
    margin: 0 auto;
    text-align: center;
    color: rgb(73, 52, 49);
    font-weight: 500;
    text-decoration: none;
    background-color:#b09070;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.main-nav .dropdown-menu li a:hover {
    color: #d8e158;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 7px 15px rgba(179, 244, 141, 0.4);
}

/* ... The rest of the CSS file ... */
/* ... Hero Section, Blog Posts, Articles, Footer, Contact, etc. ... */


/* Hero Section */
.hero-section { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; padding: 4rem 0; text-align: center; margin-bottom: 3rem; }
.hero-section h1 { color: white; font-size: 3.5rem; margin-bottom: 0.5em; }
.hero-section p { color: rgba(255, 255, 255, 0.9); font-size: 1.2rem; max-width: 700px; margin: 0 auto; }

/* Blog Posts Section */
.blog-posts-section { padding: 2rem 0; }
.blog-posts-section h2 { text-align: center; margin-bottom: 2.5rem; position: relative; }
.blog-posts-section h2::after { content: ''; display: block; width: 60px; height: 3px; background-color: var(--color-primary); margin: 0.5em auto 0; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; }
.loading-placeholder, .error-message { grid-column: 1 / -1; text-align: center; font-size: 1.2rem; color: var(--color-text-light); padding: 3rem 0; }
.error-message { color: #dc3545; }
.blog-card { background-color: var(--color-card-bg); border-radius: var(--border-radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.card-image-link { display: block; }
.card-image { width: 100%; height: 220px; object-fit: cover; transition: transform 0.3s ease; }
.blog-card:hover .card-image { transform: scale(1.05); }
.card-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.card-tags { margin-bottom: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { background-color: var(--color-background); color: var(--color-accent); font-size: 0.75rem; padding: 0.25em 0.75em; border-radius: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.card-title { margin-bottom: 0.5rem; font-size: 1.4rem; }
.card-title a { color: var(--color-text); }
.card-title a:hover { color: var(--color-primary); }
.card-meta { font-size: 0.875rem; color: #777; margin-bottom: 1rem; }
.card-meta .author { font-weight: 500; color: var(--color-text-light); }
.card-snippet {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* This is a valid approach, but the refactor below is slightly cleaner */
}
/* REFACTOR: Cleaned up blog card layout logic.
   The snippet no longer needs to grow. Instead, we use a margin-top: auto
   on the 'Read More' link to push it to the bottom of the flex container.
   This is a more direct and declarative way to achieve the same effect. */
.card-snippet {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    /* flex-grow: 1; <-- REMOVED */
}
.read-more-link {
    font-weight: 500;
    display: inline-block;
    color: var(--color-primary);
    /* align-self: flex-start; <-- This is the default, so it's not needed */
    margin-top: auto; /* <-- ADDED This pushes the link to the bottom */
}
.read-more-link:hover { color: var(--color-accent); text-decoration: none; }


/* === MODERNIZED ARTICLE PAGE STYLES === */
.article-page-main {
    /* REFACTOR: Use Flexbox to center the content wrapper.
       This is a more modern approach than relying solely on margin:auto. */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem 4rem 1rem;
}
.article-content-wrapper {
    max-width: 800px;
    width: 100%; /* Ensure it takes up the available width within the flex container */
    /* margin: 0 auto; <-- This is no longer needed for centering */
}
.article-content-wrapper h1 { font-family: var(--font-display); font-size: 3.2rem; line-height: 1.2; text-align: center; color: var(--color-text); padding-top: 3rem; padding-bottom: 2rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); }
.article-content-wrapper h1 + p { font-family: var(--font-primary); font-size: 1rem; font-style: italic; color: var(--color-text-light); text-align: center; line-height: 1.5; margin-bottom: 3rem; }
.article-content-wrapper h1 + p strong { font-weight: 600; color: var(--color-text); }
.article-image { width: 100%; max-height: 500px; object-fit: cover; border-radius: var(--border-radius); margin-bottom: 3rem; box-shadow: var(--shadow); }
.article-content-wrapper h2, .article-content-wrapper h3 { margin-top: 2.5em; margin-bottom: 1em; }
.article-content-wrapper p, .article-content-wrapper ul, .article-content-wrapper ol { font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5em; }
.article-content-wrapper ul, .article-content-wrapper ol { padding-left: 2em; }
.article-content-wrapper blockquote { border-left: 4px solid var(--color-accent); padding-left: 1.5em; margin: 2em 1em; font-style: italic; color: var(--color-text-light); font-size: 1.2rem; }
.back-to-blog-link { display: block; width: fit-content; margin: 2.5rem auto 0 auto; font-weight: 500; color: var(--color-primary); padding: 0.7em 1.2em; border-radius: var(--border-radius); transition: all 0.4s ease; border: 1px solid transparent; }
.back-to-blog-link:hover { background-color: var(--color-primary); color: white; text-decoration: none; border-color: transparent; }

/* Footer */
.site-footer { background-color: #2c3e50; color: rgba(255, 255, 255, 0.7); text-align: center; padding: 2.5rem 0; /* margin-top is no longer needed thanks to grid layout on body */ }
.site-footer p { margin-bottom: 0.5em; color: rgba(255, 255, 255, 0.7); }
.site-footer .heart { color: #e74c3c; }

/* Responsive Design */
@media (max-width: 768px) {
    .site-header .container { flex-direction: column; gap: 1rem; }
    .main-nav ul { gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
    .main-nav a { padding: 0.5rem 1rem; }
    .hero-section h1 { font-size: 2.5rem; }
    .hero-section p { font-size: 1rem; }
    .article-content-wrapper h1 { font-size: 2.5rem; } /* Adjust title size on mobile */
    .blog-grid { grid-template-columns: 1fr; }
}

/* Contact Page Styles */
.contact-page-container { padding: 3rem 0; background-color: var(--color-background); }
.contact-wrapper { max-width: 1100px; margin: 0 auto; display: flex; align-items: stretch; background-color: var(--color-card-bg); border-radius: var(--border-radius); box-shadow: var(--shadow); overflow: hidden; }
.contact-image-side { flex: 1 1 45%; background-image: url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?q=80&w=1887'); background-size: cover; background-position: center; min-height: 80vh; }
.contact-form-side { flex: 1 1 55%; padding: 3rem 4rem; display: flex; flex-direction: column; justify-content: center; }
.form-title { font-size: 2.5rem; color: var(--color-text); margin-bottom: 0.5em; }
.form-intro { font-size: 1.05rem; color: var(--color-text-light); margin-bottom: 2.5rem; line-height: 1.6; }
.form-group { position: relative; margin-bottom: 2.5rem; }
.form-input { width: 100%; padding: 1rem 0.5rem; font-size: 1rem; font-family: var(--font-primary); color: #524f4a; border: none; border-bottom: 2px solid var(--color-border); background-color: transparent; outline: none; transition: border-color 0.3s ease; }
.form-input:focus { border-color: #84a98c; }
.form-label { position: absolute; top: 1rem; left: 0.5rem; color: var(--color-text-light); pointer-events: none; transition: all 0.3s ease; }
.form-input:focus + .form-label, .form-input:not(:placeholder-shown) + .form-label { top: -0.75rem; left: 0; font-size: 0.8rem; color: #84a98c; background-color: var(--color-card-bg); padding: 0 0.25rem; }
textarea.form-input { resize: vertical; min-height: 100px; }
.btn-submit { width: 100%; padding: 1rem; background-color: #84a98c; color: white; border: none; border-radius: var(--border-radius); font-size: 1.1rem; font-weight: 500; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.3s ease; }
.btn-submit:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(132, 169, 140, 0.4); }
@media (max-width: 992px) {
    .contact-wrapper { flex-direction: column; }
    .contact-image-side { min-height: 300px; }
    .contact-form-side { padding: 2.5rem; }
}

/* Pagination Styles */
.pagination { display: flex; justify-content: center; align-items: center; padding: 2rem 0; gap: 0.5rem; list-style: none; user-select: none; }
.pagination a { color: var(--color-primary); background-color: var(--color-card-bg); border: 1px solid var(--color-border); padding: 0.75rem 1.2rem; border-radius: var(--border-radius); text-decoration: none; font-weight: 500; transition: all 0.3s ease; }
.pagination a:hover { background-color: var(--color-primary); color: white; border-color: var(--color-primary); }
.pagination a.active { background-color: var(--color-primary); color: white; border-color: var(--color-primary); cursor: default; }
.pagination a.disabled { color: #aaa; background-color: var(--color-background); pointer-events: none; border-color: var(--color-border); }


/* === REFACTORED CODE BLOCK STYLES (for highlight.js) === */
/* This section has been completely revised to correctly use the imported
   Dracula theme, fix conflicting styles, and improve the copy button UX. */

/* This wrapper is likely added by JS to hold the <pre> and the copy button */
.code-block-wrapper {
    position: relative;
    margin: 2em 0;
}

/* Apply consistent layout to all <pre> blocks within the wrapper.
   The imported theme (dracula.min.css) will handle the colors. */
.code-block-wrapper pre {
    border-radius: var(--border-radius);
    padding: 1.5rem;
    overflow-x: auto;
    font-family: 'Courier New', Consolas, Monaco, 'Lucida Console', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    /* NOTE: background-color and color are now controlled by dracula.min.css */
}

/* Ensure the <code> tag inside doesn't add extra padding or background */
.code-block-wrapper pre code.hljs {
    padding: 0;
    background: none;
}

/* Style for the 'Copy Code' button */
.copy-code-btn {
    position: absolute;
    top: 0.75rem; /* Position inside the padding area */
    right: 0.75rem;
    padding: 0.4rem 0.8rem;
    background-color: #44475a; /* Color from the Dracula theme palette */
    color: #f8f8f2;
    border: 1px solid #6272a4;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0; /* Hidden by default */
    transform: scale(0.95);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    font-family: var(--font-primary);
}

/* Show the button on hover of the wrapper */
.code-block-wrapper:hover .copy-code-btn {
    opacity: 1;
    transform: scale(1);
}

.copy-code-btn:hover {
    background-color: #6272a4;
}




/*stacked navbar */ 
 /* === ELEGANT & MINIMAL DROPDOWN MENU === */

 /* === THE DEFINITIVE DROPDOWN - WATERFALL ANIMATION === */
/*
  This version adds two key aesthetic improvements:
  1. A sequential "waterfall" animation for the pills.
  2. A thin, elegant separator line between the pills.
*/

.main-nav .dropdown {
    position: relative;
}

/* ================================================== */
/* == CONTROL PANEL 2: THE LUCID BACKGROUND (<ul>) == */
/* ================================================== */
.main-nav .dropdown-menu {
    /* The container's transition remains simple: it fades in */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) translateX(-50%);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 15px;

    margin-bottom: 10px;
    background: #f0f2f5; 
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    list-style: none;
    z-index: 1001;
    
    padding: .95rem;
    
    /* Remove gap; spacing is now controlled by the list items themselves */
}

.main-nav .dropdown-menu::before {
    /* (beak style is fine, no changes needed) */
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #f0f2f5;
}

/* ============================================== */
/* == WATERFALL ANIMATION & SEPARATOR CONTROLS == */
/* ============================================== */

/* The list item (<li>) is now the core of the animation and spacing */
.main-nav .dropdown-menu li {
    position: relative; /* Crucial for positioning the separator line */
    
    /* --- ANIMATION STEP 1: DEFINE THE INITIAL (HIDDEN) STATE --- */
    /* By default, each pill is invisible and moved up slightly. */
    opacity: 0;
    transform: translateY(-10px);
    
    /* Define HOW the animation will happen when triggered */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;

    /* Add space below each item to create a gap */
    margin-bottom: 0.75rem;
}

/* Remove the margin from the very last item to keep spacing even */
.main-nav .dropdown-menu li:last-child {
    margin-bottom: 0;
}

/* --- THE SEPARATOR LINE --- */
/* Add a line AFTER every list item, EXCEPT the last one */
.main-nav .dropdown-menu li:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -0.4rem; /* Position it in the middle of the margin-bottom gap */
    left: 15%; /* Start the line 15% in from the left */
    width: 70%; /* Make the line 70% of the container's width */
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1); /* A subtle color for the line */
}

/* --- ANIMATION STEP 2: TRIGGER THE ANIMATION ON HOVER --- */
/* When we hover the main dropdown, reveal the lucid BG and the pills */
.main-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateX(-50%);
}
/* Also on hover, animate the list items to their FINAL state */
.main-nav .dropdown:hover .dropdown-menu li {
    opacity: 1;
    transform: translateY(0);
}

/* --- ANIMATION STEP 3: CREATE THE STAGGERED "WATERFALL" DELAY --- */
/* This is the magic. Each pill gets a slightly longer delay, making them
   appear one after the other. */
.main-nav .dropdown:hover .dropdown-menu li:nth-child(1) { transition-delay: 0.1s; }
.main-nav .dropdown:hover .dropdown-menu li:nth-child(2) { transition-delay: 0.2s; }
.main-nav .dropdown:hover .dropdown-menu li:nth-child(3) { transition-delay: 0.3s; }
/* Add more lines like this if you have more pills */


/* ========================================= */
/* == CONTROL PANEL 1: THE PILLS (<a>) == */
/* ========================================= */
.main-nav .dropdown-menu li a {
    /* Using the same SMALLER & UNIFORM dimensions from before */
    width: 90px; 
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-radius: 999px; 
    display: block; 
    margin: 0 auto;
    text-align: center;
    color: rgb(73, 52, 49);
    font-weight: 500;
    text-decoration: none;
    background-color:#edf484;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.main-nav .dropdown-menu li a:hover {
    color: #3d3e30;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 7px 15px rgba(179, 244, 141, 0.4);
}






/* ================================================= */
/* === PAGE LOAD ANIMATION (Layout Shift Solution) === */
/* ================================================= */

/* 1. Define the animation */
@keyframes fadeInPage {
    from {
        opacity: 0;
        /* Start the content 15px lower */
        transform: translateY(15px); 
    }
    to {
        opacity: 1;
        /* Move it up to its final position */
        transform: translateY(0);
    }
}

/* 2. Apply the animation to the main content area of every page */
/* This will affect the hero section, blog grid, contact form, and article content */
main.site-main, main.article-page-main {
    /* 
      - The animation will be named 'fadeInPage'.
      - It will last for 0.6 seconds (you can adjust this).
      - It uses 'ease-out' for a smooth finish.
      - 'forwards' ensures it stays visible after the animation ends.
    */
    animation: fadeInPage 0.9s ease-out forwards;
}





/* ================================================= */

/* ========================================================= */
/* === PERMANENT FIX FOR IN-ARTICLE IMAGE STYLING === */
/* ========================================================= */
/* This rule is scoped to ONLY affect images inside the article content. */
.article-content-wrapper img {
    /* --- SIZING AND ALIGNMENT --- */
    max-width: 100%;  /* Ensures the image is never wider than the container. */
    height: auto;     /* CRUCIAL: Maintains the image's original aspect ratio. */
    display: block;   /* Removes extra space below the image. */

    /* This is the key to centering it perfectly within the text column. */
    margin: 2.5em auto; 

    /* --- VISUAL STYLING --- */
    /* Add the same border-radius and shadow as other elements for consistency. */
    box-shadow: var(--shadow);
}





.card-title a {
    text-decoration: none;
}

/* 2. Target the "Read More" link on hover */
.read-more-link {
    text-decoration: none;
}




/* ========================================================== */
/* === INNOVATIVE SOLUTION: MINIMAL READER HEADER         === */
/* === (This only activates on article pages)             === */
/* ========================================================== */

/* --- 1. Style the Header Bar Itself --- */
.is-article-page .site-header {
    /* Make it shorter and less visually heavy */
    padding: 0.75rem 0;
}

/* --- 2. Create the Layout --- */
.is-article-page .header-stack-container {
    /* Switch back to a horizontal layout */
    flex-direction: row;
    justify-content: space-between; /* Pushes logo left, nav right */
    align-items: center;
    
    /* We use a standard .container to keep it aligned with the page */
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
    gap: 1rem; /* A small gap between logo and nav */
}


/* --- 3. Simplify and Shrink the Logo --- */
.is-article-page .logo {
     font-size: 0.9rem; 
    position: center;  
}

/* Hide the decorative square to save space */
.is-article-page .logo-square {
    display: none;
}


/* --- 4. Redesign the Navigation for the Reader --- */
/* Hide the original navigation completely */
.is-article-page .main-nav {
    display: none;
}

/* Create and style a new "Back" link from the logo wrapper */
.is-article-page .logo-wrapper {
    /* Use '::after' to add a new "Back to Articles" link
       without changing the JS or HTML structure. */
    content: '';
    position: relative;
}
 

.is-article-page .logo-wrapper:hover::after {
    color: var(--color-primary);
    background-color: #e9ecef;
}


/* --- 5. Add the Reading Progress Bar --- */
.is-article-page .site-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Starts at 0 width */
    height: 3px;
    background: var(--logo-gradient);
    
    /* This 'animation-timeline' is a modern CSS feature that links
       the animation directly to the scroll position of the page. */
    animation: reading-progress linear;
    animation-timeline: scroll(root);
}

/* Define the animation: it just goes from 0% to 100% width */
@keyframes reading-progress {
    to { width: 100%; }
}