/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ============================================================================
   DESIGN TOKENS
   ----------------------------------------------------------------------------
   Per-site customization happens here and (almost) only here. Override any of
   these variables in a site-specific stylesheet loaded *after* this one, or
   replace the values directly when forking for a new site.

   ⚠  REPLACE BEFORE LAUNCH ⚠
   The default palette is a deliberately dated muted blue/gray. Sites that
   ship on these defaults will visibly look unbranded. This is intentional.

   Per-site setup checklist:
     [ ] Set --color-brand-primary (header, headings accent)
     [ ] Set --color-brand-accent (link highlights in feature rows)
     [ ] Set --color-cta-bg / --color-cta-text (the "Bet Now" / primary button)
     [ ] Set --color-bg-elevated (review-box background)
     [ ] Set --color-border-strong (review-box border, divider lines)
     [ ] Confirm --font-display matches the site's hero/heading font
     [ ] Confirm --font-body covers the body text needs
   ============================================================================ */

:root {
  /* ---------- Brand colors (override per site) ---------- */
  --color-brand-primary:    #4a6585;   /* placeholder muted blue */
  --color-brand-primary-dk: #3a5067;   /* darker shade for headers/hovers */
  --color-brand-accent:     #c8a04e;   /* placeholder muted gold */
  --color-text-on-brand:    #ffffff;   /* readable text on brand color */

  --color-cta-bg:           #d9b94a;   /* primary CTA button bg */
  --color-cta-bg-hover:     #b89a3d;
  --color-cta-text:         #1a1a1a;
  --color-cta-shadow:       rgba(0, 0, 0, 0.4);

  --color-cta-secondary-bg:       #c43050;   /* secondary CTA (review-box main button) */
  --color-cta-secondary-bg-hover: #2e8a3a;
  --color-cta-secondary-text:     #ffffff;

  /* ---------- Surface colors ---------- */
  --color-bg-page:          #ffffff;
  --color-bg-elevated:      #f0f4f8;   /* review-box, callout backgrounds */
  --color-bg-row-alt:       #f5f5f5;   /* striped table rows */
  --color-bg-feature-row:   #3a5067;   /* feature-row dark bg */
  --color-bg-method-row:    #1a1a1a;   /* method-grid dark band */
  --color-bg-callout-bar:   #1e2a40;   /* circular callout / rating badge bg */

  /* ---------- Text colors ---------- */
  --color-text-body:        #222222;
  --color-text-muted:       #5a5a5a;
  --color-text-on-dark:     #ffffff;
  --color-text-rank:        #b13030;   /* rank "#1, #2..." color */
  --color-text-rank-mark:   #8a8a8a;   /* the "#" prefix */

  /* ---------- Border colors ---------- */
  --color-border-strong:    #4a6585;   /* component frames (review-box) */
  --color-border-soft:      #d9d9d9;   /* table cell borders */
  --color-border-divider:   #14408f;   /* section divider lines */

  /* ---------- Icon / decoration ---------- */
  --color-icon-list:        #4a6585;   /* chevron/arrow bullet color */
  --color-icon-list-alt:    #2e8a3a;   /* alternate bullet color */
  --color-icon-rating:      #ffa500;   /* star rating color */

  /* ---------- Typography ---------- */
  /* Font families — replace --font-display per site if a different display
     font is wanted. --font-body falls back through a clean system stack. */
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-display: "Oswald", var(--font-body);
  --font-numeric: "Oswald", var(--font-body); /* for rank numbers, bonus amounts */

  /* Type scale — anchored to 18px base. Each step is a 1.2 modular ratio.
     Verified mobile-safe: smallest size (--text-xs) = 14.4px. */
  --text-xs:   0.8rem;   /* 14.4px — labels, fine print only */
  --text-sm:   0.9rem;   /* 16.2px — secondary text, captions */
  --text-base: 1rem;     /* 18px    — body text */
  --text-lg:   1.2rem;   /* 21.6px  — emphasized body, h4 */
  --text-xl:   1.44rem;  /* 25.9px  — h3 */
  --text-2xl:  1.728rem; /* 31.1px  — h2 */
  --text-3xl:  2.074rem; /* 37.3px  — h1 */
  --text-4xl:  2.488rem; /* 44.8px  — hero / oversized */

  /* ---------- Spacing scale ---------- */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */

  /* ---------- Layout ---------- */
  --content-max-width: 1380px;
  --content-padding-x: var(--space-5);
  --container-radius:  5px;
  --container-radius-lg: 10px;

  /* ---------- Component-specific tokens ---------- */
  --rev-box-bg:        var(--color-bg-elevated);
  --rev-box-border:    var(--color-border-strong);
  /* Pro-tip border is intentionally semi-transparent for a softer look —
     ~28% alpha matches the original casino site's #256d2047 styling. */
  --pro-tip-border:    rgba(74, 101, 133, 0.28);
  --cta-button-radius: 3px;

  /* Hero section link color — distinct from feature-row link color so the
     two contexts can be visually differentiated when both appear on a page. */
  --color-hero-link:   var(--color-brand-accent);

  /* Icon glyphs — change per vertical if desired
     (Font Awesome 7 unicode codepoints) */
  --icon-info:        "\f05a";  /* info circle (default for .pro-tip) */
  --icon-chevron:     "\f18e";  /* chevron-circle-right */
  --icon-arrow:       "\f138";  /* chevron-circle-right alternate */
}

/* ============================================================================
   FONT LOADING
   ----------------------------------------------------------------------------
   Oswald loaded from theme assets, not from upload directory. This keeps the
   stylesheet portable — fonts travel with the theme, not with a given site's
   uploads folder.
   ============================================================================ */
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/oswald-v57-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  src: url("assets/fonts/oswald-v57-latin-500.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  src: url("assets/fonts/oswald-v57-latin-700.woff2") format("woff2");
}

/* ============================================================================
   FOUNDATION
   ----------------------------------------------------------------------------
   Phone-first: base styles target mobile. Min-width media queries enhance
   for larger viewports.
   ============================================================================ */

body {
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-text-body);
  background-color: var(--color-bg-page);
}

/* Restore default page title rendering (entry-header). Authors don't add
   manual H1 blocks anymore — the_title() handles it. Pages that need
   custom H1 placement (homepage, landing pages) opt out by adding
   the .page-no-title body class via a page template. */
.page-no-title .entry-header {
  display: none;
}

.site-header {
  background-color: var(--color-brand-primary);
}

.main-navigation a {
  font-size: var(--text-lg);
}

.inner-content-row {
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-5) var(--content-padding-x);
}

.gp-icon {
  font-size: 250%;
}

.mobile-menu-control-wrapper {
  margin-left: auto;
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.2;
}

/* Phone-first heading sizes: smaller on mobile, scaled up at larger viewports.
   Computed pixels at 18px base shown for sanity-check. */
h1 { font-size: var(--text-2xl); text-align: center; }   /* 31.1px on mobile */
h2 { font-size: var(--text-xl); }                         /* 25.9px on mobile */
h3 { font-size: var(--text-lg); }                         /* 21.6px on mobile */
h4 { font-size: var(--text-lg); }                         /* 21.6px on mobile */
h5 { font-size: var(--text-base); }                       /* 18px on mobile  */

@media (min-width: 728px) {
  h1 { font-size: var(--text-3xl); text-align: left; }    /* 37.3px on tablet+ */
}
@media (min-width: 1025px) {
  h2 { font-size: var(--text-2xl); }                      /* 31.1px on desktop */
  h3 { font-size: var(--text-xl); }                       /* 25.9px on desktop */
}

/* Headings with a styled-callout look were previously H5. That was wrong —
   real H5s on the site got button styling. Use .callout-heading instead,
   which is heading-agnostic. */
.callout-heading {
  display: block;
  text-align: center;
  background-color: var(--color-bg-page);
  color: var(--color-text-body);
  border: 3px dashed var(--color-brand-primary);
  border-radius: var(--container-radius);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.6;
  padding: var(--space-3) var(--space-4);
}
.callout-heading a {
  color: var(--color-text-body);
  text-decoration: none;
}

/* ---------- Focus states (accessibility) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/* ---------- Reduced motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================================
   FEATURE ROW
   ----------------------------------------------------------------------------
   Full-bleed colored band — used to highlight a key section, hero CTA area,
   or feature callout. Vertical-agnostic.
   ============================================================================ */
.feat-row {
  background-color: var(--color-bg-feature-row);
  color: var(--color-text-on-dark);
  padding: var(--space-5) 0 var(--space-1);
  font-size: 105%;
}
.feat-row h2 {
  border-left: 0;
  padding-left: 0;
}
.feat-row a,
.hero a {
  color: var(--color-brand-accent);
}
.hero a {
  color: var(--color-hero-link);
}

/* ============================================================================
   METHOD GRID  (formerly .payment-icons / .paymt-row)
   ----------------------------------------------------------------------------
   Renamed from "payment" to "method" so the same component can show deposit
   methods, withdrawal methods, accepted currencies, supported sportsbooks,
   etc. — across verticals.
   ============================================================================ */
.method-row {
  background-color: var(--color-bg-method-row);
}
.method-row h2 {
  color: var(--color-text-on-dark);
}

.method-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-start;
  margin-left: auto;
  margin-right: auto;
}
.method-grid > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-sm);   /* 16.2px — readable on mobile */
  width: 162px;
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-on-dark);
  border: 2px solid #5b5b5b;
  border-radius: var(--container-radius);
}
.method-grid img {
  margin: 3px 0;
}

/* Backward-compat aliases so existing pages don't break before content
   is migrated to the new class names. Remove these aliases once the
   portfolio migration is complete. */
.payment-icons { /* deprecated → use .method-grid */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-start;
  margin-left: auto;
  margin-right: auto;
}
.payment-icons > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  width: 162px;
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-on-dark);
  border: 2px solid #5b5b5b;
  border-radius: var(--container-radius);
}
.payment-icons img { margin: 3px 0; }
.paymt-row { /* deprecated → use .method-row */
  background-color: var(--color-bg-method-row);
}
.paymt-row h2 { color: var(--color-text-on-dark); }

/* ============================================================================
   PRO TIP CALLOUT
   ----------------------------------------------------------------------------
   Dashed-border callout box with an icon. Vertical-agnostic — change the icon
   per-vertical via --icon-info if desired.
   ============================================================================ */
.pro-tip {
  position: relative;
  border: 3px dashed var(--pro-tip-border);
  border-radius: var(--container-radius);
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-10) + var(--space-6));
  margin-bottom: var(--space-6);
}
.pro-tip::before {
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  content: var(--icon-info);
  color: var(--color-brand-primary);
  font-size: 2.2rem;
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
}
.pro-tip > p:first-child,
.pro-tip > p:only-child {
  margin-top: 0;
}

/* ============================================================================
   LIST STYLES
   ----------------------------------------------------------------------------
   Custom bullet styles for emphasis lists (chevron, arrow) and ordered
   numbered lists with circular badges.
   ============================================================================ */
ul.chev,
ul.arrow {
  list-style: none;
  padding-left: 0;
  margin-left: var(--space-5);
  text-align: left;
}
ul.chev li,
ul.arrow li {
  position: relative;
  padding-left: 1.6em;
}
ul.chev li::before,
ul.arrow li::before {
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
}
ul.chev li::before {
  content: var(--icon-chevron);
  color: var(--color-icon-list);
}
ul.arrow li::before {
  content: var(--icon-arrow);
  color: var(--color-icon-list-alt);
}

ol.numbered {
  counter-reset: counter;
  list-style: none;
  margin-left: 0;
  padding: var(--space-5);
  border-radius: var(--container-radius-lg);
}
ol.numbered li {
  margin: 0;
  counter-increment: counter;
  position: relative;
  padding: var(--space-2) 0 var(--space-2) calc(var(--space-10) + var(--space-1));
}
ol.numbered li::before {
  content: counter(counter);
  position: absolute;
  left: var(--space-1);
  top: var(--space-1);
  width: 30px;
  height: 30px;
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-brand);
  font-family: var(--font-display);
  font-size: var(--text-base);
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  text-shadow: 1px 1px var(--color-bg-method-row);
}
/* Bug fix: original was missing leading dot on .rev-box selector */
.rev-box ol.numbered {
  margin-left: 0;
}
@media (max-width: 728px) {
  .rev-box ol.numbered {
    margin-left: calc(-1 * var(--space-10));
  }
}

/* ============================================================================
   RESPONSIVE COMPARISON TABLE  (table.resp)
   ----------------------------------------------------------------------------
   The portfolio's primary tabular component. Real <table> markup — better
   for accessibility, SEO, and email portability than div-based layouts.
   Mobile: cells stack as labeled rows using data-label attributes.
   ============================================================================ */
.responsive-table {
  overflow-x: auto;
}
table.resp {
  width: 100%;
  border-collapse: collapse;
}
table.resp th,
table.resp td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-soft);
  text-align: center;
  font-size: var(--text-sm);    /* 16.2px — readable on mobile */
}
table.resp th {
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-brand);
}
table.resp tbody tr:nth-child(even) {
  background-color: var(--color-bg-row-alt);
}
table.resp tbody tr:nth-child(odd) {
  background-color: var(--color-bg-page);
}
table.resp th.text-left,
table.resp td.text-left,
table.resp.text-left th,
table.resp.text-left td {
  text-align: left;
}
table.resp th.text-center,
table.resp td.text-center {
  text-align: center;
}

/* The "Bet Now" / "Visit Site" CTA inside table cells. */
table.resp .visit a,
table.resp a.visit-link {
  display: inline-block;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--cta-button-radius);
  border: 1px solid var(--color-border-soft);
  text-decoration: none;
  cursor: pointer;
  width: 170px;
  text-align: center;
}
table.resp .visit a:hover,
table.resp a.visit-link:hover {
  background: var(--color-cta-bg-hover);
}

/* ---------- Modifier: .resp.ranked ---------------------------------------
   Adds a stylized "#1, #2, #3" first column for top-N comparison tables.
   Replaces the old .divtablewrapper .rank pattern.
   Apply to <td> in the first column with class="rank". */
table.resp.ranked td.rank {
  font-family: var(--font-numeric);
  color: var(--color-text-rank);
  font-size: var(--text-xl);
  font-weight: normal;
  width: 75px;
  line-height: 1;
}
table.resp.ranked td.rank::before {
  content: "#";
  display: inline-block;
  margin-right: 0.2em;
  font-family: var(--font-body);
  font-size: 80%;
  color: var(--color-text-rank-mark);
  position: relative;
  top: -2px;
}

/* ---------- Modifier: .resp.pill-headers ---------------------------------
   Replaces the dark header band with white-bg headers containing styled
   "pills" of text — a softer, more editorial look.
   Replaces the old .row.header .cell p pattern. */
table.resp.pill-headers thead th {
  background-color: var(--color-bg-page);
  color: var(--color-text-body);
  border-bottom: 1px solid var(--color-border-soft);
}
table.resp.pill-headers thead th > span {
  display: inline-block;
  background-color: var(--color-brand-primary-dk);
  color: var(--color-text-on-brand);
  border-radius: 3px;
  padding: 0 var(--space-2);
  max-width: 124px;
}

/* ---------- Phone-first responsive behavior ----------
   Mobile (default): cells stack as labeled rows using data-label attributes.
   Tablet+ (≥501px): standard table layout with row striping.

   This is the phone-first inversion. The base styles below assume mobile;
   the @media (min-width) block restores normal table rendering for larger
   viewports. */

/* Mobile-first base: stacked card layout */
table.resp thead {
  display: none;
}
table.resp,
table.resp tbody,
table.resp tr,
table.resp td {
  display: block;
  width: 100%;
}
table.resp tr {
  margin-bottom: var(--space-4);
}
table.resp td {
  text-align: center;
  position: relative;
  font-size: var(--text-base);
}
table.resp td::before {
  content: attr(data-label);
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: bold;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* Ranked table on mobile: the rank column spans full width */
table.resp.ranked td.rank {
  width: 100%;
}

/* Tablet and up: restore standard table layout */
@media (min-width: 501px) {
  table.resp thead {
    display: table-header-group;
  }
  table.resp {
    display: table;
  }
  table.resp tbody {
    display: table-row-group;
  }
  table.resp tr {
    display: table-row;
    margin-bottom: 0;
  }
  table.resp td {
    display: table-cell;
    text-align: center;
    font-size: var(--text-sm);   /* 16.2px on tablet+ */
  }
  table.resp td::before {
    /* Hide data-label pseudo-element when in table mode */
    content: none;
  }
  table.resp.ranked td.rank {
    width: 75px;   /* restore narrow rank column on tablet+ */
  }
}

/* ============================================================================
   REVIEW BOX  (.rev-box)
   ----------------------------------------------------------------------------
   Operator/product review card with rating, image, payment methods, CTA.
   Vertical-agnostic — works for sportsbook, casino, poker, horse racing
   platforms, anything with a "review the operator" use case.

   Layout note: the original used negative-margin positioning hacks
   (top: -140px, margin-top: 78px) for the rating badge over the logo.
   Replaced here with a cleaner stacking approach using flex/relative.
   ============================================================================ */
.rev-box {
  padding: var(--space-5) var(--space-5);
}
@media (min-width: 728px) {
  .rev-box {
    padding: var(--space-8) var(--space-10);
  }
}

.rev-box .rev-wrapper {
  border: 2px solid var(--rev-box-border);
  border-radius: var(--container-radius);
  padding: var(--space-4);
  background-color: var(--rev-box-bg);
}

.rev-box .rev-tag {
  border-left: 4px solid var(--color-brand-primary);
  padding-left: var(--space-2);
  margin-top: var(--space-5);
  margin-left: var(--space-4);
  font-size: var(--text-lg);
}

.rev-box .rev-stars {
  margin-bottom: var(--space-10);
  margin-left: var(--space-4);
}

.rev-box h4 {
  font-size: var(--text-lg);
  padding-left: var(--space-8);
  position: relative;
}
.rev-box h4::before {
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  content: var(--icon-info);
  color: var(--color-brand-primary);
  font-size: 2.2rem;
  position: absolute;
  left: 0;
  top: 0;
}

.rev-box h5 {
  border-bottom: 3px solid var(--color-brand-primary);
}

/* Payment-methods strip inside a review box — smaller, no borders */
.rev-box .method-grid,
.rev-box .payment-icons {
  margin: 0 auto;
}
.rev-box .method-grid > div,
.rev-box .payment-icons > div {
  width: 40px;
  height: 40px;
  padding: var(--space-1) var(--space-2);
  border: 0;
  gap: 1px;
}

/* The rating-number badge over the operator logo. Originally positioned
   with top: -140px hack — replaced with relative stacking + transform. */
.rev-box .wp-block-image {
  position: relative;
}
.rev-box .wp-block-image figcaption {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-bg-callout-bar);
  color: var(--color-text-on-dark);
  font-family: var(--font-display);
  font-size: 2rem;
  text-align: center;
  max-width: 100px;
  line-height: 70px;
  border-radius: 26px;
  margin: 0;
}
.rev-box .wp-block-image figcaption sup {
  color: var(--color-brand-primary);
}

.rev-box .rev-img {
  margin-top: var(--space-10);
  margin-bottom: 0;
  position: relative;
}

/* The primary "Bet Now" / "Sign Up" CTA inside a review box. */
.rev-btn {
  margin-top: var(--space-5);
}
.rev-btn .rev-box-btn {
  display: inline-block;
  color: var(--color-cta-secondary-text);
  background-color: var(--color-cta-secondary-bg);
  font-size: var(--text-xl);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-shadow: var(--color-cta-shadow) 1px 1px 3px;
  border-radius: var(--cta-button-radius);
  padding: var(--space-3);
  margin-top: var(--space-8);
}
.rev-btn .rev-box-btn:hover,
.rev-box-btn:hover {
  background-color: var(--color-cta-secondary-bg-hover);
  color: var(--color-cta-secondary-text);
}
@media (max-width: 728px) {
  .rev-btn .rev-box-btn {
    font-size: var(--text-lg);
  }
}

/* Background variant — light tinted band for review-box sections */
.rev-bg1 {
  border-top: 1px solid var(--color-border-divider);
  border-bottom: 1px solid var(--color-border-divider);
  background-color: #f5f8ff;
}

/* "Payment box" detail inside a review */
.paymt-box {
  border: 3px dashed var(--color-brand-primary);
  border-radius: var(--container-radius);
  padding: var(--space-3) var(--space-4) var(--space-6);
  margin-top: var(--space-5);
  max-width: 300px;
}

/* ============================================================================
   OPERATOR TABLE  (formerly .cas-tbl — Tier 2 gambling component)
   ----------------------------------------------------------------------------
   Wrapper that gives the responsive table a colored frame and operator-grid
   styling. Genericized name — works for any vertical's operator listings.
   The legacy .cas-tbl alias is preserved for migration compatibility.
   ============================================================================ */
.operator-table .responsive-table {
  overflow-x: inherit;
}
.operator-table .table-wrapper {
  background-color: var(--color-brand-primary-dk);
  padding: var(--space-4);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-5);
}
.operator-table .table-wrapper p,
.operator-table .table-wrapper h2 {
  color: var(--color-text-on-dark);
}
.operator-table .table-wrapper a {
  color: var(--color-brand-accent);
}
.operator-table table {
  background-color: var(--color-bg-page);
  border: none;
  border-radius: var(--container-radius-lg);
}
.operator-table table tr th {
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-dark);
}
.operator-table table.table-center {
  text-align: center;
}
.operator-table table.table-highlight img {
  width: 140px;
  height: 42px;
  margin: auto;
  padding-top: var(--space-1);
}
.operator-table table.table-highlight tr td:first-of-type {
  width: 150px;
  text-align: center;
}
.operator-table table.table-highlight a.visit-link {
  display: inline-block;
  background: var(--color-cta-bg);
  color: var(--color-cta-text) !important;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-decoration: none;
  text-align: center;
  padding: var(--space-1) var(--space-4);
  border: 3px solid #c5c5c5;
  border-radius: 9px;
}
.operator-table table.table-highlight a.visit-link:hover {
  background: var(--color-cta-bg-hover);
}
.operator-table .fa {
  color: var(--color-icon-rating);
  font-size: var(--text-lg);
}

/* Operator logo and rating cells inside an operator table.
   Renamed from .casino-logo / .casino-rating for vertical-agnostic use. */
.operator-table .operator-logo,
.operator-table .casino-logo {  /* alias */
  min-width: 150px;
  text-align: center;
}
.operator-table .operator-logo img,
.operator-table .operator-rating img,
.operator-table .casino-logo img,    /* alias */
.operator-table .casino-rating img {  /* alias */
  margin-top: 7px;
}

/* Back-compat alias — remove once all sites migrate to .operator-table */
.cas-tbl { /* deprecated → use .operator-table */ }
.cas-tbl .responsive-table { overflow-x: inherit; }
.cas-tbl .table-wrapper {
  background-color: var(--color-brand-primary-dk);
  padding: var(--space-4);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-5);
}
.cas-tbl .table-wrapper p,
.cas-tbl .table-wrapper h2 { color: var(--color-text-on-dark); }
.cas-tbl .table-wrapper a { color: var(--color-brand-accent); }
.cas-tbl table {
  background-color: var(--color-bg-page);
  border: none;
  border-radius: var(--container-radius-lg);
}
.cas-tbl table tr th {
  background-color: var(--color-brand-primary);
  color: var(--color-text-on-dark);
}
.cas-tbl table.table-center { text-align: center; }
.cas-tbl table.table-highlight img {
  width: 140px; height: 42px; margin: auto; padding-top: var(--space-1);
}
.cas-tbl table.table-highlight tr td:first-of-type {
  width: 150px; text-align: center;
}
.cas-tbl table.table-highlight a.visit-link {
  display: inline-block;
  background: var(--color-cta-bg);
  color: var(--color-cta-text) !important;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-decoration: none; text-align: center;
  padding: var(--space-1) var(--space-4);
  border: 3px solid #c5c5c5;
  border-radius: 9px;
}
.cas-tbl table.table-highlight a.visit-link:hover {
  background: var(--color-cta-bg-hover);
}
.cas-tbl .fa {
  color: var(--color-icon-rating); font-size: var(--text-lg);
}

/* ============================================================================
   BONUS AMOUNT  (formerly .casino-bonus — Tier 2 gambling component)
   ----------------------------------------------------------------------------
   Inline formatting for bonus values like "100% match $1,000".
   Uses --font-numeric (defaults to Oswald — was Teko/Anton, which were
   referenced but never loaded). Vertical-agnostic.
   ============================================================================ */
.bonus-amount span,
.casino-bonus span {  /* alias for back-compat */
  vertical-align: middle;
  display: inline-block;
  font-weight: bold;
}
.bonus-amount span.bonus-prefix,
.casino-bonus span.tbl-bonus-1 {
  font-family: var(--font-numeric);
  font-size: var(--text-base);
  color: #2f5d6b;
  padding-right: var(--space-1);
}
.bonus-amount span.bonus-value,
.casino-bonus span.tbl-bonus-3 {
  font-family: var(--font-numeric);
  font-size: var(--text-xl);
  color: var(--color-text-rank);
  padding-left: var(--space-1);
}

/* ============================================================================
   UTILITIES
   ============================================================================ */
.bdr-btm {
  border-bottom: 1px solid var(--color-border-divider);
}

/* Visibility utilities. By default, both classes are visible — the media
   queries below hide them at the appropriate breakpoint. */
@media (max-width: 992px) {
  .hide-tablet-up {
    display: none !important;
  }
}
@media (max-width: 580px) {
  .hide-mobile {
    display: none !important;
  }
}

/* ============================================================================
   DEPRECATED — BACK-COMPATIBILITY LAYER
   ----------------------------------------------------------------------------
   These rules exist so existing pages don't break before content migration.
   Each block represents a legacy component or class name that has been
   replaced by a Tier 1 equivalent. Once the portfolio migration is complete
   and no live page uses these markers anymore, this entire section can be
   removed.

   Tracking checklist:
     [ ] .divtable / .divtablewrapper  → migrate markup to <table class="resp ranked">
     [ ] .cas-tbl                       → rename to .operator-table
     [ ] .payment-icons / .paymt-row    → rename to .method-grid / .method-row
     [ ] .casino-bonus                  → rename to .bonus-amount
     [ ] .casino-logo / .casino-rating  → rename to .operator-logo / .operator-rating
     [ ] .hide-med                      → rename to .hide-tablet-up
     [ ] .cya                           → rename to .hide-mobile (or document semantic intent)
   ============================================================================ */

/* --- .hide-med / .cya utility aliases --- */
.hide-med {  /* deprecated → use .hide-tablet-up */
  /* picks up the @media rule below */
}
.cya {  /* deprecated → use .hide-mobile (or rename if semantic was different) */
  /* picks up the @media rule below */
}
@media (max-width: 992px) {
  .hide-med {
    display: none !important;
  }
}
@media (max-width: 580px) {
  .cya {
    display: none !important;
  }
}

/* --- .divtable / .divtablewrapper system ---
   Div-based responsive table used on legacy pages. New code should use
   <table class="resp ranked"> instead. The rules below preserve visual
   parity for unmigrated pages. */
.divtablewrapper {
  margin: 0 0 var(--space-5);
}
.divtable {
  width: 100%;
  margin: 0;
  display: table;
  text-align: center;
}
.row {
  display: table-row;
}
.row.header {
  background-color: var(--color-bg-page);
  color: var(--color-text-on-dark) !important;
}
.row.header .cell {
  padding: var(--space-4) var(--space-3) var(--space-3);
  color: var(--color-text-body);
  border-top: none;
  font-size: 119%;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.row.header .cell p {
  padding: 0 !important;
  max-width: 124px;
  margin: 0 auto;
  border-radius: 3px;
  background-color: var(--color-brand-primary-dk);
  color: var(--color-text-on-dark);
}
.cell {
  padding: var(--space-2);
  display: table-cell;
  vertical-align: middle;
  border-top: 1px solid var(--color-border-soft);
}
.divtablewrapper .rank {
  text-align: center;
  width: 75px;
  font-family: var(--font-numeric);
  color: var(--color-text-rank);
  line-height: 1;
  font-size: var(--text-xl);
  font-weight: normal;
}
.divtablewrapper .rank::before {
  content: '#';
  display: inline-block;
  margin-right: 0.2em;
  font-family: var(--font-body);
  font-size: 80%;
  color: var(--color-text-rank-mark);
  position: relative;
  top: -2px;
}
.divtablewrapper .casino-logo,
.divtablewrapper .operator-logo {
  min-width: 150px;
}
.divtablewrapper .casino-logo img,
.divtablewrapper .casino-rating img,
.divtablewrapper .operator-logo img,
.divtablewrapper .operator-rating img {
  margin-top: 7px;
}
.divtablewrapper .visit a {
  display: inline-block;
  background: var(--color-cta-bg);
  border-radius: var(--cta-button-radius);
  border: 1px solid var(--color-border-soft);
  cursor: pointer;
  color: var(--color-cta-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  width: 170px;
  margin-top: 1px;
}
.divtablewrapper .visit a:hover {
  background: var(--color-cta-bg-hover);
}
.table .row:not(:first-of-type):hover {
  background-color: var(--color-bg-row-alt) !important;
}
.table-grey-background .row:not(:first-of-type):hover {
  background-color: var(--color-bg-page) !important;
}

/* divtable mobile stacking — phone-first inverted */
.divtable {
  display: block;
}
.row:not(.header) {
  padding: 14px 0 7px;
  display: block;
  box-shadow: 0 0 2px 2px var(--color-bg-row-alt);
  margin-bottom: var(--space-5);
}
.row.header {
  padding: 0;
  height: 10px;
}
.row.header .cell {
  display: none !important;
}
.row .cell {
  margin-bottom: var(--space-3);
  text-align: center;
  border-top: none;
  display: block;
  padding: 2px var(--space-4);
}
.row .cell:last-of-type {
  padding-bottom: var(--space-5);
}
.divtablewrapper .rank {
  width: 100%;
}

/* divtable tablet+ — restore table layout */
@media (min-width: 581px) {
  .divtable {
    display: table;
  }
  .row:not(.header) {
    padding: 0;
    display: table-row;
    box-shadow: none;
    margin-bottom: 0;
  }
  .row.header {
    padding: 0;
    height: auto;
  }
  .row.header .cell {
    display: table-cell !important;
  }
  .row .cell {
    margin-bottom: 0;
    display: table-cell;
    padding: var(--space-2);
    border-top: 1px solid var(--color-border-soft);
  }
  .divtablewrapper .rank {
    width: 75px;
  }
}

/* ============================================================================
   END
   ----------------------------------------------------------------------------
   Tier 2 vertical-specific layers (sportsbook odds widgets, horse racing
   cards, etc.) load AFTER this file in their own stylesheets and may
   override these tokens for their vertical.
   ============================================================================ */