/* WordPress-only additions on top of the layout CSS. */

/* Sticky header below the admin bar when logged in. */
.admin-bar .header-main { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .header-main { top: 46px; }
}

/* Current page in the main menu. */
.header .h-menu .current-menu-item > a,
.header .h-menu .current-page-ancestor > a { color: var(--color-red-43); }

/* Images and embeds inside editor content. */
.txt-page img,
.article__wrap img,
.guide-main img { max-width: 100%; height: auto; }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* Operator review: website text without a screenshot uses the full text width. */
.or-website--text { grid-template-columns: minmax(0, 864px); }

/* Retail casino: Google Maps embed fills the map box. */
.rc-map { padding: 0; }
.rc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Hub ranking without the welcome-bonus column: best for and visit move up one place. */
.rank-table .table-wrap { min-width: 720px; }
.rank-table .table-head-col:nth-child(4),
.rank-table .table-col:nth-child(4) { min-width: 176px; max-width: 176px; }
.rank-table .table-head-col:nth-child(5),
.rank-table .table-col:nth-child(5) { justify-content: flex-end; min-width: 128px; max-width: 128px; }
@media (max-width: 1200px) {
    .rank-table .table-head-col:nth-child(4),
    .rank-table .table-col:nth-child(4) { min-width: 176px; max-width: 176px; }
}

/* Long text in the collapsible guide block and editor text (.rv-text) in migrated pages: sections, lists, tables, links. */
.tx-block__content_box > :first-child { margin-top: 0; }
.tx-block__content .tx-block__content_box h3 {
    margin: 40px 0 14px;
    font-size: 22px;
    line-height: 130%;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-grey-10);
}
.tx-block__content_box h4,
.rv-text h4 {
    margin: 28px 0 10px;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 18px;
    line-height: 135%;
    color: var(--color-grey-10);
}
.tx-block__content .tx-block__content_box p { margin-bottom: 16px; }
.tx-block__content_box strong { font-weight: 600; color: var(--color-grey-10); }
.tx-block__content_box a,
.rv-text a { color: var(--color-red-43); text-decoration: underline; text-underline-offset: 2px; }
.tx-block__content_box a:hover,
.rv-text a:hover { text-decoration: none; }
.tx-block__content_box ul,
.rv-text ul,
.tx-block__content_box ol,
.rv-text ol {
    display: grid;
    gap: 8px;
    margin: 0 0 20px;
    padding-left: 24px;
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 170%;
    color: var(--color-grey-25);
}
.tx-block__content_box ul li,
.rv-text ul li { position: relative; }
.tx-block__content_box ul li::before,
.rv-text ul li::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-red-43);
}
.tx-block__content_box ol,
.rv-text ol { list-style: decimal; }
.tx-block__content_box ol li::marker,
.rv-text ol li::marker { font-weight: 600; color: var(--color-grey-10); }
.tx-block__content_box table,
.rv-text table {
    width: 100%;
    margin: 4px 0 24px;
    border: 1px solid var(--color-grey-90);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 150%;
    color: var(--color-grey-25);
}
.tx-block__content_box th,
.rv-text th {
    background: var(--color-grey-95);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-grey-36);
    text-align: left;
}
.tx-block__content_box th,
.rv-text th,
.tx-block__content_box td,
.rv-text td { padding: 12px 16px; vertical-align: top; }
.tx-block__content_box tr + tr td,
.rv-text tr + tr td,
.tx-block__content_box thead + tbody tr:first-child td,
.rv-text thead + tbody tr:first-child td { border-top: 1px solid var(--color-grey-90); }
.tx-block__content_box td:first-child,
.rv-text td:first-child { font-weight: 600; color: var(--color-grey-10); }
@media (max-width: 768px) {
.tx-block__content_box table,
.rv-text table { display: block; overflow-x: auto; }
.tx-block__content_box th,
.rv-text th,
.tx-block__content_box td,
.rv-text td { min-width: 140px; }
}
.tx-block__content_box a strong,
.rv-text a strong { color: inherit; }
/* .rv-text is a grid with its own gap. */
.rv-text ul,
.rv-text ol,
.rv-text table,
.rv-text h4 { margin: 0; }

/* Guide chapters: editor text sits directly in .guide-section (a grid with its own gap). */
.guide-wrap .guide-section > h3 { font-family: var(--font-family); font-weight: 700; font-size: 20px; line-height: 130%; color: var(--color-grey-10); margin-top: 8px; }
.guide-wrap .guide-section > h4 { font-family: var(--font-family); font-weight: 700; font-size: 17px; line-height: 135%; color: var(--color-grey-10); }
.guide-wrap .guide-section > p a,
.guide-wrap .guide-section > ul a,
.guide-wrap .guide-section > ol a { color: var(--color-red-43); text-decoration: underline; text-underline-offset: 2px; }
.guide-wrap .guide-section > ul,
.guide-wrap .guide-section > ol {
    display: grid;
    gap: 8px;
    padding-left: 24px;
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 170%;
    color: var(--color-grey-25);
}
.guide-wrap .guide-section > ul > li { position: relative; }
.guide-wrap .guide-section > ul > li::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 12px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-red-43);
}
.guide-wrap .guide-section > ol { list-style: decimal; }
.guide-wrap .guide-section > table {
    width: 100%;
    border: 1px solid var(--color-grey-90);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 150%;
    color: var(--color-grey-25);
}
.guide-wrap .guide-section > table th { background: var(--color-grey-95); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-grey-36); text-align: left; }
.guide-wrap .guide-section > table th,
.guide-wrap .guide-section > table td { padding: 12px 16px; vertical-align: top; }
.guide-wrap .guide-section > table tr + tr td,
.guide-wrap .guide-section > table thead + tbody tr:first-child td { border-top: 1px solid var(--color-grey-90); }
@media (max-width: 768px) {
    .guide-wrap .guide-section > table { display: block; overflow-x: auto; }
}

/* Review hero without a brand image: the logo sits whole in the dark box instead of being cropped to fill it. */
/* The layout's hero box is black (made for a wide brand photo); a logo sits on white, dark logos being the standard. */
.or-brand__image--logo { background: #fff; border: 1px solid var(--color-grey-90); }
.or-brand__image--logo img { object-fit: contain; padding: 12% 16%; }
.or-brand__image--logo img.is-tile { padding: 8% 10%; }

/* Real brand logos, in every box: shown whole, the same padding everywhere, and a logo with its own background colour
   (.is-tile, colour from the brand) fills the box edge to edge with that colour, so all boxes read as even tiles.
   A box holding a real logo gets a solid frame; the dashed one is the layout's empty placeholder. */
.wbet-itm__logo img,
.spbooks-table .spbooks-table-itm__logo img,
.logo-box img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px 10px;
  background: var(--color-white-solid, #fff);
  box-sizing: border-box;
}
.wbet-itm__logo img.is-tile,
.spbooks-table .spbooks-table-itm__logo img.is-tile,
.logo-box img.is-tile {
  padding: 3px 6px;
}
.wbet-itm__logo:has(img.logo-img),
.spbooks-table .spbooks-table-itm__logo:has(img.logo-img),
.logo-box:has(img.logo-img) {
  border-style: solid;
  border-color: var(--color-grey-90);
}

/* Real screenshots are shown whole, never cropped: app shots at the phone ratio they are taken at,
   player-review shots at their own height, the website shot letterboxed in its frame. */
.shots .ph-box:has(img) {
  aspect-ratio: 1 / 1.95;
}
.shots .ph-box:has(img),
.or-website .ph-box:has(img),
.or-reviews__shots .ph-box:has(img) {
  padding: 0;
  border: 1px solid var(--color-grey-90);
  background: #fff;
}
.shots .ph-box img,
.or-website .ph-box img {
  object-fit: contain;
}
.or-reviews__shots .ph-box:has(img) {
  height: auto;
}
.or-reviews__shots .ph-box img {
  position: static;
  height: auto;
}

/* Review bonus offer tables: two glance boxes side by side, long terms wrap. */
.or-bonus.glance-box {
  flex-wrap: wrap;
  gap: 24px;
}
.or-bonus .glance {
  flex: 1 1 320px;
  max-width: none;
}
.or-bonus .glance .glance-row {
  align-items: flex-start;
}
.or-bonus .glance .glance-row__lbl {
  flex: 0 0 40%;
}
.or-bonus .glance .glance-row__val {
  white-space: normal;
  text-align: right;
  display: block;
}
.or-bonus + .rv-note {
  margin-top: 14px;
}

/* Images carried over inside migrated text. */
.guide-section img,
.rv-text img,
.tx-block__content_box img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px 0;
  border-radius: 12px;
}

/* Review legality: the “is it legit?” text as a full-width box, its paragraphs flowing in two columns like the provinces above. */
.or-legit {
  margin-top: 32px;
  padding: 28px 32px;
  background: var(--color-grey-95);
  border: 1px solid var(--color-grey-90);
  border-radius: 12px;
}
/* .rv-text is a grid, which ignores columns: these two flow as blocks. The text under the provinces does it too
   once it has more than one paragraph, so the section keeps the provinces' two-column measure. */
.or-legit__text,
.or-legal__more:has(> :nth-child(2)) {
  display: block;
  max-width: none;
  column-count: 2;
  column-gap: 40px; /* the province columns' gap, so both lines of columns align */
}
.or-legit__text > *,
.or-legal__more:has(> :nth-child(2)) > * {
  margin: 0 0 16px;
}
.or-legit__text > :not(p),
.or-legal__more > :not(p) {
  break-inside: avoid;
}
.or-legit__text h3,
.or-legal__more h3 {
  break-after: avoid;
}
@media (max-width: 992px) {
  .or-legit {
    padding: 20px;
  }
  .or-legit__text,
  .or-legal__more:has(> :nth-child(2)) {
    column-count: 1;
  }
}

/* .rv-text is a grid: stretched to a taller neighbour (two columns side by side), it shared the spare height out
   between its rows, opening a gap under the heading. Content stays at the top instead. */
.rv-text {
  align-content: start;
}

/* Similar-app card without a phone screenshot: the brand's logo tile, centred in the same grey band so cards stay level. */
.app-card__image--logo {
  align-items: center;
  min-height: 270px;
}
.app-card__logo {
  width: 200px;
  height: 100px;
}

/* Similar-app card with a phone screenshot: the frame takes the phone's ratio and the screenshot is shown whole. */
.app-card__image .ph-box:has(img) {
  width: auto;
  height: 240px;
  aspect-ratio: 1 / 1.95;
  padding: 0;
  border: 0;
  background: none;
}
.app-card__image .ph-box img {
  object-fit: contain;
}

/* Collapsible “full guide” / “full text” block: its text (and the rule under the header, drawn by the same box)
   spans the whole block rather than the layout's 864px. */
.tx-block__content_box {
  max-width: none;
}

/* Review sections: text runs the full width of its section (or of its column, beside a side box),
   not the layout's 640–930px measures. */
.or-section .top p,
.or-section .rv-text,
.or-section .or-games__more,
.or-section .or-legal__more,
.or-section .timeline,
.or-section .faq-list {
  max-width: none;
}

/* Hub catalogs: a list of venues, rooms or games shown as a compact list in columns. */
.hub-catalog__list ul,
.hub-catalog__list ol {
  display: block;
  column-count: 3;
  column-gap: 40px;
}
.hub-catalog__list li {
  break-inside: avoid;
  margin-bottom: 8px;
}
.hub-catalog__list h3 {
  margin-top: 8px;
}
@media (max-width: 992px) {
  .hub-catalog__list ul,
  .hub-catalog__list ol {
    column-count: 2;
  }
}
@media (max-width: 576px) {
  .hub-catalog__list ul,
  .hub-catalog__list ol {
    column-count: 1;
  }
}

/* Catalog cards: text with paragraphs, links and lists (venues by region, lotteries, racetracks). */
.game-card__text {
  display: grid;
  gap: 10px;
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 160%;
  color: var(--color-grey-25);
}
.game-card__text a {
  color: var(--color-red-43);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.game-card__text ul {
  display: grid;
  gap: 4px;
  padding-left: 18px;
  list-style: disc;
}
.game-card__text img {
  display: none;
}
.hub-catalog__cards + .game-cards {
  margin-top: 24px;
}
.game-card__text li strong {
  color: var(--color-grey-10);
}

/* In-page anchors stop below the sticky header (main.js keeps --header-offset at its height). */
html {
  scroll-padding-top: var(--header-offset, 96px);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Hub catalog “rows”: long items (lotteries, racetracks) as wide rows, the name beside its write-up. */
.cat-rows {
  border-top: 1px solid var(--color-grey-90);
}
.cat-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-grey-90);
}
.cat-row__title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;
  line-height: 130%;
  color: var(--color-grey-10);
}
@media (max-width: 767px) {
  .cat-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 0;
  }
}

/* Images in migrated text never grow past a sensible height (live images often carry no size); runs of screenshots
   sit side by side. */
.guide-section img,
.rv-text img,
.tx-block__content_box img {
  max-height: 520px;
  object-fit: contain;
  object-position: left center;
}
/* A run of screenshots as a justified gallery: every picture keeps its own shape, the pictures in a row share one
   height and together fill the row (main.js sets --r, each picture's width / height). The last row is not stretched. */
.img-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 24px;
  --row-h: 300px;
}
.img-row::after {
  content: "";
  flex-grow: 1000000;
}
.img-row.is-justified::after {
  display: none;
}
.img-row img {
  --r: 1.5;
  flex: var(--r) 1 calc(var(--r) * var(--row-h));
  aspect-ratio: var(--r);
  width: auto !important;
  height: auto !important;
  min-width: 0;
  max-width: 100%;
  max-height: none;
  margin: 0 !important;
  object-fit: cover;
  border: 1px solid var(--color-grey-90);
  border-radius: 10px;
}
@media (max-width: 767px) {
  .img-row {
    gap: 8px;
    --row-h: 170px;
  }
}

/* Home operator tables without the value and/or yes-no column: the name column takes the room, Visit stays last. */
.spbooks-table--4 .table-head-col:nth-child(2),
.spbooks-table--4 .table-col:nth-child(2),
.spbooks-table--5 .table-head-col:nth-child(2),
.spbooks-table--5 .table-col:nth-child(2) {
  flex: 1;
  width: auto;
}
.spbooks-table--4 .table-head-col:last-child,
.spbooks-table--4 .table-col:last-child,
.spbooks-table--5 .table-head-col:last-child,
.spbooks-table--5 .table-col:last-child {
  min-width: 152px;
  max-width: 152px;
  justify-content: flex-end;
}
.spbooks-table--4 .table-wrap {
  min-width: 640px;
}

/* Home “Where do you want to start?” tiles holding a list of links. */
.category-itm__links ul {
  display: grid;
  gap: 6px;
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
}
.category-itm__links a {
  color: var(--color-grey-10);
  text-decoration: underline;
  text-decoration-color: var(--color-grey-80, #ccc);
  text-underline-offset: 3px;
}
.category-itm__links a:hover {
  color: var(--color-red-43);
}
a.province-title:hover {
  color: var(--color-red-43);
}

/* Ranking without a “Best for” column: Visit is the fourth column. */
.rank-table--no-best .table-head-col:nth-child(4),
.rank-table--no-best .table-col:nth-child(4) {
  justify-content: flex-end;
  min-width: 128px;
  max-width: 128px;
}

/* A brand without a logo on file: its name in the logo box. */
.logo-name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 4px 6px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 13px;
  line-height: 115%;
  text-align: center;
  color: var(--color-grey-10);
}
.wbet-itm__logo:has(.logo-name),
.logo-box:has(.logo-name) {
  border-style: solid;
  border-color: var(--color-grey-90);
  background: var(--color-white-solid, #fff);
}

/* Guides: the text column takes the container's full width beside the sidebar, and the sidebar (contents, at a
   glance, ad) stays in view while the long text scrolls, so the right-hand column is never left empty. */
.guide-wrap {
  max-width: none;
}
@media (min-width: 993px) {
  .guide-wrap .guide-main {
    flex: 1 1 auto;
  }
  .guide-wrap .guide-sidebar {
    position: sticky;
    top: var(--header-offset, 96px);
    align-self: flex-start;
    max-height: calc(100vh - var(--header-offset, 96px) - 16px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
@media (min-width: 993px) {
  /* The sticky sidebar's boxes keep their size; a long contents list scrolls inside its own box. */
  .guide-wrap .guide-sidebar > * {
    flex-shrink: 0;
  }
  .guide-wrap .guide-toc ul {
    max-height: 45vh;
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* Home team: an even grid of four, every card laid out from the top (name and job title level across a row). */
.team .team-list > .team-item,
.team .team-list > .team-item:nth-child(-n+3) {
  grid-column: span 3;
}
.team .team-item {
  align-content: start;
  gap: 8px;
}
.team .team-item__photo {
  margin-bottom: 8px;
}
.team .team-item__text {
  margin-top: 4px;
  font-size: 15px;
}
@media (max-width: 992px) {
  .team .team-list > .team-item,
  .team .team-list > .team-item:nth-child(-n+3) {
    grid-column: auto;
  }
}

/* At-a-glance rows on a phone: long values wrap instead of running off the box. */
@media (max-width: 576px) {
  .glance-box .glance .glance-row {
    align-items: flex-start;
  }
  .glance-box .glance .glance-row__lbl {
    flex: 1 1 auto;
    font-size: 15px;
  }
  .glance-box .glance .glance-row__val {
    white-space: normal;
    text-align: right;
    max-width: 55%;
    font-size: 15px;
  }
}

/* Screenshots open full size on click (main.js). */
.is-zoomable {
  cursor: zoom-in;
}
.pc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.86);
  cursor: zoom-out;
}
.pc-lightbox img {
  max-width: min(1400px, 100%);
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  background: #fff;
}
.pc-lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 26px;
  line-height: 40px;
  cursor: pointer;
}

/* “Where to bet” without market figures: sportsbook, rating, payout speed, visit. */
.table-wbet--compact .table-wrap {
  min-width: 640px;
}
.table-wbet--compact .table-head-col:nth-child(1),
.table-wbet--compact .table-col:nth-child(1) {
  flex: 1;
  max-width: none;
}
.table-wbet--compact .table-head-col:nth-child(3),
.table-wbet--compact .table-col:nth-child(3) {
  min-width: 160px;
  max-width: 160px;
}
.table-wbet--compact .table-head-col:nth-child(4),
.table-wbet--compact .table-col:nth-child(4) {
  min-width: 140px;
  max-width: 140px;
  justify-content: flex-end;
  margin-left: 0;
}

/* News articles: the imported text (lists, subheadings, links, tables, quotes, pictures) in the article's style. */
.article__wrap h3,
.article__wrap h4 {
  margin-top: 12px;
  font-family: var(--font-family);
  font-weight: 700;
  line-height: 135%;
  color: var(--color-grey-10);
}
.article__wrap h3 { font-size: 20px; }
.article__wrap h4 { font-size: 17px; }
.article__wrap a {
  color: var(--color-red-43);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article__wrap a:hover { text-decoration: none; }
.article__wrap ul,
.article__wrap ol {
  display: grid;
  gap: 8px;
  width: 100%;
  padding-left: 24px;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 170%;
  color: var(--color-grey-25);
}
.article__wrap ul li { position: relative; }
.article__wrap ul li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-red-43);
}
.article__wrap ol { list-style: decimal; }
.article__wrap ol li::marker { font-weight: 600; color: var(--color-grey-10); }
.article__wrap strong { font-weight: 600; color: var(--color-grey-10); }
.article__wrap table {
  width: 100%;
  border: 1px solid var(--color-grey-90);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 150%;
  color: var(--color-grey-25);
}
.article__wrap th {
  background: var(--color-grey-95);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-grey-36);
  text-align: left;
}
.article__wrap th,
.article__wrap td { padding: 12px 16px; vertical-align: top; }
.article__wrap tr + tr td { border-top: 1px solid var(--color-grey-90); }
.article__wrap img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.article__wrap blockquote {
  padding-left: 20px;
  border-left: 3px solid var(--color-red-43);
  font-style: italic;
  color: var(--color-grey-25);
}
@media (max-width: 768px) {
  .article__wrap table { display: block; overflow-x: auto; }
}

/* News articles: the text runs the full width of the page, under the full-width picture. */
.article__wrap {
  max-width: none;
}

/* Text pages (law, responsible gambling): migrated text with links, subheadings, numbered lists and tables, full width. */
.txt-page {
  max-width: none;
}
.txt-page .txt-page-block h3 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 19px;
  line-height: 135%;
  color: var(--color-grey-10);
}
.txt-page .txt-page-block a {
  color: var(--color-red-43);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.txt-page .txt-page-block ol {
  display: grid;
  gap: 8px;
  padding-left: 24px;
  list-style: decimal;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 170%;
  color: var(--color-grey-25);
}
.txt-page .txt-page-block ul li,
.txt-page .txt-page-block ol li {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 170%;
  color: var(--color-grey-25);
}
.txt-page .txt-page-block table {
  width: 100%;
  border: 1px solid var(--color-grey-90);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 150%;
  color: var(--color-grey-25);
}
.txt-page .txt-page-block th {
  background: var(--color-grey-95);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-grey-36);
  text-align: left;
}
.txt-page .txt-page-block th,
.txt-page .txt-page-block td { padding: 12px 16px; vertical-align: top; }
.txt-page .txt-page-block tr + tr td { border-top: 1px solid var(--color-grey-90); }
.txt-page .txt-page-block td:first-child { font-weight: 600; color: var(--color-grey-10); }
@media (max-width: 768px) {
  .txt-page .txt-page-block table { display: block; overflow-x: auto; }
}
/* Ranking without ratings or “Best for” (old reviews): #, name, visit. */
.rank-table--slim .table-head-col:nth-child(3),
.rank-table--slim .table-col:nth-child(3) {
  justify-content: flex-end;
  min-width: 128px;
  max-width: 128px;
}

/* Logos are not text pictures: none of the migrated-text image styles (margins, rounding, height caps) apply. */
.wbet-itm__logo img,
.logo-box img,
.spbooks-table-itm__logo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  object-position: center !important;
}
.where-practice-table .btn-primary {
  white-space: nowrap;
}

/* “Where to play” in guides: the casino column takes the free width, figures in even columns, Visit at the end. */
.where-practice-table .table-head-col:nth-child(1),
.where-practice-table .table-col:nth-child(1) {
  flex: 1 1 auto;
  max-width: none;
}
.where-practice-table .table-head-col:nth-child(4),
.where-practice-table .table-col:nth-child(4) {
  min-width: 130px;
  max-width: 130px;
}
.where-practice-table .table-head-col:nth-child(5),
.where-practice-table .table-col:nth-child(5) {
  min-width: 140px;
  max-width: 140px;
}
.where-practice-table .table-head-col {
  white-space: nowrap;
}

/* Bonus offer tables on a phone: the label above its value, both full width (long terms and payment lists). */
@media (max-width: 576px) {
  .or-bonus .glance .glance-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .or-bonus .glance .glance-row__lbl {
    flex: none;
    font-size: 13px;
    color: var(--color-grey-59);
  }
  .or-bonus .glance .glance-row > div {
    width: 100%;
  }
  .or-bonus .glance .glance-row__val {
    max-width: none;
    text-align: left;
    font-size: 15px;
  }
  .or-bonus .glance__body {
    padding: 4px 16px 12px;
  }
  .or-bonus .glance__top {
    padding: 14px 16px;
  }
}
/* Stacked on narrow screens the boxes size to their rows (a flex basis would become a fixed height). */
@media (max-width: 992px) {
  .or-bonus .glance {
    flex: none;
    width: 100%;
  }
}

/* Retail: nearby venues with fewer columns (no distance or rating yet) — venue, figures, guide. */
.rc-venues-table--auto .table-wrap {
  min-width: 720px;
}
.rc-venues-table--auto .table-head-col:not(:first-child):not(:last-child),
.rc-venues-table--auto .table-col:not(:first-child):not(:last-child) {
  justify-content: flex-start;
  min-width: 220px;
  max-width: 220px;
}
.rc-venues-table--auto .table-head-col:last-child,
.rc-venues-table--auto .table-col:last-child {
  justify-content: flex-end;
  min-width: 136px;
  max-width: 136px;
}
/* Retail text blocks carrying imported HTML. */
.provider-about-item .rv-text,
.floor-card .rv-text,
.amenity-card .rv-text {
  gap: 10px;
  font-size: 15px;
}

/* Retail venue: grids sized to what the venue has; the practical info under the opening hours, beside the map. */
.provider-about--n2 { grid-template-columns: repeat(2, 1fr); }
.provider-about--n1 { grid-template-columns: 1fr; }
.floor-cards--n2, .floor-cards--n4 { grid-template-columns: repeat(2, 1fr); }
.floor-cards--n1 { grid-template-columns: 1fr; }
.amenity-cards--n3 { grid-template-columns: repeat(3, 1fr); }
.amenity-cards--n2 { grid-template-columns: repeat(2, 1fr); }
.amenity-cards--n1 { grid-template-columns: 1fr; }
@media (max-width: 992px) {
  .provider-about--n2 { grid-template-columns: 1fr; }
  .amenity-cards--n3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .floor-cards--n2, .floor-cards--n4, .amenity-cards--n3, .amenity-cards--n2 { grid-template-columns: 1fr; }
}
.rc-visit__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.rc-visit__main .rc-info { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rc-visit .hours-card__list li span:nth-child(2) { text-align: right; }
/* Author box: the name links to the profile in the heading's own colour. Hub catalog rows: the venue link. */
.about-author__title a { color: inherit; text-decoration: none; }
.about-author__title a:hover { color: var(--color-red, #d9001b); }
.cat-row__link { font-weight: 600; text-decoration: none; }
@media (max-width: 767px) {
  /* Nearby venues on a phone: the venue name gets room, the figures scroll beside it. */
  .rc-venues-table--auto .table-wrap { min-width: 0; width: max-content; }
  .rc-venues-table--auto .table-head-col:first-child,
  .rc-venues-table--auto .table-col:first-child { flex: 0 0 210px; min-width: 210px; }
  .rc-venues-table--auto .table-head-col:not(:first-child):not(:last-child),
  .rc-venues-table--auto .table-col:not(:first-child):not(:last-child) { min-width: 150px; max-width: 150px; }
  .rc-venues-table--auto .table-head-col:last-child,
  .rc-venues-table--auto .table-col:last-child { min-width: 96px; max-width: 96px; }
}

/* Nearby venues: the games column takes the free width; hours notes under the opening hours. */
.rc-venues-table .table-head-col.table-col--games:not(:first-child):not(:last-child),
.rc-venues-table .table-col.table-col--games:not(:first-child):not(:last-child) { flex: 1 1 0; min-width: 0; max-width: none; justify-content: flex-start; }
.rc-venues-table .table-col--games span { font-size: 15px; color: var(--color-grey-25); }
.hours-card__note { margin: 0; padding: 14px 24px 18px; border-top: 1px solid var(--color-grey-92); font-size: 14px; line-height: 1.5; color: var(--color-grey-36); }
@media (max-width: 767px) {
  .rc-venues-table--auto .table-head-col.table-col--games:not(:first-child):not(:last-child),
  .rc-venues-table--auto .table-col.table-col--games:not(:first-child):not(:last-child) { flex: 0 0 240px; min-width: 240px; max-width: 240px; }
  .hours-card__note { padding: 12px 12px 16px; }
}
/* Opening hours: rows start where the card's heading does (the list and its rows both had side padding). */
.rc-visit .hours-card__list { padding: 0 24px 2px; }
.rc-visit .hours-card__list li { padding: 14px 0; }
@media (max-width: 767px) {
  .rc-visit .hours-card__list { padding: 0 24px 2px; }
  .hours-card__note { padding: 12px 24px 16px; }
}

/* Comparison table with some figure columns left out (no data): widths by column, not by position. */
.cmp-table--auto .table-wrap { min-width: 760px; }
.cmp-table.cmp-table--auto .table-head-col.cmp-c--brand, .cmp-table.cmp-table--auto .table-col.cmp-c--brand { flex: 1 1 0; min-width: 240px; max-width: none; justify-content: flex-start; }
.cmp-table.cmp-table--auto .table-head-col[class*="cmp-c--"]:not(.cmp-c--brand):not(.cmp-c--visit),
.cmp-table.cmp-table--auto .table-col[class*="cmp-c--"]:not(.cmp-c--brand):not(.cmp-c--visit) { flex: 0 0 120px; min-width: 120px; max-width: 120px; justify-content: flex-start; }
.cmp-table.cmp-table--auto .table-head-col.cmp-c--studios, .cmp-table.cmp-table--auto .table-col.cmp-c--studios { flex-basis: 240px; min-width: 240px; max-width: 240px; }
.cmp-table.cmp-table--auto .table-head-col.cmp-c--visit, .cmp-table.cmp-table--auto .table-col.cmp-c--visit { flex: 0 0 132px; min-width: 132px; max-width: 132px; justify-content: flex-end; }
/* Guide key cards and steps carry imported text: its links in the site's link style. */
.gg-item a, .guide-steps-item a { color: var(--color-red-43); text-decoration: underline; text-underline-offset: 2px; }
.gg-item a:hover, .guide-steps-item a:hover { text-decoration: none; }
/* Text pages: an image the live page set inline at the start of a paragraph sits above the text, full size. */
.txt-page .txt-page-block img { display: block; max-width: 100%; height: auto; margin: 4px 0 20px; border-radius: 12px; }
/* Provider “where to play” without the optional columns: casino, rating, visit. */
.provider-tbl-table--auto .table-wrap { min-width: 0; }
.provider-tbl-table--auto .table-head-col:first-child, .provider-tbl-table--auto .table-col:first-child { max-width: none; }
.provider-tbl-table--auto .table-head-col:last-child, .provider-tbl-table--auto .table-col:last-child { justify-content: flex-end; min-width: 140px; max-width: 140px; }

/* Providers without a logo file: their name as a wordmark in the logo box. */
.provider-wordmark, .gm-top .gm-provider__logo span.provider-wordmark { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 64px; padding: 8px 12px;
  font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; text-align: center; color: var(--color-grey-10); }
.provider-item__top .provider-wordmark { background: var(--color-white-solid, #fff); border-radius: 10px; font-size: 24px; }
.provider-tbl-table .btn-primary { white-space: nowrap; }
.hub-catalog__table > ul { columns: 3; column-gap: 32px; }
.hub-catalog__table > ul li { break-inside: avoid; }
@media (max-width: 767px) { .hub-catalog__table > ul { columns: 2; } }
/* Provider hero without the badges line: room under the breadcrumbs. A name wordmark sits on a white logo tile
   (the dashed grey box is the empty-logo placeholder). */
.gm-top > .container > .gm-top__wrap:first-child { padding-top: 28px; }
.gm-top .gm-provider__logo:has(.provider-wordmark) { border-style: solid; border-color: var(--color-grey-90); background: var(--color-white-solid, #fff); }
@media (max-width: 767px) { .gm-top > .container > .gm-top__wrap:first-child { padding-top: 20px; } }
/* Team cards: the job title is a block (its spacing applied), the text column takes the card's width, and the
   parts keep even gaps whether or not a member has a bio and tags. */
.team-section .team-section-item__main { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-width: 0; max-width: none; }
.team-section .team-section-item__title { margin-bottom: 4px; }
.team-section .team-section-item__position { display: block; margin-bottom: 12px; line-height: 1.4; }
.team-section .team-section-item__main p { margin: 0; }
.team-section .team-section-item__labels { margin: 14px 0 0; }
.team-section .team-section-item .t-link { margin-top: 14px; }
.team-section .team-section-item__position:empty { display: none; }
.team-section .team-section-item__title + .t-link { margin-top: 8px; }
/* Slot cards: “Read review” and “Play free demo” side by side. */
.cat-item__bottom { display: flex; flex-wrap: wrap; gap: 8px 20px; }
/* Slots Launch demo in the poster box: the plugin swaps the poster for its iframe (or a notice) on click. */
.sl-demo__box.slotslaunch-embed .slotslaunch-embed-notice { position: absolute; inset: 0; border: 0 !important; }
/* Slot “where to play” without the spins / demo columns: casino, rating, offer, visit. */
.sl-where-table--auto .table-wrap { min-width: 760px; }
.sl-where-table--auto .table-head-col:last-child, .sl-where-table--auto .table-col:last-child { justify-content: flex-end; min-width: 140px; max-width: 140px; }
.sl-where-table--auto .table-col:nth-child(3), .sl-where-table--auto .table-head-col:nth-child(3) { flex: 1 1 0; max-width: none; }
.sl-where-table--auto .table-col:nth-child(3) span { max-width: none; }
/* Free demo poster: the game art fills the box; the button and hint sit above it on a dimmed layer (the art used
   to cover the button). The plugin replaces the box content with the game iframe on click. */
.sl-demo__box:has(> img)::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(17, 17, 17, 0.45); }
.sl-demo__box > img { z-index: 0; object-fit: cover; }
.sl-demo__box > .btn-primary, .sl-demo__box > .sl-demo__hint { position: relative; z-index: 2; }
.sl-demo__box:has(> img) .sl-demo__hint { color: #fff; }
/* Responsible gambling by province: the short line under tables / in reviews / after Alberta news; the province cards;
   the footer's labelled Ontario and Alberta groups (organisations without a logo show their name). */
.rg-note { margin-top: 14px; display: grid; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--color-grey-36); }
.rg-note p { margin: 0; }
.rg-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rg-note--article { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--color-grey-90); }
.or-brand__note.rg-note { margin-top: 8px; font-size: 12px; text-align: center; }
.rg-provinces { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 40px; }
.rg-card { border: 1px solid var(--color-grey-90); border-radius: 12px; padding: clamp(20px, 2.4vw, 28px); background: var(--color-white-solid, #fff); }
.rg-card__title { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.rg-card--wide { margin-top: 24px; }
@media (max-width: 767px) { .rg-provinces { grid-template-columns: 1fr; } }
.footer .footer-box--n3 .container { grid-template-columns: repeat(3, 1fr); }
.footer .footer-box--labelled .container { align-items: stretch; }
.footer .footer-box__label { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-grey-36); }
.footer .footer-box--labelled + .footer-box--labelled { margin-top: 8px; }
.footer .footer-box-item__name { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: #9a9a9a; line-height: 1.2; }  /* the grey of the Ontario logos */
.footer .footer-box .footer-box-item { align-content: start; }  /* name, text and contacts from the top, whatever the card's height */
.footer .footer-box-item ul li em { font-style: normal; font-size: 12px; color: var(--color-grey-59); }
@media (max-width: 992px) { .footer .footer-box--n3 .container { grid-template-columns: 1fr; } }
/* Province status pills (“Private sites allowed” / “Government site only”): even padding on both sides — the base
   .t-label drops its left padding for the section labels. */
.t-label.t-label--v1, .t-label.t-label--v2 { display: inline-block; padding: 4px 12px; text-align: center; white-space: nowrap; }
/* Similar-app cards without a screenshot: the logo fills the whole image band (on its brand colour, or white), not a
   small tile in the grey band. */
.app-card__image.app-card__image--logo { padding: 0; min-height: 0; background: var(--color-white-solid, #fff); overflow: hidden; }
.app-card__image--logo .app-card__logo.logo-box { width: 100%; height: 240px; border: 0; border-radius: 0; }
.app-card__image--logo .app-card__logo.logo-box img,
.app-card__image--logo .app-card__logo.logo-box img.is-tile { padding: 44px 14%; }
@media (max-width: 767px) { .app-card__image--logo .app-card__logo.logo-box { height: 200px; } }

/* Writer profile: the live biography (links, lists, subheadings, quotes), not only paragraphs. */
.w-profile__content a { color: var(--color-red-43); text-decoration: underline; text-underline-offset: 2px; }
.w-profile__content a:hover { text-decoration: none; }
.w-profile__content h2,
.w-profile__content h3 { margin-top: 8px; font-family: var(--font-family); font-weight: 700; font-size: 18px; line-height: 140%; color: var(--color-grey-10); }
.w-profile__content ul,
.w-profile__content ol { display: grid; gap: 8px; padding-left: 24px; font-family: var(--font-family); font-size: 16px; line-height: 170%; color: var(--color-grey-25); }
.w-profile__content ul li { position: relative; }
.w-profile__content ul li::before { content: ""; position: absolute; left: -14px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-red-43); }
.w-profile__content ol { list-style: decimal; }
.w-profile__content blockquote { padding-left: 20px; border-left: 3px solid var(--color-red-43); font-style: italic; }