/* ============================================================
   MVSD Core — PRINT: collapsible content
   Added 2026-08-27.

   WHY THIS FILE EXISTS
   --------------------
   MVSD prints WYSIWYG: there is no print stylesheet transform
   (css/print.css was deliberately retired 2026-06-22), the browser
   simply renders the screen CSS at print media. That is fine for
   normal prose, but two components hide content by design:

     * Accordions  — native <details>; a closed one hides its body.
     * Tabs        — js/tabs.js sets [hidden] on every non-selected
                     .para-tabs__panel.

   So a printed page showed accordion headings with NO bodies, and a
   tab component printed only ONE of its panels. Verified before this
   file landed: 48 distinct phrases that live inside collapsed
   accordions / unselected tab panels on /webmaster-help,
   /webmaster-help/pages-menus-departments and /family-handbook were
   all ABSENT from the extracted text of a real chromium print-to-PDF.

   SPLIT OF RESPONSIBILITY (css here, js in js/print-collapsible.js)
   ----------------------------------------------------------------
   Tabs are pure CSS: [hidden] is an ordinary UA `display: none`, and
   an author `!important` beats it. Nothing needs to be restored
   afterwards, because nothing was mutated.

   Accordions need JS. Forcing a closed <details> open from CSS alone
   is NOT portable. Measured in Chromium 151 on web-2 with a
   four-variant fixture printed to PDF:
     - `details:not([open]) > *:not(summary) { display: block }`
       (the legacy UA rule override)                    → NO-OP.
     - `::details-content { content-visibility: visible }`
       (Chrome 131+ / Firefox 139+ / Safari 18.4+)      → WORKS.
   No single rule covers both generations, and a school district
   serves plenty of older iPads and Firefox ESR. Both rules are kept
   below as a fallback for a reader whose JavaScript never ran, but
   js/print-collapsible.js is the primary mechanism — and it is the
   one that puts every panel back exactly as the reader had it once
   printing finishes.

   Everything here is inside @media print, so it cannot affect the
   screen rendering of any page.
   ============================================================ */

@media print {

  /* ══ 1. ACCORDIONS ═════════════════════════════════════════ */

  /* No-JS fallback — see the header note. Harmless where the JS ran
     (the element is already [open]) and harmless on engines that do
     not know ::details-content (the rule is simply dropped). */
  .para-accordion__item::details-content {
    content-visibility: visible !important;
    block-size: auto !important;
  }
  .para-accordion__item:not([open]) > *:not(summary) {
    display: block !important;
  }

  /* js/paragraphs.js animates the body by writing inline
     height/overflow. If a print starts mid-animation the body can be
     frozen at `height: 0; overflow: hidden` — which would hide the
     content even though <details> is open. Beat the inline style. */
  .para-accordion__body {
    height: auto !important;
    overflow: visible !important;
    transition: none !important;
  }

  /* Controls nobody can press on paper. */
  .para-accordion__icon { display: none !important; }
  .para-accordion__trigger { cursor: auto; }
  .para-accordion__item > summary { list-style: none; }
  .para-accordion__item > summary::-webkit-details-marker { display: none; }

  /* Keep a panel heading with the start of its body. Deliberately not
     `break-inside: avoid` on the item itself — several handbook
     sections are longer than a page and must be allowed to flow. */
  .para-accordion__trigger {
    break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
  }
  .para-accordion__body {
    break-before: avoid;
    page-break-before: avoid;
  }
  .para-accordion__item { break-inside: auto; }

  /* ══ 2. TABBED SECTIONS ════════════════════════════════════ */

  /* Every panel prints, stacked. Author !important overrides the UA
     rule behind the [hidden] attribute that tabs.js applies. */
  .para-tabs__panel,
  .para-tabs__panel[hidden] {
    display: block !important;
    animation: none !important;
    break-inside: auto;
  }
  .para-tabs__panel + .para-tabs__panel {
    margin-top: var(--space-6, 1.5rem);
    padding-top: var(--space-5, 1.25rem);
    border-top: 1px solid #999;
  }

  /* Each panel names itself. Without this the stack prints as one
     undifferentiated wall of text with no clue where a section
     starts. data-label is set on the panel in
     templates/paragraphs/paragraph--tabs.html.twig, so this needs no
     JS DOM injection and nothing to undo afterwards. */
  .para-tabs__panel[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-heading, inherit);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--space-3, 0.75rem);
    padding-bottom: 0.2rem;
    border-bottom: 2px solid #000;
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Interactive chrome: the desktop tab bar and the mobile <select>. */
  .para-tabs__bar,
  .para-tabs__select-wrap {
    display: none !important;
  }

  /* The card chrome only existed so the tab bar could sit on it. */
  .para-tabs__panels {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* The screen layout breaks the component out to a viewport-relative
     width. In print `100vw` is the PAGE width, which overflows the
     margin box — let it flow in the text column instead. */
  .para--tabs,
  .page-body .para--tabs {
    width: auto !important;
    max-width: 100% !important;
  }
}