/**
 * print-event.css
 * ==========================================================
 * Styles specifically tailored for printing a single event page (`single-dig_event.php`).
 *
 * Purpose:
 * - Optimize content for readability on paper.
 * - Remove non-essential interactive elements (menus, buttons, sidebars, footer, etc.).
 * - Ensure important information (title, date, time, location, description, gallery) is presented clearly.
 * - Control page layout, margins, and potential page breaks.
 * - Format the event gallery into a responsive 3-column layout using Flexbox (v2) for print compatibility.
 *
 * Usage:
 * This stylesheet should be registered and enqueued conditionally ONLY when viewing
 * a single 'dig_event' post type, specifically for the 'print' media type.
 *
 * @package   Digentus\Events\Print\CSS
 * @author    Pedro Rodriguez <prodriguezuci@gmail.com> // Replace with actual email
 * @copyright Copyright (c) 2024-2025 // Update year if needed
 * @license   GPL-2.0-or-later
 * @link      https://digentus.com // Replace with actual plugin URI
 * @since     5.0.z | Gallery layout updated to Flexbox (v2) 5.2.x
 */

/* ==========================================================================
   1. Page Setup & Margins (@page rule)
   ========================================================================== */
@page {
  margin: 1.5cm;
  size: auto;
  margin-footer: 0;

  @bottom-center {
    content: "Page " counter(page);
    font-size: 9pt;
    color: #555;
    text-align: center;
    vertical-align: top;
    padding-top: 0.5cm;
  }
}

/* ==========================================================================
   2. Media Print Block - Contains all print-specific overrides
   ========================================================================== */

@media print {
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .dig-event-single-view::after {
    content: "";
    display: table;
    clear: both;
  }

  .dig-event-thumbnail {
    float: right;
    margin: 0.5em 0 1em 1.5em;
    /* Agregar esto: */
    max-height: 300px; /* Limitar altura máxima */
  }

  * {
    max-height: none !important;
    box-sizing: border-box !important;
  }

  /* --- 2.1 Global Resets & Base Styles for Print --- */
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.4;
    orphans: 3;
    widows: 3;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .dig-event-single-view {
    age-break-inside: avoid;
    page-break-after: avoid;
    height: auto !important;
    min-height: 0 !important;
  }

  /* --- 2.2 Reset Main Theme/Content Containers --- */
  body,
  #page,
  #content,
  #primary,
  .site-content,
  #main,
  .site-main,
  .dig-event-single-main,
  article.dig-event-single-view {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    float: none !important;
    box-sizing: border-box !important;
    position: static !important;
    display: block !important;
  }
  .entry-content {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  /* --- 2.3 Hide Unwanted Elements --- */
  #secondary,
  .sidebar,
  header.site-header,
  footer.site-footer,
  nav,
  .nav-links,
  .nav-menu,
  .navigation,
  .main-navigation,
  .primary-navigation,
  .footer-navigation,
  .jet-menu,
  [data-elementor-post-type="jkit-header"],
  .comment-respond,
  .comments-area,
  .dig-event-back-button-wrapper,
  .dig-event-item-actions,
  #wpadminbar,
  [data-elementor-type="header"],
  [data-elementor-type="footer"],
  .elementor-location-footer,
  .main-footer,
  .footer-widgets,
  .footer-bar,
  #footer,
  .social-links,
  .social-icons,
  .elementor-location-footer,
  .elementor-section-wrap:not(:has(article.dig-event-single-view)),
  .elementor-container:empty,
  .main-footer,
  #comments,
  .comments-area,
  .comment-respond,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  iframe,
  script,
  style,
  .screen-reader-text {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px;
  }

  /* --- 2.4 Header Area Styling --- */
  .dig-event-single-view .entry-header {
    position: relative;
    padding: 0 0 0.5em 0;
    margin: 0 0 1.5em 0;
    border-bottom: 1px solid #ccc;
    page-break-after: avoid;
    width: 100%;
    box-sizing: border-box;
  }
  /* --- 2.5 QR Code Styling --- */
  .dig-event-qr-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 65px;
    height: auto;
    z-index: 10;
    page-break-inside: avoid;
  }
  .dig-event-qr-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #eee;
  }
  /* --- 2.6 Title Styling --- */
  .dig-event-single-view .entry-title {
    font-size: 18pt;
    font-weight: bold;
    margin: 0 80px 0.4em 0;
    padding: 0;
    display: block;
    page-break-after: avoid;
    color: #000;
    width: auto;
  }
  /* --- 2.7 Metadata Styling --- */
  .entry-meta.dig-single-event-meta {
    font-size: 10pt;
    color: #333;
    border-bottom: none !important;
    padding: 0;
    margin: 0.5em 80px 0 0;
    display: block;
    line-height: 1.6;
    width: auto;
  }
  .entry-meta.dig-single-event-meta span {
    display: inline-block;
    margin-right: 1.5em;
    margin-bottom: 0.3em;
    white-space: normal;
  }
  .entry-meta.dig-single-event-meta .dashicons {
    vertical-align: middle;
    margin-right: 0.2em;
    font-size: 1.2em;
  }
  /* --- 2.8 Featured Image (Thumbnail) Styling --- */
  .dig-event-thumbnail {
    max-width: 45% !important;
    height: auto !important;
    float: right;
    margin: 0.5em 0 1em 1.5em !important;
    border: 1px solid #eee;
    display: block;
    page-break-inside: avoid;
    max-height: 250px !important;
  }
  /* --- 2.9 General Text & Link Styling --- */
  p,
  li {
    margin-bottom: 1em;
    line-height: 1.4;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
    color: #000;
    margin-top: 1.5em;
    margin-bottom: 0.6em;
    font-weight: bold;
  }
  a {
    color: #000 !important;
    text-decoration: none !important;
  }
  a[href]::after {
    content: "" !important;
    display: none !important;
  }

  /* --- 2.10 Event Gallery Styling for Print (Using Flexbox - v2 Attempt) --- */
  .dig-event-single-gallery {
    page-break-before: auto;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 1em !important;
  }
  .dig-event-single-gallery h3 {
    font-size: 14pt;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.3em;
    margin-bottom: 1em;
    page-break-after: avoid;
  }

  /* --- Flexbox Layout for the Gallery List --- */
  ul.dig-gallery-image-list {
    display: flex; /* Use Flexbox */
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: flex-start; /* Align items to the left */
    align-items: flex-start; /* Align items to the top */
    margin: 0 -5px; /* Negative margin to counteract padding on items */
    padding: 0;
    list-style: none;
    width: 100%;
  }

  /* Gallery List Items */
  ul.dig-gallery-image-list li {
    flex: 0 0 calc(33.333% - 10px); /* Resta el padding horizontal total */
    padding: 0 5px 10px 5px;
    margin: 0;
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* --- END FLEXBOX v2 --- */

  /* Gallery Image Styling */
  ul.dig-gallery-image-list img {
    display: block;
    width: 100%; /* Image fills the LI container */
    max-width: 100%; /* Ensure image doesn't exceed container */
    height: 200px; /* Maintain aspect ratio */
    /*border: 1px solid #ccc;*/
    box-shadow: none;
    object-fit: cover;
  }
  /* Gallery Link Styling */
  ul.dig-gallery-image-list a {
    display: block; /* Make link wrap the image */
  }
  /* Hide Printed URLs for Gallery Links */
  ul.dig-gallery-image-list li a::after {
    content: "" !important;
    display: none !important;
  }

  /* --- 2.11 Meta Handling for Print (if using screen-only/print-only spans) --- */
  .entry-meta.dig-single-event-meta .screen-only {
    display: none !important;
    visibility: hidden;
  }
  .entry-meta.dig-single-event-meta .print-only {
    display: inline !important;
    visibility: visible !important;
    text-decoration: none !important;
    color: inherit !important;
    border-bottom: none !important;
  }

  /* --- 2.12 Page Break Control --- */
  /*
   * This rule targets the main article container of the event.
   * By setting 'page-break-after' to 'avoid', we suggest to the browser
   * that it should not create a page break right after our content finishes,
   * which often solves the blank page issue.
  */
  article.dig-event-single-view {
    page-break-inside: avoid;
    page-break-after: avoid;
    max-height: none !important;
    overflow: visible !important;
  }

  .entry-content > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /*
   * Additionally, let's find any large empty spaces that might be left
   * by hidden elements and collapse them.
  */
  div:empty,
  section:empty {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* --- 2.13 Final Blank --- */
  /*
   * This is the definitive solution to eliminate the final blank page.
   * It aggressively resets the height, min-height, and bottom spacing of
   * all major layout containers, overriding any screen styles (like min-height: 100vh)
   * that would otherwise force a page break.
  */
  html,
  body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /*
   * Also reset all potential theme wrappers.
  */
  #page,
  #content,
  #primary,
  .site-content,
  main,
  .site-main,
  article.dig-event-single-view {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
} /* End @media print */