/* ==========================================================================
   First American Entitlement Services - MOBILE STYLES
   Mobile Viewports (width < 768px) & iOS Safe Optimizations
   ========================================================================== */

/* Prevent iOS Auto-Zoom on Input Focus */
@media -webkit-min-device-pixel-ratio-0 {
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px !important;
  }
}

@media (max-width: 767px) {
  /* Header & Navigation */
  .site-header {
    height: 60px;
  }

  .header-inner {
    padding: 0 16px;
    height: 60px;
  }

  .brand-link {
    font-size: 1.05rem;
  }

  .brand-icon {
    font-size: 1.15rem;
  }

  .env-tag {
    font-size: 0.65rem;
    padding: 1px 6px;
  }

  .nav-list {
    flex-wrap: wrap;
    gap: 4px;
  }

  .nav-link {
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  /* Main Layout */
  .main-content {
    padding: 16px 14px 40px;
  }

  /* Full Stack Single Column */
  .content-columns,
  .explorer-layout,
  .docs-grid,
  .metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Hero Section */
  .hero-section {
    padding: 20px 0 16px;
  }

  .hero-title {
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
  }

  .hero-subtitle {
    font-size: 0.95rem !important;
    margin-bottom: 18px;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  /* Cards & Spacing */
  .card {
    padding: 16px;
    border-radius: var(--radius-sm);
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .card-title {
    font-size: 1.05rem;
  }

  /* Metric Card */
  .metric-card {
    padding: 16px;
  }

  .metric-value {
    font-size: 1.5rem;
  }

  /* API Explorer Elements */
  .request-bar {
    flex-direction: column;
    gap: 8px;
  }

  .method-badge-display {
    width: fit-content;
    padding: 6px 12px;
  }

  .url-input-container {
    width: 100%;
  }

  .url-prefix {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .url-input {
    padding: 8px 10px;
    font-size: 0.85rem;
  }

  .response-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Modals on Mobile (Near Full Screen) */
  .modal-overlay {
    padding: 12px;
    align-items: flex-end;
  }

  .modal-card {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-header {
    padding: 14px 16px;
  }

  .modal-body {
    padding: 16px;
    gap: 12px;
  }

  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }

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

  /* Tables: Horizontal Scroll with momentum */
  .table-wrapper {
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
  }

  .data-table th,
  .data-table td {
    padding: 10px 10px;
    font-size: 0.825rem;
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 20px 16px;
  }

  .footer-badges {
    justify-content: center;
  }

  /* Safe Area for Mobile Devices */
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* ==========================================================================
     Homepage Mobile Specific Refinements (width < 768px)
     ========================================================================== */
  
  /* Hero buttons on mobile: full width, easy tap targets */
  #step1Grid,
  #step2FilingAgeGrid,
  #step2FamilyGrid,
  #step2WorkingGrid,
  #step2IrmaaGrid,
  #step2PensionGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero-btn {
    min-height: 52px !important;
    padding: 14px 16px !important;
    font-size: 0.95rem !important;
  }

  /* Services 3-card stack on mobile */
  #servicesCardsGrid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Membership Issues vs. Benefits on mobile */
  #membershipIssuesVsBenefitsGrid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  #cardSeniorsIssues,
  #cardMembershipBenefits {
    padding: 20px !important;
  }

  /* Partner badges on mobile: 1 column clean stack */
  #badgesPartnersGrid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #badgesPartnersGrid > div {
    grid-column: span 1 !important;
    max-width: 100% !important;
  }

  /* Process Steps on Mobile: 1 column */
  #processStepsGrid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Who We Serve on Mobile: 1 column */
  #whoWeServeGrid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #cardServeFirstResponders {
    grid-column: span 1 !important;
    max-width: 100% !important;
  }

  /* News and videos on mobile: 1 column */
  #latestNewsArticlesGrid,
  #latestNewsVideosGrid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Video modal sizing on mobile */
  #ssaVideoModal > div {
    max-width: 95vw !important;
    padding: 14px !important;
    border-radius: 1.25rem !important;
  }

  /* Resources on mobile: 1 column */
  #resourcesGrid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Boundaries Section on Mobile */
  #boundariesCardsCol {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Calculator on mobile */
  #calcMainGrid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  #calcSlidersCol {
    padding: 18px !important;
  }
}