@page {
  size: auto;
  margin: 0;
}

@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
  }
  html,
  body,
  .container,
  .content,
  .homepage-stats,
  section,
  div {
    margin: 5px !important;
    padding: 2px !important;
    box-shadow: none !important;
  }
  /* Hide navigation, footer, and elements explicitly marked as no-print */
  .no-print,
  nav,
  footer,
  .print-hidden {
    display: none !important;
  }

  /* Hide link URLs after anchor text in print */
  a[href]::after {
    display: none !important;
    content: none !important;
  }

  /* Show only print-specific elements */
  .print-only {
    display: block !important;
  }

  /* Show .mobile-menu-2 only in print */
  .mobile-menu-2 {
    display: block !important;
  }
  /* Hide .mobile-menu-2 in all other cases (web) */
  @media screen {
    .mobile-menu-2 {
      display: none !important;
    }
  }

  /* Show the entire .top-header in print */
  .top-header {
    display: block !important;
    visibility: visible !important;
  }

  /* Keep stat cards and president's message together in print */
  .print-stats-message-group,
  .stats-message-group {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    display: block !important;
    width: 100% !important;
  }
  .stats,
  .stat {
    break-after: avoid !important;
    page-break-after: avoid !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    margin-bottom: 0 !important;
  }
  .president-message-section {
    break-before: avoid !important;
    page-break-before: avoid !important;
    margin-top: 0 !important;
  }

  /* Restrict logo sizes in print */
  #emblem-image,
  #emblem-image1,
  .PCI_logo_2,
  .PCI_logo_1,
  .pci-logo,
  .top-header-logo,
  .pci1img,
  .pci2img {
    max-width: 120px !important;
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
  }
/* Restrict logo sizes in print */

.psdimg {
  max-width: 320px !important;
  width: auto !important;
  height: auto !important;
}

  /* Each section prints on a new page, except the last one */
  .section,
  .print-section {
    page-break-after: always;
    break-after: page;
  }
  .section:last-child,
  .print-section:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /* Preserve Tailwind backgrounds and colors for print */
  html,
  body,
  [class*="bg-"],
  [class*="text-"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Use system-ui font to match Tailwind's default */
  body {
    font-family: ui-sans-serif, system-ui, sans-serif;
    color: inherit;
    background: inherit !important;
  }

  /* Images: keep responsive and rounded corners */
  img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: inherit !important;
    box-shadow: none !important;
  }

  /* President's image block: float right, margin, max-width for print */
  .president-image-print,
  .president-image-block {
    float: right !important;
    margin-left: 2rem !important;
    margin-bottom: 1rem !important;
    max-width: 320px !important;
    width: 40% !important;
    display: block !important;
  }

  /* Remove all box/text shadows for clarity */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Links: keep color and underline */
  a {
    color: inherit !important;
    text-decoration: underline;
  }

  /* Buttons: print as normal blocks, not hidden */
  button,
  .header-action-btn {
    display: inline-block !important;
    background: #2563eb !important; /* Tailwind blue-600 */
    color: #fff !important;
    border-radius: 0.375rem !important; /* Tailwind rounded-md */
    padding: 0.5rem 1.5rem !important;
    font-size: 1rem !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Prevent stat-value/count from expanding to full width in print and add margin */
  .stat-value,
  .count {
    display: inline-block !important;
    max-width: 8rem !important;
    width: auto !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
  }

  /* Remove page breaks unless explicitly set */
  .break-before-page {
    page-break-before: always;
  }
  .break-after-page {
    page-break-after: always;
  }

  /* Tables: keep Tailwind look */
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th,
  td {
    border: 1px solid #e5e7eb; /* Tailwind gray-200 */
    padding: 8px;
  }

  .print-position-stats {
    position: initial !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    z-index: auto !important;
    box-shadow: none !important;
    background: #222 !important;
    padding: 0 !important;
  }

  /* Make state list images smaller in print */
  #carousel li img {
    max-height:350px !important;
    width: auto !important;
    height: 150px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Force all 5 app cards in a single row for print */
  .group[data-spotlight], .max-w-sm.mx-auto.grid, .dashboard-row.cards-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: .5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .group[data-spotlight] > div,
  .max-w-sm.mx-auto.grid > div,
  .dashboard-row.cards-row > div {
    min-width: 120px !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Apply grid to the main gallery container for print using attribute selector for special Tailwind classes */
  #image-gallery-section [class*='lg:w-[90%]'][class*='flex-wrap'] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #image-gallery-section img {
    max-width: 100% !important;
    height: auto !important;
    min-width: 80px !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    display: block !important;
    margin: 0 auto !important;
  }
}