/* Pokeren.nl — shared body styles for front end AND editors.
   Front: wrap the_content() in .pn-prose. Block editor + TinyMCE: add_editor_style('assets/css/content.css').
   Every rule targets both core-block output and bare classic-editor HTML. */

.pn-prose, .editor-styles-wrapper, body.mce-content-body {
  --pn-oranje:#F06A1D; --pn-oranje-diep:#C24E0C; --pn-tint:#FFF3EA; --pn-inkt:#15171C; --pn-tekst:#24272E;
  --pn-tekst-2:#3A3E47; --pn-grijs:#565B66; --pn-lijn:#E6E2DA; --pn-vlak:#F1EEE8; --pn-wit:#FFFFFF;
  --pn-harten:#C8213A; --pn-groen:#1C7A4E; --pn-blauw:#2348A8;
  font: 400 18px/1.7 Figtree, sans-serif; color: var(--pn-tekst);
}
.editor-styles-wrapper { background:#F7F5F0; }
body.mce-content-body { max-width:760px; margin:24px auto; padding:0 16px; background:#F7F5F0; }

/* Flow */
.pn-prose { display:flex; flex-direction:column; gap:18px; }
.pn-prose > *, .editor-styles-wrapper .is-root-container > * { margin-top:0; margin-bottom:0; }
.editor-styles-wrapper .is-root-container > * + *, body.mce-content-body > * + * { margin-top:18px; }

/* Paragraphs & links */
.pn-prose p, .editor-styles-wrapper p, .mce-content-body p { margin:0; text-wrap:pretty; }
.pn-prose a, .editor-styles-wrapper a, .mce-content-body a { color:var(--pn-blauw); font-weight:600; }
.pn-prose a:hover { color:var(--pn-inkt); }
.pn-prose .is-style-lead, .editor-styles-wrapper .is-style-lead { font-size:clamp(18px,1.6vw,21px); line-height:1.5; color:var(--pn-tekst-2); }

/* Headings (.wp-block-heading or bare) */
.pn-prose h2, .editor-styles-wrapper h2, .mce-content-body h2 {
  margin:10px 0 0; font:700 clamp(20px,2vw,27px)/1.15 Unbounded, sans-serif; letter-spacing:-0.01em; color:var(--pn-inkt); text-wrap:balance; scroll-margin-top:96px;
}
.pn-prose h3, .editor-styles-wrapper h3, .mce-content-body h3 {
  margin:6px 0 0; font:700 19px/1.25 Unbounded, sans-serif; color:var(--pn-inkt); scroll-margin-top:96px;
}
.pn-prose h4, .editor-styles-wrapper h4, .mce-content-body h4 { margin:0; font:700 17px/1.3 Figtree, sans-serif; color:var(--pn-inkt); }

/* Lists */
.pn-prose ul, .pn-prose ol, .editor-styles-wrapper ul.wp-block-list, .editor-styles-wrapper ol.wp-block-list, .mce-content-body ul, .mce-content-body ol { margin:0; padding-left:1.25em; }
.pn-prose li + li, .editor-styles-wrapper .wp-block-list li + li, .mce-content-body li + li { margin-top:6px; }
.pn-prose li::marker, .editor-styles-wrapper li::marker, .mce-content-body li::marker { color:var(--pn-oranje); font-weight:700; }

/* Tables: core/table figure, or bare classic <table> */
.pn-prose .wp-block-table, .editor-styles-wrapper .wp-block-table {
  margin:0; overflow-x:auto; background:var(--pn-wit); border:1px solid var(--pn-lijn); border-radius:12px;
}
.pn-prose > table, .mce-content-body table {
  display:block; overflow-x:auto; background:var(--pn-wit); border:1px solid var(--pn-lijn); border-radius:12px;
}
/* theme: classic/imported tables are wrapped on output (inc/content.php) so they can stay real full-width tables */
.pn-prose .pn-tablepanel { margin:0; overflow-x:auto; background:var(--pn-wit); border:1px solid var(--pn-lijn); border-radius:12px; }
.pn-prose .pn-tablepanel > table { display:table; width:100% !important; max-width:none; margin:0; border:0; border-radius:0; background:transparent; }
.pn-prose table, .editor-styles-wrapper .wp-block-table table, .mce-content-body table {
  width:100%; min-width:420px; border-collapse:collapse; font-size:15px; line-height:1.5; font-variant-numeric:tabular-nums;
}
.pn-prose th, .pn-prose td, .editor-styles-wrapper .wp-block-table th, .editor-styles-wrapper .wp-block-table td, .mce-content-body th, .mce-content-body td {
  padding:10px 14px; text-align:left; border:0; vertical-align:top;
}
.pn-prose thead th, .editor-styles-wrapper .wp-block-table thead th, .mce-content-body thead th { background:var(--pn-vlak); font-weight:700; color:var(--pn-inkt); }
.pn-prose tbody tr, .editor-styles-wrapper .wp-block-table tbody tr, .mce-content-body tbody tr { border-top:1px solid var(--pn-lijn); }
.pn-prose .has-text-align-right, .editor-styles-wrapper .wp-block-table .has-text-align-right { text-align:right; }
.pn-prose .wp-block-table figcaption, .editor-styles-wrapper .wp-block-table figcaption { padding:10px 14px; font-size:13px; color:var(--pn-grijs); border-top:1px solid var(--pn-lijn); margin:0; }
/* Neutralise core "stripes" style so editors can't drift from design */
.pn-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background:transparent; }

/* Quote */
.pn-prose blockquote, .editor-styles-wrapper .wp-block-quote, .mce-content-body blockquote {
  margin:6px 0; padding:4px 0 4px 22px; border-left:4px solid var(--pn-oranje);
  font:700 clamp(18px,1.8vw,22px)/1.35 Unbounded, sans-serif; letter-spacing:-0.005em; color:var(--pn-inkt);
}
.pn-prose blockquote p { margin:0; }
.pn-prose blockquote cite, .editor-styles-wrapper .wp-block-quote cite { display:block; margin-top:8px; font:400 14px/1.4 Figtree, sans-serif; color:var(--pn-grijs); font-style:normal; }

/* Images & embeds */
.pn-prose .wp-block-image, .pn-prose .wp-caption, .editor-styles-wrapper .wp-block-image { margin:0; display:flex; flex-direction:column; gap:8px; max-width:100%; }
.pn-prose img, .editor-styles-wrapper .wp-block-image img, .mce-content-body img { max-width:100%; height:auto; border-radius:16px; display:block; }
.pn-prose figcaption, .pn-prose .wp-caption-text, .editor-styles-wrapper .wp-element-caption { margin:0; font-size:13px; line-height:1.5; color:var(--pn-grijs); text-align:left; }
.pn-prose .wp-block-embed__wrapper iframe { width:100%; aspect-ratio:16/9; height:auto; border-radius:16px; }

/* Separator */
.pn-prose hr, .editor-styles-wrapper .wp-block-separator { border:0; border-top:1px solid var(--pn-lijn); margin:12px 0; opacity:1; }

/* Buttons */
.pn-prose .wp-block-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.pn-prose .wp-block-button__link, .editor-styles-wrapper .wp-block-button__link {
  background:var(--pn-oranje); color:var(--pn-inkt); font:700 16px/1.2 Figtree, sans-serif; padding:12px 20px; border-radius:999px; text-decoration:none;
}
.pn-prose .wp-block-button__link:hover { background:#E05A0F; color:var(--pn-inkt); }
.pn-prose .is-style-outline .wp-block-button__link, .editor-styles-wrapper .is-style-outline .wp-block-button__link { background:transparent; border:1.5px solid var(--pn-inkt); padding:11px 18px; }
.pn-prose .is-style-dark .wp-block-button__link, .editor-styles-wrapper .is-style-dark .wp-block-button__link { background:var(--pn-inkt); color:#FFFFFF; }

/* Tip box — core/group.is-style-pn-tip  or  [pn_tip] → <div class="pn-tip"> */
.pn-prose .is-style-pn-tip, .pn-prose .pn-tip, .editor-styles-wrapper .is-style-pn-tip {
  background:var(--pn-tint); border-radius:14px; padding:18px 20px; font-size:16px; line-height:1.6; color:#3A2A1E;
}
.pn-prose .is-style-pn-tip strong, .pn-prose .pn-tip strong { color:var(--pn-inkt); }

/* FAQ — core/details (inside group.is-style-pn-faq), classic shortcode <details>, Yoast & Rank Math */
.pn-prose .is-style-pn-faq, .editor-styles-wrapper .is-style-pn-faq, .pn-prose .pn-faq { display:flex; flex-direction:column; gap:8px; }
.pn-prose details, .editor-styles-wrapper .wp-block-details, .mce-content-body details,
.pn-prose .schema-faq-section, .pn-prose .rank-math-list-item {
  margin:0; background:var(--pn-wit); border:1px solid var(--pn-lijn); border-radius:12px; padding:16px 18px;
}
.pn-prose .schema-faq, .pn-prose .rank-math-list { display:flex; flex-direction:column; gap:8px; }
.pn-prose summary, .editor-styles-wrapper .wp-block-details summary, .mce-content-body summary,
.pn-prose .schema-faq-question, .pn-prose .rank-math-question {
  display:flex; justify-content:space-between; gap:16px; align-items:baseline; list-style:none; cursor:pointer;
  font:700 17px/1.4 Figtree, sans-serif; color:var(--pn-inkt); margin:0;
}
.pn-prose summary::-webkit-details-marker { display:none; }
.pn-prose summary::after, .editor-styles-wrapper .wp-block-details summary::after { content:"+"; flex:none; font:700 20px/1 Figtree, sans-serif; color:var(--pn-oranje); transition:transform .15s ease; }
.pn-prose details[open] > summary::after, .editor-styles-wrapper .wp-block-details[open] > summary::after { transform:rotate(45deg); }
.pn-prose details > :not(summary), .pn-prose .schema-faq-answer, .pn-prose .rank-math-answer, .editor-styles-wrapper .wp-block-details > :not(summary) {
  margin:10px 0 0; font-size:16px; line-height:1.6; color:var(--pn-tekst-2);
}
.pn-prose .schema-faq-question { display:block; }

/* Pros / cons — core/list.is-style-pn-pros / .is-style-pn-cons (inside core/columns), or pokeren/pros-cons */
.pn-prose .is-style-pn-pros, .pn-prose .is-style-pn-cons, .editor-styles-wrapper .is-style-pn-pros, .editor-styles-wrapper .is-style-pn-cons {
  list-style:none; padding:18px; background:var(--pn-wit); border:1px solid var(--pn-lijn); border-radius:14px; font-size:16px; line-height:1.5;
}
.pn-prose .is-style-pn-pros li::before { content:"+ "; color:var(--pn-groen); font-weight:700; }
.pn-prose .is-style-pn-cons li::before { content:"− "; color:var(--pn-harten); font-weight:700; }
.pn-prose .pn-pc-title { font:700 15px/1 Figtree, sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.pn-prose .pn-pc-title--pro { color:var(--pn-groen); }
.pn-prose .pn-pc-title--con { color:var(--pn-harten); }

/* Columns */
.pn-prose .wp-block-columns { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:0; }

/* Suit glyphs typed in text: wrap red suits in <span class="pn-red"> via the_content filter */
.pn-prose .pn-red { color:var(--pn-harten); }

@media (max-width:767px) {
  .pn-prose { font-size:17px; }
  .pn-prose > table { display:block; }
}

/* Theme addition: "Speel bewust" box (pattern rg / [pn_rg] / pokeren/rg-box) */
.pn-prose .pn-rg, .editor-styles-wrapper .pn-rg { background:#fff; border:1.5px solid var(--pn-inkt); border-radius:18px; padding:clamp(18px,2.4vw,26px); display:flex; flex-direction:column; gap:12px; font-size:16px; line-height:1.6; }
.pn-prose .pn-rg__title, .editor-styles-wrapper .pn-rg__title { margin:0; font:700 22px/1.2 Unbounded, sans-serif; color:var(--pn-inkt); }

/* Theme: long unbroken strings in body copy (pasted URLs, long links) wrap instead of widening the page on phones */
.pn-prose { overflow-wrap: break-word; }
.pn-prose a { overflow-wrap: anywhere; }
.pn-prose table, .pn-prose table a { overflow-wrap: normal; }