/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* --- Universal Box Sizing --- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- General Body and Typography Styles --- */
body {
    background: #f4f4f9; /* Softer, off-white background */
    font-family: 'Inter', sans-serif;
    color: #333;
    margin: 0;
    padding: 1em;
}

/* --- New Title Bar for Login --- */
.title-bar {
    max-width: 800px;
    margin: 0 auto 1.5em auto; /* Increased bottom margin for more space */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1em;
}

.title-bar h2 {
    margin: 0;
    color: #000;
    text-decoration: none;
}

.title-bar h2 a {
    margin: 0;
    color: #000;
    text-decoration: none;
}

#user-status {
    font-size: 0.9em;
    font-weight: 500;
    color: #555;
}

#user-info {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.user-button {
    color: #007bff;
    text-decoration: none;
    padding: 0.3em 0.8em; /* Reduced vertical padding to make buttons shorter */
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.user-button:hover {
    background-color: #f8f9fa;
    border-color: #ced4da;
}

.user-button.logout {
    color: #dc3545;
    border-color: #dc3545;
}

.user-button.logout:hover {
    background-color: #dc3545;
    color: #fff;
}


/* --- Top Navigation Menu --- */
div.menu {
    max-width: 800px; /* Match the content width */
    margin: 0 auto 1.5em auto; /* Center it and add space below */
    padding: 0.75em 1em; /* Adjusted padding for scrolling */
    background: #ffffff; /* Give it a card-like feel */
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex; /* Arrange links in a row */
    overflow-x: auto; /* Allow horizontal scrolling when needed */
}

/* Add a subtle scrollbar for Webkit browsers */
div.menu::-webkit-scrollbar {
    height: 4px;
}
div.menu::-webkit-scrollbar-track {
    background: transparent;
}
div.menu::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
div.menu::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}


div.menu a, a.menuLink {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    margin-right: 1em;
    padding: 0.5em 1em;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out;
    white-space: nowrap; /* Prevent links from wrapping to a new line */
    flex-shrink: 0; /* Prevent links from shrinking */
}

div.menu a:hover, a.menuLink:hover {
    background-color: #f0f0f0;
    color: #000;
}


/* --- Main Story Block as a "Card" --- */
div.storyBlock {
    background: #ffffff;
    border-radius: 12px; /* Slightly softer corners */
    padding: 1.5em; /* More generous padding */
    margin: 0 auto 1.5em auto; /* Centered with bottom margin */
    max-width: 800px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
    overflow: hidden; /* Ensures content respects the border radius */
}

.storyTitle {
    color: #1a1a1a;
    text-decoration: none;
    font-size: 1.5rem; /* Slightly larger title */
    font-weight: 700;
    display: block; /* Make it a block element for better spacing */
    margin-bottom: 0.5em;
    padding-left: 0; /* Remove old padding */
}

/* --- Layout for Summary and Image --- */
.summaryAndImage {
    display: flex;
    flex-wrap: wrap; /* Allows image to stack on smaller screens */
    gap: 1.5em; /* Space between summary and image */
    margin-bottom: 1.5em;
    align-items: flex-start;
}

.storySummary {
    flex: 2; /* Takes up more space */
    min-width: 300px; /* Prevents it from getting too squished */
}

.storyImage {
    flex: 1; /* Takes up less space */
    min-width: 200px;
}

.storyImage img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners for the image */
}


/* --- Detail Menu as Tabs --- */
.detailMenu {
    border-bottom: 2px solid #eee;
    margin-bottom: 1em;
}

.detailLink {
    color: #555;
    text-decoration: none;
    padding: 0.75em 1.25em;
    display: inline-block;
    border-radius: 8px 8px 0 0; /* Rounded top corners for tab effect */
    font-weight: 500;
    font-size: 0.95em;
    margin-right: 0.5em; /* Space between tabs */
    position: relative;
    bottom: -2px; /* Align with the bottom border */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.detailLink:hover {
    background-color: #f0f0f0;
    color: #000;
}


/* --- Article and Other Link Styling --- */
.articleHeader {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 0.25em;
    margin-top: 1.2em;
}

.articleTime {
    color: #888;
    font-size: 0.9em;
    white-space: nowrap;
}

.storyDetailContent > div:first-child > .articleHeader {
    margin-top: 0;
}

a.articleLink {
    font-weight: 500;
    color: #007bff;
    text-decoration: none;
}

a.articleLink:hover {
    text-decoration: underline;
}

.storyMore {
    display: inline-block;
    margin-top: 1em;
    font-weight: 500;
    color: #007bff;
}

.dups {
    font-size: 0.9em;
    color: #666;
    margin-top: 0.5em;
    padding-left: 1.5em;
    border-left: 2px solid #eee;
}

/* --- Term Badges --- */
span.plusTerm, span.minusTerm {
    border-radius: 12px;
    padding: 0.3em 0.8em;
    margin-right: 0.5em;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    font-size: 0.8em;
    font-weight: 500;
    display: inline-block;
}

span.plusTerm {
    background: #e7f7ec;
    color: #1e8449;
}

span.minusTerm {
    background: #fdeded;
    color: #c0392b;
}

/* --- Poll Display Styles --- */
.poll-container {
    margin-bottom: 2em;
}

.poll-question {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1em;
}

.poll-choices {
    list-style: none;
    padding: 0;
    margin: 0;
}

.poll-choice-item {
    margin-bottom: 0.75em;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.75em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Add styles for when a user can vote */
.poll-choice-item.votable {
    cursor: pointer;
}

.poll-choice-item.votable:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

/* Style for the user's selected choice */
.poll-choice-item.selected {
    border-color: #007bff;
    background-color: #e7f3ff;
}


.poll-choice-label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5em;
    color: #555;
}

.poll-result-container {
    display: flex;
    align-items: center;
    gap: 1em;
}

.poll-bar-container {
    flex-grow: 1;
    background-color: #e9ecef;
    border-radius: 4px;
    height: 12px;
    overflow: hidden;
}

.poll-bar {
    background-color: #007bff;
    height: 100%;
    width: 0; /* Start at 0 width for animation */
    border-radius: 4px;
    transition: width 0.6s ease-in-out;
}

.poll-vote-text {
    font-size: 0.9em;
    color: #888;
    white-space: nowrap;
}

/* --- Tooltip (unchanged) --- */
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}


/* --- Mobile Responsive Styles --- */
@media (max-width: 640px) {
    body {
        padding: 0.5em; /* Reduce body padding on small screens */
    }

    .title-bar, div.menu, div.storyBlock {
        /* Remove horizontal margins and reduce padding to use full width */
        margin-left: 0;
        margin-right: 0;
        padding-left: 0.75em;
        padding-right: 0.75em;
    }

    div.storyBlock {
        padding-top: 1em;
        padding-bottom: 1em;
    }

    #user-status {
        font-size: 1em; /* Make login text slightly larger */
    }

    div.menu a, a.menuLink {
        font-size: 1.1em; /* Make menu items larger for easier tapping */
    }

    .storyTitle {
        font-size: 1.3rem; /* Make titles slightly smaller on mobile */
    }

    .storySummary {
        font-size: 1.05em; /* Make summary text slightly larger */
    }

    .summaryAndImage {
        flex-direction: column; /* Stack image and summary vertically */
    }
}