/* 1. FONT IMPORT (Must be the first line!) */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap');

/* 2. Global Styles (Bright Theme & New Font) */
body {
    background-color: #F7F8FC; /* F7F8FC Your current light background */
    color: #333333; /* Default text color */
    font-family: 'Comfortaa', cursive, sans-serif; /* 🌟 Comfortaa Font 🌟 */
    margin: 20px;
    padding: 0;
}

/* 3. Header & Link Styles */
h1 { 
    color: #63B3ED; /* Your current header color */
    font-size: 2.5em;
}

a:link, 
a:visited {
    color: #4C96C8; /* Standard blue link color */
    text-decoration: none;
}

a:hover {
    color: #FCA5A5; 
    text-decoration: underline;
}

/* 4. ICON RESIZING (Updated to 30px!) */
td.indexcolicon img {
    /* Set ALL icons to the new, readable size */
    width: 30px; 
    height: 30px;
    
    vertical-align: middle; 
    margin-right: 10px; 
}

/* 5. Table & Text Readability */
td {
    padding: 8px 10px;
    border-bottom: 1px solid #E5E7EB /* Light divider line */
    vertical-align: middle; 
    font-size: 1.05em; /* Slightly increase text size for readability */
}

/* Ensure table headers match the new font */
th {
    font-family: 'Comfortaa', cursive, sans-serif;
    font-weight: 700;
    padding: 10px 10px;
}

/* --- 6. New Layout Columns --- */

/* * 1. Define the main wrapper as the reference point for absolute positioning */
#main-content-wrapper {
    position: relative; 
    width: 100%;
}

/* * 2. Position the Sidebar 
 * We are changing the TOP and RIGHT values to add margin/padding.
 */
#news-sidebar {
    position: absolute; /* Takes the element out of the flow! */
    
    /* 🌟 NEW VALUES! Move 50px down and 20px left 🌟 */
    /* Adjust 'top' to move it below your h1 and p elements */
    top: 50px; 
    /* Adjust 'right' to pull it away from the screen edge */
    right: 20px; 
    
    width: 300px; 
    padding: 15px;
    border-radius: 8px;
    background-color: #FFFFFF; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

/* ... rest of the sidebar styling stays the same ... */

/* * 4. Adjust the main table's position to ensure it doesn't overlap! */
table {
    /* Keeps the table narrow so the sidebar has room on the right */
    max-width: calc(100% - 350px); 
}

/* --- 7. New Sidebar Separator and Links --- */

/* Style for the horizontal rule dividing News and Logs */
#news-sidebar .section-divider {
    border: 0;
    border-top: 2px solid #E5E7EB; /* A thicker line to separate the sections */
    margin: 20px 0; /* Space above and below the line */
}

/* Style for the link to the logs */
#logs-section .log-link {
    display: block; /* Makes it treat margins nicely */
    background-color: #63B3ED;
    color: white !important; /* Force white text over the blue background */
    padding: 8px 12px;
    border-radius: 5px;
    margin: 10px auto 0 auto;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9em;
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s;
}

#logs-section .log-link:hover {
    background-color: #4C96C8;
    text-decoration: none;
}

/* We should also remove the old border-bottom from the last news item */
#news-section .sidebar-item:last-child {
    border-bottom: none;
}

/* --- Add or modify this section in your /style.css --- */

/* Targets the date string itself */
.log-date {
    font-size: 1.0em; /* Increase the size of the date */
    margin-top: 5px; /* Add a little space above the date */
    margin-bottom: 5px; /* Add a little space below the date, before the list starts */
    color: var(--color-primary); /* Optional: Use your primary color for the date if you like */
}

/* Optional: Targets the list of songs */
.song-list {
    margin-top: 5px;
    margin-bottom: 15px;
}

/* --- Add this new rule to your /style.css --- */
#news-section h3 {
    margin-bottom: 5px; /* Reduce the space below the heading */
    margin-top: 0;      /* Ensure there's no default top margin */
}