/* public/css/print.css
 * Print stylesheet for the NISE Laravel site.
 * Load it AFTER your other CSS so these rules win.
 */
@page { size: A4; margin: 10mm; }

@media print {

  /* --- Page basics --- */
  html, body {
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;   /* keep backgrounds and colours */
    animation: none !important;
    transition: none !important;
  }

  /* --- Hide things that make no sense on paper --- */
  .no-print,
  .back-to-top, #back-to-top, .scroll-top,
  .cookie-banner, .chat-widget, .whatsapp-float,
  .preloader, #preloader, .modal-backdrop,
  .navbar-toggler, .search-box, .social-float {
    display: none !important;
  }

  /* --- Fixed / sticky header should scroll normally --- */
  header, .navbar, .sticky-top, .fixed-top, .header-sticky {
    position: relative !important;
    top: auto !important;
    box-shadow: none !important;
  }

  /* Bootstrap's OWN built-in print stylesheet (bundled in bootstrap.min.css,
     not ours) hides the whole navbar for print — which is why the logo was
     disappearing. Override it back on.

     There is ALSO a second, separate print stylesheet somewhere in the page
     itself (an inline <style> block sitting in the page body, not in this
     file) that does the exact same thing: "header, footer, nav, .navbar,
     .sidebar, .breadcrumb, .no-print, .print-hide, button, .btn, form {
     display: none !important; }". Because it sits later in the page than
     this stylesheet, a plain ".navbar" rule here loses the tie. Using
     "body .navbar" instead gives this rule higher specificity, so it wins
     no matter where in the page the other block sits. This is a workaround,
     not a real fix — see the note sent separately about finding and
     removing that other block, since having two competing print
     stylesheets will keep causing this kind of conflict. */
  body .navbar,
  body header,
  body nav {
    display: block !important;
  }

  /* --- Scroll-reveal libraries (AOS, WOW, ScrollReveal) --- */
  [data-aos], .wow, .animated, .reveal, .fade, .lazy, .lazyload {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* --- Images --- */
  img {
    max-width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    break-inside: avoid;
  }

  /* --- Sliders: un-transform the track so the slide is inside the page --- */
  .slick-track, .swiper-wrapper, .owl-stage, .carousel-inner {
    transform: none !important;
    width: 100% !important;
  }
  .slick-list, .swiper, .swiper-container, .owl-stage-outer {
    overflow: visible !important;
    height: auto !important;
  }

  /* Print ONLY the first/active slide (default).
     To print every slide stacked, delete this block and use the one below. */
  .slick-slide:not(.slick-active),
  .swiper-slide:not(.swiper-slide-active),
  .owl-item:not(.active),
  .carousel-item:not(.active) {
    display: none !important;
  }
  .slick-active, .swiper-slide-active, .owl-item.active, .carousel-item.active {
    display: block !important;
    width: 100% !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
  }

  /* --- Print ALL slides stacked (uncomment to use) ---
  .slick-slide, .swiper-slide, .owl-item, .carousel-item {
    display: block !important;
    width: 100% !important;
    float: none !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    break-inside: avoid;
  }
  */

  /* --- Bootstrap columns: avoid squeezed 12-column layouts on paper --- */
  .container, .container-fluid { width: 100% !important; max-width: 100% !important; }

  /* --- Page-break hygiene --- */
  h1, h2, h3, h4 { break-after: avoid; }
  section, .card, figure, table, tr, blockquote { break-inside: avoid; }

  /* --- Remove the "(URL)" that gets appended after every link ---
     Bootstrap's OWN built-in print stylesheet (bootstrap.min.css, not ours)
     automatically adds the raw href in parentheses after every link and
     abbreviation for print — that's the "(https://...)" text you're seeing
     everywhere. Cancel it back out. */
  a[href]:after,
  abbr[title]:after {
    content: "" !important;
  }

  /* ============================================================
     Revolution Slider (tp-banner / rs-plugin) — the homepage hero
     banner. On screen its slides are stacked with position:absolute
     so only the current one shows; that rule is screen-only, so in
     print the slides fall back to normal block flow and the wrong
     (invisible) one ends up in the visible strip. This re-forces the
     same stacking so the current slide is what actually prints.
     ============================================================ */
  .tp-banner-container, .tp-banner {
    position: relative !important;
    overflow: hidden !important;
  }
  .tp-banner .tp-revslider-mainul {
    position: relative !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  .tp-banner .tp-revslider-slidesli {
    display: none !important;
  }
  /* Show the FIRST slide in the markup, not "whichever one JS has marked as
     current" — that class is added by Revolution Slider's own script a
     moment after page load, so depending on it is a race: print it too soon
     and none of the slides are marked yet, and the banner prints empty.
     :first-child is always there the instant the page exists, no JS needed. */
  .tp-banner .tp-revslider-slidesli:first-child {
    display: block !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .tp-banner .slotholder,
  .tp-banner .tp-bgimg {
    display: block !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
  }
  /* Captions are positioned with JS transforms that don't translate
     to a static printout — hide them so the banner just prints as
     the image. Delete this rule if you want to try printing them. */
  .tp-banner .tp-caption {
    display: none !important;
  }
  /* Prev/Next arrow buttons and the dot navigation are normally
     invisible until you hover them (screen-only CSS). That hidden
     state doesn't carry over to print, so without this they show up
     as stray text/shapes ("Slide 7", "Slide 9", etc.) in the corners
     of the banner. They're navigation controls, not content — hide
     them outright for print. */
  .tp-banner-container .tparrows,
  .tp-banner-container .tp-bullets,
  .tparrows, .tp-bullets {
    display: none !important;
  }
}