/* Performance Optimization CSS - Lighthouse Fixes */

/* Font Size Improvements - Target 60%+ legible text */
/* Increase small text to meet 12px minimum for legibility */

body {
  font-size: 16px; /* Base font size for better readability */
}

/* Card content font sizes */
.card-content p,
.card-content .title p {
  font-size: 14px !important; /* Up from 0.7-0.8rem */
  line-height: 1.5;
}

.card-content h6,
.card-content .title h6 {
  font-size: 16px !important; /* Up from 0.95rem */
  line-height: 1.4;
}

/* Widget text improvements */
.widget-content,
.widget-content p {
  font-size: 14px !important;
}

/* Author card text */
.author-card__meta,
.author-card p {
  font-size: 14px !important;
}

/* State relatives text */
.state-relatives__body p {
  font-size: 14px !important;
}

/* Birthday card text */
.birthday-badge {
  font-size: 13px !important;
}

/* Rep highlight text */
.rep-highlight span,
.rep-highlight__label {
  font-size: 13px !important;
}

/* Eyebrow text (small labels) */
.eyebrow,
.rep-hero__eyebrow,
.author-hero__eyebrow {
  font-size: 13px !important;
}

/* General small text improvements */
.rep-hero__tags li,
.author-card__cta {
  font-size: 14px !important;
}

/* Summary and description text */
.rep-hero__summary,
.author-hero__summary,
.author-entry p {
  font-size: 15px !important;
  line-height: 1.6;
}

/* Tap Target Improvements - Minimum 48x48px for mobile */

/* Button tap targets */
.btn,
.btn-flat,
.rep-action,
button,
.button {
  min-height: 48px !important;
  min-width: 48px !important;
  padding: 12px 24px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Filter buttons */
.filters .button,
.filters .party-btn,
.button-group button {
  min-height: 44px !important;
  padding: 10px 20px !important;
  margin: 4px !important;
}

/* Card links - entire card clickable */
.card a,
.author-card__link,
.state-relatives__link {
  min-height: 48px !important;
  display: block;
}

/* Navigation links */
nav a,
.nav-link,
.sidenav-link {
  min-height: 48px !important;
  display: flex;
  align-items: center;
  padding: 12px 16px !important;
}

/* Share buttons */
.rep-share-card button,
[data-share-url] {
  min-height: 48px !important;
  min-width: 48px !important;
  padding: 12px !important;
}

/* Pagination buttons */
[data-dir="prev"],
[data-dir="next"],
.pagination button {
  min-height: 48px !important;
  min-width: 48px !important;
  padding: 12px 20px !important;
}

/* Font resize controls */
#fontResizeControls button {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 10px !important;
  margin: 4px !important;
}

/* PWA install button */
#pwa-install-banner button {
  min-height: 44px !important;
  padding: 10px 20px !important;
}

/* Mobile touch target spacing */
@media (max-width: 768px) {
  /* Increase spacing between tap targets */
  .card {
    margin-bottom: 16px !important;
  }
  
  .filters .button,
  .filters .party-btn {
    margin: 6px !important;
  }
  
  /* Ensure links have adequate spacing */
  nav a,
  .sidenav a {
    margin: 4px 0 !important;
  }
  
  /* Mobile font size adjustments */
  body {
    font-size: 16px !important; /* Prevent zoom on input focus */
  }
  
  .card-content p {
    font-size: 15px !important;
  }
  
  .card-content h6 {
    font-size: 17px !important;
  }
}

/* Ensure all interactive elements are accessible */
a, button, input, select, textarea, [role="button"] {
  touch-action: manipulation; /* Prevent double-tap zoom delay */
}

/* Improve focus states for accessibility */
a:focus,
button:focus,
input:focus,
select:focus {
  outline: 3px solid #a9007a;
  outline-offset: 2px;
}

/* Ensure sufficient contrast for text */
.card-content,
.widget-content,
.author-card,
.state-relatives__card {
  color: #333 !important;
}