/**
 * Mobile-first polish for voter portal (phones are the primary device).
 * Loaded after voter-layout.css and voter-components.css.
 */

/* Prevent horizontal scroll on narrow phones */
html:has(body.voter-page) {
  overflow-x: hidden;
}

body.voter-page {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Slightly tighter shell on small screens (iPhone SE / 13 mini) */
@media (max-width: 430px) {
  .voter-shell {
    width: calc(100% - 0.75rem);
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
  }

  .voter-header,
  .voter-steps,
  .voter-hero,
  .voter-content,
  .voter-shell > .footer,
  .voter-shell > .site-footer,
  body.voter-page > .site-footer {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
}

/* iOS: 16px+ inputs avoid auto-zoom on focus */
body.voter-page input.form-control,
body.voter-page select.form-select,
body.voter-page textarea.form-control,
body.voter-page .choices__inner {
  font-size: 16px !important;
}

/* Comfortable tap targets (WCAG ~44px) */
body.voter-page .btn,
body.voter-page .category-card,
body.voter-page .proceed-button,
body.voter-page .voter-modal .btn {
  min-height: 44px;
}

body.voter-page .btn-sm {
  min-height: 40px;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

body.voter-page .form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
}

body.voter-page .form-check-label {
  padding-left: 0.35rem;
  line-height: 1.45;
}

/* Step indicator — readable on narrow screens */
@media (max-width: 400px) {
  .voter-steps li {
    font-size: 0.72rem;
    padding: 0.35rem 0.55rem;
    gap: 0.35rem;
  }

  .voter-steps li span.step-num {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.65rem;
  }
}

/* Hero & category switcher */
.voter-hero--vote .category-switcher-wrap,
.voter-hero .form-select {
  width: 100%;
  max-width: 100%;
}

.voter-hero h1 {
  font-size: clamp(1.05rem, 4.5vw, 1.5rem);
  line-height: 1.25;
  word-break: break-word;
}

/* Vote page controls — stack full-width buttons */
@media (max-width: 767.98px) {
  .voter-controls-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .voter-controls-bar .btn,
  .voter-controls-bar a.btn {
    width: 100%;
    justify-content: center;
  }

  .voter-controls-bar #submitVoteBtn {
    min-width: 0;
    order: 3;
  }

  #pageControls.voter-page-nav {
    flex-direction: column;
    gap: 0.5rem;
  }

  #pageControls.voter-page-nav .btn {
    width: 100%;
  }

  .voter-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .voter-toolbar .btn {
    width: 100%;
  }
}

/* Question cards — single column, no horizontal squeeze */
@media (max-width: 767.98px) {
  .voter-question-card {
    padding: 1rem !important;
  }

  .voter-question-card > .form-label.fw-bold {
    padding-right: 0;
    font-size: 1rem;
  }

  .voter-question-card .row.g-2 > [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .voter-question-card .open-text-pair {
    flex-direction: column;
    gap: 0.75rem;
  }

  .voter-question-card .open-text-field .form-control {
    min-height: 44px;
  }

  .voter-question-card .view-business-btn,
  .voter-question-card .view-choice-media-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .voter-question-card .choices,
  .voter-question-card .choices__inner {
    max-width: 100%;
  }
}

/* Modals — fit phone height, scroll inside */
@media (max-width: 576px) {
  .voter-modal .modal-dialog {
    margin: 0.65rem;
    max-width: calc(100% - 1.3rem);
  }

  .voter-modal .modal-dialog-scrollable .modal-body {
    max-height: min(70vh, calc(100dvh - 12rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .voter-modal .modal-footer {
    flex-direction: column;
    gap: 0.5rem;
  }

  .voter-modal .modal-footer .btn {
    width: 100%;
    margin: 0;
  }

  #voterConfirmModal .modal-footer,
  #confirmSignOutModal .modal-footer {
    flex-direction: column;
    justify-content: flex-start;
  }

  #mobileResultModal .modal-dialog {
    margin: 0.75rem;
  }
}

/* reCAPTCHA — allow horizontal scroll if widget wider than screen */
#recaptchaContainer,
#forgotRecaptchaContainer {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Toasts — readable width on phones */
body.voter-page .toast-container {
  width: calc(100% - 1.5rem);
  max-width: 24rem;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  padding-top: max(0.75rem, env(safe-area-inset-top));
}

body.voter-page .toast {
  width: 100%;
  font-size: 0.9375rem;
}

/* Summary accordion — keep bars off the chevron on phones */
@media (max-width: 767.98px) {
  #summaryContainer .accordion-button {
    padding: 0.9rem 2.6rem 1.05rem 1rem !important;
    align-items: flex-start;
    overflow: visible;
  }

  #summaryContainer .accordion-button::after {
    right: 0.7rem;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
  }

  #summaryContainer .accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(-180deg);
  }

  #summaryContainer .summary-button-content {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
  }

  #summaryContainer .category-title {
    white-space: normal !important;
    text-align: left !important;
    margin: 0 !important;
    padding-right: 0;
    line-height: 1.3;
  }

  #summaryContainer .summary-progress-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible;
  }

  #summaryContainer .accordion-button .progress,
  #summaryContainer .summary-button-content .progress {
    width: 100% !important;
    max-width: 100% !important;
    height: 8px !important;
  }

  #summaryContainer .accordion-button .progress-bar {
    height: 100% !important;
    line-height: 8px !important;
  }

  #summaryContainer .summary-progress-label {
    display: block;
    margin: 0.4rem 0 0;
    padding-bottom: 0.1rem;
    font-size: 0.75rem;
    line-height: 1.4;
    overflow: visible;
    white-space: normal;
  }
}

/* Summary rows — stack actions */
@media (max-width: 575.98px) {
  .summary-row {
    flex-direction: column;
    align-items: stretch !important;
    text-align: left !important;
  }

  .summary-row-actions {
    width: 100%;
  }

  .summary-row-actions .btn {
    flex: 1 1 auto;
    min-width: calc(50% - 0.25rem);
  }

  .summary-overview {
    gap: 0.5rem;
  }

  .summary-stat {
    padding: 0.75rem 0.5rem;
  }
}

/* Category pick cards — full width tap area */
.category-card {
  min-height: 3.5rem;
}

/* Safe area for sticky bars */
@media (max-width: 767.98px) {
  .qr-bottom-bar,
  .summary-actions-bar {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
}

/* Reduce hover lift on touch devices */
@media (hover: none) {
  .category-card:hover,
  .voter-question-card:hover,
  .question-entry:hover {
    transform: none;
  }
}