/* Imported SilverStripe bodies (.pn-prose--legacy): block flow instead of the flex stack (bare text and <br> runs
   would otherwise become separate flex items), the old editor's image classes, inline card icons ([cards]),
   Excel-pasted tables and embeds. Loaded with content.css; only affects .pn-prose--legacy. */

.pn-prose.pn-prose--legacy { display: block; }
.pn-prose--legacy > * + * { margin-top: 18px; }
.pn-prose--legacy > br + *, .pn-prose--legacy > * + br { margin-top: 0; }
.pn-prose--legacy p:empty, .pn-prose--legacy p:has(> br:only-child) { display: none; }
.pn-prose--legacy h2 + *, .pn-prose--legacy h3 + * { margin-top: 10px; }

/* images: SilverStripe classes leftAlone / center (full column), left / right (floated, smaller) */
.pn-prose--legacy img { margin: 0; }
.pn-prose--legacy img.leftAlone, .pn-prose--legacy img.center { display: block; margin: 0 auto; }
.pn-prose--legacy img.left { float: left; max-width: min(45%, 320px); margin: 4px 20px 12px 0; }
.pn-prose--legacy img.right { float: right; max-width: min(45%, 320px); margin: 4px 0 12px 20px; }
.pn-prose--legacy::after { content: ""; display: table; clear: both; }
@media (max-width: 560px) { .pn-prose--legacy img.left, .pn-prose--legacy img.right { float: none; max-width: 100%; margin: 0 0 12px; } }

/* [cards] icons: tiny inline gifs inside sentences, never block images */
.pn-prose img[height="15"], .pn-prose img[src*="/kaarten/"], .pn-prose img[width="25"] { display: inline-block !important; border-radius: 0 !important; vertical-align: -2px; margin: 0 1px !important; float: none !important; max-width: none; }

/* tables pasted from Excel / SilverStripe wrappers */
.pn-prose--legacy .table-responsive { overflow-x: auto; } /* the table inside gets the panel (.pn-tablepanel) */
.pn-prose--legacy table td, .pn-prose--legacy table th { height: auto !important; width: auto; }
.pn-prose--legacy table .text-right, .pn-prose--legacy table td.right { text-align: right; }
.pn-prose--legacy table .text-center, .pn-prose--legacy table td.center { text-align: center; }
.pn-prose--legacy table [class^="xl"] { white-space: normal; }

/* embeds */
.pn-prose--legacy iframe { max-width: 100%; border: 0; border-radius: 16px; }
.pn-prose--legacy iframe[src*="youtube"], .pn-prose--legacy iframe[src*="youtu.be"], .pn-prose--legacy iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.pn-prose blockquote.twitter-tweet { border-left: 0; padding: 16px 18px; font: 400 16px/1.5 Figtree, sans-serif; background: #fff; border: 1px solid var(--pn-lijn, #E6E2DA); border-radius: 12px; }
.pn-prose .embed { max-width: 100%; }

/* spans with inline styles from the old editor: keep text colour/size consistent */
.pn-prose--legacy span[style*="font-size"] { font-size: inherit !important; }
.pn-prose--legacy span[style*="font-family"] { font-family: inherit !important; }

/* Imported tables: every table sits in a .pn-tablepanel (added on output, inc/content.php) that carries the design's
   white panel and scrolls sideways on small screens; the table itself stays a real table at full width. The first row
   is the header (only 1 in 577 sampled tables has a <thead>, but their first row is nearly always the column labels). */
.pn-prose--legacy table:not(:has(thead)) > tbody > tr:first-child { border-top: 0; }
.pn-prose--legacy table:not(:has(thead)) > tbody > tr:first-child > td { background: var(--pn-vlak, #F1EEE8); font-weight: 700; color: var(--pn-inkt, #15171C); }

/* Fixed-width tables from the old editor (631 in 3,000 bodies) fill the column like every other table */
.pn-prose--legacy table { width: 100% !important; max-width: 100%; }
.pn-prose--legacy table col, .pn-prose--legacy table td, .pn-prose--legacy table th { width: auto !important; }
.pn-prose--legacy table[style*="float"] { float: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Spacing at any depth: imported bodies often wrap everything in one <div>, so direct-child rules don't reach the
   paragraphs, and the empty spacer paragraphs they relied on are stripped. */
/* :where() keeps this reset at the lowest specificity, so the heading spacing below wins over it */
.pn-prose--legacy :where(p, ul, ol, blockquote, figure, table, .table-responsive, .pn-tablepanel, iframe, h2, h3, h4) { margin-top: 0; margin-bottom: 0; }
.pn-prose--legacy :is(p, ul, ol, blockquote, figure, table, .table-responsive, div, iframe, img.leftAlone, img.center, a) + :is(p, ul, ol, blockquote, figure, table, .table-responsive, iframe, div) { margin-top: 18px; }
.pn-prose--legacy.pn-prose--legacy * + :is(h2, h3, h4) { margin-top: 40px; }
.pn-prose--legacy.pn-prose--legacy * + h4 { margin-top: 28px; }
.pn-prose--legacy.pn-prose--legacy :is(h2, h3, h4) + * { margin-top: 12px; }

/* operator logos in table cells ("<img> GGPoker"): inline next to the name, not on a line of their own */
.pn-prose--legacy td img:not(.leftAlone):not(.center) { display: inline-block; vertical-align: middle; margin: 0 8px 0 0; }