@charset "UTF-8";
/* Modern CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Typography */
@font-face {
  font-family: "Rock Salt";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/RockSalt/RockSalt-Regular.ttf") format("truetype");
}
/* Colors - CSS Custom Properties */
:root {
  /* Base Colors */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666666;
  --color-background-page: #ffffff;
  --color-background-card: #f9f9f9;
  --color-background-card-hover: #f9f9f9;
  /* Brand Colors */
  --color-brand-primary: #2c5f9e;
  --color-brand-secondary: #e63946;
  /* Political Party Colors */
  --color-party-democrat: #0015BC;
  --color-party-republican: #E81B23;
  /* UI Element Colors */
  --color-border-light: #e0e0e0;
  --color-border-card: #e0e0e0;
  --color-table-header-bg: #f5f5f5;
  --color-table-header-hover: #3d74b8;
  --color-table-stripe: #f5f5f5;
  --color-progressive-incumbent: #B4EEEF;
  --color-link-table: hsl(171, 47%, 40%);
  /* Overlay/Shadow Colors */
  --color-overlay-text-bg: rgba(0, 0, 0, 0.6);
  --color-text-shadow: rgba(0, 0, 0, 0.8);
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  /* Organization Badge Colors */
  --org-color-track-aipac: hsl(210, 55%, 75%);
  --org-color-leaders-we-deserve: hsl(280, 60%, 78%);
  --org-color-our-revolution: hsl(200, 65%, 72%);
  --org-color-sunrise-movement: hsl(45, 85%, 70%);
  --org-color-dsa: hsl(355, 75%, 72%);
  --org-color-pda: hsl(220, 58%, 75%);
  --org-color-working-families-party: hsl(270, 55%, 77%);
  --org-color-justice-democrats: hsl(190, 62%, 73%);
  --org-color-bernie-sanders: hsl(208, 70%, 75%);
  --org-color-citizens-impeachment: hsl(15, 65%, 75%);
  --org-color-national-ground-game: hsl(160, 58%, 73%);
  --org-color-peace-action: hsl(135, 60%, 75%);
  --org-color-jvp-action: hsl(175, 55%, 74%);
  --org-color-indivisible: hsl(240, 45%, 78%);
  --org-color-moveon: hsl(195, 50%, 76%);
  --org-color-integrity-index: hsl(150, 55%, 70%);
  /* Incumbent Badge Colors */
  --badge-aipac-approved: hsl(140, 50%, 45%);
  --badge-aipac-needs-improvement: hsl(45, 90%, 50%);
  --badge-aipac-not-approved: hsl(0, 65%, 50%);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Base Colors */
    --color-text-primary: #e8e8e8;
    --color-text-secondary: #a0a0a0;
    --color-background-page: #1a1a1a;
    --color-background-card: #2a2a2a;
    --color-background-card-hover: #333333;
    /* Brand Colors */
    --color-brand-primary: #5a9bd5;
    --color-brand-secondary: #ff6b77;
    /* Political Party Colors */
    --color-party-democrat: #4d7cff;
    --color-party-republican: #ff5a61;
    /* UI Element Colors */
    --color-border-light: #404040;
    --color-border-card: #404040;
    --color-table-header-bg: #2d2d2d;
    --color-table-header-hover: #4782ba;
    --color-table-stripe: #252525;
    --color-progressive-incumbent: #2d5a5b;
    --color-link-table: hsl(171, 47%, 60%);
    /* Overlay/Shadow Colors */
    --color-overlay-text-bg: rgba(0, 0, 0, 0.8);
    --color-text-shadow: rgba(0, 0, 0, 0.95);
    --shadow-light: rgba(255, 255, 255, 0.05);
    --shadow-medium: rgba(255, 255, 255, 0.08);
    /* Organization Badge Colors - darkened for dark mode */
    --org-color-track-aipac: hsl(210, 55%, 60%);
    --org-color-leaders-we-deserve: hsl(280, 60%, 63%);
    --org-color-our-revolution: hsl(200, 65%, 57%);
    --org-color-sunrise-movement: hsl(45, 85%, 55%);
    --org-color-dsa: hsl(355, 75%, 57%);
    --org-color-pda: hsl(220, 58%, 60%);
    --org-color-working-families-party: hsl(270, 55%, 62%);
    --org-color-justice-democrats: hsl(190, 62%, 58%);
    --org-color-bernie-sanders: hsl(208, 70%, 60%);
    --org-color-citizens-impeachment: hsl(15, 65%, 60%);
    --org-color-national-ground-game: hsl(160, 58%, 58%);
    --org-color-peace-action: hsl(135, 60%, 60%);
    --org-color-jvp-action: hsl(175, 55%, 59%);
    --org-color-indivisible: hsl(240, 45%, 63%);
    --org-color-moveon: hsl(195, 50%, 61%);
    --org-color-integrity-index: hsl(150, 55%, 55%);
    /* Incumbent Badge Colors - adjusted for dark mode */
    --badge-aipac-approved: hsl(140, 50%, 55%);
    --badge-aipac-needs-improvement: hsl(45, 90%, 60%);
    --badge-aipac-not-approved: hsl(0, 65%, 60%);
  }
}
/* Legacy Sass variables for backwards compatibility */
/* Spacing */
/* Layout and Structure */
html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: var(--color-text-primary);
  background-color: var(--color-background-page);
}

main {
  flex: 1;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* Sticky Footer */
footer {
  margin-top: auto;
  padding: 2rem;
  background-color: var(--color-text-primary);
  color: var(--color-background-page);
  text-align: center;
}

/* Hero Section */
.hero {
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero .hero-content {
  position: relative;
  z-index: 1;
  padding: 0 2rem;
  width: 100%;
}
.hero h1 {
  font-family: "Rock Salt", cursive;
  font-size: 3.5rem;
  color: white;
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 8px var(--color-text-shadow), 4px 4px 12px var(--color-overlay-text-bg);
}
.hero p {
  font-size: 1.25rem;
  color: white;
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  background-color: var(--color-overlay-text-bg);
  border-radius: 8px;
  line-height: 1.6;
}

/* Responsive Grid for Candidates */
.candidates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.candidate-card {
  padding: 1.5rem;
  border: 1px solid var(--color-border-card);
  border-radius: 8px;
  background-color: var(--color-background-card);
}
.candidate-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-brand-primary);
}
.candidate-card p {
  color: var(--color-text-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero {
    padding: 0 1rem;
    min-height: 300px;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
    padding: 0.75rem 1rem;
  }
  .container {
    padding: 1rem;
  }
}
/* Photo Line Section - Full-bleed candidate photos */
.photo-line {
  /* Full-bleed layout */
  width: 100%;
  margin: 0;
  padding: 0;
  /* Grid layout: 12 columns on desktop */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
}
.photo-line .photo-line-item {
  /* Reset link styling */
  display: block;
  text-decoration: none;
  /* Ensure no margins/padding */
  margin: 0;
  padding: 0;
  /* Make container square */
  aspect-ratio: 1/1;
  overflow: hidden;
  /* Subtle hover effect */
  transition: opacity 0.2s ease;
}
.photo-line .photo-line-item:hover {
  opacity: 0.85;
  cursor: pointer;
}
.photo-line .photo-line-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* Crop less from top, more from bottom */
  display: block; /* Remove inline spacing */
}

/* Mobile: Two rows of 6 photos */
@media (max-width: 768px) {
  .photo-line {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}
/* Content sections styling */
section {
  margin: 4rem 0;
}
section h2 {
  font-size: 2rem;
  color: var(--color-brand-primary);
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--color-brand-secondary);
  padding-bottom: 0.5rem;
}
section h3 {
  font-size: 1.5rem;
  color: var(--color-text-primary);
  margin: 2rem 0 1rem;
}

.introduction, .progressive-definition {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.introduction p, .progressive-definition p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.principles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
@media (min-width: 900px) {
  .principles-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.principles-grid .principle-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  align-items: start;
}
@media (min-width: 900px) {
  .principles-grid .principle-item {
    grid-column: span 2;
    grid-template-columns: 1fr 1.2fr;
    gap: 1rem;
  }
}
.principles-grid .principle-title {
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-text-primary);
  padding-left: 1.75rem;
  position: relative;
}
.principles-grid .principle-title::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-brand-primary);
  font-weight: bold;
  font-size: 1.2rem;
}
.principles-grid .principle-support {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.principles-grid .principle-support a {
  color: var(--color-brand-primary);
  text-decoration: none;
  margin-left: 0.25rem;
}
.principles-grid .principle-support a:hover {
  text-decoration: underline;
}

/* Organization brand colors - consistent across the site */
.org-track-aipac {
  background-color: var(--org-color-track-aipac);
}

.org-leaders-we-deserve {
  background-color: var(--org-color-leaders-we-deserve);
}

.org-our-revolution {
  background-color: var(--org-color-our-revolution);
}

.org-sunrise-movement {
  background-color: var(--org-color-sunrise-movement);
}

.org-dsa {
  background-color: var(--org-color-dsa);
}

.org-pda {
  background-color: var(--org-color-pda);
}
.org-pda img {
  padding: 8%;
  background: white;
  border-radius: 4px;
}

.org-working-families-party {
  background-color: var(--org-color-working-families-party);
}

.org-justice-democrats {
  background-color: var(--org-color-justice-democrats);
}

.org-bernie-sanders {
  background-color: var(--org-color-bernie-sanders);
}

.org-citizens-impeachment {
  background-color: var(--org-color-citizens-impeachment);
}

.org-national-ground-game {
  background-color: var(--org-color-national-ground-game);
}

.org-peace-action {
  background-color: var(--org-color-peace-action);
}

.org-jvp-action {
  background-color: var(--org-color-jvp-action);
}
.org-jvp-action img {
  padding: 8%;
  background: white;
  border-radius: 4px;
}

.org-indivisible {
  background-color: var(--org-color-indivisible);
}

.org-moveon {
  background-color: var(--org-color-moveon);
}

.org-integrity-index {
  background-color: var(--org-color-integrity-index);
}

/* Incumbent badge styling - Integrity Index and Track AIPAC */
.incumbent-badges {
  display: inline;
  margin-left: 0.3em;
  white-space: nowrap;
}
.incumbent-badges .badge {
  display: inline-block;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
  vertical-align: middle;
  color: inherit;
  margin-left: 0.25em;
}
.incumbent-badges .badge:hover {
  transform: scale(1.1);
  opacity: 0.9;
}
.incumbent-badges .badge:visited {
  color: inherit;
}
.incumbent-badges .integrity-badge {
  font-size: 0.55em;
  opacity: 0.75;
}
.incumbent-badges .integrity-badge .badge-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  vertical-align: middle;
}
.incumbent-badges .integrity-badge {
  /* Grade-specific colors */
}
.incumbent-badges .integrity-badge .grade-a {
  background: linear-gradient(135deg, #126d34, #1a9948);
  color: rgb(255, 255, 255);
}
.incumbent-badges .integrity-badge .grade-b {
  background: linear-gradient(135deg, #82bd28, #9bd742);
  color: rgb(255, 255, 255);
}
.incumbent-badges .integrity-badge .grade-c {
  background: linear-gradient(135deg, #fc0, #ffd633);
  color: rgb(31, 41, 55);
}
.incumbent-badges .integrity-badge .grade-d {
  background: linear-gradient(135deg, #ff8000, #f93);
  color: rgb(255, 255, 255);
}
.incumbent-badges .integrity-badge .grade-f {
  background: linear-gradient(135deg, #981b1b, #c32222);
  color: rgb(255, 255, 255);
}
.incumbent-badges .aipac-badge {
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  padding: 0.195em;
  line-height: 0;
  vertical-align: middle;
  box-sizing: content-box;
  opacity: 0.75;
}
.incumbent-badges .aipac-badge.aipac-approved {
  background-color: var(--badge-aipac-approved);
}
.incumbent-badges .aipac-badge.aipac-approved .badge-icon {
  stroke: white;
}
.incumbent-badges .aipac-badge.aipac-needs-improvement {
  background-color: var(--badge-aipac-needs-improvement);
}
.incumbent-badges .aipac-badge.aipac-needs-improvement .badge-icon {
  stroke: black;
}
.incumbent-badges .aipac-badge.aipac-not-approved {
  background-color: var(--badge-aipac-not-approved);
}
.incumbent-badges .aipac-badge.aipac-not-approved .badge-icon {
  stroke: white;
}
.incumbent-badges .aipac-badge .badge-icon {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

/* Size adjustments for different contexts */
.candidate-card .candidate-incumbent .incumbent-badges {
  font-size: 1.2em;
}

table .incumbent-badges {
  font-size: 1em;
}

/* Organization cards grid styling */
.org-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.org-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
}
.org-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.org-card.coming-soon {
  opacity: 0.6;
  border: 2px dashed #666666;
}
.org-card .org-logo {
  width: 100%;
  max-width: 200px;
  height: auto;
  max-height: 120px;
  margin: 0 auto 1rem;
  object-fit: contain;
}
.org-card .org-blurb {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #1a1a1a;
  text-align: center;
}
.org-card .endorsement-count {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  color: #666666;
  font-weight: 500;
}

/* Enhanced candidate cards styling */
.top-candidates .candidates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.candidate-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-card);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-background-card);
  box-shadow: 0 2px 8px var(--shadow-light);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.candidate-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px var(--shadow-medium);
}
.candidate-card .candidate-image-wrapper {
  position: relative;
}
.candidate-card .candidate-image {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  transition: filter 0.3s ease;
}
.candidate-card .candidate-image:not(.loaded) {
  filter: blur(2px);
}
.candidate-card .candidate-image.loaded {
  filter: none;
}
.candidate-card .candidate-image.placeholder {
  background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
}
.candidate-card .primary-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 60px;
  height: 60px;
  background: var(--color-brand-secondary);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transform: rotate(-8deg);
  z-index: 10;
  padding: 0.5rem;
}
.candidate-card .primary-badge .badge-month {
  font-size: 0.7rem;
  line-height: 1;
  display: block;
}
.candidate-card .primary-badge .badge-year {
  font-size: 0.65rem;
  line-height: 1;
  display: block;
  margin-top: 2px;
}
.candidate-card .candidate-info {
  padding-top: 1.5rem;
}
.candidate-card .candidate-info h3 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
}
.candidate-card .candidate-info h3 a {
  color: var(--color-brand-primary);
  text-decoration: none;
}
.candidate-card .candidate-info h3 a:hover {
  text-decoration: underline;
}
.candidate-card .candidate-info .candidate-notes {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0.5rem 0;
  line-height: 1.4;
}
.candidate-card .candidate-info .candidate-location {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.candidate-card .candidate-info .candidate-incumbent {
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  margin: 0.5rem 0;
}
.candidate-card .candidate-info .candidate-incumbent .party-democrat {
  color: var(--color-party-democrat);
}
.candidate-card .candidate-info .candidate-incumbent .party-republican {
  color: var(--color-party-republican);
}
.candidate-card .endorsement-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 0.5rem;
}
.candidate-card .endorsement-badges .badge {
  width: 100%;
  max-width: 80px;
  min-width: 60px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 6px;
}
.candidate-card .endorsement-badges .badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .endorsement-badges .badge {
    max-width: 56px;
    min-width: 40px;
  }
}
/* Responsive table styling */
.table-container {
  overflow-x: auto;
  margin-top: 2rem;
  box-shadow: 0 2px 8px var(--shadow-light);
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-background-page);
}
table thead {
  background: var(--color-brand-primary);
  color: white;
}
table thead th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
table tbody tr {
  border-bottom: 1px solid var(--color-border-light);
}
table tbody tr:hover {
  background: var(--color-background-card-hover);
}
table tbody tr:last-child {
  border-bottom: none;
}
table tbody td {
  padding: 0.75rem 1rem;
  vertical-align: top;
}
table tbody td.state-cell, table tbody td.date-cell {
  font-weight: 600;
  background: var(--color-table-header-bg);
}
table tbody td.notes-cell {
  font-style: italic;
  color: var(--color-text-secondary);
  max-width: 400px;
  line-height: 1.6;
}
table tbody td.notes-cell strong {
  color: var(--color-text-primary);
  font-weight: 600;
  font-style: normal;
}
table tbody td.endorsements-cell {
  font-size: 0.9rem;
  line-height: 1.6;
}
table tbody td.progressive-incumbent {
  background: var(--color-progressive-incumbent);
}
table tbody {
  /* Party affiliation color coding for incumbents */
}
table tbody .party-democrat {
  color: var(--color-party-democrat);
}
table tbody .party-republican {
  color: var(--color-party-republican);
}
table tbody {
  /* Hidden party indicator - only shown when forced-colors is active */
}
table tbody .party-indicator {
  display: none;
}
table tbody a {
  color: var(--color-link-table);
  text-decoration: none;
}
table tbody a:hover {
  text-decoration: underline;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  table {
    font-size: 0.9rem;
  }
  table thead th,
  table tbody td {
    padding: 0.5rem;
  }
  table tbody td.notes-cell {
    max-width: 250px;
  }
}
/* Table sorting styles */
table.sortable thead th[data-sort] {
  cursor: pointer;
  text-decoration: underline;
  user-select: none;
  position: relative;
}
table.sortable thead th[data-sort]:hover {
  background-color: var(--color-table-header-hover);
}
table.sortable thead th[data-sort].sort-active {
  font-weight: bold;
}

/* Forced colors mode - show party indicators when color differentiation isn't available */
@media (forced-colors: active) {
  table tbody .party-indicator {
    display: inline;
  }
  table tbody .party-democrat,
  table tbody .party-republican {
    color: inherit;
  }
}