/* ==============================================
   HOMEPAGE SPECIFIC STYLES - FINAL & CORRECTED
   ============================================== */

/* ----------------------------
   1. Hero Section with Cover Photo
   ---------------------------- */
.hero-section {
    /* --- This sets up your cover photo as the background --- */
    background-image:
        /* This dark overlay makes the white text readable */
        linear-gradient(rgba(44, 62, 80, 0.65), rgba(44, 62, 80, 0.8)),
        /* Your actual image file */
        url('../images/homepage_cover.jpg');
        
    background-size: cover;
    background-position: center;
    color: var(--text-light);
    
    /* --- Spacing and Alignment --- */
    padding: 7rem 2rem; /* Creates vertical space */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 450px; /* Ensures a minimum height on larger screens */
}

.hero-content {
    max-width: 850px; /* Constrains the width of the text */
    animation: fadeInHero 1s ease-out;
}

@keyframes fadeInHero {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-title {
    font-family: 'Lora', serif; /* A professional serif font for headings */
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

.hero-button {
    background-color: var(--accent-color-hover);
    color: var(--text-light);
    padding: 14px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
    display: inline-block;
    border: 2px solid var(--accent-color-hover);
}

.hero-button:hover {
    background-color: transparent;
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-3px);
}

/* --- 2. Welcome Section (Now a Full-Width "Band") --- */
.welcome-section {
    /* This section now controls its own padding and background */
    padding: 4rem 2rem;
    background-color: #fff; /* The clean white background */
}

/* --- 4. Welcome + News Grid Layout --- */
.welcome-grid-container {
    max-width: 1350px; /* Constrains the content inside the band */
    margin: 0 auto;    /* Centers the content */
    
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: flex-start;
    text-align: left;
}

/* --- Column 1: Welcome Text --- */
/*.welcome-text h2 {*/
/*    font-size: 2rem;*/
/*    font-weight: 600;*/
/*    color: var(--dark-bg);*/
/*    margin-bottom: 1.5rem;*/
/*}*/
.welcome-text p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #34495e;
    margin-bottom: 1rem;
}

.welcome-text h2 {
    font-family: 'Lora', serif;
    font-size: 2.6rem;
    color: var(--dark-bg);
    
    /* Center the heading text */
    text-align: center;
    
    /* Make the heading a "positioning container" for the line */
    position: relative;
    
    /* Add more space below the heading */
    margin-bottom: 2.5rem;
    padding-bottom: 1rem; /* Add padding to make space for the line */
}

/* This is the new pseudo-element that creates the decorative line */
.welcome-text h2::after {
    content: ''; /* A pseudo-element must have a content property */
    position: absolute;
    
    /* Position the line at the bottom center of the heading */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* This is the trick to perfectly center it */
    
    /* Style the line */
    width: 155px;  /* The length of the line */
    height: 4px;  /* The thickness of the line */
    background-color: var(--accent-color-hover); /* Your site's golden accent color */
    border-radius: 2px;
}


/* --- Column 2: Latest News Sidebar --- */
.latest-news-sidebar {
    background-color: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}
.latest-news-sidebar h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--dark-bg);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent-color-hover);
}
.latest-news-sidebar .news-list { list-style: none; padding: 0; margin: 0; }
.latest-news-sidebar .news-list li a { display: block; text-decoration: none; padding: 1rem; margin: 0 -1rem; border-top: 1px solid #e0e0e0; transition: background-color 0.3s ease; border-radius: 8px; }
.latest-news-sidebar .news-list li:first-child a { border-top: none; }
/*.latest-news-sidebar .news-list li:hover a { background-color: #f0f4f8; }*/

.latest-news-sidebar .news-list li:hover a{
    background-color: var(--dark-bg);
/*    background-color: #f0f4f8;*/
    color: #ccc;
}

.latest-news-sidebar .news-list li:hover a .news-date {
    /* Change the date stamp to a light gray for readability */
    color: #ccc;
}

.news-date { display: block; font-size: 0.85rem; font-weight: 600; color: #777; margin-bottom: 0.25rem; }
.latest-news-sidebar .news-list li a { color: #34495e; }
.news-archive-link { display: inline-block; margin-top: 1.5rem; font-weight: 600; }


/* ==============================================
   ADD THIS BLOCK to home.css for the featured news
   ============================================== */

/* --- Featured News Block --- */

.featured-news {
    background-color: #fff; /* A clean white background to make it pop */
    border: 1px solid #e0e0e0;
    border-left: 4px solid var(--accent-color-hover); /* Accent color on the left */
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem; /* Space between it and the list below */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/*.featured-tag {*/
/*    display: inline-block;*/
/*    background-color: var(--accent-color-hover);*/
/*    color: #fff;*/
/*    padding: 4px 10px;*/
/*    border-radius: 50px; /* Pill shape */
/*    font-size: 0.8rem;*/
/*    font-weight: 600;*/
/*    margin-bottom: 1rem;*/
/*}*/

/* =========================================================
   IN home.css, REPLACE your old "Featured News" block
   with this new, colorful version.
   ========================================================= */

/* --- Featured News Block (Colorful Version) --- */

.featured-news {
    /* --- The new, vibrant gradient background --- */
    background: linear-gradient(135deg, #2c3e50 0%, #4a90e2 100%);
    
    color: #fff; /* All text inside will be white or light gray */
    
    border: none; /* Remove the old border */
    border-radius: 12px; /* A slightly larger radius */
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    
    /* ADD THIS LINE to animate the transform property */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* The tag is now a "ghost" style to contrast with the background */
.featured-tag {
    display: inline-block;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* The heading is now bright white */
.featured-news h3 {
    font-family: 'Lora', serif;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 0.75rem;
}

/* The paragraph text is a soft, light gray for a subtle hierarchy */
.featured-news p {
    font-size: 1rem;
    line-height: 1.6;
    color: #c8d4e0; /* A light gray, easy to read on the dark background */
    margin-bottom: 1.5rem;
}

/* --- THIS IS THE NEW RULE YOU NEED TO ADD --- */
.featured-news:hover {
    /* This scales the card up by 3%, creating the zoom effect */
    transform: scale(1.03);
    
    /* Optional: Make the shadow a bit larger for a "lifted" feel */
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

/* The button is now a "ghost" style */
.featured-button {
    display: inline-block;
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 10px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* On hover, the button fills with white */
.featured-button:hover {
    background-color: #fff;
    color: #2c3e50; /* The dark text color */
}


/* --- 3. Resource Button Container --- */

.button-container {
  /* This rule on the PARENT is what centers the button */
  text-align: center;
}

/* --- The "Resources" Call to Action Block --- */
.resources-cta {
  /* A clean line to separate it from the welcome text above */
  border-top: 1px solid #e0e0e0;
  /* Generous spacing */
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  
  text-align: left; /* Aligns content to the left */
}

.resources-cta h3 {
  font-family: 'Lora', serif;
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 0.75rem;
}

.resources-cta p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  max-width: 1100px; /* Constrain line length for readability */
}

/* --- The Call to Action Button --- */
.cta-button {
  display: inline-block;
  background-color: #2c3e50;
/*background-color: var(--accent-color-hover);*/
  color: #fff;
  border: 2px solid #2c3e50;/*var(--accent-color-hover);*/
  padding: 12px 28px; /*12px 28px; */
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.cta-button:hover {
  background-color: transparent;
  color: #2c3e50;
  /* ADD THIS LINE to prevent the underline */
    text-decoration: none;
}

/* --- 4. Responsive Design --- */
@media (max-width: 900px) {
    .welcome-grid-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}
/*@media (max-width: 768px) {*/
/*    .hero-section { padding: 5rem 1.5rem; }*/
/*    .hero-title { font-size: 2.5rem; }*/
/*    .welcome-section { padding: 3rem 1.5rem; }*/
/*}*/

@media (max-width: 768px) {
    .hero-section {
        padding: 5rem 1.5rem;
        min-height: 350px;
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .welcome-grid-container {
            grid-template-columns: 1fr;
            gap: 2.5rem;
    }

    .welcome-section {
        padding: 3rem 1.5rem;
    }
}