:root {
  --hamburger-w: 44px;      /* icon width/height */
  --hamburger-gap: 30px;    /* space between burger and logos */
}

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 */
}

/* Visible keyboard focus – accessibility */
:focus-visible {
  outline: 2px solid #abce5b;  /* Pine Tree Key green accent */
  outline-offset: 2px;
}

#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;
    font-size: 14px; /* base size */
}

footer .legal {
  font-size: 12px; /* smaller font for legal disclaimer */
}

/* Footer disclaimer link styling */
footer .legal a {
  color: #abce5b; /* Pine Tree Key green accent */
  text-decoration: underline;
  transition: color 0.3s ease;
}

footer .legal a:hover {
  color: #cbe97a; /* Slightly lighter green for hover */
  text-decoration: underline;
}

.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 */
}

/* Bigger, higher-contrast hamburger */
.hamburger {
  cursor: pointer;
  width: var(--hamburger-w);
  height: var(--hamburger-w);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;                  /* keeps a good tap target */
  border-radius: 10px;
  background: rgba(255,255,255,0.18);   /* subtle contrast pill */
  transition: background 0.2s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border: none;
  position: relative; /* make sure the label is positioned relative to the button */
}

.hamburger:hover,
.hamburger:focus-visible {
  background: rgba(255,255,255,0.28);
}

.hamburger:active {
  transform: scale(0.98);
}

.hamburger span {
  width: 100%;
  height: 4px;                    /* thicker bars (was 3px) */
  border-radius: 2px;
  background-color: #FFFFFF;
  transition: all 0.3s ease;
}

/* Keep logos pushed right the correct amount */
.logo-group {
  margin-left: calc(20px + var(--hamburger-w) + var(--hamburger-gap));
}

/* Mobile keeps the larger icon too; no change needed to your existing transforms */
@media (max-width: 768px) {
  .logo-group { margin-left: 0; } 
}

.hamburger::after {
  content: "Menu";
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);      /* a little gap below the icon */
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  white-space: nowrap;
}
.hamburger:hover::after,
.hamburger:focus-visible::after { opacity: .9; }

.nav-menu {
    display: none; /* Hidden by default, controlled by JS (.active) */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #FFFFFF; /* White background for the menu (desktop) */
    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 */
}

/* honor [hidden] from JS for assistive tech + CSS */
[hidden] { display: none !important; }

.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;
  max-width: 100%;
}

/* Base table layout (only affects candidate-comparison page) */
.candidate-comparison-page #comparisonTable {
  border-collapse: separate !important;
  border-spacing: 0;
  width: auto;
  min-width: 100%;
  table-layout: fixed;
}

/* Make widths predictable */
.candidate-comparison-page #comparisonTable th,
.candidate-comparison-page #comparisonTable td {
  box-sizing: border-box;
  min-width: 120px;
  word-wrap: break-word;
}

/* Fixed pixel widths for the first three columns */
:root {
  --cmp-cat: 160px;   /* Category */
  --cmp-stmt: 300px;  /* Statement */
  --cmp-your: 150px;  /* Your Response */
}

.candidate-comparison-page #comparisonTable th:nth-child(1),
.candidate-comparison-page #comparisonTable td:nth-child(1) {
  min-width: var(--cmp-cat);
  max-width: var(--cmp-cat);
}

.candidate-comparison-page #comparisonTable th:nth-child(2),
.candidate-comparison-page #comparisonTable td:nth-child(2) {
  min-width: var(--cmp-stmt);
  max-width: var(--cmp-stmt);
}

.candidate-comparison-page #comparisonTable th:nth-child(3),
.candidate-comparison-page #comparisonTable td:nth-child(3) {
  min-width: var(--cmp-your);
  max-width: var(--cmp-your);
}

/* Candidate columns: all the rest, scrollable */
.candidate-comparison-page #comparisonTable th:nth-child(n+4),
.candidate-comparison-page #comparisonTable td:nth-child(n+4) {
  min-width: 140px;
}

/* Desktop / large screens: sticky header + sticky first 3 cols */
@media (min-width: 900px) {
  .candidate-comparison-page #comparisonTable thead th {
    position: sticky;
    top: 0;
    z-index: 4;
  }

  /* Category */
  .candidate-comparison-page #comparisonTable th:nth-child(1),
  .candidate-comparison-page #comparisonTable td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: #f9f9f9;
  }

  /* Statement */
  .candidate-comparison-page #comparisonTable th:nth-child(2),
  .candidate-comparison-page #comparisonTable td:nth-child(2) {
    position: sticky;
    left: var(--cmp-cat);
    z-index: 3;
    background-color: #ffffff;
  }

  /* Your Response */
  .candidate-comparison-page #comparisonTable th:nth-child(3),
  .candidate-comparison-page #comparisonTable td:nth-child(3) {
    position: sticky;
    left: calc(var(--cmp-cat) + var(--cmp-stmt));
    z-index: 3;
    background-color: #cce5ff; /* matches your existing highlight */
  }

  /* Make sure header cells sit above body cells in these columns */
  .candidate-comparison-page #comparisonTable thead th:nth-child(1),
  .candidate-comparison-page #comparisonTable thead th:nth-child(2),
  .candidate-comparison-page #comparisonTable thead th:nth-child(3) {
    z-index: 5;
  }
}

/* Mobile / narrow screens: no sticky columns, just make it a bit tighter */
@media (max-width: 899px) {
  .candidate-comparison-page #comparisonTable {
    font-size: 14px;
  }

  .candidate-comparison-page #comparisonTable th:nth-child(n+4),
  .candidate-comparison-page #comparisonTable td:nth-child(n+4) {
    min-width: 110px;
  }
}


/* 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;
}

/* Short note under the results heading */
.results-notice {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    font-style: italic;
}

/* Styling for candidates who haven't responded yet */
.results-grid .match-pending {
    background: #f5f5f5;
    color: #555 !important;
    font-style: italic;
}

.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 */
}

/* ---- Results controls (sort UI) ---- */
.results-controls {
  max-width: 930px;
  margin: 0 auto 6px;          /* centered; small gap above grid */
  display: flex;
  justify-content: flex-end;   /* right-align the control */
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;                  /* above the white background layer */
}

/* Sticky variant */
.results-controls--sticky {
  position: sticky;
  top: 0;                        /* stick to top of the scrollable area */
  background: #FFFFFF;           /* match the white card */
  padding: 8px 12px;             /* cozy */
  border-bottom: 1px solid #ddd; /* subtle separator from the grid header */
}

.results-page .results-controls label {
  color: #001F5F;              /* Use FFFFFF for it to be readable on dark bg */
  font-size: 14px;
  text-shadow: none;           /* Use text-shadow: 0 1px 1px rgba(0,0,0,0.2); on dark bg*/
}

.results-page .results-controls select {
  font-size: 14px;
  padding: 6px 8px;
  background: #FFFFFF;         /* readable control */
  color: #001F5F;              /* your dark blue */
  border: 1px solid #8f8d8d;   /* match your borders */
  border-radius: 6px;
  cursor: pointer;
}

/* When no percentage is computable */
.percentage-cell.match-none {
  color: #666 !important;
  font-style: italic;
}

/* Optional: screen-reader only utility (if you decide to visually hide labels) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Optional: style when no percentage can be computed (dup guard retained) */
.percentage-cell.match-none {
  color: #666 !important;
  font-style: italic;
}

/* 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: #f5f5f5; /* Very light grey */
    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, #d0d0d0 0%, #a0a0a0 100%); /* darker grey gradient */
    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: #f5f5f5; /* Very light grey to match container*/
    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: #f5f5f5; /* Very light grey to match container*/
    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 */
}

/* Ensure all answers start closed and clip overflow (prevents overlay) */
.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 */
}

/* When a question is active, allow full expansion (CSS fallback) */
.faq-question.active + .faq-answer {
    max-height: 9999px;
}

/* 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 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: 16px; /* default scale restored */
    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 */
}

/*Wrapper for homepage without buttons*/
.home-page .content-wrapper {
    padding-top: 4rem;
    padding-bottom: 5.7rem;
}

/*Wrapper for homepage with buttons*/
.home-page-active .content-wrapper {
    padding-top: 4rem;
    padding-bottom: 2.3rem;
}

.home-page-active .survey-buttons {
    margin-top: 4.9rem;
}

.home-page-active .share-buttons {
    margin-top: 1.5rem;
}

.home-page-active .content-wrapper p {
    margin-top: 1.5rem;     /* space before */
    margin-bottom: 1.5rem;  /* space after */
    line-height: 1.6;     /* optional: makes paragraphs easier to read */
}

.candidates-page .content-wrapper {
    padding-bottom: 3rem;   /* extra space before the footer */
}

/* 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 */
}

.scrollable-section.candidate-section {
  max-height: none; /* Allows for space at the bottom of the scrollable candidate cards by letting the frame grow */
}

.scrollable-section.candidate-section .scrollable-wrapper {
  padding-bottom: 20px; /* keep top/side padding as-is, just give a bit more room at the bottom */
}

/* Candidate detail: statement block – always fully open, white card */
.candidates-page .candidate-statements-section {
  max-width: 960px;                   /* a bit wider to match other content */
  margin: 0 auto 0.75rem auto;        /* smaller gap under the box */
  background-color: #FFFFFF;
  border: 1px solid #8f8d8d;
  border-radius: 8px;

  /* Important: override the generic .scrollable-section overflow */
  overflow: visible;
}

/* Inner wrapper: let page handle vertical scroll, allow horizontal scroll */
.candidates-page .candidate-statements-section .scrollable-wrapper {
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
  background-color: #FFFFFF;

  overflow-x: auto;    /* horizontal scroll when table is wider than screen */
  overflow-y: visible; /* no inner vertical scrollbar; use page scroll */
}

/* Candidate Grid and Card Styles */
.candidate-grid {
    display: grid;
    /* Slightly narrower cards so they feel smaller */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* A bit more space between cards */
    gap: 4px;
    /* Extra space around the whole grid inside the section */
    margin: 16px 8px 16px;
}

.candidate-card {
    background-color: #073763;
    border: 1px solid #8f8d8d;
    border-radius: 8px;
    /* Slightly tighter inside = visually smaller card */
    padding: 12px;
    /* Space around each card (top, right, bottom, left) */
    margin: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    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 */
}

/* Candidate meta + status line */
.candidate-name {
  margin-top: 0;
  margin-bottom: 6px;
}

.candidate-meta {
  font-size: 14px;
  color: #CCCCCC;
  margin: 2px 0 4px;
}

.candidate-meta .meta-label {
  font-weight: 600;
  margin-right: 4px;
}

.candidate-meta .meta-value {
  font-weight: normal;
}

.candidate-scope-note {
  margin-top: 14px;
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: #dddddd;
}

.candidate-sources {
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.candidate-sources > summary {
  cursor: pointer;
  font-weight: 600;
}

.candidate-sources[open] {
  margin-bottom: 16px;
}

.candidate-sources p,
.candidate-sources ul {
  margin-top: 6px;
}


/* Row with the “Status” badges – uses the same .badge pill style as on Statements */
.candidate-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Optional: tighten spacing so the gap handles layout instead of the default margin */
.candidate-status-line .badge {
  margin-left: 0;
}

/* Wrapper for the candidate sections (Gov, Senate, later US House) */
.candidate-sections {
  max-width: 800px;
  margin: 20px auto 0;
}

/* Header bar inside the scrollable frame */
.scrollable-header {
  padding: 12px 20px;
  border-bottom: 1px solid #8f8d8d;
  background-color: #051e3d;
}

/* Candidate section header: title on the left, chevron button on the right */
.candidate-section-header {
  padding: 12px 20px;
  border-bottom: 1px solid #8f8d8d;
  background-color: #051e3d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.candidate-section-header h2 {
  margin: 0;
}

/* Override global button styles for these header toggles */
.candidate-section-toggle {
  all: unset; /* strip gradient, borders, etc. from the global button rule */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
}


/* Keyboard focus outline */
.candidate-section-toggle:focus-visible {
  outline: 2px solid #abce5b;
  outline-offset: 2px;
}

/* Chevron indicator – closed by default */
.candidate-section-toggle::after {
  content: "▸";
  font-size: 18px;
  margin-left: 8px;
}

/* Chevron when the section is open */
.candidate-section.is-expanded .candidate-section-toggle::after {
  content: "▾";
}

/* Collapsible body area: height controlled via JS */
.candidate-section-body {
  max-height: 31px;     /* peek height when collapsed */
  overflow-y: auto;    /* allow vertical scrolling */
  overflow-x: hidden;  /* prevent horizontal scroll */
  transition: max-height 0.3s ease;
}

/* Some space between the frames */
.candidate-sections .scrollable-section + .scrollable-section {
  margin-top: 20px;
}

/* (From previous answer – meta + status line) */
.candidate-name {
  margin-top: 0;
  margin-bottom: 6px;
}

.candidate-meta {
  font-size: 14px;
  color: #CCCCCC;
  margin: 2px 0 4px;
}

.candidate-meta .meta-label {
  font-weight: 600;
  margin-right: 4px;
}

.candidate-meta .meta-value {
  font-weight: normal;
}

.candidate-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.candidate-status-line .badge {
  margin-left: 0;
}


/* 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 */
    }

    /* NOTE: removed hover-to-open behavior to avoid accidental open in narrow desktop windows */
    /* The menu opens only when JS adds .active */
    .nav-menu.active {
        display: block; /* Visible when active (clicked) */
    }

    /* 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 */
    }

    /* Results controls on mobile - Sticky toolbar*/
    .results-controls {
      max-width: 100%;
      padding: 0 10px;            /* align with your mobile content padding */
      justify-content: flex-end;  /* keep right-aligned */
    }

    .results-page .results-controls label,
    .results-page .results-controls select {
      font-size: 14px;            /* consistent with your mobile text scale */
    }

    #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: 8px 6px 20px; /* top, sides, bottom */
    }

    .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;
}

/* Statements controls bar */
/* Always-stack layout: selector → buttons → search */
.statements-controls {
  display: grid;
  grid-template-areas:
    "toggle"
    "actions"
    "search";
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
  margin: 10px 0 15px;
}

.dataset-toggle { 
  grid-area: toggle; 
  display: flex; 
  flex-wrap: wrap; 
  gap: 12px; 
  border: 1px solid #8f8d8d; 
  border-radius: 8px; 
  padding: 8px 10px; 
  color: #FFFFFF;
  min-width: 0;
}
.dataset-toggle label { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  white-space: nowrap;  /* keep radio + text together */
}
.dataset-toggle input { margin: 0; }

.statements-actions { 
  grid-area: actions; 
  display: flex; 
  gap: 8px; 
  flex-wrap: wrap; 
  justify-content: flex-end; 
}

.statements-search { grid-area: search; display: grid; gap: 6px; }
.statements-search label { color: #FFFFFF; font-size: 16px; }

#statementsSearch {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #8f8d8d;
  background: #FFFFFF;
  color: #001F5F;
  font-size: 14px;
}

.badge {
  display: inline-block;
  min-width: 24px;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 999px;
  background: #abce5b;
  color: #001F5F;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

/* Optional: hide subcategory tags if you want only the statement text */
.sub-tag { display: none; }

/* Statement list inside an answer */
.statement-list {
  margin: 15px 20px;
  padding-left: 0;
  list-style: disc inside;
}
.statement-list li {
  margin-bottom: 10px;
  position: relative;
  color: #FFFFFF;
}
.source-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  background: #073763;
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 8px;
}
.permalink {
  margin-left: 8px;
  text-decoration: none;
  color: #FFFFFF;
  opacity: 0.8;
}
.permalink:hover { opacity: 1; }

.sub-label {
  font-weight: 700;
  color: #FFFFFF;          /* matches your white text */
  margin-right: 4px;
}

/* Mobile tweak: stack controls */
@media (max-width: 768px) {
  .statements-controls {
    grid-template-areas:
      "toggle"
      "actions"
      "search";
    grid-template-columns: 1fr;
  }
}

/* ===== Statements page: compact layout (scoped) ===== */
#statementsRoot { --statementsPaneH: 304px; }  /* tweak this to 300/350/etc. */

#statementsRoot h1 { margin-bottom: 8px; }
#statementsRoot #lastUpdated { margin-bottom: 10px; }

/* Controls: stack and tighten spacing */
#statementsRoot .statements-controls {
  display: grid;
  grid-template-areas:
    "toggle"
    "actions"
    "search";
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 8px 0 10px;
  align-items: start;
}

/* Smaller dataset toggle */
#statementsRoot .dataset-toggle {
  grid-area: toggle;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #8f8d8d;
  color: #fff;
  font-size: 14px;
}
#statementsRoot .dataset-toggle label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#statementsRoot .dataset-toggle input { margin: 0; }

/* Smaller buttons */
#statementsRoot .statements-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#statementsRoot .statements-actions button {
  padding: 8px 12px;     /* was 12px 24px */
  font-size: 14px;       /* was 18px */
  border-radius: 6px;    /* a bit tighter */
  margin: 0;             /* remove extra margins */
}

/* Compact search block */
#statementsRoot .statements-search { grid-area: search; display: grid; gap: 4px; }
#statementsRoot .statements-search label { color: #fff; font-size: 13px; }
#statementsRoot #statementsSearch {
  padding: 8px 10px;
  font-size: 14px;
  border-radius: 6px;
}

/* Set the scrollable accordion height (like FAQ) */
#statementsRoot .faq-container,
#statementsRoot .faq-wrapper {
  max-height: var(--statementsPaneH);  /* desktop fixed height */
}

/* Slightly tighter group header + badge */
#statementsRoot .faq-question {
  padding: 10px;         /* was 15px */
  font-size: 15px;       /* was 16px */
}
#statementsRoot .badge {
  padding: 1px 6px;
  font-size: 11px;
}

/* Slightly tighter list items */
#statementsRoot .statement-list { margin: 12px 16px; }
#statementsRoot .statement-list li { margin-bottom: 8px; }

/* Mobile: leave heights fluid (no fixed panel) */
@media (max-width: 768px) {
  #statementsRoot .faq-container,
  #statementsRoot .faq-wrapper {
    max-height: none;    /* let it grow on small screens */
  }
}

/* Site-wide default widths for accordions (outside Statements page) */
:not(#statementsRoot) .faq-container,
:not(#statementsRoot) .scrollable-section {
  max-width: 800px;
  width: 100%;
}

/* When printing, show everything and simplify styling */
@media print {
  /* Hide chrome */
  nav, .hamburger, .nav-menu, .statements-controls,
  .share-buttons, .bmc-container, footer, .header-container::after {
    display: none !important;
  }

  body, #content, .content-wrapper {
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Remove fixed heights / scrollbars */
  .faq-container, .faq-wrapper,
  .comparison-container, .comparison-wrapper,
  #question-container, #resultsTable, #summaryTable {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Accordion answers fully open */
  .faq-answer {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Cleaner print look */
  .permalink { display: none !important; }
  .badge, .source-tag { background: #eee !important; color: #000 !important; }
  .faq-question { background: #f2f2f2 !important; color: #000 !important; }

  /* Avoid breaking a category across pages */
  .faq-item { break-inside: avoid; page-break-inside: avoid; }
}

/* Fallback for some print preview implementations (e.g., Safari) */
html.printing-statements .faq-container,
html.printing-statements .faq-wrapper,
html.printing-statements .faq-answer {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* clickable link-chain, only on hover/focus */
.statement-list li { position: relative; padding-right: 24px; }
.permalink {
  position: absolute; right: 0; top: 0;
  width: 18px; height: 18px;
  text-decoration: none;
  opacity: 0; transition: opacity .2s;
}
.statement-list li:hover .permalink,
.permalink:focus { opacity: .8; outline: none; }

/* show 🔗 via CSS, keep DOM text empty */
.permalink::before { content: "🔗"; line-height: 18px; font-size: 16px; }
@media print { .permalink { display: none !important; } }

/* ---------- Global skip link (works on all pages where it's present) ---------- */
.skip-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -40px;
  background: #ffffff;
  color: #001F5F;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  z-index: 2000;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 10px;
}

/* ---------- Press page layout ---------- */
.press-page .content-wrapper {
  max-width: 930px;
  margin: 0 auto;
}

.press-lede {
  font-size: 16px;
  margin-bottom: 20px;
}

/* Press page: tighter spacing above the tiles */
.press-page .press-lede {
  margin-bottom: 10px;   /* was 20px */
}

.press-page .press-card-grid {
  margin-top: 10px;      /* was 20px */
  margin-bottom: 8px;    /* was 10px */
}

/* Slightly tighter spacing around the "Latest press release" section */
.press-page .press-section {
  margin-top: 22px;      /* was 30px */
  margin-bottom: 16px;
}

/* Top cards */
.press-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0 10px;
}

.press-card {
  display: block;
  background-color: #051e3d;
  border-radius: 16px;
  border: 1px solid #ffffff;
  padding: 18px;
  text-decoration: none;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.press-card:hover,
.press-card:focus-visible {
  background-color: #073763;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.4);
  outline: none;
}

.press-card-title {
  margin: 0 0 6px;
  font-size: 18px;
}

.press-card-text {
  margin: 0;
  font-size: 14px;
}

/* Flip-style content swap inside press cards */

/* Base faces */
.press-card-front,
.press-card-back {
  transition: opacity 0.2s ease, max-height 0.2s ease;
}

/* Desktop / larger screens: show front by default, back on hover/focus */
@media (min-width: 769px) {
  .press-card-back {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }

  .press-card:hover,
  .press-card:focus-within {
    background-color: #073763; /* keep your existing hover feel */
  }

  .press-card:hover .press-card-front,
  .press-card:focus-within .press-card-front {
    opacity: 0;
    max-height: 0;
    pointer-events: none;           /* NEW: don’t intercept clicks when hidden */
  }

  .press-card:hover .press-card-back,
  .press-card:focus-within .press-card-back {
    opacity: 1;
    max-height: 500px;              /* big enough to show contents */
    pointer-events: auto;           /* NEW: make the back clickable */
  }

}

/* On mobile: just show everything (no flip, simpler + no hover) */
@media (max-width: 768px) {
  .press-card-front,
  .press-card-back {
    opacity: 1;
    max-height: none;
  }
}

/* --- Press tiles: more compact default height --- */

.press-section {
  margin-top: 15px;
  margin-bottom: 16px; /* a little tighter above/below the grid */
}

.press-card-grid {
  gap: 14px;           /* slightly smaller gaps between tiles */
}

/* Compact press cards */
.press-card {
  padding: 6px 10px;  /* less top/bottom padding than before */
  min-height: 80px;   /* lower floor so cards start shorter */
}

/* Slightly tighter title + text spacing */
.press-card-title {
  margin-top: 0;
  margin-bottom: 6px;  /* was larger; this pulls content up a bit */
  font-size: 18px;     /* still readable but a touch more compact */
}

.press-card-text {
  margin: 4px 0 6px;   /* reduce blank space between lines/paragraphs */
  font-size: 15px;
}


/* Sections */
.press-section {
  margin-top: 30px;
}

/* Contact list */
.press-contact-list {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}
.press-contact-list li {
  margin-bottom: 6px;
}

/* Assets list */
.press-assets-list {
  list-style: disc inside;
  margin: 10px 0 5px 0;
  padding-left: 0;
}
.press-asset-note {
  display: inline-block;
  font-size: 14px;
  margin-left: 4px;
  color: #CCCCCC;
}
.press-small-note {
  font-size: 14px;
}

/* Latest press release block */
.press-meta {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #CCCCCC;
}

/* Links below the scrollable release */
.press-links-below {
  margin-top: 10px;
  font-size: 14px;
}

/* Keep press links clearly underlined */
.press-page .content-wrapper a {
  text-decoration: underline;
}

/* Latest press release block meta text */
.press-meta {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #CCCCCC;
}

/* Main scrollable card for the press page */
.press-main-scroll {
  max-width: 800px;  /* matches About/FAQ cards */
  margin: 0 auto;
}

/* mmm */

/* Press Page Frame */
.press-page #content {
  min-height: 0;          /* no forced 700px floor */
  padding-bottom: 4px;    /* already small, keep it tight */
}

/* Slightly tighter padding for the main text area on this page */
.press-page .content-wrapper {
  padding-top: 12px;      /* was 20px */
  padding-bottom: 8px;    /* was 20px */
}

/* Tighten spacing around headings/sections */
.press-page .content-wrapper h1 {
  margin-top: 10px;       /* was 20px */
  margin-bottom: 10px;    /* was 20px */
}

.press-page .press-lede {
  margin-bottom: 8px;     /* was 10–20px in various rules */
}

/* Tiles: slightly smaller and closer together */
.press-page .press-card-grid {
  margin-top: 6px;        /* was 10px */
  margin-bottom: 6px;     /* was 8–10px */
  gap: 10px;              /* was 14–16px */
}

.press-page .press-card {
  padding: 6px 8px;       /* was 6px 10px */
  min-height: 70px;       /* was 80px */
}

/* “Latest press release” section spacing */
.press-page .press-section {
  margin-top: 18px;       /* was 22–30px */
  margin-bottom: 12px;    /* was 16px */
}

.press-page .press-meta {
  margin-bottom: 6px;     /* was 10px */
}

/* === Latest press release: collapsible white card (desktop expands on hover/click) === */

.press-page .press-release-scroll {
  max-width: 800px;                 /* align with About/FAQ width */
  margin: 0 auto;
  background-color: #FFFFFF;        /* white card */
  border: 1px solid #8f8d8d;
  border-radius: 8px;

  /* Collapsed height on desktop – matches other 400px frames */
  max-height: 170px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Inner wrapper: no scroll limit here; the outer card handles the animation */
.press-page .press-release-scroll .scrollable-wrapper {
  max-height: none;
  overflow: visible;
  padding: 1.25rem 1.5rem;          /* same padding you had before */
  box-sizing: border-box;
}

/* Expand on hover or keyboard focus – desktop only */
@media (min-width: 769px) {
  .press-page .press-release-scroll:hover,
  .press-page .press-release-scroll:focus-within {
    max-height: 2000px;             /* big enough to show the whole release */
  }
}

/* On mobile, just show the full release (no hover behavior) */
@media (max-width: 768px) {
  .press-page .press-release-scroll {
    max-height: none;
    overflow: visible;
  }
}

/* Typography inside the release card: dark text on white, no shadow */

.press-page .press-release-scroll h3,
.press-page .press-release-scroll h4,
.press-page .press-release-scroll p,
.press-page .press-release-scroll li {
  color: #001F5F;                   /* dark blue text */
  text-shadow: none;
  font-size: 16px;
}

.press-page .press-release-scroll h3 {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 10px;
}

.press-page .press-release-scroll h4 {
  font-size: 16px;
  margin-top: 16px;
  margin-bottom: 6px;
}

/* Desktop: compact latest press release card,
   expands on hover for mouse, and fully on focus for keyboard */
@media (min-width: 769px) {
  .press-page .press-release-scroll {
    max-height: 170px;       /* your compact height */
    overflow: hidden;        /* hide the rest of the text */
    transition: max-height 0.25s ease;
  }


  /* Keyboard / screen reader users: full text when focused */
  .press-page .press-release-scroll:focus-within {
    max-height: none;        /* let it grow to full height */
  }
}

/* Links inside the release: dark + underlined */

.press-page .press-release-scroll a {
  color: #001F5F;
  text-decoration: underline;
}

.press-page .press-release-scroll a:hover {
  color: #003087;
}

/* Candidate detail: statement block behaves like the press release card */
.candidates-page .candidate-statements-section {
    max-width: 800px;                 /* align with FAQ / press width */
    margin: 0 auto 1.5rem auto;
    background-color: #FFFFFF;
    border: 1px solid #8f8d8d;
    border-radius: 8px;

    /* collapsed height on desktop */
    max-height: 170px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* Inner wrapper: white background, no extra scroll-limit here */
.candidates-page .candidate-statements-section .scrollable-wrapper {
    background-color: #FFFFFF;
    max-height: none;
    overflow-y: auto;
    padding: 20px;
}

/* On desktop: expand on hover or focus */
@media (min-width: 769px) {
    .candidates-page .candidate-statements-section:hover,
    .candidates-page .candidate-statements-section:focus-within {
        max-height: 2000px;   /* big enough to show the full table */
    }
}

/* On mobile: just show the full block, no hover behavior */
@media (max-width: 768px) {
    .candidates-page .candidate-statements-section {
        max-height: none;
        overflow: visible;
    }
}



/* Inner wrapper handles scrolling; no height animation */
/*
.press-page .press-release-scroll .scrollable-wrapper {
  max-height: 170px;
  overflow-y: auto;
}
*/  

/* No hover expansion – keep the same height */
/*
@media (min-width: 769px) {
  .press-page .press-release-scroll:hover,
  .press-page .press-release-scroll:focus-within {
    max-height: 170px;
  }
} 
*/

/* --- Candidate detail page (per-candidate statements) --- */

.candidate-detail-page .content-wrapper {
  max-width: 960px;
}

/* Lede under the H1 */
.candidate-detail-lede {
  margin-bottom: 1.2rem;
}

/* Reuse press-card grid but allow wrapping nicely on smaller widths */
.candidate-detail-page .candidate-meta-grid {
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

.candidate-detail-page .candidate-meta-card {
  cursor: default;
}

.candidate-detail-page .candidate-meta-body {
  margin-top: 0.25rem;
  font-size: 0.95rem;
}

/* Slightly softer note + disclaimer text */
.candidate-detail-note,
.candidate-disclaimer-text {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* White box around the statement table – visually similar to press release card */
.candidate-detail-page .candidate-statements-block {
  margin-top: 1.5rem;
}

.candidate-detail-page .candidate-statements-intro {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

/* White block around statement table – behaves like press release card */
/* Candidate Statements Detail – white box always fully open */
.candidate-detail-page .candidate-statements-scroll {
  max-width: 960px;
  margin: 0 auto 0.75rem auto;
  background-color: #ffffff;
  border: 1px solid #8f8d8d;
  border-radius: 8px;

  /* No height limit, no clipping */
  max-height: none;
  overflow: visible;
}

/* Inner wrapper: padding only; let the page handle scrolling */
.candidate-detail-page .candidate-statements-scroll .scrollable-wrapper {
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
  background-color: #ffffff;
  max-height: none;
  overflow: visible;
}

/* Desktop: no hover animation – keep it fully open */
@media (min-width: 769px) {
  .candidate-detail-page .candidate-statements-scroll:hover,
  .candidate-detail-page .candidate-statements-scroll:focus-within {
    max-height: none;
  }
}

/* Mobile: unchanged – card is open and uses page scroll */
@media (max-width: 768px) {
  .candidate-detail-page .candidate-statements-scroll {
    max-height: none;
    overflow: visible;
  }
}

/* Notes column: allow a bit more width on larger screens */
.candidate-detail-page #candidateStatementsTable th:nth-child(4),
.candidate-detail-page #candidateStatementsTable td:nth-child(4) {
  min-width: 220px;
}

/* Make long notes wrap nicely */
.candidate-notes-cell {
  white-space: normal;
  word-break: break-word;
}

/* Candidate detail: make the statement table readable */
.candidate-detail-page #candidateStatementsTable th,
.candidate-detail-page #candidateStatementsTable td {
    color: #001F5F !important;      /* PTK dark blue text */
    background-color: #FFFFFF;
    border-color: #8f8d8d;          /* soften the white border */
}

.candidate-detail-page #candidateStatementsTable th {
    font-weight: 600;
}

/* Zebra striping for readability */
.candidate-detail-page #candidateStatementsTable tbody tr:nth-child(even) {
    background-color: #f8f8f8;
}

/* Candidate Statements Detail – rounded white block */
.candidate-detail-page .candidate-statements-scroll {
  border-radius: 8px;      /* adjust to 8px / 16px if you prefer */
  overflow: hidden;         /* clip inner content to the rounded corners */
}

/* Make sure the inner wrapper doesn't visually square the corners */
.candidate-detail-page .candidate-statements-scroll .scrollable-wrapper {
  border-radius: 8px;
}



/* Layout for archive cards (always one per row) */
.press-archive-grid {
    display: grid;
    gap: 1.75rem;
    margin-top: 2rem;
    grid-template-columns: 1fr;          /* one card per line on all widths */
}

/* Card styling – match FAQ frame, dark text on light background */
.press-release-card {
    background-color: #FFFFFF;           /* white card on dark page */
    border: 1px solid #8f8d8d;           /* same grey as FAQ frames */
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    color: #001F5F;                      /* dark blue text inside the card */
}

/* Title + toggle button */
.press-card-title {
    margin: 0 0 0.5rem;
}

/* Full-width green toggle button (override global button gradient) */
.press-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;

    /* Use background, not background-color, to kill the gradient */
    background: #abce5b;                 /* Pine Tree Key green */
    color: #001F5F;                      /* dark blue text for contrast */
    border: 1px solid #8f8d8d;
    border-radius: 6px;

    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

/* + / – indicator on the right */
.press-toggle::after {
    content: "+";
    float: right;
    font-size: 1.1em;
}

.press-toggle[aria-expanded="true"]::after {
    content: "–";
}

/* Focus outline for keyboard users */
.press-toggle:focus-visible {
    outline: 2px solid #abce5b;
    outline-offset: 2px;
}

/* Meta line under the heading (location, “For immediate release”, etc.) */
.press-archive-grid .press-meta {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.9rem;
    color: #4b5563;                      /* medium grey, readable on white */
}

/* Body text inside the press cards */
.press-card-body {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #001F5F;                      /* make sure it’s dark, not inherited white */
}

.press-card-body p + p {
    margin-top: 0.75rem;
}

/* Links inside archive cards: dark and underlined */
.press-release-card a {
    color: #001F5F;
    text-decoration: underline;
}

.press-release-card a:hover {
    color: #003087;
}

/* Candidate detail: table styling on candidate-statements.html */
.candidates-page #candidateStatementsTable {
  border-collapse: collapse;
  width: 100%;
}

/* Base cell styling: make text visible and slightly smaller than body */
.candidates-page #candidateStatementsTable th,
.candidates-page #candidateStatementsTable td {
  color: #001F5F !important;  /* PTK dark blue */
  background-color: #FFFFFF;
  border: 1px solid #8f8d8d;
  font-size: 18px;            /* regular table text */
  line-height: 1.4;
}

/* Column headers: same size as your h2 (e.g. "Candidate profile", "Statement responses") */
.candidates-page #candidateStatementsTable thead th {
  font-size: 20px;
  font-weight: 600;
}

/* Zebra striping – apply to the cells, not just the row */
.candidates-page #candidateStatementsTable tbody tr:nth-child(even) td {
  background-color: #f7f9ff;  /* light blue; adjust if you want */
}

/* Notes column: a bit wider and allowed to wrap nicely */
.candidates-page #candidateStatementsTable td:nth-child(4),
.candidates-page #candidateStatementsTable th:nth-child(4) {
  min-width: 220px;
}

.candidates-page .candidate-notes-cell {
  white-space: normal;
  word-break: break-word;
}


/* --- Press archive: keep cards white on hover/click --- */

.press-release-card {
  background-color: #FFFFFF;   /* default: white */
  color: #001F5F;              /* dark blue text */
}

.press-release-card:hover,
.press-release-card:focus-within,
.press-release-card:active {
  background-color: #FFFFFF;   /* stay white on hover/click */
  color: #001F5F;              /* keep text dark */
}

/* Links below the release: keep compact */
.press-page .press-links-below {
  margin-top: 4px;        /* was 6–10px */
  font-size: 13px;
}

.press-links-below {
  margin: 6px auto 0;          /* small top margin; center the whole strip */
  font-size: 13px;             /* smaller than body text */
  display: flex;
  justify-content: flex-start; /* links aligned left within the strip */
  align-items: center;
  gap: 8px;                    /* spacing between elements */
  width: fit-content;          /* shrink to content so it can be centered */
  text-align: left;
}

.press-links-separator {
  opacity: 0.8;
}

.press-link {
  white-space: nowrap;         /* keeps each link on one line where possible */
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .press-card-grid {
    grid-template-columns: 1fr;
  }

  .press-card {
    padding: 14px;
  }

  .press-card-title {
    font-size: 16px;
  }

  .press-card-text,
  .press-lede,
  .press-small-note,
  .press-meta,
  .press-links-below {
    font-size: 14px;
  }

    /* Let the press release expand fully on mobile */
  .press-page .press-release-scroll,
  .press-page .press-release-scroll .scrollable-wrapper {
    max-height: none;
  }

  /* Re-add the border just for the press release card on mobile */
  .press-page .press-release-scroll {
    border: 1px solid #8f8d8d;
  }

    .press-links-below {
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;  /* stack the two links */
    text-align: center;
  }

  .press-link {
    white-space: normal;     /* allow normal wrapping on mobile */
  }
}
/* Press page: let the white frame hug the content a bit more */
.press-page #content {
  min-height: 0;        /* remove the 700px floor for this page */
  padding-bottom: 6px; /* slightly tighter bottom padding */
}
.press-page .content-wrapper {
  padding-bottom: 6px;  /* instead of 20px */
  margin-bottom: 0;
}

/* Links below the release: make them sit closer to the bottom */
.press-page .press-links-below {
  margin: 4px auto 0;      /* was 4px or 6px */
  font-size: 13px;
}

/* === Candidate Statements Page Overrides (candidate-statements.html) === */

/* White card around the statement table – similar to press page */
.candidates-page .candidate-statements-section {
  max-width: 960px;
  margin: 0 auto 0.75rem auto;  /* smaller gap under the box */
  background-color: #ffffff;
  border: 1px solid #8f8d8d;
  border-radius: 8px;

  /* collapsed height on desktop */
  max-height: 170px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Inner wrapper: padding + plain white background */
.candidates-page .candidate-statements-section .scrollable-wrapper {
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
  background-color: #ffffff;
}

/* Desktop: expand card on hover / focus, like press-release block */
@media (min-width: 769px) {
  .candidates-page .candidate-statements-section:hover,
  .candidates-page .candidate-statements-section:focus-within {
    max-height: 2000px; /* big enough for full table */
  }
}

/* Mobile: no collapsing; always show full content */
@media (max-width: 768px) {
  .candidates-page .candidate-statements-section {
    max-height: none;
    overflow: visible;
  }
}

/* Table styling on candidate-statements page */
#candidateStatementsTable {
  border-collapse: collapse;
  width: 100%;
}

/* Cells: dark blue text, light borders, slightly smaller than body text */
#candidateStatementsTable th,
#candidateStatementsTable td {
  color: #001F5F !important;
  background-color: #ffffff;
  border: 1px solid #8f8d8d;
  font-size: 18px;      /* regular table text (body is 20px) */
  line-height: 1.4;
}

/* Column headers: same size as h2 (20px) and bold */
#candidateStatementsTable thead th {
  font-size: 20px;
  font-weight: 600;
}

/* Zebra striping – apply to the cells so it’s actually visible */
#candidateStatementsTable tbody tr:nth-child(even) td {
  background-color: #f7f9ff !important;  /* soft light blue */
}

/* Notes column: slightly wider and allow wrapping */
#candidateStatementsTable th:nth-child(4),
#candidateStatementsTable td:nth-child(4) {
  min-width: 220px;
}

.candidate-notes-cell {
  white-space: normal;
  word-break: break-word;
}

/* Mobile tweaks for candidate statements table */
@media (max-width: 768px) {
  #candidateStatementsTable {
    display: block;          /* helps horizontal scrolling behave consistently */
    overflow-x: auto;
  }

  #candidateStatementsTable thead th {
    font-size: 16px;         /* smaller header text on mobile */
  }

  #candidateStatementsTable tbody td {
    font-size: 14px;         /* smaller body text on mobile */
  }
}

/* === Candidate Statements Page – stacked layout === */

/* White card around the statement list */
.candidates-page .candidate-statements-section {
  max-width: 960px;
  margin: 0 auto 1rem auto;
  background-color: #ffffff;
  border: 1px solid #8f8d8d;
  border-radius: 8px;

  /* Override the generic .scrollable-section clipping */
  overflow: visible;
}

/* Inner wrapper: just padding; let the page scroll normally */
.candidates-page .candidate-statements-section .scrollable-wrapper {
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
  background-color: #ffffff;
  overflow: visible;
}

/* List container */
.candidate-statements-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* One block per statement */
.candidate-statement-row {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #d0d0d0;
}

/* Zebra striping on the blocks */
.candidate-statement-row:nth-child(even) {
  background-color: #f7f9ff;
}

/* Typography inside each block */
.candidate-statement-text {
  margin: 0 0 0.25rem 0;
}

.candidate-statement-category {
  font-weight: 600;
}

.candidate-statement-body {
  font-weight: 400;
}

.candidate-statement-stance,
.candidate-statement-note {
  margin: 0;
  font-size: 0.95em;  /* a bit smaller than body text */
}

.candidate-statement-note {
  margin-top: 0.15rem;
}

/* Additional info box under the statement list */
.candidate-additional-info {
  margin-top: 1.5rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: 6px;
  border: 1px solid #b0b9e0;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  font-size: 0.95em;
}

.candidate-additional-info h3 {
  margin: 0 0 0.4rem 0;
  font-size: 1em;
  font-weight: 600;
  color: #001f5f;
}

.candidate-additional-info p {
  margin: 0;
  white-space: pre-wrap; /* preserve line breaks from the CSV */
}

/* Intro under "Statement responses" – outside the white box */
.candidate-statements-intro {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

/* Candidate statements explainer under the heading – blue text outside the box */
.candidate-detail-page .candidate-statements-intro {
  color: #ffffff;   /* white text on blue blue */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* optional, for readability */
}

/* Short divider between statement text and candidate stance */
.candidate-detail-page .candidate-statement-stance {
  margin-top: 0.5rem;      /* add a bit more space above the stance */
  padding-top: 0.4rem;     /* space between the divider and the text */
  text-align: left;        /* keeps the text itself aligned left */
}

.candidate-detail-page .candidate-statement-stance::before {
  content: "";
  display: block;
  width: 70px;                        /* adjust width as desired */
  margin: 0.4rem auto 0.5rem auto;    /* centers the line */
  border-top: 4px dotted #84aaf5;     /* dotted divider in your blue */
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .candidate-statement-row {
    padding: 0.75rem 0.25rem;
  }

  .candidate-statement-text,
  .candidate-statement-stance,
  .candidate-statement-note {
    font-size: 0.9em;
  }
}

/* === Candidate detail – refined statement cards === */

/* Slightly more space between cards on this page */
.candidate-detail-page .candidate-statements-list {
  gap: 1rem;
}

/* Card styling for each statement + response */
.candidate-detail-page .candidate-statement-row {
  padding: 0.9rem 1rem 0.95rem;
  border-radius: 6px;
  border: 1px solid #b0b9e0;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Turn off zebra striping inside the detail view */
.candidate-detail-page .candidate-statement-row:nth-child(even) {
  background-color: #ffffff;
}

/* Statement text at the top of each card */
.candidate-detail-page .candidate-statement-text {
  margin: 0 0 0.45rem 0;
}

.candidate-detail-page .candidate-statement-category {
  display: block;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.candidate-detail-page .candidate-statement-body {
  font-weight: 400;
}

/* Candidate response block */
.candidate-detail-page .candidate-statement-stance,
.candidate-detail-page .candidate-statement-note {
  margin: 0;
  font-size: 0.9em; /*Use 0.95 for slightly larger candidate stance and note font*/
}

/* Main stance: light blue panel with a colored accent bar */
.candidate-detail-page .candidate-statement-stance {
  margin-top: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: 4px;
  background-color: #eef3ff;
  border-left: 3px solid #558af3;
}

/* Remove the old dotted divider here */
.candidate-detail-page .candidate-statement-stance::before {
  content: none;
}

/* Optional note: slightly lighter panel, same accent */
.candidate-detail-page .candidate-statement-note {
  margin-top: 0.25rem;
  padding: 0.35rem 0.8rem;
  border-radius: 4px;
  background-color: #f7fbff;
  border-left: 3px solid #558af3;
}

.candidate-detail-page .candidate-statement-stance strong,
.candidate-detail-page .candidate-statement-note strong {
  font-weight: 600;
}


/* === Candidate Statements Detail Page – stacked layout === */

/* === Candidate Statements Detail Page – always fully open === */

.candidates-page .candidate-statements-shell {
  max-width: 960px;
  margin: 1.5rem auto;
}

.candidates-page .candidate-statements-shell h2 {
  margin: 0 0 0.5rem 0;
}

/* White card around the list */
.candidates-page .candidate-statements-section {
  max-width: 960px;
  margin: 0 auto 0.75rem auto;
  background-color: #ffffff;
  border: 1px solid #8f8d8d;
  border-radius: 8px;

  /* Important: no height limits, no clipping */
  max-height: none;
  overflow: visible;
}

/* Inner wrapper: padding + plain white background; no inner scroll */
.candidates-page .candidate-statements-section .scrollable-wrapper {
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
  background-color: #ffffff;
  max-height: none;
  overflow: visible;
}

/* Statement list container */
.candidate-statements-list {
  display: flex;
  flex-direction: column;
}

/* One block per statement */
.candidate-statement-row {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #d0d0d0;
  color: #001F5F;              /* text in PTK dark blue */
  background-color: #ffffff;   /* default row background */
}

/* Zebra striping: every second row gets a light blue background */
.candidate-statement-row:nth-child(even) {
  background-color: #c5cff1;
}

/* Mobile tweaks: slightly smaller text + tighter padding */
@media (max-width: 768px) {
  .candidate-statement-row {
    padding: 0.75rem 0.25rem;
  }

  .candidate-statement-text,
  .candidate-statement-stance,
  .candidate-statement-note {
    font-size: 0.9em;
  }
}


/* Text lines inside each block */
.candidate-statement-text {
  margin: 0 0 0.25rem 0;
}

.candidate-statement-category {
  font-weight: 600;
}

.candidate-statement-body {
  font-weight: 400;
}

.candidate-statement-stance,
.candidate-statement-note {
  margin: 0;
  font-size: 0.95em;  /* slightly smaller than body text */
}

.candidate-statement-note {
  margin-top: 0.15rem;
}

/* Candidate statements: always fully open on desktop + mobile */
.candidates-page .candidate-statements-section {
  max-height: none !important;
  overflow: visible !important;
}

.candidates-page .candidate-statements-section .scrollable-wrapper {
  max-height: none !important;
  overflow: visible !important;
}


/* Mobile tweaks: slightly smaller text + tighter padding */
@media (max-width: 768px) {
  .candidate-statement-row {
    padding: 0.75rem 0.25rem;
  }

  .candidate-statement-text,
  .candidate-statement-stance,
  .candidate-statement-note {
    font-size: 0.9em;
  }
}

/* Back link under candidate detail */
.candidate-back-link {
  max-width: 800px;
  margin: 0 auto 0.5rem auto;
  text-align: right;
}

.candidate-back-link a {
  color: #abce5b;              /* PTK green */
  text-decoration: underline;
}

.candidate-back-link a:hover,
.candidate-back-link a:focus {
  text-decoration: none;
}

/* Last Updated on Candidates Page */
.candidate-last-updated {
  max-width: 960px;
  margin: 0.5rem auto 0.25rem;
  text-align: center;
  font-size: 0.85rem;
  color: #ffffff;
}

/* Candidate detail: ensure text in the white statements block is dark blue */
.candidate-detail-page .candidate-statements-scroll p,
.candidate-detail-page .candidate-statements-scroll li {
  color: #001F5F;  /* dark PTK blue on white background */
}

/* Candidate statements: always fully open on desktop */
@media (min-width: 769px) {
  .candidates-page .candidate-statements-section {
    max-height: none !important;
    overflow: visible !important;
  }

  .candidates-page .candidate-statements-section .scrollable-wrapper {
    max-height: none !important;       /* <-- add this line */
    overflow-y: visible !important;
  }

  .candidates-page .candidate-statements-section:hover,
  .candidates-page .candidate-statements-section:focus-within {
    max-height: none !important;
  }
}