/**
 * A4 print stylesheet for vca.nu
 *
 * Screen media queries hide the off-canvas mobile nav; those rules do not apply
 * in print, so the full menu, header, footer and cookie bar used to dump onto paper.
 */

@page {
  size: A4;
  margin: 12mm 12mm 14mm 12mm;
}

@media screen {
  /* Ticket 2026-VCANU-034: rechtsboven, groter en VCA-groen. Bovenaan de pagina
     staat de knop onder header + menu (zoekbalk en vlaggen blijven vrij); zodra
     het menu plakt (.sticky van het theme) schuift hij mee tot net onder die balk. */
  .vca-print-page {
    position: fixed;
    top: 212px;
    right: 20px;
    bottom: auto;
    z-index: 9998;
    background: #95c11f;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 14px 24px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    transition: top 0.2s ease, background-color 0.15s ease;
  }

  body:has(.nav--main__wrapper.sticky) .vca-print-page {
    top: 68px;
  }

  .admin-bar .vca-print-page {
    top: 244px;
  }

  body.admin-bar:has(.nav--main__wrapper.sticky) .vca-print-page {
    top: 100px;
  }

  .vca-print-page:hover,
  .vca-print-page:focus {
    background: #7da318;
    color: #fff;
  }

  .vca-print-page:focus-visible {
    outline: 3px solid #4f6a0c;
    outline-offset: 2px;
  }

  @media (max-width: 600px) {
    .vca-print-page {
      right: 12px;
      padding: 11px 18px;
      font-size: 15px;
    }
  }

  .vca-print-source {
    display: none;
  }
}

@media print {
  html,
  body {
    background: #fff !important;
    color: #111 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .pace,
  noscript,
  #wpadminbar,
  .navigation--mobile,
  .navigation--main,
  nav.navigation,
  header.header,
  .header,
  .header-2023,
  .site-header,
  .site-header__branding,
  .header-bar-container,
  .js-nav-trigger,
  .nav-top-separator,
  .socialmedia_heading,
  .handmade_menu,
  .heading--main,
  .site__stats,
  .back-to-top,
  footer.site__footer,
  .footer__sidebar,
  .footer__copyright,
  .cky-consent-container,
  .cky-overlay,
  .cky-btn-revisit-wrapper,
  .cky-modal,
  .cky-preference-center,
  .cky-revisit-hide,
  .vca-print-page,
  .grecaptcha-badge,
  div:has(> .grecaptcha-badge),
  .language-switcher {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #page,
  .wrapper,
  .layout--boxed .wrapper,
  .container,
  .container--main,
  .grid,
  .grid__item,
  .main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    position: static !important;
    overflow: visible !important;
  }

  /* The theme's .grid__item is inline-block. Chrome treats that as one unbreakable box
     and slices its content at the page edge, cutting screenshots in half (2026-VCANU-034).
     As a normal block the content flows across pages and the rules below keep images whole. */
  .grid > .grid__item,
  .grid__item {
    display: block !important;
  }

  img,
  figure,
  .wp-caption,
  .wp-block-image,
  p:has(> img),
  p:has(> a > img),
  p:has(> strong > img) {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .post-article img,
  .article__content img,
  .entry-content img {
    max-height: 230mm !important;
    width: auto !important;
    object-fit: contain;
  }

  /* Do not keep a whole article on one sheet: that creates a blank A4 when it overflows. */
  article,
  .post-article {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  .image-wrap {
    float: none !important;
    padding: 0 0 0.8em !important;
    width: 100% !important;
  }

  .image-wrap img {
    max-height: 70mm !important;
    width: auto !important;
    max-width: 100% !important;
  }

  img,
  video {
    max-width: 100% !important;
    height: auto !important;
  }

  iframe,
  video,
  .wp-video,
  .wp-block-video,
  .wp-block-embed,
  .mejs-container {
    display: none !important;
  }

  a[href]::after {
    content: none !important;
  }

  h1,
  h2,
  h3,
  h4,
  .article__title {
    page-break-after: avoid;
    break-after: avoid-page;
  }

  .article--grid,
  .overzichtspagina-chip,
  figure,
  .image-wrap {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .article__title,
  .article__title--single {
    font-size: 22pt !important;
    line-height: 1.25 !important;
  }

  .vca-handleiding-print {
    font-size: 11pt;
    line-height: 1.45;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .vca-print-source {
    display: block !important;
    margin-top: 18px;
    font-size: 9pt;
    color: #444;
  }

  /* Child handleiding pages: hide the related-card grid; keep it on the overview. */
  .vca-handleiding-print:not(.vca-handleiding-overview) .overzichtspaginas-related {
    display: none !important;
  }

  /* News-style handleiding pages (e.g. TopVacatures): no sidebar, tags, related. */
  .vca-handleiding-print .sidebar,
  .vca-handleiding-print #nieuwsbrief,
  .vca-handleiding-print .widget_nieuwbrief,
  .vca-handleiding-print #contactpersoon,
  .vca-handleiding-print .yarpp,
  .vca-handleiding-print .yarpp-related,
  .vca-handleiding-print .article__meta,
  .vca-handleiding-print .article--single__meta,
  .vca-handleiding-print .addthis_sharing_toolbox {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  /* Expand FAQ accordion answers so print is not just the closed titles. */
  .wpsm_panel-collapse,
  .wpsm_panel-collapse.collapse {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .wpsm_panel {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}