body {
    background-color: #051e3d; /* Darker blue (was: #000F47) */
    color: #FFFFFF;
    font-family: Verdana, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 20px; /* Increase font size for body text */
}

#content {
    border: 2.5px solid #FFFFFF; /* Maintain border weight at 2.5px */
    border-radius: 8px; /* Elegant rounded corners */
    margin: 20px auto; /* Center the frame horizontally */
    padding: 20px;
    height: auto; /* Allow content to determine height */
    box-sizing: border-box;
    max-width: calc(30px + 10px + 250px + 20px + 800px + 260px); /* Hamburger (30px + 10px padding) + Coat of Arms (250px max) + Margin (20px) + Logo (650px max) + Buffer (260px) */
    min-width: 930px; /* Enforce minimum width to support table */
    width: 100%; /* Allow full width up to max-width */
    overflow: visible; /* Ensure content is visible */
    min-height: 700px; /* Consistent height to match candidate-comparison.html screenshot */
    display: flex;
    flex-direction: column;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #051e3d; /* Match body background for consistency (was: #000F47) */
    color: #FFFFFF;
}

.header-container {
    display: flex;
    flex-direction: column; /* Default to column for mobile */
    align-items: flex-start; /* Align items to the left on mobile */
    padding: 0;
    position: relative; /* For positioning the hamburger */
    width: 100%; /* Full width within #content */
    max-width: 100%; /* Ensure header doesn’t exceed content width */
    margin-bottom: 50px; /* Creates space for the separator line */
}

.header-container::after {
    content: '';
    position: absolute;
    bottom: -35px; /* Positions the line below the header */
    left: -20px; /* Aligns with the padding of the parent #content */
    width: calc(100% + 40px); /* Extends the line to cover the full width, including padding */
    height: 20px; /* Sets the thickness of the separator line */
    background-color: #CCCCCC; /* White color for the line */
    z-index: 1; /* Ensures the line appears above other elements if needed */
}

.logo-group {
    display: flex;
    align-items: center; /* Vertically center */
    justify-content: flex-start; /* Align to left */
    gap: 20px; /* Space between coat of arms and logo */
    margin-left: 170px; /* Shift right to avoid hamburger */
    max-width: calc(250px + 40px + 800px); /* Coat of Arms + Gap + Logo */
}

.coat-of-arms {
    height: 200px; /* Fixed height for coat of arms */
    max-width: 250px; /* Limit width to prevent overflow */
    width: auto; /* Let width scale to maintain aspect ratio */
    object-fit: contain; /* Maintain aspect ratio */
    margin-right: 20px; /* Space between coat of arms and logo */
}

.logo {
    height: 200px; /* Fixed height for logo */
    max-width: 800px; /* Limit width to prevent overflow */
    width: auto; /* Let width scale to maintain aspect ratio */
    object-fit: contain; /* Maintain aspect ratio */
}

nav {
    position: absolute;
    top: 20px; /* Position at the top */
    left: 20px; /* Position in the top-left corner */
    width: auto; /* Allow nav to fit content */
    z-index: 1001; /* Ensure hamburger stays above content */
}

.hamburger {
    cursor: pointer;
    width: 30px; /* Hamburger icon size */
    height: 30px; /* Increased height to ensure full tap area */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1001; /* Ensure hamburger stays above menu */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
    touch-action: manipulation; /* Optimize touch handling */
    padding: 10px; /* Increase padding to ensure full tap area */
    transition: all 0.3s ease; /* Smooth transition for active state */
}

.hamburger span {
    width: 100%;
    height: 3px;
    background-color: #FFFFFF;
    transition: all 0.3s ease;
}

.nav-menu {
    display: none; /* Hidden by default, controlled by hover or active */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #FFFFFF; /* White background for the menu */
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    list-style: none;
    margin: 0;
    z-index: 1000; /* Ensure it’s above content */
}

.nav-menu li {
    margin: 5px 0;
}

.nav-menu li a {
    color: #001F5F; /* Dark blue text in menu */
    text-decoration: none;
    display: block; /* Ensure each item is on a separate line */
    padding: 10px 20px; /* Add padding for better click area */
}

.nav-menu li a:hover {
    background-color: #001F5F; /* Dark blue background on hover */
    color: #FFFFFF; /* White text on hover */
}

main {
    flex: 1; /* Allow main to grow and fill remaining space in #content */
}

main p {
    margin-bottom: 15px; /* Reduce from 25px to match the natural flow of Terms/Privacy */
}

.share-buttons {
    position: absolute;
    bottom: 20px; /* Distance from the bottom of the frame */
    right: 20px; /* Distance from the right of the frame */
    display: flex;
    gap: 15px; /* Space between buttons */
    z-index: 10; /* Ensures buttons stay above other content */
    font-size: 16px; /* Adjust this value to your preferred size */
    font-weight: bold;
}

.share-link {
    padding: 10px 10px;
    border-radius: 5px;
    text-decoration: none;
    color: #FFFFFF;
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.share-link.twitter {
    background-color: #1DA1F2; /* Twitter blue */
}

.share-link.twitter:hover {
    background-color: #0d8cdb; /* Darker blue on hover */
}

.share-link.facebook {
    background-color: #4267B2; /* Facebook blue */
}

.share-link.facebook:hover {
    background-color: #365899; /* Darker blue on hover */
}

/* Container to position the button on the left */
.bmc-container {
    position: absolute;
    bottom: 20px; /* Matches .share-buttons */
    left: 20px; /* Positions it on the left side */
    z-index: 10; /* Matches .share-buttons z-index */
}

/* Style the Buy me a coffee button */
.bmc-button {
    padding: 10px 10px; /* Matches .share-link padding */
    font-size: 16px; /* Matches .share-link font-size */
    font-weight: bold; /* Matches .share-link font-weight */
    background-color: #abce5b; /* Green color, 100% of my other buttons */
    color: #001F5F; /* Blue color, matching the FAQ buttons */
    text-decoration: none;
    border-radius: 5px; /* Matches .share-link */
    transition: background-color 0.3s ease; /* Matches .share-link */
    display: inline-block; /* Ensures proper sizing */
    line-height: 16px; /* Aligns text vertically, matches font-size */
    box-sizing: border-box; /* Ensures padding doesn’t increase size */
}

/* Hover effect */
.bmc-button:hover {
    background-color: #45a049; /* Darker green, similar to .share-link hover */
    color: #FFFFFF;
    text-decoration: none;
}

/* User & Candidate Comparison, Summary, and Results */
.comparison-container {
    max-width: 930px; /* Limit maximum width but allow overflow */
    margin: 0 auto; /* Center it */
    padding: 0; /* No padding, let wrapper handle spacing */
    background-color: #051e3d; /* Match background */
    border: 1px solid #8f8d8d; /* Grey frame border */
    box-sizing: border-box;
    width: 100%; /* Allow full width up to max-width */
    border-radius: 8px; /* Apply rounded corners */
    overflow: hidden; /* Clip the inner content to the rounded edges */
    min-height: 400px; /* Ensure consistent height with white background */
    position: relative; /* For absolute positioning of background */
}

.comparison-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF; /* White background to fill space */
    z-index: 0; /* Behind content */
}

/* Style for the inner wrapper to handle scrolling */
.comparison-wrapper {
    min-height: 0; /* Allow it to shrink to content height */
    overflow-y: auto; /* Enable vertical scrolling only if needed */
    overflow-x: hidden; /* Prevent horizontal scrolling within wrapper */
    width: 100%;
    height: 100%; /* Fill the container */
    box-sizing: border-box;
    position: relative; /* Ensure content is above background */
    z-index: 1; /* Above the white background */
    /* Custom scrollbar styles */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #8f8d8d #051e3d; /* Updated thumb color to #8f8d8d */
}

.comparison-wrapper::-webkit-scrollbar {
    width: 8px; /* Vertical scrollbar width */
}

.comparison-wrapper::-webkit-scrollbar-track {
    background: #051e3d; /* Match background color */
}

.comparison-wrapper::-webkit-scrollbar-thumb {
    background: #8f8d8d; /* Match thumb color */
    border-radius: 4px;
}

.comparison-wrapper::-webkit-scrollbar-thumb:hover {
    background: #7a7777; /* Lighter shade on hover */
}

/* Table wrapper for consistent height and scroll behavior */
.table-wrapper {
    width: 100%;
    height: auto; /* Ensure it fills the container */
    box-sizing: border-box; /* Ensure padding and borders are included */
}

/* Shared table styling for comparison and summary (default) */
#comparisonTable, #summaryTable {
    width: 100%; /* Fit to .comparison-container width */
    border-collapse: collapse;
    font-size: 16px;
    background-color: #fff; /* Default background: white */
    margin: 0; /* Remove any default margins */
    border-radius: 8px; /* Elegant rounded corners */
    table-layout: fixed; /* Force fixed table layout to respect column widths */
    overflow: hidden; /* Ensure content stays within bounds */
}

/* Specific styles for candidate-comparison.html */
.candidate-comparison-page .comparison-wrapper {
    overflow-x: auto; /* Enable horizontal scrolling for the table */
}

.candidate-comparison-page #comparisonTable {
    width: auto; /* Allow table to expand with columns */
    min-width: 100%; /* Ensure it fills the container at minimum */
    display: table; /* Revert to table layout for alignment */
    overflow: visible; /* Allow table to expand */
}

.candidate-comparison-page #comparisonTable th,
.candidate-comparison-page #comparisonTable td {
    min-width: 100px; /* Minimum width for readability */
    box-sizing: border-box; /* Ensure padding doesn’t affect width */
}

.candidate-comparison-page #comparisonTable th:nth-child(1),
.candidate-comparison-page #comparisonTable td:nth-child(1) {
    width: 15%; /* Match Category width from summaryTable */
}

.candidate-comparison-page #comparisonTable th:nth-child(2),
.candidate-comparison-page #comparisonTable td:nth-child(2) {
    width: 54%; /* Match Statement width from summaryTable */
}

.candidate-comparison-page #comparisonTable th:nth-child(3),
.candidate-comparison-page #comparisonTable td:nth-child(3) {
    width: 15%; /* Match Your Response width from summaryTable */
}

.candidate-comparison-page #comparisonTable th:nth-child(n+4),
.candidate-comparison-page #comparisonTable td:nth-child(n+4) {
    width: 15%; /* Match Your Response width for all candidate columns */
    min-width: 139.5px; /* Minimum width based on 15% of 930px */
    box-sizing: border-box; /* Ensure padding doesn’t affect width */
}

/* Restore results-grid for results.html */
.results-grid {
    width: 930px; /* Fixed width to match container */
    min-width: 930px; /* Prevent collapse */
    font-size: 16px;
    background-color: #fff;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 558px 372px; /* Explicit column widths */
    border-collapse: collapse;
}

.grid-row {
    display: contents; /* Allows child elements to participate in the grid */
}

.grid-header {
    background: linear-gradient(90deg, #f2f2f2 0%, #e0e0e0 100%);
    position: sticky;
    top: 0;
    z-index: 2;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.grid-cell {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
    color: #001F5F !important;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; /* Allow wrapping */
    box-sizing: border-box;
}

.grid-cell.candidate-cell {
    width: 100%;
}

.grid-cell.percentage-cell {
    width: 100%;
    background-color: #e0e0ff;
    color: #003087 !important;
    font-weight: bold;
}

.results-grid .match-high {
    background: linear-gradient(90deg, #d4edda 0%, #a3d7a9 100%); /* Green gradient for 80%+ */
    color: #155724 !important; /* Dark green text */
}

.results-grid .match-medium {
    background: linear-gradient(90deg, #fff3cd 0%, #ffeeba 100%); /* Yellow gradient for 50-79% */
    color: #856404 !important; /* Dark yellow text */
}

.results-grid .match-low {
    background: linear-gradient(90deg, #f8d7da 0%, #f5c6cb 100%); /* Red gradient for <50% */
    color: #721c24 !important; /* Dark red text */
}

/* Adjust column widths for #summaryTable */
#summaryTable th:nth-child(1), #summaryTable td:nth-child(1) {
    width: 15%; /* Category: 139.5px */
}
#summaryTable th:nth-child(2), #summaryTable td:nth-child(2) {
    width: 54%; /* Statement: 558px */
}
#summaryTable th:nth-child(3), #summaryTable td:nth-child(3) {
    width: 15%; /* Your Choice: 139.5px */
}
#summaryTable th:nth-child(4), #summaryTable td:nth-child(4) {
    width: 11%; /* Weight: 46.5px */
    min-width: 46.5px; /* Ensure the column doesn't collapse below 46.5px */
}

#comparisonTable th, #summaryTable th {
    background: linear-gradient(90deg, #f2f2f2 0%, #e0e0e0 100%); /* Subtle gradient for headers */
    position: sticky;
    top: 0; /* Stick to top of container */
    z-index: 2; /* Ensure header stays above tbody */
    font-weight: 600; /* Slightly bolder for emphasis */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Reinforce specific colors for headers and cells */
#comparisonTable th, #comparisonTable td,
#summaryTable th, #summaryTable td {
    border: 1px solid #ddd;
    padding: 12px 15px; /* Increased padding for elegance */
    text-align: left;
    color: #001F5F !important; /* Force dark blue text */
    font-size: 16px;
    white-space: normal; /* Allow wrapping */
    overflow: hidden;
    overflow-wrap: break-word; /* Ensure long words break */
    box-sizing: border-box;
}

/* Adjust column-specific colors for consistency */
#comparisonTable th:nth-child(3), #summaryTable th:nth-child(3) {
    background-color: #cce5ff; /* Light blue background */
    color: #003087 !important; /* Darker blue text for contrast */
    font-weight: bold; /* Bold for header only */
}

#comparisonTable td:nth-child(3), #summaryTable td:nth-child(3) {
    background-color: #cce5ff; /* Light blue background */
    color: #003087 !important; /* Darker blue text for contrast */
    font-weight: normal; /* Regular weight for cells */
}

#comparisonTable td.match {
    background-color: #d4edda; /* Light green */
    color: #155724 !important; /* Dark green text for contrast */
}

#comparisonTable td.mismatch {
    background-color: #f8d7da; /* Light red */
    color: #721c24 !important; /* Dark red text for contrast */
}

/* Custom Checkbox Styling for Weight Column */
#summaryTable td:nth-child(4) {
    padding: 8px;
    text-align: center;
}

#summaryTable input[type="checkbox"] {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    margin: 0;
}

#summaryTable .checkbox-label {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #ffffff !important;
    border: 2px solid #003087 !important;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

#summaryTable input[type="checkbox"]:checked + .checkbox-label {
    background-color: #d4edda !important;
    border-color: #155724 !important;
}

#summaryTable input[type="checkbox"]:checked + .checkbox-label::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #155724 !important;
    font-size: 14px;
    font-weight: bold;
}

#summaryTable .checkbox-label:hover {
    background-color: #e0e0ff !important;
}

/* Survey Page Styling for Category and Statement */
#question-container {
    max-width: 930px; /* Match comparison-container width */
    margin: 0 auto; /* Center it */
    padding: 0;
    background-color: #fff; /* White base background */
    border: 1px solid #8f8d8d; /* Grey frame border */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Clip content to rounded edges */
    box-sizing: border-box;
    min-height: 400px; /* Match comparison-container height */
    position: relative; /* For positioning buttons */
    display: flex;
    flex-direction: column; /* Stack children vertically */
}

#question-container h2 { /* Category */
    width: 100%; /* Full width across the top */
    padding: 12px 15px;
    margin: 0;
    background: linear-gradient(90deg, #f2f2f2 0%, #e0e0e0 100%); /* Grey gradient header */
    color: #001F5F !important;
    font-size: 20px; /* Your chosen size */
    font-weight: 600;
    border-bottom: 1px solid #ddd; /* Separate from content below */
    box-sizing: border-box;
    text-align: center; /* Center the category text */
}

#question-container p { /* Statement */
    width: 100%; /* Full width below category */
    padding: 12px 15px 12px 30px; /* Top: 12px, Right: 15px, Bottom: 12px, Left: 30px */
    margin: 0;
    background-color: #fff; /* White background */
    color: #001F5F !important;
    font-size: 24px; /* Your chosen size, larger than Category */
    font-weight: normal; /* Regular weight for statement */
    box-sizing: border-box;
    flex-grow: 1; /* Allow statement to take available space */
    text-align: left; /* Explicitly keep statement left-aligned */
}

#question-container .response-buttons {
    width: 100%; /* Full width for buttons */
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff; /* Ensure white background extends to buttons */
    position: absolute;
    bottom: 20px; /* Keep buttons at the bottom */
    left: 0;
}

/* Buttons on index.html */
.survey-buttons {
    display: flex;
    justify-content: center; /* Center the group of buttons horizontally */
    gap: 20px; /* Space between the two buttons */
    margin: 20px 0; /* Vertical spacing above and below the button group */
}

/* Center buttons on summary.html, results.html, and candidate-comparison.html */
.summary-page .content-wrapper button,
.results-page .content-wrapper button,
.candidate-comparison-page .content-wrapper button {
    display: block; /* Ensure the button behaves as a block element */
    margin: 20px auto; /* Center horizontally with top/bottom spacing */
    width: fit-content; /* Ensure the button width adjusts to its content */
}

/* FAQ Container Styles */
.faq-container {
    max-width: 800px;
    margin: 0 auto; /* Remove top and bottom margins, center only horizontally */
    padding: 0; /* Ensure no padding here */
    background-color: #051e3d; /* Match background */
    border: 1px solid #8f8d8d; /* Grey frame border */
    box-sizing: border-box;
    width: 100%;
    border-radius: 8px; /* Apply rounded corners */
    overflow: hidden; /* Clip the inner content to the rounded edges */
}

/* Style for the inner wrapper to handle scrolling */
.faq-wrapper {
    min-height: 0; /* Allow it to shrink to content height */
    overflow-y: auto; /* Enable vertical scrolling only if needed */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 100%;
    box-sizing: border-box;
    /* Custom scrollbar styles */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #8f8d8d #051e3d; /* Updated thumb color to #8f8d8d */
}

.faq-wrapper::-webkit-scrollbar {
    width: 8px; /* Vertical scrollbar width */
}

.faq-wrapper::-webkit-scrollbar-track {
    background: #051e3d; /* Match background color */
}

.faq-wrapper::-webkit-scrollbar-thumb {
    background: #8f8d8d; /* Match thumb color */
    border-radius: 4px;
}

.faq-wrapper::-webkit-scrollbar-thumb:hover {
    background: #7a7777; /* Lighter shade on hover */
}

.faq-item {
    padding: 0;
    margin-bottom: 0; /* Ensure no extra margin */
}

.faq-question {
    width: 100%;
    padding: 15px; /* Consistent padding */
    text-align: left;
    background-color: #f1f1f1;
    border: none;
    cursor: pointer;
    font-size: 16px;
    outline: none;
    color: #001F5F; /* Match your site’s dark blue text */
    box-sizing: border-box;
    word-wrap: break-word; /* Ensure long text wraps */
    overflow-wrap: break-word; /* Fallback for older browsers */
    white-space: normal; /* Prevent text from staying on one line */
}

.faq-question:hover {
    background-color: #ddd;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #051e3d; /* Match the page background color */
    font-size: 18px; /* Increased font size for better readability */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9); /* Subtle shadow for better visibility */
    padding: 0; /* Remove horizontal padding from the container */
    width: 100%; /* Ensure it matches the question’s width */
    box-sizing: border-box;
    word-wrap: break-word; /* Ensure long text wraps */
    overflow-wrap: break-word; /* Fallback for older browsers */
    white-space: normal; /* Prevent text from staying on one line */
}

.faq-answer p, .faq-answer ul, .faq-answer li {
    margin: 15px; /* Apply margin to paragraphs and lists for consistency */
    padding: 0; /* No padding on paragraphs, lists, or list items */
    color: #FFFFFF; /* White text for contrast */
    font-size: 18px; /* Default font size for desktop */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Subtle shadow for better visibility */
    word-wrap: break-word; /* Ensure long words break and wrap */
    overflow-wrap: break-word; /* Fallback for older browsers */
    list-style-position: inside; /* Keep bullets inside the content area */
}

.faq-answer ul {
    padding-left: 0; /* Remove default padding on unordered lists */
}

.faq-answer li {
    margin-bottom: 10px; /* Space between bullet points */
}

.faq-answer strong {
    font-weight: bold; /* Ensure bold is applied */
}

.faq-answer a {
    color: #FFFFFF; /* Ensure links are white to match text */
    text-decoration: underline; /* Add underline for visibility */
    transition: color 0.3s ease; /* Smooth hover transition */
}

.faq-answer a:hover {
    color: #CCCCCC; /* Lighter white on hover for contrast */
    text-decoration: underline; /* Keep underline on hover */
}

/* Terms & Conditions, Data Privacy, About, and Candidates Styles */
.content-wrapper {
    max-width: 930px;
    min-width: 930px; /* Enforce minimum width */
    margin: 0 auto;
    padding: 20px 20px 0; /* Remove bottom padding to align with FAQ */
    box-sizing: border-box;
    color: #FFFFFF; /* White text to match FAQ answers */
    background-color: #051e3d; /* Dark blue background */
    position: relative; /* For positioning buttons */
}

.content-wrapper h1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.content-wrapper h2 {
    font-size: 20px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 10px;
}

.content-wrapper h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
}

.content-wrapper p {
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 1.5;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Subtle shadow for readability */
}

.content-wrapper #lastUpdated {
    font-size: 16px; /* Match paragraph text size */
    margin-bottom: 15px; /* Match margin of other paragraphs */
    color: #FFFFFF; /* Match text color */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Match subtle shadow */
}

.content-wrapper ul, .content-wrapper ol {
    margin: 10px 0 15px 20px; /* Indent lists */
    padding-left: 0; /* Remove default padding */
}

.content-wrapper li {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.5;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    list-style-position: inside; /* Keep bullets inside */
}

.content-wrapper a {
    color: #FFFFFF;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.content-wrapper a:hover {
    color: #CCCCCC;
    text-decoration: underline;
}

/* Scrollable Section for Terms & Conditions, Data Privacy, About, and Candidates */
.scrollable-section {
    max-width: 800px; /* Match FAQ container width */
    margin: 0 auto; /* Center it */
    padding: 0; /* Remove padding from outer container */
    background-color: #051e3d; /* Ensure background matches */
    border: 1px solid #8f8d8d; /* Match FAQ border (grey frame) */
    box-sizing: border-box;
    border-radius: 8px; /* Apply rounded corners */
    overflow: hidden; /* Clip the inner content to the rounded edges */
}

.scrollable-wrapper {
    min-height: 0; /* Allow it to shrink to content height */
    overflow-y: auto; /* Enable vertical scrolling only if needed */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 100%;
    padding: 20px; /* Add spacing between frame and text */
    box-sizing: border-box;
    /* Custom scrollbar styles */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #8f8d8d #051e3d; /* Updated thumb color to #8f8d8d */
}

.scrollable-wrapper::-webkit-scrollbar {
    width: 8px; /* Vertical scrollbar width */
}

.scrollable-wrapper::-webkit-scrollbar-track {
    background: #051e3d; /* Match background color */
}

.scrollable-wrapper::-webkit-scrollbar-thumb {
    background: #8f8d8d; /* Match thumb color */
    border-radius: 4px;
}

.scrollable-wrapper::-webkit-scrollbar-thumb:hover {
    background: #7a7777; /* Lighter shade on hover */
}

/* Candidate Grid and Card Styles */
.candidate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; /* Space between cards */
    margin-top: 10px;
}

.candidate-card {
    background-color: #073763; /* Slightly lighter blue for contrast */
    border: 1px solid #8f8d8d;
    border-radius: 8px; /* Rounded corners for visual appeal */
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.candidate-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
}

.candidate-image {
    width: 100%;
    height: auto;
    max-height: 200px; /* Limit image height */
    object-fit: cover; /* Maintain aspect ratio */
    border-radius: 4px; /* Slight rounding on images */
    margin-bottom: 10px;
}

.party {
    font-size: 14px;
    color: #CCCCCC; /* Lighter text for party affiliation */
    margin: 5px 0;
}

.candidate-link {
    display: block;
    margin: 5px 0;
    color: #FFFFFF;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.candidate-link:hover {
    color: #E0E0E0; /* Slightly brighter white on hover */
}

/* Elegant Button Styling */
button {
    background: linear-gradient(90deg, #e2e7d0 0%, #abce5b 100%); /* Subtle gradient */
    color: #001F5F;
    border: none;
    padding: 12px 24px; /* Increased padding for better touch area */
    font-size: 18px; /* Slightly larger font */
    font-weight: 600; /* Slightly bolder */
    cursor: pointer;
    margin: 10px 5px; /* Adjusted margin for spacing */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: all 0.3s ease; /* Smooth transitions for hover effects */
    display: inline-block; /* Ensure buttons align properly */
}

button:hover {
    background: linear-gradient(90deg, #b3b3ff 0%, #8080ff 100%); /* Darker gradient on hover */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
}

/* Tap feedback for survey buttons */
.response-btn.tapped {
    background: linear-gradient(90deg, #a1b56b 0%, #7a9e3d 100%);
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease; /* Smooth in and out */
}

/* Prevent unwanted focus/highlight styles */
.response-btn:focus,
.response-btn:active {
    background: linear-gradient(90deg, #e2e7d0 0%, #abce5b 100%); /* Reset to default */
    outline: none; /* Remove focus outline */
    transform: none; /* Reset transform */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Reset shadow */
}

/* Desktop (PC) Styles */
@media (min-width: 769px) {
    .close-btn {
        display: none; /* Hide close button on desktop */
    }

    .nav-menu {
        width: 200px; /* Fixed width for desktop menu */
        display: none; /* Hidden by default */
    }

    /* Show menu on hover */
    .hamburger:hover + .nav-menu,
    .nav-menu:hover {
        display: block; /* Show on hover */
    }

    /* Ensure menu stays visible when active (clicked) */
    .nav-menu.active {
        display: block; /* Visible when active */
    }

    /* No transform or opacity animations on desktop */
    .hamburger.active span:nth-child(1),
    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
        transform: none; /* Reset animations on desktop */
        opacity: 1;
    }

    .header-container {
        flex-direction: row; /* Side-by-side layout on desktop */
        align-items: center; /* Center vertically on desktop */
        justify-content: flex-start; /* Align to left for hamburger + logos */
    }

    .logo-group {
        flex-direction: row; /* Side-by-side logos on desktop */
        justify-content: flex-start; /* Align logos to the left */
        margin-bottom: 0; /* Remove margin below logos on desktop */
    }

    .content-wrapper {
        max-width: 930px; /* Restore content width limit on desktop */
        min-width: 930px; /* Enforce minimum width */
        margin: 0 auto; /* Center the content */
        padding: 20px;
        box-sizing: border-box;
    }

    .faq-container {
        max-height: 400px; /* Ensure consistent height */
        min-height: 0; /* Allow it to shrink to content height */
        overflow: hidden; /* Clip content to rounded corners */
    }

    .faq-wrapper {
        max-height: 400px; /* Ensure consistent height */
        min-height: 0; /* Allow it to shrink to content height */
        overflow-y: auto; /* Keep vertical scrolling */
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    /* Webkit (Chrome, Edge, Safari) scrollbar styling */
    .faq-container::-webkit-scrollbar,
    .faq-wrapper::-webkit-scrollbar {
        width: 8px; /* Scrollbar width */
    }

    .faq-container::-webkit-scrollbar-track,
    .faq-wrapper::-webkit-scrollbar-track {
        background: #051e3d; /* Match background color */
    }

    .faq-container::-webkit-scrollbar-thumb,
    .faq-wrapper::-webkit-scrollbar-thumb {
        background: #FFFFFF; /* White scrollbar thumb */
        border-radius: 4px;
    }

    .faq-container::-webkit-scrollbar-thumb:hover,
    .faq-wrapper::-webkit-scrollbar-thumb:hover {
        background: #CCCCCC; /* Lighter white on hover */
    }

    .scrollable-section {
        max-height: 400px; /* Ensure consistent height */
        min-height: 0; /* Allow it to shrink to content height */
        overflow: hidden; /* Clip content to rounded corners */
    }

    .scrollable-wrapper {
        max-height: 400px; /* Ensure consistent height */
        min-height: 0; /* Allow it to shrink to content height */
        overflow-y: auto; /* Keep vertical scrolling */
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    .scrollable-section::-webkit-scrollbar,
    .scrollable-wrapper::-webkit-scrollbar {
        width: 8px; /* Scrollbar width */
    }

    .scrollable-section::-webkit-scrollbar-track,
    .scrollable-wrapper::-webkit-scrollbar-track {
        background: #051e3d; /* Match background color */
    }

    .scrollable-section::-webkit-scrollbar-thumb,
    .scrollable-wrapper::-webkit-scrollbar-thumb {
        background: #FFFFFF; /* White scrollbar thumb */
        border-radius: 4px;
    }

    .scrollable-section::-webkit-scrollbar-thumb:hover,
    .scrollable-wrapper::-webkit-scrollbar-thumb:hover {
        background: #CCCCCC; /* Lighter white on hover */
    }

    .comparison-container {
        max-height: 400px; /* Match .faq-container and .scrollable-section */
        min-height: 400px; /* Ensure consistent height */
        overflow: hidden; /* Clip content to rounded corners */
    }

    .comparison-wrapper {
        max-height: 400px; /* Ensure consistent height */
        min-height: 0; /* Allow it to shrink to content height */
        overflow-y: auto; /* Keep vertical scrolling */
        overflow-x: hidden; /* Prevent horizontal scrolling within wrapper */
    }

    .candidate-comparison-page .comparison-wrapper {
        overflow-x: auto; /* Enable horizontal scrolling for the table */
    }

    .candidate-comparison-page #comparisonTable {
        width: auto; /* Allow table to expand with columns */
        min-width: 100%; /* Ensure it fills the container at minimum */
        display: table; /* Revert to table layout for alignment */
        overflow: visible; /* Allow table to expand */
    }

    .candidate-comparison-page #comparisonTable th,
    .candidate-comparison-page #comparisonTable td {
        min-width: 100px; /* Minimum width for readability */
        box-sizing: border-box; /* Ensure padding doesn’t affect width */
    }

    .candidate-comparison-page #comparisonTable th:nth-child(1),
    .candidate-comparison-page #comparisonTable td:nth-child(1) {
        width: 15%; /* Match Category width from summaryTable */
    }

    .candidate-comparison-page #comparisonTable th:nth-child(2),
    .candidate-comparison-page #comparisonTable td:nth-child(2) {
        width: 54%; /* Match Statement width from summaryTable */
    }

    .candidate-comparison-page #comparisonTable th:nth-child(3),
    .candidate-comparison-page #comparisonTable td:nth-child(3) {
        width: 15%; /* Match Your Response width from summaryTable */
    }

    .candidate-comparison-page #comparisonTable th:nth-child(n+4),
    .candidate-comparison-page #comparisonTable td:nth-child(n+4) {
        width: 15%; /* Match Your Response width for all candidate columns */
        min-width: 139.5px; /* Minimum width based on 15% of 930px */
        box-sizing: border-box; /* Ensure padding doesn’t affect width */
    }

    button {
        padding: 12px 24px; /* Maintain larger padding on desktop */
        font-size: 18px; /* Maintain font size for buttons */
    }
}

/* Mobile Behavior */
@media (max-width: 768px) {
    #content {
        min-width: 0; /* Allow shrinking on mobile */
        min-height: auto; /* Flexible height for mobile */
    }

    .header-container {
        flex-direction: column;
        align-items: flex-start; /* Align items to the left on mobile */
    }

    .logo-group {
        flex-direction: column;
        margin-left: 0; /* Reset for mobile */
        gap: 20px; /* Smaller gap */
        width: 100%;
        margin-bottom: 40px; /* Gap between header images and separator line */
    }

    .coat-of-arms {
        max-width: 150px; /* Smaller for mobile */
        width: 100%;
        height: auto;
    }

    .logo {
        max-width: 350px; /* Smaller for mobile */
        width: 100%;
        height: auto;
    }

    nav {
        position: absolute;
        top: 20px; /* Keep in top-left corner */
        left: 20px; /* Keep in top-left corner */
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(13px) rotate(45deg); /* Top bar becomes \ */
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0; /* Middle bar disappears */
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-13px) rotate(-45deg); /* Bottom bar becomes / */
    }

    .nav-menu {
        display: none; /* Hidden by default */
        width: 100%;
        height: 100%; /* Full height of viewport */
        background-color: rgba(5, 30, 61, 0.95); /* Semi-transparent dark blue */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000; /* Above all content */
        padding: 0; /* No padding on container */
        margin: 0; /* No margin */
        box-sizing: border-box; /* Ensure padding doesn’t affect size */
    }

    .nav-menu.active {
        display: flex; /* Show as flexbox when active */
        flex-direction: column; /* Stack items vertically */
        justify-content: center; /* Center vertically */
        align-items: center; /* Center horizontally */
    }

    .nav-menu ul {
        list-style: none; /* Remove default list styling */
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
        justify-content: center; /* Center items vertically within ul */
    }

    .nav-menu li {
        margin: 15px 0; /* Vertical spacing between items */
        padding: 0; /* No extra padding */
        width: auto; /* Fit content */
        text-align: center; /* Center text within each item */
    }

    .nav-menu li a {
        color: #FFFFFF; /* White text for contrast */
        text-decoration: none;
        display: block;
        padding: 15px 20px; /* Larger tap area */
        font-size: 18px; /* Larger text */
        transition: background-color 0.3s ease;
    }

    .nav-menu li a:hover,
    .nav-menu li a:active {
        background-color: #001F5F; /* Dark blue on hover/tap */
    }

    .nav-menu li.close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        margin: 0; /* Override margin for close button */
        padding: 0; /* No padding */
    }

    .close {
        background: none;
        border: none;
        font-size: 36px; /* Larger X */
        color: #FFFFFF; /* White X */
        padding: 10px;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .close:hover,
    .close:active {
        color: #FF0000; /* Red on hover/tap */
    }

    button {
        padding: 10px 20px; /* Slightly smaller padding on mobile */
        font-size: 16px; /* Slightly smaller font on mobile */
    }

    .response-btn.tapped {
        background: linear-gradient(90deg, #a1b56b 0%, #7a9e3d 100%);
        transform: scale(0.95);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
    }

    .response-btn:focus,
    .response-btn:active {
        background: linear-gradient(90deg, #e2e7d0 0%, #abce5b 100%);
        outline: none;
        transform: none;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* Checkbox styles for mobile */
    #summaryTable td:nth-child(4) {
        padding: 8px;
        text-align: center;
    }

    #summaryTable input[type="checkbox"] {
        width: 0;
        height: 0;
        opacity: 0;
        position: absolute;
        margin: 0;
    }

    #summaryTable .checkbox-label {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #ffffff !important;
        border: 2px solid #003087 !important;
        border-radius: 4px;
        cursor: pointer;
        position: relative;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    #summaryTable .checkbox-label:hover {
        background-color: #ffffff !important; /* Disable hover on mobile */
    }

    #summaryTable input[type="checkbox"]:checked + .checkbox-label {
        background-color: #d4edda !important;
        border-color: #155724 !important;
    }

    #summaryTable input[type="checkbox"]:checked + .checkbox-label::after {
        content: "✓";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #155724 !important;
        font-size: 14px;
        font-weight: bold;
    }

    /* Results Grid Adjustments */
    .results-grid {
        width: 100%; /* Full width on mobile */
        min-width: 0; /* Allow shrinking */
        grid-template-columns: 2fr 1fr; /* Proportional columns: candidate wider, percentage narrower */
        font-size: 14px; /* Slightly smaller text for better fit */
    }

    .grid-cell {
        padding: 8px 10px; /* Reduced padding for mobile */
        overflow-wrap: break-word; /* Ensure long text wraps */
    }

    .grid-cell.candidate-cell {
        max-width: 100%; /* Prevent overflow */
    }

    .grid-cell.percentage-cell {
        max-width: 100%; /* Prevent overflow */
        text-align: center; /* Center percentage for clarity */
    }


    #content {
        position: relative; /* Ensure content can be covered by menu */
        z-index: 1; /* Below the menu z-index */
    }

    .content-wrapper {
        min-width: 0; /* Allow shrinking on mobile */
        padding: 10px;
    }

    .bmc-container {
        position: static; /* Remove absolute positioning on mobile */
        margin: 10px auto; /* Center it with spacing */
        text-align: center; /* Center the button */
    }

    .share-buttons {
        position: static; /* Matches mobile behavior */
        margin: 10px auto; /* Center with spacing */
        flex-direction: row; /* Keep horizontal */
        justify-content: center; /* Center the buttons */
        gap: 10px; /* Slightly smaller gap on mobile */
    }

    .share-buttons a {
        font-size: 14px; /* Smaller font on mobile */
    }

    .faq-container {
        max-width: 100%; /* Allow full width on mobile */
        margin: 10px auto; /* Reduce margin for smaller screens */
        padding: 0 10px; /* Add minimal padding to prevent cutoff */
        max-height: none; /* No fixed height on mobile */
        overflow: hidden; /* Clip content to rounded corners */
    }

    .faq-wrapper {
        max-height: none; /* No fixed height on mobile */
        overflow-y: visible; /* No vertical scrolling on mobile */
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    .faq-question {
        padding: 10px; /* Reduce padding for mobile */
        font-size: 14px; /* Smaller font size for mobile */
    }

    .faq-answer {
        padding: 0; /* Ensure no extra padding */
    }

    .faq-answer p, .faq-answer ul, .faq-answer li {
        margin: 10px; /* Reduce margin for mobile */
        font-size: 16px; /* Slightly smaller font size for mobile to prevent cutoff */
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Lighter shadow on mobile */
    }

    .faq-answer ul {
        padding-left: 0; /* Ensure no default padding on mobile */
    }

    .faq-answer li {
        margin-bottom: 8px; /* Slightly less space between bullet points on mobile */
    }

    .faq-answer strong {
        font-weight: bold; /* Ensure bold is applied on mobile */
    }

    .faq-answer a {
        color: #FFFFFF; /* Ensure links are white on mobile */
        text-decoration: underline; /* Keep underline for visibility */
    }

    .faq-answer a:hover {
        color: #CCCCCC; /* Lighter white on hover for mobile */
        text-decoration: underline; /* Keep underline on hover */
    }

    .content-wrapper h1 {
        font-size: 20px;
    }

    .content-wrapper h2 {
        font-size: 18px;
    }

    .content-wrapper h3 {
        font-size: 16px;
    }

    .content-wrapper p, .content-wrapper #lastUpdated, .content-wrapper li {
        font-size: 14px;
    }

    .content-wrapper ul, .content-wrapper ol {
        margin-left: 10px;
    }

    .candidate-grid {
        grid-template-columns: 1fr; /* Stack cards vertically on mobile */
    }

    .candidate-card {
        margin-bottom: 20px; /* Add space between stacked cards */
    }

    .candidate-image {
        max-height: 150px; /* Smaller images on mobile */
    }

    .scrollable-section {
        max-width: 100%; /* Full width on mobile */
        padding: 0; /* Adjust padding for mobile */
        max-height: none; /* No fixed height on mobile */
        overflow: hidden; /* Clip content to rounded corners */
        border: none; /* Remove border on mobile for seamless look */
    }

    .scrollable-wrapper {
        max-height: none; /* No fixed height on mobile */
        overflow-y: visible; /* No vertical scrolling on mobile */
        overflow-x: hidden; /* Prevent horizontal scrolling */
        padding: 10px; /* Adjust padding for mobile */
    }

    .comparison-container {
        min-width: 0; /* Allow shrinking on mobile */
        max-height: none; /* No fixed height on mobile */
        overflow: hidden; /* Clip content to rounded corners */
        border: none; /* Remove border on mobile for seamless look */
    }

    .comparison-wrapper {
        max-height: none; /* No fixed height on mobile */
        overflow-y: visible; /* No vertical scrolling on mobile */
        overflow-x: hidden; /* Prevent horizontal scrolling within wrapper */
    }

    .candidate-comparison-page .comparison-wrapper {
        overflow-x: auto; /* Enable horizontal scrolling on mobile */
    }

    .candidate-comparison-page #comparisonTable {
        width: auto; /* Allow table to expand with columns */
        display: table; /* Revert to table layout for alignment */
        overflow: visible; /* Allow table to expand */
    }

    .candidate-comparison-page #comparisonTable th,
    .candidate-comparison-page #comparisonTable td {
        min-width: 100px; /* Minimum width for readability */
        box-sizing: border-box; /* Ensure padding doesn’t affect width */
    }

    .candidate-comparison-page #comparisonTable th:nth-child(1),
    .candidate-comparison-page #comparisonTable td:nth-child(1) {
        width: 15%; /* Match Category width from summaryTable */
    }

    .candidate-comparison-page #comparisonTable th:nth-child(2),
    .candidate-comparison-page #comparisonTable td:nth-child(2) {
        width: 54%; /* Match Statement width from summaryTable */
    }

    .candidate-comparison-page #comparisonTable th:nth-child(3),
    .candidate-comparison-page #comparisonTable td:nth-child(3) {
        width: 15%; /* Match Your Response width from summaryTable */
    }

    .candidate-comparison-page #comparisonTable th:nth-child(n+4),
    .candidate-comparison-page #comparisonTable td:nth-child(n+4) {
        width: 15%; /* Match Your Response width for all candidate columns */
        min-width: 139.5px; /* Minimum width based on 15% of 930px */
        box-sizing: border-box; /* Ensure padding doesn’t affect width */
    }

    #question-container {
        min-height: 300px; /* Adjust based on longest statement */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Keeps buttons at bottom */
    }

    #question-container h2 { /* Category on mobile */
        width: 100%; /* Full width on mobile */
        font-size: 18px; /* Slightly smaller than desktop for mobile readability */
        text-align: center; /* Center the category text on mobile */
    }

    #question-container p { /* Statement on mobile */
        width: 100%; /* Full width on mobile */
        font-size: 20px; /* Slightly smaller than desktop, still larger than Category */
        text-align: left; /* Explicitly keep statement left-aligned on mobile */
        padding: 12px 15px 12px 30px; /* Consistent padding */
    }

    #question-container .response-buttons {
        flex-direction: column; /* Stack buttons vertically on mobile */
        gap: 8px; /* Smaller gap for mobile */
        padding: 10px; /* Adjust padding for mobile */
        position: relative; /* Remove absolute positioning for better flow */
        bottom: auto;
    }
}

table {
    width: 100%; /* Full width within content-wrapper */
    margin: 20px 0;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    border: 1px solid #FFFFFF;
}