/* Mobile-First Responsive Design for LineagePress Person Pages */

/* Base mobile styles (320px and up) */
@media screen and (max-width: 768px) {
  
  /* Container adjustments */
  .hp-individual {
    padding: 10px !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* Header section - stack vertically on mobile */
  .hp-ancestry-header {
    padding: 15px !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
  }

  .ancestry-photo img {
    width: 80px !important;
    height: 100px !important;
  }

  .ancestry-name {
    font-size: 20px !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
  }

  .ancestry-birth, .ancestry-death {
    flex-direction: column !important;
    gap: 5px !important;
    margin-bottom: 8px !important;
  }

  .ancestry-details {
    font-size: 14px !important;
  }

  /* Share buttons - make smaller and center */
  .hp-share-section {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 15px !important;
  }

  .hp-share-section > div {
    display: flex !important;
    gap: 8px !important;
  }

  .hp-share-section a,
  .hp-share-section button {
    width: 36px !important;
    height: 36px !important;
  }

  .hp-share-section svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Tabs - make scrollable horizontally */
  .hp-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    margin: 15px -10px 20px -10px !important;
    padding: 0 10px !important;
  }

  .hp-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .hp-tab-button {
    flex-shrink: 0 !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    min-width: auto !important;
  }

  /* Section containers */
  .section-container {
    margin-bottom: 15px !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }

  .section-title {
    padding: 12px 15px !important;
    font-size: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Tables - convert to mobile-friendly layout */
  .hp-table {
    display: block !important;
    width: 100% !important;
    border: none !important;
  }

  .hp-table thead {
    display: none !important;
  }

  .hp-table tbody {
    display: block !important;
  }

  .hp-table tr {
    display: block !important;
    margin-bottom: 15px !important;
    padding: 15px !important;
    background: #f8f9fa !important;
    border-radius: 6px !important;
    border: 1px solid #e9ecef !important;
  }

  .hp-table tr:last-child {
    margin-bottom: 0 !important;
  }

  .hp-table td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
  }

  .hp-fieldname {
    background: none !important;
    padding: 0 0 5px 0 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #666 !important;
    border-bottom: 1px solid #ddd !important;
    margin-bottom: 8px !important;
  }

  .hp-data {
    background: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Children list - improve mobile readability */
  .hp-children-list {
    padding-left: 15px !important;
  }

  .hp-children-list li {
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
  }

  /* Media grid - optimize for mobile */
  .hp-photos-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
    gap: 10px !important;
    padding: 15px !important;
  }

  .hp-photo-item {
    text-align: center !important;
    max-width: none !important;
  }

  .hp-photo-item img {
    width: 100% !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }

  .hp-photo-title {
    font-size: 11px !important;
    margin-top: 5px !important;
    line-height: 1.2 !important;
  }

  /* Source thumbnails */
  .hp-source-thumbnails {
    justify-content: flex-start !important;
    max-width: none !important;
  }

  .hp-source-thumbnail {
    width: 30px !important;
    height: 30px !important;
  }

  /* Accordion improvements */
  .hp-accordion-btn {
    padding: 12px 15px !important;
    font-size: 14px !important;
    text-align: left !important;
    width: 100% !important;
  }

  .hp-accordion-content {
    margin-top: 0 !important;
    border-top: none !important;
  }

  /* Print button - make more prominent on mobile */
  .hp-print-button-wrapper button {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Back to top button */
  .hp-back-to-top,
  #hp-back-to-top-fse {
    bottom: 15px !important;
    right: 15px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }

  /* Breadcrumbs - make more compact */
  .breadcrumbs {
    font-size: 12px !important;
    margin-bottom: 15px !important;
    padding: 8px 0 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /* Family header improvements */
  .family-header {
    padding: 8px 15px !important;
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }

  /* Timeline mobile optimizations */
  .hp-timeline {
    padding: 15px 0 !important;
  }

  .hp-timeline::before {
    left: 15px !important;
  }

  .hp-timeline-item {
    padding-left: 50px !important;
    margin-bottom: 20px !important;
  }

  .hp-timeline-marker {
    left: 5px !important;
    width: 20px !important;
    height: 20px !important;
    border-width: 2px !important;
  }

  .hp-timeline-icon {
    font-size: 10px !important;
  }

  .hp-timeline-content {
    padding: 12px !important;
    border-radius: 6px !important;
  }

  .hp-timeline-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
  }

  .hp-timeline-header h4 {
    font-size: 14px !important;
  }

  .hp-timeline-date {
    font-size: 11px !important;
    padding: 3px 6px !important;
  }

  /* Form elements for comments/submissions */
  .lp-modal-content {
    margin: 20px !important;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
  }

  .lp-modal-content h2 {
    font-size: 18px !important;
    margin-bottom: 15px !important;
  }

  .lp-modal-content label {
    font-size: 14px !important;
    margin-bottom: 5px !important;
  }

  .lp-modal-content input,
  .lp-modal-content textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px !important;
  }

  .lp-form-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .lp-btn-submit,
  .lp-btn-cancel {
    width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important;
  }

  /* Reports section mobile optimization */
  #lp-report-output {
    padding: 15px !important;
  }

  .lp-report-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .lp-report-controls > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  .lp-report-controls select,
  .lp-report-controls button {
    width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important;
  }

  /* Chart container mobile optimization */
  .hp-chart-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .hp-chart-container svg {
    min-width: 300px !important;
  }

  /* Comments section */
  .hp-comments-list {
    padding: 0 !important;
  }

  .comment {
    margin-bottom: 15px !important;
    padding: 12px !important;
    border-radius: 6px !important;
  }

  .comment-author {
    font-size: 14px !important;
    margin-bottom: 5px !important;
  }

  .comment-content {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .comment-form {
    padding: 15px !important;
  }

  .comment-form input,
  .comment-form textarea {
    width: 100% !important;
    font-size: 16px !important;
    padding: 12px !important;
    border-radius: 6px !important;
  }

  /* Error messages */
  .hp-error {
    padding: 20px 15px !important;
    font-size: 14px !important;
    text-align: center !important;
  }

  /* Loading states */
  .hp-loading {
    text-align: center !important;
    padding: 20px !important;
    font-size: 14px !important;
  }

  /* Utility classes for mobile */
  .mobile-hidden {
    display: none !important;
  }

  .mobile-full-width {
    width: 100% !important;
  }

  .mobile-center {
    text-align: center !important;
  }

  .mobile-stack {
    flex-direction: column !important;
  }

  /* Touch targets - ensure minimum 44px */
  .hp-tab-button,
  .hp-accordion-btn,
  button,
  .hp-share-section a,
  .hp-share-section button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Improve text readability */
  body,
  .hp-individual {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  /* Prevent horizontal scroll */
  .hp-individual,
  .hp-individual * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Improve link targets */
  .hp-individual a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 0 !important;
  }

  /* Media queries for very small screens */
  @media screen and (max-width: 480px) {
    .hp-individual {
      padding: 8px !important;
    }

    .ancestry-name {
      font-size: 18px !important;
    }

    .section-title {
      font-size: 15px !important;
      padding: 10px 12px !important;
    }

    .hp-tab-button {
      padding: 8px 12px !important;
      font-size: 12px !important;
    }

    .hp-photos-grid {
      grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
      gap: 8px !important;
    }

    .hp-photo-item img {
      height: 60px !important;
    }
  }

  /* Landscape orientation adjustments */
  @media screen and (max-width: 768px) and (orientation: landscape) {
    .hp-ancestry-header {
      flex-direction: row !important;
      text-align: left !important;
      padding: 15px 20px !important;
    }

    .ancestry-info {
      margin-left: 20px !important;
    }

    .ancestry-birth,
    .ancestry-death {
      flex-direction: row !important;
      gap: 12px !important;
    }
  }
}

/* Tablet adjustments (769px to 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .hp-individual {
    padding: 20px !important;
  }

  .hp-ancestry-header {
    padding: 25px 40px !important;
  }

  .section-title {
    font-size: 17px !important;
  }

  .hp-photos-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  }
}

/* High DPI displays */
@media screen and (-webkit-min-device-pixel-ratio: 2), 
       screen and (min-resolution: 192dpi) {
  .hp-source-thumbnail,
  .hp-photo-item img {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }
}

/* Dark mode support for mobile */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
  .hp-individual {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .section-container {
    background: #2d2d2d !important;
    border-color: #404040 !important;
  }

  .section-title {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
  }

  .hp-table tr {
    background: #2d2d2d !important;
    border-color: #404040 !important;
  }

  .hp-fieldname {
    color: #b0b0b0 !important;
    border-color: #404040 !important;
  }

  .hp-data {
    color: #e0e0e0 !important;
  }
}

/* Accessibility improvements for mobile */
@media screen and (max-width: 768px) {
  /* Focus indicators */
  .hp-tab-button:focus,
  .hp-accordion-btn:focus,
  button:focus,
  a:focus {
    outline: 2px solid #007cba !important;
    outline-offset: 2px !important;
  }

  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    .hp-tab-button,
    .hp-accordion-btn,
    .hp-share-section a,
    .hp-share-section button,
    .hp-back-to-top {
      transition: none !important;
      animation: none !important;
    }
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .hp-individual {
      border: 2px solid !important;
    }

    .section-container {
      border: 2px solid !important;
    }

    .hp-tab-button.active {
      border: 3px solid #007cba !important;
    }
  }
}