/* ============================================================
   GENERIC ARTICLE TEMPLATE (v2): page-article-v2.php.
   The long-tail shell: any prose page renders its stored content
   through this sheet, so a redesign never requires touching content
   again. Consumes tokens.css; chrome vocabulary (.cv2-container,
   .cv2-btn) comes from chrome-legacy.css, .cv2-faq from
   v2-components.css, comments (.cv2-comments) from casino-v2.css.

   Two halves:
   1. .av2- shell: article column + slim navy hero (same ~49rem
      reading column as the free-games family; extracting the shared
      shell into v2-components is a 1.5 candidate).
   2. .av2-prose: styles for RAW post_content. Covers Gutenberg
      defaults plus the sanctioned legacy content vocabulary
      (.bs-callout, .step-list, .check-list, .card, table). Content
      carries semantic class hooks only; appearance lives here.
   ============================================================ */

/* ---- page base (same reset every v2 page sheet carries) ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--bji-font-sans);
  font-size: var(--bji-text-base);
  line-height: var(--bji-leading-body);
  color: var(--bji-text);
  background: var(--bji-surface-sunken);
}
main img { max-width: 100%; height: auto; }
main a { color: var(--bji-link); }
main a:hover { color: var(--bji-link-hover); }

/* --- article column --- */
.av2-col {
  max-width: calc(49rem + 2 * var(--bji-gutter));
  margin-inline: auto;
  padding-inline: var(--bji-gutter);
}

/* --- slim navy hero --- */
.av2-hero {
  background:
    radial-gradient(90rem 30rem at 85% -20%, rgb(6 152 255 / 0.25), transparent 60%),
    linear-gradient(160deg, var(--bji-navy-900), var(--bji-navy-800) 70%);
  color: var(--bji-text-inverse);
  padding: var(--bji-space-6) 0 var(--bji-space-7);
}
.av2-hero .crumbs { font-size: var(--bji-text-xs); color: var(--bji-text-inverse-muted); margin-bottom: var(--bji-space-5); }
.av2-hero .crumbs a { color: var(--bji-text-inverse-muted); text-decoration: none; }
.av2-hero .crumbs a:hover { color: #fff; }
.av2-hero h1 {
  font-size: var(--bji-text-3xl);
  font-weight: var(--bji-weight-black);
  line-height: var(--bji-leading-tight);
  margin: 0;
}
/* optional hero lead: the page excerpt (see page-article-v2.php) */
.av2-hero .sub {
  font-size: var(--bji-text-lg);
  color: var(--bji-text-inverse-muted);
  margin: var(--bji-space-3) 0 0;
}
.av2-hero .sub b, .av2-hero .sub strong { color: #fff; }

.av2-body { padding-block: var(--bji-space-6) var(--bji-section-gap); }

/* stage overlap: pages whose content LEADS with a widget (body class
   av2-has-stage, set in functions.php) get a deeper hero and the widget
   pulled up into it, the family's hero-overlap look */
.av2-has-stage .av2-hero { padding-bottom: calc(var(--bji-space-7) + 120px); }
.av2-has-stage .av2-prose > .bcw:first-child { margin-top: -120px; }

/* ============================================================
   PROSE: raw post_content
   ============================================================ */
.av2-prose > * { margin-block: 0 var(--bji-space-3); }

.av2-prose h2 {
  font-size: var(--bji-text-2xl);
  font-weight: var(--bji-weight-bold);
  line-height: var(--bji-leading-tight);
  margin: var(--bji-space-7) 0 var(--bji-space-3);
}
.av2-prose h3 {
  font-size: var(--bji-text-lg);
  font-weight: var(--bji-weight-bold);
  margin: var(--bji-space-5) 0 var(--bji-space-2);
}
.av2-prose h4 {
  font-size: var(--bji-text-base);
  font-weight: var(--bji-weight-bold);
  margin: var(--bji-space-4) 0 var(--bji-space-2);
}
.av2-prose h2:first-child, .av2-prose h3:first-child { margin-top: 0; }

.av2-prose ul, .av2-prose ol { padding-left: 1.35rem; }
.av2-prose li { margin-bottom: 4px; }
.av2-prose li > ul, .av2-prose li > ol { margin-top: 4px; margin-bottom: 0; }

.av2-prose hr, .av2-prose .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--bji-border);
  margin-block: var(--bji-space-6);
}

.av2-prose blockquote {
  margin: 0 0 var(--bji-space-3);
  padding: var(--bji-space-2) var(--bji-space-4);
  border-left: 4px solid var(--bji-border-strong);
  color: var(--bji-text-muted);
}

.av2-prose figure { margin: 0 0 var(--bji-space-4); }
.av2-prose figure img, .av2-prose p > img.aligncenter { border-radius: var(--bji-radius-md); }

/* standard WP alignment for in-content images (reusable across the long
   tail; collapses to full width on phones) */
.av2-prose img.alignright, .av2-prose img.alignleft, .av2-prose img.aligncenter { border-radius: var(--bji-radius-md); height: auto; }
.av2-prose .alignright { float: right; margin: 4px 0 var(--bji-space-4) var(--bji-space-5); max-width: 45%; }
.av2-prose .alignleft { float: left; margin: 4px var(--bji-space-5) var(--bji-space-4) 0; max-width: 45%; }
.av2-prose .aligncenter { display: block; margin-inline: auto; }
@media (max-width: 560px) {
  .av2-prose .alignright, .av2-prose .alignleft { float: none; margin: 0 0 var(--bji-space-4); max-width: 100%; }
}
.av2-prose figcaption, .av2-prose .wp-caption-text {
  margin-top: var(--bji-space-2);
  font-size: var(--bji-text-sm);
  color: var(--bji-text-muted);
  text-align: center;
}
.av2-prose iframe { max-width: 100%; }

.av2-prose code {
  font-family: var(--bji-font-mono);
  font-size: 0.9em;
  background: var(--bji-gray-050);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-sm);
  padding: 1px 5px;
}

/* --- tables (bare <table> and table.table) --- */
/* Data tables read as a designed component rather than default HTML: a
   bordered card with a navy header band, so figures stand out from the
   prose instead of dissolving into it. Shared by every article-shell
   page, so keep it neutral enough for rules, payouts and comparisons. */
/* Wide tables scroll inside themselves rather than pushing the page
   sideways. Found on the banking MatchPay draft at 375px, but it affects
   EVERY article-shell family (blog, variations, US states, free games,
   provider): a three-column comparison table was widening the document to
   654px in a 375px viewport. display:block is what makes the element
   scrollable; the inner table keeps its own layout via the rule below. */
.av2-prose table {
  /* display:block is what makes the table itself the scroll container.
     overflow-y stays hidden so the navy header band still clips into the
     rounded corners; a bare `overflow: hidden` here was silently cancelling
     the horizontal scroll. */
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--bji-text-sm);
  margin: 0 0 var(--bji-space-5);
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  box-shadow: var(--bji-shadow-sm);
}
/* display:block on the table detaches its internal layout, so restore it on
   the row groups or columns collapse to content width and stop filling the
   card. min-width keeps a wide table wide enough to be worth scrolling. */
.av2-prose table > thead,
.av2-prose table > tbody { display: table; width: 100%; min-width: 22rem; }
.av2-prose th, .av2-prose td {
  padding: var(--bji-space-3) var(--bji-space-4);
  text-align: left;
  vertical-align: top;
  border: 0;
}
.av2-prose thead th, .av2-prose tr:first-child th {
  background: var(--bji-navy-900);
  color: var(--bji-text-inverse);
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.av2-prose tbody tr + tr td { border-top: 1px solid var(--bji-border); }
.av2-prose tbody tr:nth-child(even) td { background: var(--bji-gray-050); }
.av2-prose tbody tr:hover td { background: var(--bji-blue-050); }
/* first column is the label in every table we ship; the min-width stops
   two-column rule tables squeezing short labels onto two lines */
.av2-prose tbody td:first-child {
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-navy-900);
  min-width: 9rem;
}
/* deliberately no colour on a bolded label: blue is the link colour on
   this site and a bold blue cell reads as a link that is not there. The
   bold weight against the semibold default carries the emphasis. */
@media (max-width: 560px) {
  .av2-prose th, .av2-prose td { padding: var(--bji-space-2) var(--bji-space-3); }
  .av2-prose tbody td:first-child { min-width: 0; }
  .av2-prose thead th, .av2-prose tr:first-child th { white-space: normal; }
}
/* timeline: keep the date column tight and emphasised */
.av2-prose .av2-timeline td:first-child { white-space: nowrap; font-weight: var(--bji-weight-semibold); color: var(--bji-navy-900); }

/* --- callouts: the legacy names ARE the vocabulary (12 pages carry
   them); alias new spellings here if ever wanted, never per-page --- */
.av2-prose .bs-callout {
  border-left: 4px solid var(--bji-border-strong);
  background: var(--bji-gray-050);
  border-radius: var(--bji-radius-sm);
  padding: var(--bji-space-3) var(--bji-space-4);
  margin: 0 0 var(--bji-space-4);
  font-size: var(--bji-text-sm);
  color: var(--bji-gray-800);
}
.av2-prose .bs-callout > :last-child { margin-bottom: 0; }
.av2-prose .bs-callout-info { border-left-color: var(--bji-blue-500); background: #eef6ff; }
.av2-prose .bs-callout-warning { border-left-color: var(--bji-amber-500); background: var(--bji-amber-100); }

/* --- step / check lists (sanctioned legacy classes) --- */
.av2-prose ol.step-list { list-style: none; padding: 0; counter-reset: av2step; display: grid; gap: var(--bji-space-2); }
.av2-prose ol.step-list > li {
  counter-increment: av2step;
  position: relative;
  padding: var(--bji-space-3) var(--bji-space-4) var(--bji-space-3) 56px;
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  margin: 0;
}
.av2-prose ol.step-list > li::before {
  content: counter(av2step);
  position: absolute;
  left: var(--bji-space-3);
  top: var(--bji-space-3);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bji-navy-900);
  color: #fff;
  font-weight: var(--bji-weight-bold);
  font-size: var(--bji-text-sm);
  display: grid;
  place-items: center;
}
.av2-prose ul.check-list { list-style: none; padding: 0; }
.av2-prose ul.check-list > li { position: relative; padding-left: 26px; margin-bottom: var(--bji-space-2); }
.av2-prose ul.check-list > li::before { content: "\2713"; position: absolute; left: 0; color: var(--bji-green-700); font-weight: var(--bji-weight-bold); }
/* The ✕ variant existed only in casino-v2.css, scoped to .cv2-review-body, so
   in an article every "Disadvantages" list inherited the green tick above and
   read as a list of positives. 181 cons cards were rendering that way. */
.av2-prose ul.check-list--cross > li::before { content: "\2715"; color: var(--bji-red-500); }

/* --- cards (legacy .card + .p20 wrappers) --- */
.av2-prose .card {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  margin: 0 0 var(--bji-space-4);
}
.av2-prose .card.p20, .av2-prose .card .p20 { padding: var(--bji-space-4); }
.av2-prose .card--pros { border-top: 3px solid var(--bji-green-500); }
.av2-prose .card--cons { border-top: 3px solid #d64545; }
.av2-prose .card > :last-child, .av2-prose .card .p20 > :last-child { margin-bottom: 0; }
.av2-prose .green { color: var(--bji-green-700); }
.av2-prose .red { color: #c0392b; }

/* legacy side-by-side rows degrade to stacked columns on the reading
   column; real column layouts belong in templates, not content */
.av2-prose .wpg-inner-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--bji-space-4); margin: 0 0 var(--bji-space-4); }

/* --- formula/step explainers (.av2-math: mono equation + plain words) --- */
.av2-prose .av2-math { display: grid; gap: var(--bji-space-3); margin: 0 0 var(--bji-space-4); }
.av2-prose .av2-math .step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--bji-space-4);
  align-items: baseline;
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4) var(--bji-space-5);
  font-size: var(--bji-text-sm);
}
.av2-prose .av2-math .eq { font-family: var(--bji-font-mono); font-size: 0.8rem; font-weight: var(--bji-weight-bold); color: var(--bji-navy-800); white-space: nowrap; }
.av2-prose .av2-math p { margin: 0; color: var(--bji-text-muted); }
@media (max-width: 560px) { .av2-prose .av2-math .step { grid-template-columns: 1fr; gap: 4px; } }

/* --- annotated document teardown (.av2-annotated: highlighted excerpt
   + color key; teaches where numbers hide in T&Cs and the like) --- */
.av2-prose .av2-annotated {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-5);
  margin: 0 0 var(--bji-space-4);
  font-size: var(--bji-text-sm);
  line-height: 1.9;
  color: var(--bji-text-muted);
}
.av2-prose .av2-annotated .doc { font-family: var(--bji-font-mono); font-size: 0.82rem; margin: 0; }
.av2-prose .av2-annotated mark {
  padding: 2px 6px;
  border-radius: var(--bji-radius-sm);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-navy-900);
}
.av2-prose .av2-annotated mark.m1 { background: #d9ecff; box-shadow: inset 0 -2px 0 var(--bji-blue-500); }
.av2-prose .av2-annotated mark.m2 { background: #ffefc2; box-shadow: inset 0 -2px 0 var(--bji-amber-500); }
.av2-prose .av2-annotated mark.m3 { background: #dcf5e4; box-shadow: inset 0 -2px 0 var(--bji-green-500); }
.av2-prose .av2-annotated mark.m4 { background: #ffe0e0; box-shadow: inset 0 -2px 0 #d64545; }
.av2-prose .av2-annotated .key { display: grid; gap: var(--bji-space-2); margin-top: var(--bji-space-4); line-height: var(--bji-leading-body); }
.av2-prose .av2-annotated .key .k { display: flex; gap: var(--bji-space-2); align-items: baseline; }
.av2-prose .av2-annotated .key .swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; position: relative; top: 1px; }
.av2-prose .av2-annotated .key .s1 { background: var(--bji-blue-500); }
.av2-prose .av2-annotated .key .s2 { background: var(--bji-amber-500); }
.av2-prose .av2-annotated .key .s3 { background: var(--bji-green-500); }
.av2-prose .av2-annotated .key .s4 { background: #d64545; }

/* --- labeled benchmark ledger (.av2-ledger: dt term + dd meaning rows,
   with tone classes; any "is X normal?" scale) --- */
.av2-prose dl.av2-ledger { margin: 0 0 var(--bji-space-4); border-top: 2px solid var(--bji-navy-900); }
.av2-prose .av2-ledger .row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--bji-space-4);
  padding: var(--bji-space-3) 0;
  border-bottom: 1px solid var(--bji-border);
  font-size: var(--bji-text-sm);
}
@media (max-width: 560px) { .av2-prose .av2-ledger .row { grid-template-columns: 1fr; gap: 2px; } }
.av2-prose .av2-ledger dt { margin: 0; font-weight: var(--bji-weight-bold); font-variant-numeric: tabular-nums; }
.av2-prose .av2-ledger dd { margin: 0; color: var(--bji-text-muted); }
.av2-prose .av2-ledger .tone-good dt { color: var(--bji-green-700); }
.av2-prose .av2-ledger .tone-meh dt { color: #9a7b00; }
.av2-prose .av2-ledger .tone-bad dt { color: #c0392b; }

/* --- Gutenberg Details blocks: content-native FAQ items, styled to the
   cv2-faq look so editors write FAQs as normal blocks --- */
.av2-prose details.wp-block-details {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  margin: 0 0 var(--bji-space-3);
}
.av2-prose details.wp-block-details summary {
  list-style: none;
  cursor: pointer;
  padding: var(--bji-space-4) var(--bji-space-5);
  font-weight: var(--bji-weight-semibold);
  position: relative;
  padding-right: 44px;
}
.av2-prose details.wp-block-details summary::-webkit-details-marker { display: none; }
.av2-prose details.wp-block-details summary::after {
  content: "+";
  position: absolute;
  right: var(--bji-space-5);
  top: 50%;
  transform: translateY(-50%);
  font-weight: var(--bji-weight-bold);
  color: var(--bji-text-faint);
  transition: transform var(--bji-duration-fast) var(--bji-ease);
}
.av2-prose details.wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.av2-prose details.wp-block-details[open] summary { border-bottom: 1px solid var(--bji-border); }
.av2-prose details.wp-block-details > :not(summary) {
  padding: 0 var(--bji-space-5);
  font-size: var(--bji-text-sm);
  color: var(--bji-text-muted);
}
.av2-prose details.wp-block-details > p:not(summary) { margin: var(--bji-space-4) 0; padding: 0 var(--bji-space-5); }

/* --- FAQ spacing (definition ships in v2-components.css) --- */
.av2-faq { margin-top: var(--bji-space-7); }
.av2-faq > h2 { font-size: var(--bji-text-2xl); font-weight: var(--bji-weight-bold); margin: 0 0 var(--bji-space-3); }

/* --- comments --- */
.av2-comments { margin-top: var(--bji-space-7); }

/* ============================================================
   E-E-A-T author credit (reusable across article-v2 pages;
   markup from inc/eeat.php + the page author-box content).
   Hero byline sits in the navy .av2-hero; author cards render
   in-content via .av2-authors / .av2-author-card.
   ============================================================ */

/* --- hero byline (multi-person + last-updated date) --- */
.av2-byline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--bji-space-2) var(--bji-space-4);
  margin: var(--bji-space-5) 0 0;
  font-size: var(--bji-text-sm);
  color: var(--bji-text-inverse-muted);
}
.av2-byline .who { display: inline-flex; align-items: center; gap: var(--bji-space-2); }
.av2-byline img {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgb(255 255 255 / 0.3);
}
.av2-byline a { color: #fff; font-weight: var(--bji-weight-semibold); text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / 0.35); }
.av2-byline a:hover { border-bottom-color: #fff; color: #fff; }
.av2-byline .date time { color: #fff; font-weight: var(--bji-weight-semibold); }

/* --- in-content author boxes --- */
.av2-authors { display: grid; gap: var(--bji-space-4); margin-top: var(--bji-section-gap); }
.av2-author-card {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: var(--bji-space-5);
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-left: 4px solid var(--bji-blue-500);
  border-radius: var(--bji-radius-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.av2-author-card .photo, .av2-author-card img.avatar {
  width: 108px; height: 108px;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--bji-blue-100);
}
.av2-author-card .kicker {
  display: block; font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--bji-blue-600); margin-bottom: var(--bji-space-1);
}
.av2-author-card h2 { margin: 0 0 var(--bji-space-1); font-size: var(--bji-text-xl); font-weight: var(--bji-weight-bold); }
.av2-author-card .role { margin: 0 0 var(--bji-space-3); font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); color: var(--bji-text-muted); }
.av2-author-card .bio { margin: 0 0 var(--bji-space-3); font-size: var(--bji-text-sm); }
.av2-author-card .creds { margin: 0 0 var(--bji-space-3); padding: 0; list-style: none; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }
.av2-author-card .creds li { position: relative; padding-left: 1.4em; margin-bottom: var(--bji-space-2); }
.av2-author-card .creds li::before { content: "\2713"; position: absolute; left: 0; color: var(--bji-green-500); font-weight: var(--bji-weight-bold); }
.av2-author-card .links { margin: 0; font-size: var(--bji-text-sm); }
@media (max-width: 560px) {
  .av2-author-card { grid-template-columns: 1fr; }
  .av2-author-card .photo, .av2-author-card img.avatar { width: 84px; height: 84px; }
}