/**
 * @file
 * Document print blocks.
 *
 * One section per block key in
 * \Drupal\dgcoks_county_document\PrintStyle\PrintBlockRegistry, switched on
 * by a print-block--{key} class on the document's <article>. Read the
 * registry's accessibility guardrails before adding a block. Page-level
 * rules (@page) can't be scoped by class; they go in a separate library
 * named by the block's registry 'library' entry.
 *
 * Every rule is prefixed body.document-print, the marker class
 * (PrintBlockRegistry::MARKER_CLASS) on the <body> of every bundle in
 * PrintBlockRegistry::BUNDLES. Like the old body.node--type-county-document
 * prefix it is one element and one class, so specificity is unchanged and
 * these rules still outrank the theme's document print rules (dougcty_theme
 * css/content/document-print-base.css and the "Print layout" section of
 * css/content/node-county-document.css), which load later as theme CSS.
 * Those rules hide site chrome with !important; nothing here may re-show
 * it.
 */

/* narrow_margins has no rules here: its @page rule is page-level and
   lives in its own library (css/print-narrow-margins.css), attached only
   when the block is active. */

@media print {
  /* ─── header_row_once ──────────────────────────────────────────────────
     Header row prints once instead of repeating on every page. The cells
     stay th in a displayed row, so tagged PDFs keep them. */
  body.document-print .print-block--header_row_once thead {
    display: table-row-group;
  }

  /* ─── compact_tables ───────────────────────────────────────────────────
     Minimal cell padding and little space after a table. Borders
     (row borders, header-row bottom border) are left as they are. */
  body.document-print .print-block--compact_tables th,
  body.document-print .print-block--compact_tables td {
    padding: 0.5pt 3pt;
  }

  /* About 6pt below every table, set on the outermost table box: the
     div.table-responsive wrapper that TableResponsiveFilter adds on County
     Documents, a figure.table, or a bare table. The table inside a wrapper
     adds nothing, and a heading right after a table drops its top margin,
     so the gap after a table is the 6pt alone. */
  body.document-print .print-block--compact_tables table,
  body.document-print .print-block--compact_tables figure.table,
  body.document-print .print-block--compact_tables .table-responsive {
    margin-bottom: 6pt;
  }

  body.document-print .print-block--compact_tables :is(.table-responsive, figure.table) > table {
    margin-bottom: 0;
  }

  body.document-print .print-block--compact_tables :is(table, figure.table, .table-responsive) + :is(h2, h3, h4, h5, h6) {
    margin-top: 0;
  }

  /* ─── tight_text ───────────────────────────────────────────────────────
     Tighter line-height and block margins; font size is unchanged. */
  body.document-print .print-block--tight_text {
    line-height: 1.15;
  }

  body.document-print .print-block--tight_text p,
  body.document-print .print-block--tight_text li,
  body.document-print .print-block--tight_text th,
  body.document-print .print-block--tight_text td {
    line-height: 1.15;
  }

  body.document-print .print-block--tight_text p,
  body.document-print .print-block--tight_text ul,
  body.document-print .print-block--tight_text ol {
    margin-top: 0;
    margin-bottom: 0.4em;
  }

  body.document-print .print-block--tight_text h2,
  body.document-print .print-block--tight_text h3,
  body.document-print .print-block--tight_text h4,
  body.document-print .print-block--tight_text h5,
  body.document-print .print-block--tight_text h6 {
    margin-top: 0.6em;
    margin-bottom: 0.3em;
  }

  /* ─── no_row_breaks ────────────────────────────────────────────────────
     Keeps each table row on one page. */
  body.document-print .print-block--no_row_breaks tr {
    break-inside: avoid;
  }

  /* ─── hide_letterhead ──────────────────────────────────────────────────
     Registry exception to "spacing/layout only": hides the letterhead
     (decorative/contact content, never table content) and the <hr> inside
     its wrapper (node--county-document--full.html.twig). Also cancels the
     theme's letterhead-only body padding so no gap is left behind. */
  body.document-print .print-block--hide_letterhead .county-doc__letterhead {
    display: none;
  }

  body.document-print .print-block--hide_letterhead .county-doc__letterhead + .field--name-body {
    padding-top: 0;
  }

  /* ─── compact_headings ─────────────────────────────────────────────────
     Size and spacing only; heading levels are unchanged. Comes after
     tight_text so its margins win when both are active. The theme's
     unscoped h1-h3 rule (dougcty_theme css/style.css: padding 10px 0,
     line-height 1.5em) also applies in print, so padding and line-height
     are reset here too. Only the top margin is set; the bottom margin is
     left to the theme. */
  body.document-print .print-block--compact_headings h2,
  body.document-print .print-block--compact_headings h3 {
    font-size: 12pt;
  }

  body.document-print .print-block--compact_headings h4,
  body.document-print .print-block--compact_headings h5,
  body.document-print .print-block--compact_headings h6 {
    font-size: 11pt;
  }

  body.document-print .print-block--compact_headings h2,
  body.document-print .print-block--compact_headings h3,
  body.document-print .print-block--compact_headings h4,
  body.document-print .print-block--compact_headings h5,
  body.document-print .print-block--compact_headings h6 {
    margin-top: 6pt;
    padding: 0;
    line-height: 1.2;
  }

  /* Document title. It prints as the banner's h1 (dougcty_theme
     node-county-document.css, "Print title"); the h2 title in the
     .county-doc__title wrapper (node--county-document--full.html.twig) is
     hidden there. The h1's 4pt bottom margin is the only space before the
     body's first element. */
  body.document-print .print-block--compact_headings .county-document-banner h1 {
    font-size: 14pt;
    margin: 0 0 4pt;
    padding: 0;
    line-height: 1.2;
  }

  body.document-print .print-block--compact_headings .county-doc__title {
    margin: 0;
    padding: 0;
  }

  body.document-print .print-block--compact_headings .county-doc__title + .field--name-body > :first-child {
    margin-top: 0;
  }

  /* ─── small_text ───────────────────────────────────────────────────────
     Body and table text at 12px (9pt). Set on text elements, not the
     content wrapper, so em-sized headings don't shrink with it. 12px is the
     minimum (the registry's 9pt floor), so smaller inline text is held at
     12px too. */
  body.document-print .print-block--small_text p,
  body.document-print .print-block--small_text li,
  body.document-print .print-block--small_text dt,
  body.document-print .print-block--small_text dd,
  body.document-print .print-block--small_text blockquote,
  body.document-print .print-block--small_text th,
  body.document-print .print-block--small_text td,
  body.document-print .print-block--small_text caption {
    font-size: 12px;
  }

  body.document-print .print-block--small_text small,
  body.document-print .print-block--small_text .small {
    font-size: 12px;
  }

  /* ─── expand_accordions ────────────────────────────────────────────────
     Every accordion panel prints open under its heading; the heading text
     (summary / accordion button) stays, only the toggle chevron goes.
     - Native <details>: accordion_widget, details and accordion_wrapper
       paragraphs (and any other <details> in the document). A closed
       <details> hides its content through the ::details-content slot, so
       making that slot visible opens it in print without touching the open
       attribute. Kept in its own rule: a browser without ::details-content
       drops the whole rule, and the panel prints closed as before.
     - Bootstrap collapse: the mbp_accordion paragraph's accordion section
       layout (div.accordion-collapse.collapse). Only .accordion-collapse,
       so other Bootstrap collapses (menus) stay closed. */
  body.document-print .print-block--expand_accordions details::details-content {
    content-visibility: visible;
  }

  body.document-print .print-block--expand_accordions .accordion-collapse {
    display: block;
    height: auto;
  }

  body.document-print .print-block--expand_accordions details > summary::after,
  body.document-print .print-block--expand_accordions .accordion-button::after {
    display: none;
  }

  /* ─── show_all_tabs ────────────────────────────────────────────────────
     mbp_tab paragraph (paragraph--mbp-tab.html.twig): the tab buttons
     (.nav-link) and the panels (.tab-content > .tab-pane) are separate
     lists, and a panel has no heading of its own (mbp_tab_section renders
     without its title). So the tab list stays visible above the panels and
     CSS counters number both: tab "1. Eligibility", "2. How to apply"...,
     and each panel starts with "Tab 1", "Tab 2"... The two lists are in the
     same order: the theme template's tabs|sort compares tab.title.value,
     which is null for the plain-string titles, so the stable sort keeps
     the delta order. The numbers are generated content only; markup and
     reading order are unchanged. Every tab button prints alike (the active
     tab's white-on-blue would be white-on-white without background
     graphics). */
  body.document-print .print-block--show_all_tabs .paragraph--type--mbp-tab {
    counter-reset: print-tab print-tab-panel;
  }

  body.document-print .print-block--show_all_tabs .paragraph--type--mbp-tab .nav-tabs {
    background: none;
  }

  body.document-print .print-block--show_all_tabs .paragraph--type--mbp-tab .nav-link {
    border: 1px solid #bebebe;
    background: none;
    color: #000;
  }

  body.document-print .print-block--show_all_tabs .paragraph--type--mbp-tab .nav-link::before {
    counter-increment: print-tab;
    content: counter(print-tab) ". ";
  }

  body.document-print .print-block--show_all_tabs .paragraph--type--mbp-tab .tab-content > .tab-pane {
    display: block;
    opacity: 1;
  }

  body.document-print .print-block--show_all_tabs .paragraph--type--mbp-tab .tab-content > .tab-pane + .tab-pane {
    margin-top: 12pt;
    padding-top: 6pt;
    border-top: 1px solid #000;
  }

  body.document-print .print-block--show_all_tabs .paragraph--type--mbp-tab .tab-content > .tab-pane::before {
    counter-increment: print-tab-panel;
    content: "Tab " counter(print-tab-panel);
    display: block;
    margin-bottom: 4pt;
    font-weight: bold;
    color: #000;
  }

  /* ─── all_carousel_slides ──────────────────────────────────────────────
     Bootstrap carousels: card_carousel and media_carousel paragraphs (field
     templates field--paragraph--card-carousel/-media-carousel) and
     mbp_carousel_slide slides. Every .carousel-item prints, stacked, at its
     natural height (media carousel slides are 60vh on screen, which in
     print is 60% of the page height). Captions sit below the image in black
     instead of white text over it. The card carousel renders the same cards
     twice (desktop copy .hide-mobile, then mobile copy .hide-desktop; its
     JS removes the desktop copy on narrow screens): when both are present,
     the mobile copy is left out so the cards print once. */
  body.document-print .print-block--all_carousel_slides .carousel-inner {
    display: block;
    overflow: visible;
  }

  body.document-print .print-block--all_carousel_slides .carousel-item {
    display: flow-root;
    float: none;
    height: auto;
    margin-right: 0;
    transform: none;
    transition: none;
  }

  body.document-print .print-block--all_carousel_slides .carousel-item + .carousel-item {
    margin-top: 12pt;
  }

  body.document-print .print-block--all_carousel_slides .carousel-item .field__item {
    height: auto;
  }

  body.document-print .print-block--all_carousel_slides .carousel-item img {
    height: auto;
    max-width: 100%;
  }

  body.document-print .print-block--all_carousel_slides .carousel-caption {
    position: static;
    padding: 4pt 0 0;
    background: none;
    color: #000 !important;
    text-align: left;
  }

  body.document-print .print-block--all_carousel_slides .carousel-caption a {
    color: #000 !important;
  }

  body.document-print .print-block--all_carousel_slides .carousel-indicators,
  body.document-print .print-block--all_carousel_slides .carousel-control-prev,
  body.document-print .print-block--all_carousel_slides .carousel-control-next,
  body.document-print .print-block--all_carousel_slides .carousel-inner.hide-mobile ~ .carousel-inner.hide-desktop {
    display: none;
  }

  /* ─── flatten_backgrounds ──────────────────────────────────────────────
     Every element in the document prints on white with black text:
     background colors and images (including mbp_layout's inline
     background-color/background-image/color and Bootstrap bg-* utilities)
     are dropped. !important to beat those inline styles. Content images
     are <img> elements and stay. Pseudo-elements are left alone, so
     mask-drawn icons (background-color: currentColor) keep their shape. */
  body.document-print .print-block--flatten_backgrounds,
  body.document-print .print-block--flatten_backgrounds * {
    background: none !important;
    color: #000 !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  /* ─── keep_columns ─────────────────────────────────────────────────────
     In print the page is about 720-740px wide, below Bootstrap's md
     breakpoint (768px), so col-md/lg/xl columns stack. This applies their
     widths unconditionally, md then lg then xl, so the widest breakpoint
     wins as it does on a desktop screen (col-md-6 col-xl-12 prints full
     width). Covers the mbp_layout paragraph's Two/Three Columns layouts
     (mbp bootstrap-columns-2/-3, col-{breakpoint}-N) and Bootstrap
     columns inside paragraphs (inner_layout, contact blocks, the card
     carousel's col-lg-4 cards), plus Layout Builder's Four column section
     (layout_fourcol_section, whose 25% columns are screen-only). The
     sidecar is a flex component, not Bootstrap columns, and keeps printing
     stacked. Columns can shrink below their content's width (min-width:
     0), long words break and images scale down, so nothing spills off the
     printable page; very narrow columns are accepted. */
  body.document-print .print-block--keep_columns .row > .col-md {
    flex: 1 0 0%;
  }

  body.document-print .print-block--keep_columns .row > .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  body.document-print .print-block--keep_columns .row > .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  body.document-print .print-block--keep_columns .row > .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  body.document-print .print-block--keep_columns .row > .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  body.document-print .print-block--keep_columns .row > .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  body.document-print .print-block--keep_columns .row > .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  body.document-print .print-block--keep_columns .row > .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  body.document-print .print-block--keep_columns .row > .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  body.document-print .print-block--keep_columns .row > .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  body.document-print .print-block--keep_columns .row > .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  body.document-print .print-block--keep_columns .row > .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  body.document-print .print-block--keep_columns .row > .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  body.document-print .print-block--keep_columns .row > .col-lg {
    flex: 1 0 0%;
  }

  body.document-print .print-block--keep_columns .row > .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  body.document-print .print-block--keep_columns .row > .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  body.document-print .print-block--keep_columns .row > .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  body.document-print .print-block--keep_columns .row > .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  body.document-print .print-block--keep_columns .row > .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  body.document-print .print-block--keep_columns .row > .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  body.document-print .print-block--keep_columns .row > .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  body.document-print .print-block--keep_columns .row > .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  body.document-print .print-block--keep_columns .row > .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  body.document-print .print-block--keep_columns .row > .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  body.document-print .print-block--keep_columns .row > .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  body.document-print .print-block--keep_columns .row > .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  body.document-print .print-block--keep_columns .row > .col-xl {
    flex: 1 0 0%;
  }

  body.document-print .print-block--keep_columns .row > .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  body.document-print .print-block--keep_columns .row > .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  body.document-print .print-block--keep_columns .row > .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  body.document-print .print-block--keep_columns .row > .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  body.document-print .print-block--keep_columns .row > .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  body.document-print .print-block--keep_columns .row > .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  body.document-print .print-block--keep_columns .row > .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  body.document-print .print-block--keep_columns .row > .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  body.document-print .print-block--keep_columns .row > .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  body.document-print .print-block--keep_columns .row > .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  body.document-print .print-block--keep_columns .row > .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  body.document-print .print-block--keep_columns .row > .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  body.document-print .print-block--keep_columns .layout--fourcol-section > .layout__region {
    flex: 0 1 25%;
  }

  body.document-print .print-block--keep_columns .row > [class*="col-"],
  body.document-print .print-block--keep_columns .layout--fourcol-section > .layout__region {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body.document-print .print-block--keep_columns .row > [class*="col-"] img,
  body.document-print .print-block--keep_columns .layout--fourcol-section > .layout__region img {
    max-width: 100%;
    height: auto;
  }

  /* ─── no_card_breaks ───────────────────────────────────────────────────
     Small self-contained blocks stay on one page: Bootstrap cards (mbp_card,
     horizontal_card, card_deck), figures (bootstrap_figure, remote_video,
     editor images) and the card-like paragraphs. Tables in CKEditor's
     figure.table are left out, since a long table must still split. A block
     taller than a page still breaks. */
  body.document-print .print-block--no_card_breaks .card,
  body.document-print .print-block--no_card_breaks figure:not(.table),
  body.document-print .print-block--no_card_breaks .figure,
  body.document-print .print-block--no_card_breaks .paragraph--type--bio-card,
  body.document-print .print-block--no_card_breaks .paragraph--type--navigation-card,
  body.document-print .print-block--no_card_breaks .paragraph--type--number-card,
  body.document-print .print-block--no_card_breaks .paragraph--type--step-card-step,
  body.document-print .print-block--no_card_breaks .paragraph--type--location-vertical-card,
  body.document-print .print-block--no_card_breaks .paragraph--type--filter-card,
  body.document-print .print-block--no_card_breaks .paragraph--type--icon-graphic,
  body.document-print .print-block--no_card_breaks .paragraph--type--hanging-icon,
  body.document-print .print-block--no_card_breaks .paragraph--type--thumbnail-block,
  body.document-print .print-block--no_card_breaks .paragraph--type--single-contact {
    break-inside: avoid;
  }
}