/*
Theme Name: Bet Site Rank Editorial
Template: betsiterank
Version: 1.16.0
Text Domain: betsiterank
Description: Editorial rebuild of the Bet Site Rank front end, ported from the Next.js/React source design (hairline borders, alarm-red accent, Outfit display face). Overrides header/footer/front-page only; inherits the parent theme's Casino CPT and admin tooling.
*/

:root {
  --bg-primary: #fafafa;
  --bg-secondary: #ffffff;
  --border-subtle: #e5e7eb;
  --text-primary: #111114;
  --text-secondary: #6b7280;
  --accent-red: #e72f48;
  --font-outfit: "Outfit", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

:root[data-theme="dark"] {
  --bg-primary: #0a0a0b;
  --bg-secondary: #121013;
  --border-subtle: #2a2124;
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --accent-red: #f03b4f;
}

.bsrx-site, .bsrx-site * { box-sizing: border-box; }

.bsrx-site {
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.bsrx-site :focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 3px;
}

.bsrx-site h1, .bsrx-site h2, .bsrx-site h3 {
  font-family: var(--font-outfit);
  margin: 0;
}

.bsrx-site p { margin: 0; }
.bsrx-site a { color: inherit; text-decoration: none; }
.bsrx-site ul { list-style: none; margin: 0; padding: 0; }
.bsrx-site button { font: inherit; cursor: pointer; }

.bsrx-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2000;
  min-height: 44px;
  padding: 0.7rem 1rem;
  color: #fff;
  background: var(--accent-red);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 800;
  transform: translateY(calc(-100% - 1rem));
  display: inline-flex;
  align-items: center;
}

.bsrx-skip-link:focus { transform: translateY(0); }

.bsrx-container {
  width: min(100% - 48px, 1400px);
  margin: 0 auto;
}

/* ---------- Header ---------- */

.bsrx-header {
  position: sticky;
  top: 0;
  z-index: 70;
  width: 100%;
  background: color-mix(in srgb, var(--bg-primary) 94%, transparent);
  border-bottom: 1px solid var(--border-subtle);
}

@supports (backdrop-filter: blur(12px)) {
  .bsrx-header { backdrop-filter: blur(12px); }
}

.bsrx-utility-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.bsrx-utility-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  width: min(100% - 48px, 1400px);
  height: 34px;
  margin: 0 auto;
}

.bsrx-utility-inner > a,
.bsrx-utility-inner > .bsrx-market {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 34px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.bsrx-utility-inner svg { flex: 0 0 auto; width: 1rem; height: 1rem; }
.bsrx-utility-inner > a:hover { color: var(--text-primary); }

.bsrx-header-main { background: color-mix(in srgb, var(--bg-primary) 96%, transparent); }

.bsrx-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100% - 48px, 1400px);
  height: 74px;
  margin: 0 auto;
}

.bsrx-brand { flex: 0 0 auto; width: 205px; display: block; }
.bsrx-brand img { width: 100%; height: auto; display: block; }
.bsrx-brand img.bsrx-brand-logo-dark { display: none; }
:root[data-theme="dark"] .bsrx-brand-logo-light { display: none; }
:root[data-theme="dark"] .bsrx-brand-logo-dark { display: block; }

.bsrx-primary-nav {
  display: flex;
  align-self: stretch;
  justify-content: center;
  min-width: 0;
}

.bsrx-primary-nav ul { display: flex; align-self: stretch; align-items: stretch; }

.bsrx-primary-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 11px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.bsrx-primary-nav a::after {
  position: absolute;
  right: 11px;
  bottom: -1px;
  left: 11px;
  height: 2px;
  background: transparent;
  content: "";
}

.bsrx-primary-nav a:hover { color: var(--text-primary); }
.bsrx-primary-nav a:hover::after { background: var(--accent-red); }

.bsrx-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }

.bsrx-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
}

.bsrx-icon-btn:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 5%, transparent); border-color: var(--border-subtle); }

.bsrx-theme-btn { color: var(--accent-red); border-color: color-mix(in srgb, var(--accent-red) 35%, var(--border-subtle)); }
.bsrx-theme-glyph { font-size: 20px; line-height: 1; }

.bsrx-search-glyph { position: relative; display: block; width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 50%; }
.bsrx-search-glyph::after { position: absolute; right: -5px; bottom: -3px; width: 7px; height: 2px; background: currentColor; transform: rotate(45deg); content: ""; }

.bsrx-menu-btn { display: none; }

.bsrx-menu-btn[aria-expanded="true"] .bsrx-menu-glyph { background: transparent; }
.bsrx-menu-btn[aria-expanded="true"] .bsrx-menu-glyph::before { top: 0; transform: rotate(45deg); }
.bsrx-menu-btn[aria-expanded="true"] .bsrx-menu-glyph::after { top: 0; transform: rotate(-45deg); }

.bsrx-mobile-nav { display: none; }

/* ---------- Market / locale disclosures ---------- */

.bsrx-market, .bsrx-locale { position: relative; }

.bsrx-market > summary, .bsrx-locale > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 34px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.bsrx-market > summary::-webkit-details-marker,
.bsrx-locale > summary::-webkit-details-marker { display: none; }

.bsrx-market > summary svg { flex: 0 0 auto; width: 1rem; height: 1rem; }

/* Reserve the width of the longest market name so switching country does not
   resize the button and shove the rest of the utility bar sideways. Measured
   at the button's own 12px/700: International 73.25px is the widest, Brazil
   31.5px the narrowest - a 42px jump on every change. A longer name added
   later simply grows past this floor rather than breaking. */
.bsrx-market > summary > span {
  min-width: 78px;
  text-align: left;
}

/* Chevron marks the summary as a dropdown button and flips when it opens. */
.bsrx-chevron { width: 0.85rem; height: 0.85rem; transition: transform 0.18s ease; }
.bsrx-market[open] .bsrx-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .bsrx-chevron { transition: none; }
}

.bsrx-market > summary:hover, .bsrx-market[open] > summary,
.bsrx-locale > summary:hover, .bsrx-locale[open] > summary { color: var(--text-primary); }

.bsrx-market-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  width: 245px;
  max-height: 360px;
  overflow-y: auto;
  padding: 5px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.bsrx-market-menu a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  min-height: 46px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.bsrx-market-menu a:last-child { border-bottom: 0; }

.bsrx-market-menu a:hover, .bsrx-market-menu a[aria-current="page"] {
  color: var(--accent-red);
  background: color-mix(in srgb, var(--accent-red) 7%, transparent);
}

.bsrx-market-menu a span {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
}

.bsrx-market-menu a strong { font-size: 13px; }

.bsrx-locale-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  display: grid;
  width: 260px;
  gap: 14px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.bsrx-locale-menu label { display: grid; gap: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 700; }

.bsrx-locale-menu select {
  height: 38px;
  padding: 0 10px;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.bsrx-locale-menu p { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }

/* On narrow screens the fixed-width panels would hang off the viewport edge and
   force horizontal scroll, so anchor them to the header and let them span it. */
@media (max-width: 640px) {
  .bsrx-market, .bsrx-locale { position: static; }

  .bsrx-market-menu, .bsrx-locale-menu {
    top: 100%;
    right: 16px;
    left: 16px;
    width: auto;
  }
}

/* ---------- Search overlay ---------- */

.bsrx-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 132px 20px 20px;
}

.bsrx-search-overlay.is-open { display: flex; }

.bsrx-search-scrim { position: absolute; inset: 0; width: 100%; padding: 0; background: rgba(0, 0, 0, 0.72); border: 0; }

.bsrx-search-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 680px);
  padding: 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.bsrx-search-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.bsrx-search-heading strong { font-family: var(--font-outfit); font-size: 20px; }
.bsrx-search-heading button { width: 34px; height: 34px; color: var(--text-secondary); font-size: 25px; background: transparent; border: 0; }

.bsrx-search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.bsrx-search-field input { width: 100%; color: var(--text-primary); background: transparent; border: 0; outline: 0; font-size: 14px; }

.bsrx-search-results { display: grid; margin-top: 10px; border-top: 1px solid var(--border-subtle); }
.bsrx-search-results a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 4px; color: var(--text-secondary); font-size: 14px; border-bottom: 1px solid var(--border-subtle); }
.bsrx-search-results a:hover { color: var(--accent-red); }
.bsrx-search-results p { margin: 0; padding: 20px 4px; color: var(--text-secondary); font-size: 14px; }
.bsrx-menu-glyph, .bsrx-menu-glyph::before, .bsrx-menu-glyph::after { display: block; width: 18px; height: 2px; background: currentColor; }
.bsrx-menu-glyph { position: relative; }
.bsrx-menu-glyph::before, .bsrx-menu-glyph::after { position: absolute; left: 0; content: ""; }
.bsrx-menu-glyph::before { top: -6px; }
.bsrx-menu-glyph::after { top: 6px; }

/* ---------- Hero ---------- */

/* overflow-x guards the right-edge bleed below from ever creating a scrollbar. */
/* Clips both axes, not just x: the backdrop's 4% transition zoom would otherwise
   spill vertically into the section below. */
.bsrx-hero { position: relative; border-bottom: 1px solid var(--border-subtle); overflow: clip; }

/* Dark mode swaps the two-column hero for a full-bleed backdrop. Kept as a real
   <img> rather than a CSS background so it can crossfade on the theme toggle. */
.bsrx-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* Required: the img's width/height attributes otherwise impose an intrinsic
     aspect-ratio that beats height:100% and leaves the backdrop short. */
  aspect-ratio: auto;
  object-fit: cover;
  /* Anchored on the subject rather than the right edge, so she survives the heavy
     horizontal crop when this wide image is forced into a tall mobile hero. */
  object-position: 68% 50%;
  opacity: 0;
  /* Held at a constant 2% so the blur below never samples past the element and
     leaves a pale halo at the hero's edges. It does not animate. */
  transform: scale(1.02);
  transition:
    opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Soft-focus dissolve: the outgoing image goes out of focus as it fades while the
   incoming one resolves from blurred to sharp. No movement at all — the softness
   carries the change, which suits the design's low motion dial better than a zoom.
   Cheap in practice because srcset means phones blur the 768px file, not the 2560px one. */
.bsrx-hero-backdrop-light { opacity: 1; filter: blur(0px); }
.bsrx-hero-backdrop-dark { opacity: 0; filter: blur(14px); }
:root[data-theme="dark"] .bsrx-hero-backdrop-light { opacity: 0; filter: blur(14px); }
:root[data-theme="dark"] .bsrx-hero-backdrop-dark { opacity: 1; filter: blur(0px); }

/* Elementor ships `.elementor img { height: auto }` (specificity 0,1,1) which
   outranks a plain single-class `height: 100%`. Re-assert it with a descendant
   selector so both hero images actually fill their boxes and object-fit applies. */
.bsrx-hero .bsrx-hero-backdrop { height: 100%; }

/* !important is warranted: the theme-scoped rules above carry higher specificity,
   and this must win so the hidden image is not left permanently blurred. */
@media (prefers-reduced-motion: reduce) {
  .bsrx-hero-backdrop { transition: none; filter: none !important; }
}

.bsrx-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* Copy occupies the left half; the right half is intentionally empty so the
     backdrop's subject sits there uncovered. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  /* The backdrop now defines the hero, so height follows the image's 2.116 ratio,
     capped by the fold (108px sticky header + this block's 20px bottom margin). */
  min-height: min(calc(100vw / 2.116), calc(100svh - 128px));
  padding: 10px 0;
  margin-bottom: 20px;
}

.bsrx-hero-copy { max-width: 780px; }

/* Fluid up to the source's 72px so "Compare in Seconds." never wraps to a third line
   in the band between the tablet breakpoint and the 1400px container cap. */
.bsrx-hero-copy h1 { font-size: min(68px, 5.1vw); font-weight: 900; line-height: 1.02; }
.bsrx-hero-copy h1 strong { color: var(--accent-red); font-weight: 900; }

.bsrx-hero-copy > p { max-width: 680px; margin-top: 24px; color: var(--text-secondary); font-size: 16px; line-height: 1.7; }

.bsrx-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }

.bsrx-btn-primary, .bsrx-btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  font-size: 14px;
  font-weight: 800;
  border-radius: 6px;
}

.bsrx-btn-primary { padding: 0 24px; color: #fff; background: var(--accent-red); }
.bsrx-btn-primary:hover { background: color-mix(in srgb, var(--accent-red) 88%, #000); }
.bsrx-btn-text { padding: 0 4px; color: var(--text-primary); }
.bsrx-btn-text:hover { color: var(--accent-red); }

/* ---------- Sections ---------- */

.bsrx-section { padding: 48px 0; border-top: 1px solid var(--border-subtle); }
.bsrx-hero + .bsrx-section { border-top: 0; }

.bsrx-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 20px; }
.bsrx-section-heading > div > span { display: block; margin-bottom: 7px; color: var(--accent-red); font-family: var(--font-mono); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.bsrx-section-heading h2 { font-size: 34px; font-weight: 880; line-height: 1.08; }
.bsrx-section-heading p { max-width: 670px; margin-top: 8px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.bsrx-section-heading > a, .bsrx-section-note a { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-red); font-size: 13px; font-weight: 800; white-space: nowrap; }

.bsrx-review-list { border-top: 1px solid var(--border-subtle); }
.bsrx-review-list > a,
.bsrx-review-list > div { display: grid; grid-template-columns: 50px minmax(0, 1fr) minmax(110px, auto) 24px; align-items: center; gap: 20px; min-height: 90px; padding: 10px 4px; border-bottom: 1px solid var(--border-subtle); }
.bsrx-review-list > a:hover { background: color-mix(in srgb, var(--text-primary) 3%, transparent); }
.bsrx-review-mark { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--accent-red); font-size: 14px; font-weight: 900; border: 1px solid var(--border-subtle); }
.bsrx-review-identity { display: grid; gap: 5px; min-width: 0; }
.bsrx-review-identity strong { font-size: 17px; }
.bsrx-review-identity small, .bsrx-review-status small { overflow: hidden; color: var(--text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.bsrx-review-status { display: grid; justify-items: end; gap: 3px; }
.bsrx-review-status strong { color: var(--accent-red); font-size: 18px; }
.bsrx-row-arrow { color: var(--text-secondary); font-size: 19px; }

.bsrx-section-note { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; }
.bsrx-section-note p { max-width: 720px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }

.bsrx-bonus-grid, .bsrx-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.bsrx-bonus-grid > *, .bsrx-guide-grid > a { display: flex; min-width: 0; min-height: 310px; padding: 24px; flex-direction: column; border-left: 1px solid var(--border-subtle); }
.bsrx-bonus-grid > *:first-child, .bsrx-guide-grid > a:first-child { padding-left: 0; border-left: 0; }
.bsrx-bonus-grid > *:last-child, .bsrx-guide-grid > a:last-child { padding-right: 0; }
.bsrx-guide-grid > a:hover h3 { color: var(--accent-red); }

.bsrx-regional-empty { display: flex; justify-content: space-between; gap: 32px; align-items: center; min-height: 150px; padding: 28px 0; border-block: 1px solid var(--border-subtle); }
.bsrx-regional-empty > div { display: grid; gap: 8px; }
.bsrx-regional-empty strong { font-size: 20px; }
.bsrx-regional-empty p { max-width: 720px; margin: 0; color: var(--text-secondary); line-height: 1.55; }
.bsrx-regional-empty > a { color: var(--accent-red); font-weight: 850; white-space: nowrap; }

.bsrx-guide-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.bsrx-guide-meta span { color: var(--accent-red); font-family: var(--font-mono); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.bsrx-guide-meta small { color: var(--text-secondary); font-size: 11px; }
.bsrx-guide-grid h3 { font-size: 20px; font-weight: 820; line-height: 1.25; }
.bsrx-guide-grid p { margin-top: 10px; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.bsrx-guide-byline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; color: var(--text-secondary); font-size: 11px; border-top: 1px solid var(--border-subtle); }

.bsrx-tool-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.bsrx-tool-grid > a { display: flex; min-width: 0; min-height: 265px; padding: 24px 20px; flex-direction: column; border-left: 1px solid var(--border-subtle); }
.bsrx-tool-grid > a:first-child { padding-left: 0; border-left: 0; }
.bsrx-tool-grid > a:last-child { padding-right: 0; }
.bsrx-tool-grid > a:hover h3 { color: var(--accent-red); }
.bsrx-tool-mark { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 20px; color: var(--accent-red); font-family: var(--font-mono); font-size: 12px; font-weight: 900; border: 1px solid color-mix(in srgb, var(--accent-red) 50%, var(--border-subtle)); border-radius: 6px; }
.bsrx-tool-grid h3 { font-size: 20px; font-weight: 820; line-height: 1.25; }
.bsrx-tool-grid p { margin-top: 10px; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.bsrx-card-action { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 22px; color: var(--accent-red); font-size: 12px; font-weight: 850; }

.bsrx-country-section { padding: 32px 0; }
.bsrx-country-inner { display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr); align-items: center; gap: 42px; }
.bsrx-country-inner > div:first-child { display: flex; align-items: center; gap: 18px; }
.bsrx-globe-mark { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 50px; height: 50px; color: #fff; font-size: 25px; background: var(--accent-red); border-radius: 6px; }
.bsrx-country-inner h2 { font-size: 25px; }
.bsrx-country-inner p { margin-top: 5px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.bsrx-country-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.bsrx-country-nav a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; font-size: 13px; font-weight: 800; border-left: 1px solid var(--border-subtle); }
.bsrx-country-nav a:first-child { border-left: 0; }
.bsrx-country-nav a:hover { color: var(--accent-red); }
.bsrx-country-nav a span { font-size: 18px; }

/* ---------- Footer ---------- */

.bsrx-footer { padding: 56px 0 38px; background: var(--bg-secondary); border-top: 1px solid var(--border-subtle); }
.bsrx-footer-grid { display: grid; grid-template-columns: 2fr repeat(3, minmax(150px, 1fr)); gap: 42px; }
.bsrx-footer-brand > a { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-outfit); font-size: 24px; font-weight: 900; }
.bsrx-footer-brand > a strong { color: var(--accent-red); }
.bsrx-footer-brand > p { max-width: 410px; margin-top: 16px; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.bsrx-trust-signals { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; }
.bsrx-trust-signals span { color: var(--text-primary); font-size: 11px; font-weight: 750; }
.bsrx-trust-signals span::before { margin-right: 6px; color: var(--accent-red); content: "\2713"; }
.bsrx-footer-group { display: flex; flex-direction: column; gap: 11px; }
.bsrx-footer-group h2 { margin-bottom: 3px; font-size: 15px; font-weight: 800; }
.bsrx-footer-group a { color: var(--text-secondary); font-size: 12px; }
.bsrx-footer-group a:hover { color: var(--text-primary); }
.bsrx-responsible-band { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 42px; padding: 22px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.bsrx-responsible-band > div > strong { font-size: 14px; }
.bsrx-responsible-band p { max-width: 1000px; margin-top: 5px; color: var(--text-secondary); font-size: 11px; line-height: 1.65; }
.bsrx-responsible-band a { color: var(--text-primary); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.bsrx-responsible-band > span { flex: 0 0 auto; color: var(--accent-red); font-family: var(--font-mono); font-size: 20px; font-weight: 900; }
.bsrx-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 26px; color: var(--text-secondary); font-size: 11px; }
.bsrx-footer-bottom > div { display: flex; flex: 0 0 auto; gap: 18px; }
.bsrx-footer-bottom a:hover, .bsrx-footer-bottom button:hover { color: var(--text-primary); }
.bsrx-footer-bottom button { padding: 0; color: var(--text-secondary); background: transparent; border: 0; font-size: 12px; }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .bsrx-primary-nav a { padding: 0 8px; font-size: 12px; }
  .bsrx-hero-copy h1 { font-size: 62px; }
  .bsrx-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bsrx-tool-grid > a:nth-child(4) { padding-left: 0; border-left: 0; border-top: 1px solid var(--border-subtle); }
  .bsrx-tool-grid > a:nth-child(5) { border-top: 1px solid var(--border-subtle); }
}

@media (max-width: 1040px) {
  .bsrx-primary-nav { display: none; }
  .bsrx-menu-btn { display: inline-flex; }
  .bsrx-hero-copy { max-width: 850px; }

  /* Stacked layout: a full-bleed backdrop would put the copy on top of the model,
     so the image drops to a band under the text where it reads at full width and
     nothing overlaps. The bottom padding reserves exactly the band's height. */
  .bsrx-hero-inner {
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: auto;
    padding: 48px 0 calc(100vw / 2.116 + 28px);
  }

  /* Descendant selector required: the Elementor override above is .bsrx-hero
     .bsrx-hero-backdrop { height: 100% } and would otherwise win here. */
  .bsrx-hero .bsrx-hero-backdrop {
    top: auto;
    bottom: 0;
    height: auto;
    aspect-ratio: 1885 / 891;
    object-position: center;
  }
  .bsrx-country-inner { grid-template-columns: 1fr; gap: 24px; }
  .bsrx-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bsrx-footer-brand { grid-column: 1 / -1; }

  .bsrx-mobile-nav {
    position: fixed;
    inset: 108px 0 0;
    z-index: 80;
    display: none;
  }
  .bsrx-mobile-nav.is-open { display: block; }
  .bsrx-mobile-nav-panel {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 430px);
    max-height: calc(100vh - 108px);
    margin-left: auto;
    padding: 12px 22px 18px;
    overflow-y: auto;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
  }
  .bsrx-mobile-nav-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; color: var(--text-primary); font-size: 15px; font-weight: 750; border-bottom: 1px solid var(--border-subtle); }
  .bsrx-mobile-nav-panel a:hover { color: var(--accent-red); }
  .bsrx-mobile-scrim { position: absolute; inset: 0; width: 100%; padding: 0; background: rgba(0, 0, 0, 0.72); border: 0; }
}

@media (max-width: 760px) {
  .bsrx-container, .bsrx-utility-inner, .bsrx-header-inner { width: min(100% - 32px, 1400px); }
  .bsrx-utility-inner { gap: 14px; }
  .bsrx-brand { width: 176px; }
  .bsrx-header-inner { height: 68px; }
  .bsrx-mobile-nav { top: 102px; }
  .bsrx-hero-copy h1 { font-size: 48px; }
  .bsrx-section { padding: 40px 0; }
  .bsrx-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .bsrx-section-heading h2 { font-size: 30px; }
  .bsrx-review-list > a { grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 14px; }
  .bsrx-review-status { display: none; }
  /* Unlinked rows are the testing queue, where "Testing / Score withheld" is the
     entire point of the row - so it stays visible here, wrapping under the name
     instead of being dropped the way it is on linked rows. */
  .bsrx-review-list > div { grid-template-columns: 48px minmax(0, 1fr); gap: 6px 14px; }
  .bsrx-review-list > div .bsrx-review-status { display: grid; grid-column: 2; justify-items: start; gap: 2px; }
  .bsrx-review-list > div .bsrx-review-status strong { font-size: 14px; }
  .bsrx-section-note { align-items: flex-start; flex-direction: column; }
  .bsrx-regional-empty { align-items: flex-start; flex-direction: column; }
  .bsrx-bonus-grid, .bsrx-guide-grid { grid-template-columns: 1fr; }
  .bsrx-bonus-grid > *, .bsrx-guide-grid > a { min-height: 0; padding: 24px 0; border-top: 1px solid var(--border-subtle); border-left: 0; }
  .bsrx-bonus-grid > *:first-child, .bsrx-guide-grid > a:first-child { border-top: 0; }
  .bsrx-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bsrx-tool-grid > a { min-height: 240px; padding: 22px 18px; border-top: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); }
  .bsrx-tool-grid > a:nth-child(odd) { padding-left: 0; border-left: 0; }
  .bsrx-tool-grid > a:nth-child(-n + 2) { border-top: 0; }
  .bsrx-country-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bsrx-country-nav a:nth-child(3), .bsrx-country-nav a:nth-child(4) { border-top: 1px solid var(--border-subtle); }
  .bsrx-country-nav a:nth-child(3) { border-left: 0; }
  .bsrx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bsrx-footer-brand { grid-column: 1 / -1; }
  .bsrx-responsible-band, .bsrx-footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .bsrx-utility-inner { justify-content: space-between; gap: 8px; }
  .bsrx-utility-inner > a, .bsrx-utility-inner > .bsrx-market { font-size: 11px; }
  .bsrx-brand { width: 158px; }
  .bsrx-header-actions { gap: 3px; }
  .bsrx-icon-btn { width: 34px; height: 34px; }
  .bsrx-hero-inner { padding-top: 48px; }
  .bsrx-hero-copy h1 { margin-top: 22px; font-size: 41px; line-height: 1.06; }
  .bsrx-hero-copy > p { font-size: 15px; }
  .bsrx-hero-actions { align-items: stretch; flex-direction: column; }
  .bsrx-btn-primary, .bsrx-btn-text { width: 100%; }
  .bsrx-review-identity small { white-space: normal; }
  .bsrx-tool-grid { grid-template-columns: 1fr; }
  .bsrx-tool-grid > a { min-height: 0; padding: 24px 0; border-top: 1px solid var(--border-subtle); border-left: 0; }
  .bsrx-tool-grid > a:first-child { border-top: 0; }
  .bsrx-country-inner > div:first-child { align-items: flex-start; }
  .bsrx-footer-grid { grid-template-columns: 1fr; }
  .bsrx-footer-brand { grid-column: auto; }
}

/* ==========================================================================
   Articles and post listings
   Ported from the source's blog-article--full / blog-hub-shell rules.
   ========================================================================== */

.bsrx-shell {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
  padding: 56px 0 72px;
}

/* ---------- Breadcrumb ---------- */

.bsrx-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.bsrx-breadcrumb a:hover { color: var(--accent-red); }
.bsrx-breadcrumb span[aria-hidden] { color: var(--text-secondary); font-weight: 500; }
.bsrx-breadcrumb strong { color: var(--text-primary); font-weight: 700; }

/* ---------- Article header ---------- */

.bsrx-article-header {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-subtle);
}

.bsrx-article-eyebrow {
  display: block;
  color: var(--accent-red);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.bsrx-article-header h1 {
  margin: 14px 0 16px;
  font-size: clamp(34px, 3.6vw, 50px);
  font-weight: 900;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.bsrx-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}

.bsrx-author-monogram {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--accent-red);
  background: color-mix(in srgb, var(--accent-red) 12%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--accent-red) 34%, var(--border-subtle));
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
}

.bsrx-article-meta > div { display: grid; gap: 3px; min-width: 0; }
.bsrx-article-meta strong { font-size: 14px; font-weight: 800; }
.bsrx-article-meta small { color: var(--text-secondary); font-size: 12px; }

/* ---------- Article body ---------- */

.bsrx-article-body {
  padding-top: 36px;
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

/* Measure: hold running text to a readable line length while leaving tables
   free to use the full shell width.
   Deliberate deviation from the source: its 860px cap renders at ~103 characters
   per line here, well outside the readable 60-75 band. 680px at 17px lands ~77. */
.bsrx-article-body > p,
.bsrx-article-body > h2,
.bsrx-article-body > h3,
.bsrx-article-body > h4,
.bsrx-article-body > ul,
.bsrx-article-body > ol,
.bsrx-article-body > blockquote {
  max-width: 680px;
}

.bsrx-article-body h2 {
  margin: 44px 0 14px;
  font-size: 30px;
  font-weight: 880;
  line-height: 1.18;
}

.bsrx-article-body h3 {
  margin: 34px 0 12px;
  font-size: 21px;
  font-weight: 850;
  line-height: 1.25;
}

.bsrx-article-body h4 {
  margin: 26px 0 10px;
  font-size: 17px;
  font-weight: 800;
}

.bsrx-article-body p { margin: 0 0 18px; }

.bsrx-article-body a {
  color: var(--accent-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bsrx-article-body ul,
.bsrx-article-body ol { margin: 0 0 20px; padding-left: 22px; }
.bsrx-article-body ul { list-style: disc; }
.bsrx-article-body ol { list-style: decimal; }
.bsrx-article-body li { margin-bottom: 8px; }

.bsrx-article-body blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--accent-red);
  color: var(--text-secondary);
}

/* ---------- Tables ----------
   Every article carries ~10 tables, so this is the dominant content element. */

.bsrx-article-body .wp-block-table {
  margin: 26px 0 32px;
  max-width: 100%;
  overflow-x: auto;
}

.bsrx-article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
}

/* WordPress block library ships `.wp-block-table table.has-fixed-layout
   { table-layout: fixed }` at a higher specificity than a single-class rule.
   Left alone it crushes a 10-column table into equal 34px slivers on mobile
   (cells 424px tall). Overriding it lets the cell min-widths below apply, so the
   table grows past its wrapper and the wrapper scrolls instead. */
.bsrx-article-body .wp-block-table table,
.bsrx-article-body .wp-block-table table.has-fixed-layout {
  table-layout: auto;
}

.bsrx-article-body table th,
.bsrx-article-body table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
}

.bsrx-article-body table th {
  color: var(--accent-red);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-red) 45%, var(--border-subtle));
  white-space: nowrap;
}

.bsrx-article-body table tr:last-child td { border-bottom: 0; }

/* Wide tables need room to breathe before the wrapper scrolls. */
.bsrx-article-body table td { min-width: 130px; }

/* Single-cell tables are used as callout panels, not tabular data. */
.bsrx-article-body table td:only-child {
  display: block;
  min-width: 0;
  padding: 20px 22px;
  background: color-mix(in srgb, var(--accent-red) 5%, transparent);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-red);
  border-radius: 0 6px 6px 0;
}

/* The DOCX import left these callouts bolded lead-ins running inline with the
   text that follows. Promoting them to blocks restores the intended reading
   without affecting inline bold anywhere else. */
.bsrx-article-body table td:only-child strong {
  display: block;
  margin-top: 10px;
  color: var(--text-primary);
}

.bsrx-article-body table td:only-child strong:first-child { margin-top: 0; }

/* ---------- Post list (listing page + archives) ---------- */

.bsrx-list-hero { padding-bottom: 32px; border-bottom: 1px solid var(--border-subtle); }
.bsrx-list-hero h1 { margin: 12px 0 14px; font-size: clamp(34px, 4vw, 52px); font-weight: 900; line-height: 1.06; }
.bsrx-list-hero > p { max-width: 720px; color: var(--text-secondary); font-size: 15px; line-height: 1.7; }
.bsrx-list-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 24px; }

.bsrx-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.bsrx-filter-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
}

.bsrx-filter-bar a:hover { color: var(--text-primary); border-color: var(--text-secondary); }

.bsrx-filter-bar a[aria-current="page"] {
  color: #fff;
  background: var(--accent-red);
  border-color: var(--accent-red);
}

.bsrx-post-list { display: grid; }

.bsrx-post-list > article { border-bottom: 1px solid var(--border-subtle); }

.bsrx-post-list > article > a { display: grid; gap: 8px; padding: 28px 4px; }

.bsrx-post-list > article > a:hover h2 { color: var(--accent-red); }

.bsrx-post-meta {
  color: var(--accent-red);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.bsrx-post-list h2 { max-width: 900px; font-size: 22px; font-weight: 850; line-height: 1.3; }
.bsrx-post-list p { max-width: 860px; color: var(--text-secondary); font-size: 14px; line-height: 1.7; }

.bsrx-post-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  color: var(--accent-red);
  font-size: 12px;
  font-weight: 850;
}

.bsrx-list-empty { padding: 48px 4px; color: var(--text-secondary); }

/* ---------- Pagination ---------- */

.bsrx-pagination { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 32px; }

.bsrx-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
}

.bsrx-pagination .page-numbers:hover { color: var(--text-primary); border-color: var(--text-secondary); }

.bsrx-pagination .page-numbers.current {
  color: #fff;
  background: var(--accent-red);
  border-color: var(--accent-red);
}

@media (max-width: 760px) {
  .bsrx-shell { width: min(100% - 32px, 1180px); padding: 36px 0 52px; }
  .bsrx-article-body { font-size: 15px; }
  .bsrx-article-body table th, .bsrx-article-body table td { padding: 10px 12px; }
  .bsrx-article-body table td:only-child { padding: 16px 16px; }
}

/* ==========================================================================
   Tools — hub and calculators
   ========================================================================== */

/* The palette had no success colour; calculators need a positive state that is
   not the alarm red. Tuned to sit alongside --accent-red at similar weight. */
:root {
  --accent-positive: #0f7a52;
  --accent-caution: #a8641a;
}

:root[data-theme="dark"] {
  --accent-positive: #35c48b;
  --accent-caution: #e0a355;
}

.bsrx-tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-top: 40px;
}

.bsrx-tool-panel { display: grid; gap: 4px; }

.bsrx-tool-panel > h2 {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 850;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* ---------- Fields ---------- */

.bsrx-field {
  display: grid;
  gap: 7px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.bsrx-field > label,
.bsrx-field > span:first-child {
  font-size: 13px;
  font-weight: 800;
}

.bsrx-field small { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }

.bsrx-field input[type="number"],
.bsrx-field input[type="text"],
.bsrx-field select {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
}

.bsrx-field input:focus-visible,
.bsrx-field select:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 2px;
}

.bsrx-field input.is-invalid { border-color: var(--accent-red); }

.bsrx-field-error {
  color: var(--accent-red);
  font-size: 12px;
  font-weight: 700;
}

.bsrx-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.bsrx-checkbox input { width: 18px; height: 18px; accent-color: var(--accent-red); cursor: pointer; }

/* ---------- Segmented format toggle ---------- */

.bsrx-segmented { display: flex; gap: 6px; }

.bsrx-segmented button {
  flex: 1;
  min-height: 40px;
  padding: 0 10px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: capitalize;
}

.bsrx-segmented button:hover { color: var(--text-primary); }

.bsrx-segmented button[aria-pressed="true"] {
  color: #fff;
  background: var(--accent-red);
  border-color: var(--accent-red);
}

/* ---------- Results ---------- */

.bsrx-result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.bsrx-result-row > span:first-child { color: var(--text-secondary); font-size: 13px; font-weight: 700; }
.bsrx-result-row > span:last-child { font-family: var(--font-mono); font-size: 17px; font-weight: 850; }

.bsrx-verdict {
  display: grid;
  gap: 6px;
  margin-top: 24px;
  padding: 26px 24px;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--text-secondary);
  border-radius: 0 6px 6px 0;
  text-align: center;
}

.bsrx-verdict > span:first-child {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.bsrx-verdict [data-bsrx-out] { font-family: var(--font-outfit); font-size: 34px; font-weight: 900; line-height: 1.05; }
.bsrx-verdict small { color: var(--text-secondary); font-size: 13px; line-height: 1.55; }

.bsrx-verdict.is-positive { border-left-color: var(--accent-positive); background: color-mix(in srgb, var(--accent-positive) 6%, transparent); }
.bsrx-verdict.is-positive [data-bsrx-out] { color: var(--accent-positive); }

.bsrx-verdict.is-negative { border-left-color: var(--accent-red); background: color-mix(in srgb, var(--accent-red) 6%, transparent); }
.bsrx-verdict.is-negative [data-bsrx-out] { color: var(--accent-red); }

.bsrx-verdict.is-caution { border-left-color: var(--accent-caution); background: color-mix(in srgb, var(--accent-caution) 8%, transparent); }
.bsrx-verdict.is-caution [data-bsrx-out] { color: var(--accent-caution); }

.bsrx-tool-note {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
}

/* ---------- Hub grid ---------- */

.bsrx-tool-grid > div {
  display: flex;
  min-width: 0;
  min-height: 265px;
  padding: 24px 20px;
  flex-direction: column;
  border-left: 1px solid var(--border-subtle);
}

.bsrx-tool-grid > div:first-child { padding-left: 0; border-left: 0; }
.bsrx-tool-grid > div:last-child { padding-right: 0; }
.bsrx-tool-grid > div h3 { font-size: 20px; font-weight: 820; line-height: 1.25; }
.bsrx-tool-grid > div p { margin-top: 10px; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }

.bsrx-tool-pending {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 22px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .bsrx-tool-layout { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 760px) {
  .bsrx-tool-grid > div,
  .bsrx-tool-grid > div:first-child,
  .bsrx-tool-grid > div:last-child {
    min-height: 0;
    padding: 24px 0;
    border-top: 1px solid var(--border-subtle);
    border-left: 0;
  }
  .bsrx-verdict [data-bsrx-out] { font-size: 28px; }
}

/* ==========================================================================
   Trust & legal pages
   ========================================================================== */

/* Effective / last-updated stamp under the page hero. */
.bsrx-page-date {
  display: block;
  margin-top: 18px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Reviewer note. Marks a page whose text was adapted from the source design to
   match what this build actually does, and is still pending owner sign-off. */
.bsrx-review-note {
  max-width: 680px;
  margin: 0 0 32px;
  padding: 18px 20px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
  background: color-mix(in srgb, var(--accent-caution) 8%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--accent-caution) 32%, var(--border-subtle));
  border-radius: 8px;
}

.bsrx-review-note strong {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-caution);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Three-up value cards (About Us). */
.bsrx-trust-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 4px 0 36px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.bsrx-trust-cards > div {
  display: flex;
  min-width: 0;
  padding: 26px 22px;
  flex-direction: column;
  border-left: 1px solid var(--border-subtle);
}

.bsrx-trust-cards > div:first-child { padding-left: 0; border-left: 0; }
.bsrx-trust-cards > div:last-child { padding-right: 0; }

.bsrx-trust-cards h3 {
  margin: 0 0 10px;
  font-family: var(--font-outfit);
  font-size: 19px;
  font-weight: 820;
  line-height: 1.25;
}

.bsrx-trust-cards p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.7;
}

/* Numbered test protocol (How We Test). */
.bsrx-protocol {
  margin: 4px 0 36px;
  border-top: 1px solid var(--border-subtle);
}

.bsrx-protocol > div {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 0 22px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.bsrx-protocol-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--accent-red);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 900;
  border: 1px solid color-mix(in srgb, var(--accent-red) 50%, var(--border-subtle));
  border-radius: 6px;
}

.bsrx-protocol h3 {
  margin: 0 0 8px;
  font-family: var(--font-outfit);
  font-size: 19px;
  font-weight: 820;
  line-height: 1.3;
}

.bsrx-protocol p {
  max-width: 640px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.72;
}

/* Weighted scoring breakdown (How We Test). */
.bsrx-weights {
  max-width: 680px;
  margin: 4px 0 32px;
  border-top: 1px solid var(--border-subtle);
}

.bsrx-weights > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.bsrx-weights strong { flex: 0 0 auto; font-size: 14px; font-weight: 820; }

.bsrx-weights b {
  flex: 0 0 auto;
  min-width: 46px;
  color: var(--accent-red);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
}

.bsrx-weights span {
  flex: 1 1 220px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

/* Cookie table (Cookie Policy). Narrow enough to stay inside the measure. */
.bsrx-cookie-table {
  max-width: 680px;
  margin: 4px 0 32px;
  border-top: 1px solid var(--border-subtle);
}

.bsrx-cookie-table > div {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: 6px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.bsrx-cookie-table code {
  color: var(--accent-red);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.bsrx-cookie-table p { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.7; }
.bsrx-cookie-table small { display: block; margin-top: 5px; color: var(--text-secondary); font-size: 12px; }

/* Author directory. Rendered from real WordPress users, not a fixed list. */
.bsrx-author-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.bsrx-author-grid > * {
  display: flex;
  min-width: 0;
  padding: 26px 22px;
  flex-direction: column;
  border-left: 1px solid var(--border-subtle);
}

.bsrx-author-grid > *:first-child { padding-left: 0; border-left: 0; }
.bsrx-author-grid > *:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.bsrx-author-grid > *:nth-child(n + 4) { border-top: 1px solid var(--border-subtle); }
.bsrx-author-grid a:hover strong { color: var(--accent-red); }

.bsrx-author-grid strong {
  margin: 16px 0 4px;
  font-family: var(--font-outfit);
  font-size: 19px;
  font-weight: 820;
  line-height: 1.25;
}

.bsrx-author-grid small { color: var(--text-secondary); font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; }
.bsrx-author-grid p { margin: 12px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }

@media (max-width: 1024px) {
  .bsrx-trust-cards, .bsrx-author-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bsrx-trust-cards > div, .bsrx-author-grid > * { border-left: 1px solid var(--border-subtle); }
  .bsrx-trust-cards > div:nth-child(odd), .bsrx-author-grid > *:nth-child(odd) { padding-left: 0; border-left: 0; }
  .bsrx-trust-cards > div:nth-child(even), .bsrx-author-grid > *:nth-child(even) { padding-right: 0; }
  .bsrx-trust-cards > div:nth-child(n + 3) { border-top: 1px solid var(--border-subtle); }
  .bsrx-author-grid > *:nth-child(n + 3) { border-top: 1px solid var(--border-subtle); }
  .bsrx-author-grid > *:nth-child(3n + 1) { border-left: 1px solid var(--border-subtle); }
  .bsrx-author-grid > *:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}

@media (max-width: 640px) {
  .bsrx-trust-cards, .bsrx-author-grid { grid-template-columns: 1fr; }
  .bsrx-trust-cards > div, .bsrx-author-grid > * { padding: 24px 0; border-left: 0; border-top: 1px solid var(--border-subtle); }
  .bsrx-trust-cards > div:first-child, .bsrx-author-grid > *:first-child { border-top: 0; }
  .bsrx-protocol > div { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bsrx-cookie-table > div { grid-template-columns: minmax(0, 1fr); }
}

/* The tinted note panel drops --text-secondary to 4.3:1 in light mode, under AA
   for 13px. Same hues, darkened to clear it: 6.9:1, 5.9:1 and 5.7:1.
   Dark mode already measures 8.3:1 / 9.5:1 / 5.1:1 and keeps the tokens. */
:root:not([data-theme="dark"]) .bsrx-review-note { color: #4b5563; }
:root:not([data-theme="dark"]) .bsrx-review-note strong { color: #8a5010; }
:root:not([data-theme="dark"]) .bsrx-cookie-table code { color: #c0203a; }

/* ==========================================================================
   Casino review cards
   Structure follows the reference listing (logo, rating, offer, stats, CTA);
   the surface treatment is ours - hairline borders and flat panels rather than
   the reference's drop shadows and rounded chrome.
   ========================================================================== */

.bsrx-listing-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.bsrx-listing-head h1 { font-size: clamp(32px, 3.6vw, 48px); font-weight: 900; line-height: 1.06; }
.bsrx-listing-updated { flex: none; color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }

/* Affiliate disclosure. Uses <details> so "show more" needs no script. */
.bsrx-disclosure {
  margin-top: 22px;
  padding: 13px 16px;
  font-size: 13px;
  line-height: 1.6;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}
.bsrx-disclosure > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: var(--text-secondary); cursor: pointer; list-style: none; }
.bsrx-disclosure > summary::-webkit-details-marker { display: none; }
.bsrx-disclosure > summary strong { color: var(--text-primary); font-weight: 800; }
.bsrx-disclosure > summary span { color: var(--accent-red); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.bsrx-disclosure[open] > summary span { visibility: hidden; }
.bsrx-disclosure p { margin-top: 10px; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }

/* Result count + sort bar */
.bsrx-listing-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 26px 0 20px; }
.bsrx-listing-count { color: var(--text-secondary); font-size: 13px; font-weight: 700; }
.bsrx-listing-count strong { color: var(--text-primary); font-weight: 850; }

.bsrx-sort { position: relative; }
.bsrx-sort > summary { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 16px; color: var(--text-primary); font-size: 13px; font-weight: 750; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 8px; cursor: pointer; list-style: none; }
.bsrx-sort > summary::-webkit-details-marker { display: none; }
.bsrx-sort > summary:hover, .bsrx-sort[open] > summary { border-color: color-mix(in srgb, var(--accent-red) 45%, var(--border-subtle)); }
.bsrx-sort > summary em { color: var(--text-secondary); font-style: normal; font-weight: 650; }
.bsrx-sort-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: grid; min-width: 232px; padding: 6px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 8px; }
.bsrx-sort-menu a { padding: 10px 12px; color: var(--text-secondary); font-size: 13px; font-weight: 700; border-radius: 6px; }
.bsrx-sort-menu a:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
.bsrx-sort-menu a[aria-current="true"] { color: var(--accent-red); background: color-mix(in srgb, var(--accent-red) 9%, transparent); }

/* ---------- The card ---------- */

.bsrx-casino-list { display: grid; gap: 14px; }

.bsrx-casino-card {
  position: relative;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr) 200px 178px;
  gap: 0 24px;
  \/* start, not center: the logo+rating column runs taller than the stats and
     CTA columns, so centering staggered their top edges instead of lining
     the row up cleanly. *\/
  align-items: start;
  padding: 22px 22px 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

/* Featured cards carry a top accent bar rather than a full tinted border or a
   floating ribbon - flatter, and consistent with the hairline-border language
   used everywhere else on the site (tool grid, trust cards, review rows). */
.bsrx-casino-card.is-featured { border-top: 3px solid var(--accent-red); }

.bsrx-casino-badge {
  grid-column: 1 / -1;
  display: block;
  margin: 0 0 16px;
  color: var(--accent-red);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* accent-red text on the white card measures 4.29:1, under AA for 11px.
   Dark mode already clears 4.9:1 and keeps the token. */
:root:not([data-theme="dark"]) .bsrx-casino-badge { color: #a8172c; }

.bsrx-casino-brand { display: grid; justify-items: center; gap: 10px; text-align: center; }

.bsrx-casino-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 76px;
  padding: 8px;
  overflow: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}
.bsrx-casino-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bsrx-casino-logo span { color: var(--accent-red); font-family: var(--font-mono); font-size: 19px; font-weight: 900; }

.bsrx-casino-rating { display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.bsrx-casino-rating i { color: var(--accent-red); font-size: 15px; font-style: normal; }
.bsrx-casino-rating strong { font-size: 19px; font-weight: 900; }
.bsrx-casino-rating small { color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.bsrx-casino-rating-note { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 10.5px; font-weight: 700; }
.bsrx-casino-brand > a { color: var(--text-secondary); font-size: 12px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.bsrx-casino-brand > a:hover { color: var(--accent-red); }

.bsrx-casino-offer { min-width: 0; }
.bsrx-casino-name { display: inline-block; padding-bottom: 11px; color: var(--text-primary); font-family: var(--font-outfit); font-size: 15px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.bsrx-casino-name:hover { color: var(--accent-red); }

.bsrx-casino-offer > hr { display: none; }
.bsrx-casino-name { margin-bottom: 13px; }
.bsrx-casino-bonus { font-family: var(--font-outfit); font-size: 21px; font-weight: 850; line-height: 1.3; }
.bsrx-casino-sub { margin-top: 7px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.bsrx-casino-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.bsrx-casino-tags li { padding: 3px 9px; color: var(--text-secondary); font-size: 11px; font-weight: 750; border: 1px solid var(--border-subtle); border-radius: 4px; }

.bsrx-casino-stats { display: grid; text-align: center; }
.bsrx-casino-stats > div + div { margin-top: 12px; }
.bsrx-casino-stats span { display: block; color: var(--text-secondary); font-size: 11.5px; font-weight: 750; }
.bsrx-casino-stats strong { display: block; margin-top: 3px; font-family: var(--font-outfit); font-size: 20px; font-weight: 850; }
/* A stat value over 24 characters is a sentence, not a figure - 38% of real
   values are (wagering rules like "15x slots / 30x video poker / 75x table
   games..."). At 20px in a 172px column those wrapped to six lines and
   stretched the card. Body type keeps the full rule readable without it. */
.bsrx-casino-stats > div.is-long strong {
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  margin-top: 5px;
  letter-spacing: 0;
}

.bsrx-casino-cta { display: grid; justify-items: stretch; gap: 11px; text-align: center; }
.bsrx-casino-cta .bsrx-btn-primary { justify-content: center; min-height: 46px; font-size: 14px; }
.bsrx-casino-cta > a:last-child { color: var(--text-primary); font-size: 13px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.bsrx-casino-cta > a:last-child:hover { color: var(--accent-red); }

.bsrx-casino-terms { grid-column: 1 / -1; margin-top: 22px; padding: 12px 0 16px; color: var(--text-secondary); font-size: 11.5px; line-height: 1.6; border-top: 1px solid var(--border-subtle); }
.bsrx-casino-terms a { text-decoration: underline; text-underline-offset: 3px; }
.bsrx-casino-terms a:hover { color: var(--accent-red); }

/* Sample-data notice. Only rendered while no casino has been published. */
.bsrx-sample-note {
  margin: 24px 0 4px;
  padding: 16px 18px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
  background: color-mix(in srgb, var(--accent-caution) 8%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--accent-caution) 32%, var(--border-subtle));
  border-radius: 8px;
}
.bsrx-sample-note strong { display: block; margin-bottom: 4px; color: var(--accent-caution); font-family: var(--font-mono); font-size: 11px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }
:root:not([data-theme="dark"]) .bsrx-sample-note { color: #4b5563; }
:root:not([data-theme="dark"]) .bsrx-sample-note strong { color: #8a5010; }

@media (max-width: 1024px) {
  .bsrx-casino-card { grid-template-columns: 132px minmax(0, 1fr) 180px; gap: 0 20px; }
  .bsrx-casino-cta { grid-column: 2 / -1; margin-top: 18px; grid-auto-flow: column; justify-items: center; align-items: center; }
  .bsrx-casino-cta .bsrx-btn-primary { min-width: 190px; }
}

@media (max-width: 720px) {
  .bsrx-casino-card { grid-template-columns: 96px minmax(0, 1fr); gap: 0 16px; padding: 20px 16px 0; }
  .bsrx-casino-logo { height: 60px; }
  .bsrx-casino-bonus { font-size: 18px; }
  .bsrx-casino-stats { grid-column: 1 / -1; margin-top: 18px; text-align: center; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  .bsrx-casino-stats > div + div { margin-top: 0; }
  .bsrx-casino-cta { grid-column: 1 / -1; margin-top: 16px; grid-auto-flow: row; }
  .bsrx-listing-head { align-items: flex-start; flex-direction: column; }
  .bsrx-listing-bar { align-items: stretch; flex-direction: column; }
  .bsrx-sort > summary { justify-content: space-between; }
  .bsrx-sort-menu { left: 0; right: 0; }
}


/* ==========================================================================
   Single casino review page
   The header reuses .bsrx-casino-brand / .bsrx-casino-rating / .bsrx-casino-stats
   / .bsrx-casino-cta verbatim from the listing card - same visual language,
   same responsive rules, no duplicated CSS.
   ========================================================================== */

.bsrx-review-head {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr) 200px 178px;
  gap: 0 24px;
  align-items: start;
  padding-bottom: 28px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.bsrx-review-head h1 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 900; line-height: 1.1; margin-bottom: 14px; overflow-wrap: anywhere; }

@media (max-width: 1024px) {
  .bsrx-review-head { grid-template-columns: 132px minmax(0, 1fr) 158px; gap: 0 20px; }
}
@media (max-width: 720px) {
  .bsrx-review-head { grid-template-columns: 96px minmax(0, 1fr); gap: 0 16px; }
}

/* Facts panel (RTP, min withdrawal, platforms, withdrawal time) - label/value
   rows cloned from .bsrx-cookie-table, which already solves this exact shape. */
.bsrx-facts-table { max-width: 680px; margin: 4px 0 32px; border-top: 1px solid var(--border-subtle); }
.bsrx-facts-table > div { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 6px 20px; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); }
.bsrx-facts-table span:first-child { display: block; color: var(--text-secondary); font-size: 12px; font-weight: 750; }
.bsrx-facts-table span:last-child { display: block; color: var(--text-primary); font-size: 14px; font-weight: 700; }
@media (max-width: 640px) {
  .bsrx-facts-table > div { grid-template-columns: minmax(0, 1fr); }
}