/**
 * Print Stylesheet
 * Church Pictorial Directory
 *
 * Optimized print layout for directory pages.
 * Load this stylesheet with media="print" to avoid affecting screen display.
 */

@media print {
  /* =============================================================================
     RESET & BASE
     ============================================================================= */

  /* Use system fonts for faster printing */
  body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11pt;
    line-height: 1.4;
    color: #000;
    background: #fff;
  }

  /* Remove backgrounds and shadows for better printing */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* =============================================================================
     HIDE NON-PRINTABLE ELEMENTS
     ============================================================================= */

  /* Navigation and interactive elements */
  .site-header,
  .mobile-header,
  .dashboard-sidebar,
  .sidebar-overlay,
  .hamburger-btn,
  .skip-link,
  nav,
  .breadcrumb,
  .year-switcher,
  .search-box,
  .search-filters,
  .bulk-actions,
  .pagination,
  .btn,
  button,
  .footer-grid,
  .footer-section,
  .lightbox,
  .fullscreen-viewer,
  .directory-cta,
  [hx-get],
  [hx-post],
  form {
    display: none !important;
  }

  /* Keep forms if explicitly marked for print */
  form.print-visible {
    display: block !important;
  }

  /* =============================================================================
     PAGE SETUP
     ============================================================================= */

  @page {
    size: letter portrait;
    margin: 0.5in;
  }

  /* Avoid breaking inside elements */
  h1, h2, h3, h4, h5, h6,
  img,
  .card,
  .family-card,
  .detail-card {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Start new page before major sections */
  .page-break-before {
    page-break-before: always;
    break-before: page;
  }

  /* =============================================================================
     HEADER
     ============================================================================= */

  .directory-header {
    text-align: center;
    padding: 0 0 0.25in 0;
    border-bottom: 2pt solid #000;
    margin-bottom: 0.25in;
  }

  .directory-header .org-name {
    font-size: 18pt;
    font-weight: bold;
    margin: 0 0 4pt 0;
  }

  .directory-header .subtitle {
    font-size: 11pt;
    color: #333;
    margin: 0;
  }

  .directory-header .last-updated {
    display: none;
  }

  /* =============================================================================
     FAMILY GRID
     ============================================================================= */

  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.15in;
    padding: 0;
  }

  .card {
    display: block !important;
    border: 1pt solid #ccc;
    padding: 6pt;
    text-decoration: none;
    color: #000;
  }

  .card .photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    margin-bottom: 4pt;
  }

  .card .photo-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: #f0f0f0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8pt;
    color: #666;
    margin-bottom: 4pt;
  }

  .card .name {
    font-size: 9pt;
    font-weight: bold;
    margin: 0 0 2pt 0;
    line-height: 1.2;
  }

  .card .children-names {
    font-size: 8pt;
    color: #333;
    margin: 0;
    line-height: 1.2;
  }

  /* =============================================================================
     FAMILY DETAIL (if printed from lightbox)
     ============================================================================= */

  .detail-card {
    max-width: 4in;
    margin: 0 auto;
    border: 1pt solid #ccc;
    padding: 0.15in;
  }

  .detail-card .detail-photo {
    width: 100%;
    max-height: 4in;
    object-fit: contain;
    display: block;
    margin-bottom: 8pt;
  }

  .detail-card .name {
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
    margin: 0 0 4pt 0;
  }

  .detail-card .children {
    font-size: 11pt;
    text-align: center;
    color: #333;
  }

  .detail-card .lightbox-close-btn,
  .detail-card .lightbox-nav-btn,
  .detail-card .fullscreen-btn,
  .detail-card .edition-switcher {
    display: none !important;
  }

  /* =============================================================================
     DASHBOARD TABLES (if printed)
     ============================================================================= */

  .family-table table,
  .directory-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
  }

  .family-table th,
  .family-table td,
  .directory-table th,
  .directory-table td {
    border: 1pt solid #ccc;
    padding: 4pt;
    text-align: left;
  }

  .family-table th,
  .directory-table th {
    background: #f0f0f0 !important;
    font-weight: bold;
  }

  /* Hide checkbox column in print */
  .family-table th:first-child,
  .family-table td:first-child {
    display: none;
  }

  /* Hide actions column in print */
  .family-table th:last-child,
  .family-table td:last-child {
    display: none;
  }

  .family-photo {
    width: 32pt;
    height: 32pt;
    border-radius: 50%;
  }

  /* =============================================================================
     FOOTER
     ============================================================================= */

  .site-footer {
    display: block !important;
    border-top: 1pt solid #ccc;
    padding-top: 8pt;
    margin-top: 0.25in;
    text-align: center;
  }

  .footer-copyright {
    display: block !important;
  }

  .footer-copyright p {
    font-size: 8pt;
    color: #666;
    margin: 0;
  }

  /* =============================================================================
     LINKS
     ============================================================================= */

  /* Show URL after links (optional - can be verbose) */
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #666;
  }

  /* Don't show URL for internal links */
  a[href^="/"]:after,
  a[href^="#"]:after {
    content: "";
  }

  /* =============================================================================
     UTILITIES
     ============================================================================= */

  .print-only {
    display: block !important;
  }

  .no-print {
    display: none !important;
  }

  /* Force black text for readability */
  .text-muted,
  .text-secondary {
    color: #333 !important;
  }
}