body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

header {
    text-align: left; /* Align title to the left */
    margin-bottom: 20px; /* Reduce margin for better positioning */
    position: relative; /* Set position to relative for children */
}

.header-content {
    display: flex; /* Use flexbox to align items horizontally */
    align-items: center; /* Center items vertically */
    justify-content: space-between;
    position: relative; /* Set position to relative for children */
    gap: 20px;
}

h1 {
    margin: 0; /* Remove default margin */
}

#last-updated-date {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 14px; /* Adjust font size */
    color: #555; /* Change color for distinction */
}

.main-content {
    display: flex; /* Use flexbox to arrange items */
    flex-wrap: wrap; /* Ensure proper wrapping on smaller screens */
}

.news-container {
    flex: 1; /* Allow this section to grow */
    margin-right: 20px; /* Space between news sections and Disqus */
}

.news-section {
    margin-bottom: 20px; /* Add spacing between sections */
}

/* .news-section h2 {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 100;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
} */

.news-section h2 {
    margin-top: 0; /* Remove margin at the top for the section headers */
    cursor: pointer; /* Indicate that the header is clickable */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 100;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

.news-section h2:hover {
    color: #4183c4; /* Change color on hover */
}

.news-list {
    display: none; /* Initially hide the news list */
    margin-top: 10px; /* Space between the section header and news list */
    padding: 10px; /* Padding for the news list */
    border-radius: 5px; /* Rounded corners */
}

/* Style for each article */
article {
    margin-bottom: 15px; /* Space between articles */
    padding: 10px; /* Inner padding for each article */
    background-color: #fff; /* White background for articles */
    border: 1px solid #ddd; /* Light border around articles */
    border-radius: 4px; /* Rounded corners for articles */
    transition: background-color 0.3s; /* Smooth background color transition */
    max-width: calc(75% - 20px); /* Set a max width for articles to break text sooner */
    overflow-wrap: break-word; /* Ensure long words break */
    box-sizing: border-box; /* Include padding and border in width calculation */
    display: flex; /* Use flexbox to control the layout */
    justify-content: space-between; /* Space out title and buttons */
}

/* Ensure the title has a flex-grow to fill space */
article a {
    color: #333; /* Dark gray color for text */
    text-decoration: none; /* Remove underline */
    flex-grow: 1; /* Allow title to take available space */
    margin-right: 10px; /* Add margin between title and buttons */
}

article a:hover {
    text-decoration: underline; /* Underline on hover */
    color: #4183c4; /* Change color on link hover */
}

/* Style for buttons */
.summarize-button, .save-button {
    margin-left: 5px; /* Space between buttons */
    padding: 5px 10px; /* Padding for buttons */
    background-color: #4183c4; /* Button background color */
    color: white; /* Button text color */
    border: none; /* No border */
    border-radius: 3px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer */
}

.summarize-button:hover, .save-button:hover {
    background-color: #357abd; /* Darker shade on hover */
}

/* Hover effect for articles */
article:hover {
    background-color: #f0f0f0; /* Light gray background on hover */
}

.toggle-sign {
    cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
    margin-left: 10px; /* Space between the header and the sign */
    font-weight: bold; /* Make the sign stand out */
}

.header-btn {
    flex: 0 0 auto;
    position: static;
    text-align: right;
    margin-left: auto;
    padding: 8px 18px;
    background: #005ea5; /* EU blue */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    white-space: nowrap;
}

.header-btn:hover {
    background: #003d70; /* Darker EU blue on hover */
}

#swipe-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #1470f4;
    z-index: 9999;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(.77,0,.18,1);
    transform: translateX(-100%);
}

/* Left to right swipe (index.html -> InitiativeTracker.html) */
#swipe-overlay.swipe-active {
    transform: translateX(0);
}

/* Right to left swipe (InitiativeTracker.html -> index.html) */
#swipe-overlay.swipe-active-rtl {
    transform: translateX(0);
}

/* Remove the Disqus container styles */
 
/* .disqus-container {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 400px;
    height: auto;
    padding: 20px;
    border-left: 1px solid #ccc;
    background-color: white;
    z-index: 1000;
} */

.news-search-bar {
    position: sticky;
    top: 56px; /* Adjust this value to be the height of your header */
    z-index: 150;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

#news-search-input {
    flex: 1;
    padding: 6px 12px;
    font-size: 1em;
    border-radius: 4px;
    border: 1px solid #ccc;
}
#news-search-count {
    min-width: 60px;
    text-align: center;
    font-weight: bold;
}
#news-search-prev, #news-search-next {
    padding: 4px 10px;
    font-size: 1em;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #eee;
    cursor: pointer;
}
#news-search-prev:disabled, #news-search-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.news-search-highlight {
    box-shadow: 0 0 0 3px #003399;
    border-radius: 3px;
    transition: box-shadow 0.2s;
    background: none !important;
    color: inherit !important;
}

/* Multi-highlight classes for different colors */
.multi-highlight-0 {
    background: #ffe066 !important; /* yellow */
    color: #222 !important;
    border-radius: 3px;
    padding: 0 2px;
}
.multi-highlight-1 {
    background: #8ecaff !important; /* blue */
    color: #222 !important;
    border-radius: 3px;
    padding: 0 2px;
}
.multi-highlight-2 {
    background: #8fff8f !important; /* green */
    color: #222 !important;
    border-radius: 3px;
    padding: 0 2px;
}
.multi-highlight-3 {
    background: #ffb3e6 !important; /* pink */
    color: #222 !important;
    border-radius: 3px;
    padding: 0 2px;
}
.multi-highlight-4 {
    background: #ffb366 !important; /* orange */
    color: #222 !important;
    border-radius: 3px;
    padding: 0 2px;
}
.multi-highlight-5 {
    background: #b3b3ff !important; /* purple */
    color: #222 !important;
    border-radius: 3px;
    padding: 0 2px;
}

@media (max-width: 768px) {
    body {
        padding: 5px;
    }
    .main-content {
        flex-direction: column; /* Stack elements vertically on smaller screens */
    }

    header {
        text-align: center; /* Center the header on small screens */
    }

    #last-updated-date {
        margin-left: 0; /* Remove left margin for small screens */
        text-align: center; /* Center the last updated text */
    }

    article {
        max-width: 100%;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        box-sizing: border-box;
    }

    .main-content,
    .news-container {
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    article {
        max-width: 100%;
        width: 100%;
        margin: 10px auto; /* Center the box and add vertical spacing */
        box-sizing: border-box;
        display: block;
    }

    .news-section h2 {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 100;
        border-bottom: 1px solid #eee;
        padding: 10px 0;
    }

    .fixed-category-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 999;
        border-bottom: 1px solid #eee;
        padding: 10px 0;
    }
}

/* Styles for the new "important" checkbox with red background */
.important-check {
    width: 13px; /* Adjust to match regular checkbox size */
    height: 13px; /* Adjust to match regular checkbox size */
    appearance: none;
    border: 2px solid red; /* Red border when unchecked */
    background-color: transparent; /* Transparent background when unchecked */
    cursor: pointer; /* Pointer cursor for interaction */
    border-radius: 3px; /* Slightly rounded corners */
    margin-right: 5px; /* Adjust space between checkboxes */
    vertical-align: middle; /* Align it properly with the text */
    margin-top: 2px; /* Adjust position to move it slightly down */
}

/* When the checkbox is checked, change the background color */
.important-check:checked {
    background-color: red; /* Red background when checked */
}

/* Regular checkbox styles for the existing checkbox */
.news-read-checkbox {
    margin-left: 5px; /* Adjust space between checkboxes */
    vertical-align: middle; /* Align it properly with the "important" checkbox */
}

.separator {
    border: 2px solid #000; /* Change the number to adjust thickness; color can also be changed */
    margin: 20px 0; /* Optional: Adds space above and below the line */
}

#foreign-relations-news-list {
    margin-top: -8px !important;   /* Pull subcategories closer up */
    padding-top: 0 !important;
}

#foreign-relations-news-list > .news-section {
    margin-left: 50px;   /* Slightly more indent for clarity */
    margin-top: 0;
    padding-top: 0;
}

#foreign-relations-news-list h3 {
    position: sticky;
    top: 48px; /* Adjust this value if your main header is taller/shorter */
    background: #f9f9f9;
    z-index: 90;
    font-size: 1.4em;
    margin-bottom: 0;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

document.getElementById('news-btn').onclick = function() {
    const overlay = document.getElementById('swipe-overlay');
    overlay.style.transform = 'translateX(100%)'; // Start off-screen right
    // Force reflow to apply the style before adding the class
    void overlay.offsetWidth;
    overlay.classList.remove('swipe-active');
    overlay.classList.add('swipe-active-rtl');
    setTimeout(() => {
        window.location.href = 'index.html';
    }, 600);
};

#news-collapse-all {
    padding: 4px 10px;
    font-size: 1em;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: #eee;
    cursor: pointer;
    margin-left: 6px;
}
#news-collapse-all:hover {
    background: #ffd6d6;
}