/* Betting / Bookmakers section styles.
   Hand-authored (same approach as style-newbury-hospitality.css). Values from the
   Figma "Work_page" file, page "bookmakers_des", frame "Bookmaker Reviews"
   (1440px artboard, 1312px content width). Classes are `bk-` prefixed and scoped
   under .bk-page so nothing else in the theme is touched.

   Palette: navy #16486D, accent yellow #FFE208, tints #F4F6FB / #E2EFFF,
   borders #E3E6EE / #E5E5E5, pro green #67B550, con red #DD3F3F. */

/* The theme's global stylesheet only loads Open Sans 400/500/700 upright; this
   section also uses 600 and 800, plus a Bold Italic (byline name), so pull the
   full range including italics. */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,700&display=swap');

:root {
    --bk-navy: #16486d;
    --bk-navy-2: #15486e;
    --bk-yellow: #ffe208;
    --bk-tint: #f4f6fb;
    --bk-tint-blue: #e2efff;
    --bk-border: #e3e6ee;
    --bk-green: #67b550;
    --bk-red: #dd3f3f;
    --bk-wrap: 1312px;
}

/* Type scale, taken verbatim from the Figma "Bookmaker Reviews" frame:
   48 = page H1 / section H2   32 = verdict brand   24 = sub-heads, card labels,
   glance title   20 = list items, FAQ question, breadcrumb, buttons
   18 = body copy   16 = labels, values, meta   Weights: 400 / 600 / 700 only. */
.bk-page {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bk-navy);
    overflow-x: clip;
}

.bk-page *,
.bk-page *::before,
.bk-page *::after {
    box-sizing: border-box;
}

.bk-page img {
    max-width: 100%;
    height: auto;
}

.bk-page p {
    font-weight: 400;
}

.bk-wrap {
    max-width: var(--bk-wrap);
    margin: 0 auto;
    padding-inline: 20px;
}

/* ----------------------------------------------------------- buttons ---- */
.bk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    border: 2px solid transparent;
    border-radius: 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    /* Figma: text 20 / line-height 32 -> 64px tall button */
    line-height: 1.6;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.bk-btn--primary {
    background: var(--bk-yellow);
    color: var(--bk-navy);
}

.bk-btn--primary:hover {
    background: #f4d500;
}

.bk-btn--ghost {
    border-color: var(--bk-yellow);
    color: var(--bk-yellow);
}

.bk-btn--ghost:hover {
    background: rgba(255, 226, 8, .12);
}

.bk-btn--navy {
    background: var(--bk-navy);
    color: #fff;
}

.bk-btn--navy:hover {
    background: #0f3450;
}

/* ------------------------------------------------------------- bands ---- */
.bk-band {
    padding: 100px 0;
}

/* Figma: 100px top/bottom on every band except the byline */
.bk-band--navy {
    background: var(--bk-navy);
    color: #fff;
}

.bk-band--yellow {
    background: var(--bk-yellow);
    color: var(--bk-navy);
    padding: 32px 0;
}

.bk-band--tint {
    background: var(--bk-tint-blue);
    color: var(--bk-navy);
}

.bk-band--plain {
    background: #fff;
}

.bk-band--connect {
    padding-top: 0;
}

/* .bk-compliance carries its own 50px margin-top (for when it follows content
   inside the SAME band on the review/toplist pages). With padding-top:0 here,
   that margin no longer has anything to collapse into and just adds 50px of
   unwanted blank space above the box (confirmed via measured getBoundingClientRect
   — every other adjacent .bk-band pair is flush, only this one wasn't) — so
   drop it specifically for the Section Hub's connected compliance band. */
.bk-band--connect .bk-compliance {
    margin-top: 0;
}

/* hug the band above (Figma: How We Rank has 0 top padding) */
/* pros & cons band: the racing photo already carries the navy wash (from the
   Figma frame), so it is used as-is over a matching solid fallback */
.bk-band--proscons {
    background-color: var(--bk-navy);
    background-image: linear-gradient(rgba(22, 72, 109, .25), rgba(22, 72, 109, .25)), url(../images/betting/proscons-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* section headings shared by pros/cons, FAQ and compare — Figma: Bold 48 / 1.2 */
.bk-proscons__title,
.bk-faq__title,
.bk-compare__title {
    margin: 0 0 50px;
    text-align: center;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
}

/* ---------------------------------------------------------- title bar ---- */
.bk-titlebar {
    background: var(--bk-yellow);
    padding: 36px 0;
    text-align: center;
}

.bk-titlebar__h1 {
    margin: 0;
    color: var(--bk-navy);
    font-weight: 700;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.2;
}

.bk-titlebar__meta {
    margin: 8px 0 0;
    font-weight: 600;
    /* Figma: Semibold 16 / 1.4 */
    font-size: 16px;
    line-height: 1.4;
    color: var(--bk-navy);
}

/* Category Hub strap line under the H1 — Figma "Category Hubs": Bold 16 / 1.4 */
.bk-titlebar__sub {
    margin: 12px auto 0;
    max-width: 760px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    color: var(--bk-navy);
}

/* --------------------------------------------------------- breadcrumb ---- */
/* Figma: Open Sans Regular 20 / 1.4, current page in Bold 20 */
.bk-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 32px 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
    border-bottom: 1px solid rgba(21, 72, 110, .25);
}

.bk-breadcrumb a {
    color: inherit;
    text-decoration: none;
    font-weight: 400;
}

.bk-breadcrumb a:hover {
    text-decoration: underline;
}

.bk-breadcrumb [aria-current] {
    font-weight: 700;
}

@media (max-width: 600px) {
    .bk-breadcrumb {
        font-size: 15px;
    }
}

/* ------------------------------------------------------------- stars ---- */
.bk-stars {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.bk-stars__label {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .5px;
    color: var(--bk-yellow);
}

.bk-stars__outof {
    font-size: 15px;
    font-weight: 600;
    opacity: .8;
}

.bk-stars__track {
    position: relative;
    display: inline-block;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 4px;
    white-space: nowrap;
}

.bk-stars__empty {
    color: rgba(255, 255, 255, .28);
}

.bk-stars__fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--bk-yellow);
}

/* on light backgrounds */
.bk-stars--on-light .bk-stars__label {
    color: var(--bk-navy);
}

.bk-stars--on-light .bk-stars__empty {
    color: rgba(22, 72, 109, .25);
}

.bk-stars--on-light .bk-stars__fill {
    color: var(--bk-navy);
}

/* --------------------------------------------------------- main / body ---- */
.bk-main {
    background: #fff;
    padding: 40px 0 80px;
}

/* ----------------------------------------------------------- verdict ---- */
.bk-verdict {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px;
    padding: 32px;
    background: var(--bk-navy);
    border: 2px solid var(--bk-yellow);
    border-radius: 32px;
    color: #fff;
}

.bk-verdict__rank {
    position: absolute;
    top: -16px;
    left: 32px;
    padding: 4px 16px;
    border-radius: 999px;
    background: var(--bk-yellow);
    color: var(--bk-navy);
    font-weight: 700;
    font-size: 18px;
}

.bk-verdict__logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    padding: 0;
    background: #181f1d;
    border-radius: 50%;
    overflow: hidden;
}

.bk-verdict__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-verdict__info {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bk-verdict__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.bk-verdict__brand {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

/* Figma: one uniform block — Open Sans Regular 18 / 1.4, #ffffff, including the
   "18+, new customers only. T&Cs apply." sentence. No separate fine print. */
.bk-verdict__offer {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
    overflow-wrap: anywhere;
}

.bk-verdict__cta {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

/* -------------------------------------------------- at a glance + body ---- */
.bk-body {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 48px;
    margin-top: 40px;
    align-items: start;
}

.bk-glance,
.bk-review {
    min-width: 0;
}

.bk-glance {
    border: 1px solid var(--bk-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--bk-tint);
}

.bk-glance__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: var(--bk-navy);
    color: #fff;
}

.bk-glance__title {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.4;
}

.bk-glance__year {
    font-size: 16px;
    font-weight: 400;
    opacity: .85;
}

.bk-glance__rows {
    margin: 0;
}

.bk-glance__row {
    --bk-glance-gap: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px var(--bk-glance-gap);
    padding: 16px 24px;
    border-top: 1px solid var(--bk-border);
    font-size: 16px;
    line-height: 1.4;
}

/* each column is half the row minus half the column gap, so dt + gap + dd == 100%
   and dd never wraps onto its own line */
.bk-glance__row dt,
.bk-glance__row dd {
    flex: 0 0 calc(50% - var(--bk-glance-gap) / 2);
    max-width: calc(50% - var(--bk-glance-gap) / 2);
    min-width: 0;
    margin: 0;
    color: var(--bk-navy);
    overflow-wrap: anywhere;
}

.bk-glance__row dd {
    font-weight: 600;
    text-align: right;
}

.bk-review {
    color: var(--bk-navy);
}

.bk-review__intro {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
}

.bk-review__section {
    margin-bottom: 28px;
}

/* Figma: first section head Bold 48, the rest Bold 24; body Regular 18 / 1.4 */
.bk-review__section h3 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bk-navy);
}

.bk-review__section:first-of-type h3 {
    font-size: clamp(30px, 4.5vw, 44px);
    line-height: 1.2;
    margin-bottom: 16px;
}

.bk-review__section p {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}

.bk-review__section a {
    color: var(--bk-navy);
    text-decoration: underline;
}

/* --------------------------------------------------------- pros & cons ---- */
.bk-proscons__title {
    color: inherit;
}

.bk-proscons__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.bk-proscons__col {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    color: var(--bk-navy);
}

/* Figma: headers carry no icon (the badge layers are hidden in the frame) */
.bk-proscons__head {
    margin: 0;
    padding: 22px 28px;
    font-weight: 700;
    font-size: 24px;
    /* Figma: Bold 24 / 1.3 */
    line-height: 1.3;
}

.bk-proscons__col--pro .bk-proscons__head {
    background: var(--bk-yellow);
    color: var(--bk-navy);
}

.bk-proscons__col--con .bk-proscons__head {
    background: #d5e0e8;
    color: var(--bk-navy);
}

.bk-proscons__col ul {
    list-style: none;
    margin: 0;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bk-proscons__col li {
    position: relative;
    padding: 2px 0 20px 48px;
    font-size: 20px;
    /* Figma: Regular 20 / 1.4 */
    font-weight: 400;
    line-height: 1.4;
    border-bottom: 1px solid rgba(5, 5, 5, .1);
}

.bk-proscons__col li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* row markers use the exact Figma icons (ant-design check / fluent error) */
.bk-proscons__col li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background: center / contain no-repeat;
}

.bk-proscons__col--pro li::before {
    background-image: url(../images/betting/icon-pro.svg);
}

.bk-proscons__col--con li {
    color: #7b7b7b;
}

.bk-proscons__col--con li::before {
    background-image: url(../images/betting/icon-con.svg);
}

/* ------------------------------------------------------------ byline ---- */
.bk-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.bk-byline__who {
    display: flex;
    align-items: center;
    gap: 20px;
}

.bk-byline__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid var(--bk-navy);
    object-fit: cover;
    background: #fff;
}

/* Figma: "Reviewed by: " Bold 24, the name Bold Italic 24; date Regular 16 */
.bk-byline__name {
    margin: 0;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.3;
    color: var(--bk-navy);
}

.bk-byline__name em {
    font-weight: 700;
    font-style: italic;
}

.bk-byline__date {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--bk-navy);
}

/* --------------------------------------------------------------- FAQ ---- */
/* Figma (Frame 55, node 1271:1436): NO outer container border and NO per-row
   box. Each row is a white block whose ONLY border is a 1px #E5E5E5 hairline on
   the bottom edge (strokeBottomWeight:1, all other sides 0) — kept on the last
   row too. Row padding 30/24, inner gap 10. Question Bold 20 / lh 26 #17486D.
   Toggle is a + that loses its vertical bar (becomes −) when open; when open a
   1px #E5E5E5 line sits directly under the question, above the answer. */
.bk-faq__title {
    color: var(--bk-navy);
}

.bk-faq__list {
    display: block;
    background: #fff;
}

.bk-faq__item {
    border-bottom: 1px solid #e5e5e5;
}

.bk-faq__q {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 30px 24px;
    background: none;
    border: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: #17486d;
    text-align: left;
    cursor: pointer;
}

.bk-faq__toggle {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
}

.bk-faq__toggle::before,
.bk-faq__toggle::after {
    content: "";
    position: absolute;
    background: #17486d;
    border-radius: 2px;
}

.bk-faq__toggle::before {
    left: 0;
    top: 7px;
    width: 16px;
    height: 2px;
}

.bk-faq__toggle::after {
    left: 7px;
    top: 0;
    width: 2px;
    height: 16px;
    transition: opacity .2s ease;
}

.bk-faq__item.is-open .bk-faq__toggle::after {
    opacity: 0;
}

/* Open: the question tucks up (padding-bottom 16) and a 1px navy divider, inset
   24px to the text column, sits between it and the answer — same treatment as
   the hospitality FAQ (.nh-faq__item.is-open .nh-faq__question::after). Closed
   rows keep the full 30/30 so every collapsed row is the same height. */
.bk-faq__item.is-open .bk-faq__q {
    padding-bottom: 16px;
}

.bk-faq__item.is-open .bk-faq__q::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 0;
    height: 1px;
    background: #16486d;
}

.bk-faq__a {
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    transition: max-height .25s ease;
}

.bk-faq__item.is-open .bk-faq__a {
    max-height: 1200px;
    padding: 16px 24px 30px;
}

.bk-faq__a p {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #17486d;
}

.bk-faq__a p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------- compare ---- */
.bk-compare__title {
    color: var(--bk-navy);
}

.bk-compare__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Figma "Related Category Hubs" card (Frame 3, 424x203): navy #15486e, 2px
   yellow border, r40, 32px padding, 32px gap between the label block and the
   button. The label carries a full-width yellow hairline under it (16px below
   the text) — there is NO sub-label in the mock. */
.bk-compare__card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px;
    background: var(--bk-navy-2);
    border: 2px solid var(--bk-yellow);
    border-radius: 40px;
    color: var(--bk-yellow);
    text-decoration: none;
}

.bk-compare__card-label {
    display: block;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bk-yellow);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.4;
}

.bk-compare__card-btn {
    margin-top: auto;
    align-self: flex-start;
    padding: 10px 32px;
    /* Figma: tighter than the standard .bk-btn */
}

/* ------------------------------------------------------- compliance ---- */
/* Figma: white card, radius 40, 64px "!" icon, and a 1px navy border with an
   exact 4-on / 4-off dash (Figma dashPattern [4,4]). CSS `border: dashed` lets
   the browser pick the dash rhythm, so the border is drawn as an inline SVG
   stroke (stroke-width 2, half clipped by the box = 1px shown) with an explicit
   stroke-dasharray of 4 4, matching the mock exactly. */
.bk-compliance {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 50px;
    padding: 32px 40px;
    border-radius: 40px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%3E%3Crect%20width='100%25'%20height='100%25'%20rx='40'%20ry='40'%20fill='none'%20stroke='%2316486d'%20stroke-width='2'%20stroke-dasharray='4%204'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bk-compliance__badge {
    flex: none;
    width: 64px;
    height: 64px;
    font-size: 0;
    background: url(../images/betting/icon-attention.svg) center / contain no-repeat;
}

.bk-compliance__body {
    min-width: 0;
}

.bk-compliance__lead {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--bk-navy);
}

/* Figma: ExtraBold 24 */
.bk-compliance__text {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bk-navy);
}

.bk-compliance__text a {
    color: inherit;
}

/* bk_hub_compliance_text is a wysiwyg field (hub-compliance block) — its own
   <p> replaces the single hard-coded <p> this container used to wrap
   directly, so give it back the same zero margin. */
.bk-compliance__text p {
    margin: 0;
}

/* ============================================ toplist / Category Hub ---- */
/* single-bk_toplist.php. Figma frame "Category Hubs" (1271:2599):
   navy ranked rows (yellow 2px border, r40, a yellow rank tab on the left
   edge, 112px round logo), a navy "How We Rank" callout, and the related-hub
   cards reuse the .bk-compare card style. */

.bk-band--flush {
    padding: 0;
}

/* intro: photo bleeds to the left edge, copy sits in the right half with the
   normal wrap gutter on its right (Figma "Category Hubs" intro). */
.bk-tl-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

.bk-tl-intro__media {
    align-self: stretch;
}

.bk-tl-intro__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

.bk-tl-intro__copy {
    align-self: center;
    padding: 64px max(20px, calc((100vw - var(--bk-wrap)) / 2)) 64px 64px;
    color: var(--bk-navy-2);
}

.bk-tl-intro__copy p {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}

.bk-tl-intro__copy p:last-child {
    margin-bottom: 0;
}

/* Figma row (compact + detailed share the same geometry): card padding
   32/32/32/0, 48px column gap; the navy rank pill is the first in-flow child
   sitting flush at the left edge — 64px wide, square left corners, 30px round
   right (a welded tab, not an overhang). */
.bk-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bk-rank__item {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 32px 32px 32px 0;
    background: var(--bk-navy);
    border: 2px solid var(--bk-yellow);
    border-radius: 40px;
    color: #fff;
}

.bk-rank__num,
.bk-tl-card__num {
    flex: none;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 18px 32px;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    border-radius: 0 30px 30px 0;
}

.bk-rank__num {
    background: var(--bk-yellow);
    color: #000;
}

.bk-tl-card__num {
    background: var(--bk-navy);
    color: #fff;
}

.bk-rank__logo {
    flex: none;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    background: #181f1d;
    display: grid;
    place-items: center;
}

.bk-rank__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-rank__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bk-rank__brand {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    /* Figma: lh 1.6 — the generous line-height is what gives the row its air */
    color: var(--bk-yellow);
}

.bk-rank__offer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 32px;
}

.bk-rank__offer {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}

.bk-rank__offer-row .bk-stars__label {
    color: #fff;
}

/* Figma shows just "4.5 ★★★★★" in the ranked rows — no "/ 5" suffix */
.bk-rank__offer-row .bk-stars__outof {
    display: none;
}

.bk-rank__chip {
    align-self: flex-start;
    margin-top: 8px;
    /* Figma: 8px brand->offer row, then 16px to the chip; text 16 / pad 8x12 */
    padding: 8px 12px;
    border: 1px solid var(--bk-yellow);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-yellow);
}

.bk-rank__cta {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 250px;
}

.bk-rank__cta .bk-btn {
    width: 100%;
}

/* Figma "How We Rank" (Frame 97, 1320x264): navy box, 2px WHITE border, r40,
   padding 50/64, 64px gap between the title and the body; title 48 Bold #ffe208,
   body text 24 Regular #fff. */
.bk-hwr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 32px 64px;
    padding: 50px 64px;
    background: var(--bk-navy);
    border: 2px solid #fff;
    border-radius: 40px;
    color: #fff;
}

.bk-hwr__title {
    margin: 0;
    flex: none;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-yellow);
}

.bk-hwr__body {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-left: 64px;
    border-left: 1px solid var(--bk-yellow);
}

.bk-hwr__text {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

/* detailed "Top N" cards — yellow, one review excerpt per bookmaker */
.bk-tl-detailed__title {
    margin: 0 0 50px;
    text-align: center;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-tl-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bk-tl-card {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 32px 32px 32px 0;
    background: var(--bk-yellow);
    border: 2px solid var(--bk-navy);
    border-radius: 40px;
    color: var(--bk-navy);
}

.bk-tl-card__logo {
    flex: none;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    background: #181f1d;
    display: grid;
    place-items: center;
}

.bk-tl-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-tl-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bk-tl-card__brand {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

/* excerpt clamps to 2 lines; "Show more" toggles .is-expanded to reveal the rest */
.bk-tl-card__excerpt {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.bk-tl-card.is-expanded .bk-tl-card__excerpt {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.bk-tl-card__more {
    align-self: flex-start;
    padding: 0;
    background: none;
    border: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: var(--bk-navy);
    cursor: pointer;
}

.bk-tl-card__more:hover {
    text-decoration: underline;
}

.bk-tl-card__cta {
    flex: none;
}

.bk-tl-card__cta .bk-btn {
    width: 250px;
}

/* guides teaser — post cards on a tint band */
.bk-tl-guides__title {
    margin: 0 0 50px;
    text-align: center;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy-2);
}

.bk-tl-guides__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

.bk-tl-guide {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.bk-tl-guide__media {
    display: block;
    aspect-ratio: 400 / 277;
    background: #eef2f7;
    overflow: hidden;
}

.bk-tl-guide__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-tl-guide__avatar {
    margin: -30px 0 0 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #fff;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.bk-tl-guide__title {
    margin: 16px 24px 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    color: #17486d;
}

.bk-tl-guide__title a {
    color: inherit;
    text-decoration: none;
}

.bk-tl-guide__title a:hover {
    text-decoration: underline;
}

.bk-tl-guide__meta {
    margin: 16px 24px 20px;
    padding-top: 16px;
    border-top: 1px solid #eaeaea;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: #adadad;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

/* --------------------------------------------------------- Section Hub ---- */
/* /betting/ — page-betting-hub.php + hub.php. Figma "Section Hub  Bookmakers"
   (1271:422). Shared section heading used by every band below. */
.bk-band--flush-y {
    padding: 60px 0;
}

.bk-hub-head {
    margin-bottom: 50px;
    text-align: center;
}

.bk-hub-head__title {
    margin: 0 0 8px;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-hub-head__sub {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
}

/* category cards reuse .bk-compare__cards / .bk-compare__card (Related Hubs
   component) plus an optional description line under the divider — Figma's
   inner gap there is 16px against the card's outer 32px gap, so pull it up */
.bk-compare__card-desc {
    margin-top: -16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* "This Week's Offers" only — the hero photo again, under a navy wash (same
   trick as .bk-band--proscons, but with this page's own photo). "Learn How It
   Works" is a plain .bk-band--navy with NO photo — confirmed by a full
   re-export of the Figma frame: that band renders 100% flat navy, no texture,
   despite its layer technically carrying the same (fully covered) image fill. */
.bk-band--hub-photo {
    background-color: var(--bk-navy);
    /* The actual Figma asset for this band — already pre-toned dark navy by
       the designer, not the bright hero photo + a CSS alpha guess. Exported
       directly from the same image fill Figma uses here (hash f7bf8030...),
       so no opacity tuning needed to match it. */
    background-image: url(../images/betting/betting-band-wash.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* both "This Week's Offers" (photo band) and "Learn How It Works" (flat navy,
   no photo — Figma) share the navy-band heading colours */
.bk-band--navy .bk-hub-head__title {
    color: var(--bk-yellow);
}

.bk-band--navy .bk-hub-head__sub {
    color: #fff;
}

/* "This Week's Offers" row — .bk-rank reused, but at 50% navy opacity (Figma)
   and with a terms paragraph instead of the Category Hub's stars + chip. */
.bk-rank--tint .bk-rank__item {
    background: rgba(22, 72, 109, .5);
}

.bk-rank__terms {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

/* ============================================== Offers page (bk_offer) -- */
/* Figma "Offers": filter dropdown, white bg / 1px navy border / 10px radius
   / 20 Semibold navy text (sampled from node 1271:3598/3599). Right-aligned
   in the band (Frame 98's own children read left-to-right as label then
   select, but the row itself sits flush against the band's right edge). */
.bk-offer-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
}

.bk-offer-filter label {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.bk-offer-filter__select {
    min-width: 240px;
    padding: 12px 16px;
    border: 1px solid var(--bk-navy);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    color: var(--bk-navy);
    cursor: pointer;
}

/* "How offers work" — plain text panel inside the same navy band as the
   grid above it (Figma: Frame 22 is a sibling of the grid inside the same
   outer Frame 10, and its background image hash matches the band's own
   photo-wash). Yellow fill / navy text, sampled directly (Frame 1271:3703
   fill + heading/paragraph fills) — NOT the .bk-tl-intro split used
   elsewhere: the Figma frame's photo + hospitality-perks bullet list here
   are leftover cruft from reusing a hospitality-page component (see
   offers.php rc_offer_explainer() docblock), the spec asks for a plain
   ~150-200 word text block only. */
.bk-offer-explain {
    margin-top: 50px;
    padding: 64px;
    background: var(--bk-yellow);
    border-radius: 40px;
}

.bk-offer-explain__title {
    margin: 0 0 16px;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-offer-explain__text p {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bk-navy);
}

.bk-offer-explain__text p:last-child {
    margin-bottom: 0;
}

/* Event cross-link teaser(s) — .bk-band--tint, own section below the offers
   band. TWO real Figma variants for two different row counts (see
   rc_offer_event_links()'s docblock: both "Frame 12"s under the Bookmakers
   section are genuine, finished designs, not one right and one wrong):
   --single (1 event, node 1271:3811) is a wide photo/copy split with sharp
   corners; --card (2-3 events, node 1271:4003, one .bk-event-teasers grid)
   is a compact stacked card. Shared element classes (__media, __dates,
   __title, __venue, __cta), styled differently per variant below. */
.bk-event-block__title {
    margin: 0 0 50px;
    text-align: center;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-event-teaser {
    background: #fff;
}

.bk-event-teaser__media {
    position: relative;
}

.bk-event-teaser__media img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.bk-event-teaser__dates {
    position: absolute;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--bk-navy);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.bk-event-teaser__title,
.bk-event-teaser__venue {
    margin: 0;
    color: var(--bk-navy);
}

/* --single: one event (Figma 1271:3811) — 46/54 split, sharp corners. */
.bk-event-teaser--single {
    display: grid;
    grid-template-columns: 46fr 54fr;
}

.bk-event-teaser--single .bk-event-teaser__media img {
    height: 100%;
    min-height: 320px;
}

.bk-event-teaser--single .bk-event-teaser__dates {
    top: 32px;
    left: 24px;
}

.bk-event-teaser--single .bk-event-teaser__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    padding: 64px 48px;
}

.bk-event-teaser--single .bk-event-teaser__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

.bk-event-teaser--single .bk-event-teaser__venue {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}

/* --card: 2-3 events (Figma alternate "Frame 12" 1271:4003) — compact
   stacked card, ~3px corner radius (near-square), thin divider before CTA. */
.bk-event-teasers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.bk-event-teaser--card {
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
}

.bk-event-teaser--card .bk-event-teaser__media img {
    aspect-ratio: 397 / 277;
}

.bk-event-teaser--card .bk-event-teaser__dates {
    top: 20px;
    left: 20px;
}

.bk-event-teaser--card .bk-event-teaser__body {
    padding: 32px 32px 0;
}

.bk-event-teaser--card .bk-event-teaser__title {
    margin-bottom: 8px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
}

.bk-event-teaser--card .bk-event-teaser__venue {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.bk-event-teaser--card .bk-event-teaser__rule {
    display: block;
    margin: 24px 32px 0;
    height: 1px;
    background: rgba(22, 72, 109, .15);
}

.bk-event-teaser--card .bk-event-teaser__cta {
    align-self: center;
    margin: 24px 32px 32px;
}

/* =============================================== Event Page (bk_event) -- */
/* Meeting Summary / Tips & Preview — both reuse .bk-tl-intro (image + copy
   split); Tips needs the photo on the right instead of the left, hence the
   plain CSS order swap below rather than a second markup shape. */
.bk-tl-intro--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Fixed 64px on all four sides, not the base rule's "64 fixed / responsive
   max()" shape — Figma's own node data (1271:4170, 1271:4155/4472) is
   uniform 64,64,64,64 on both Meeting Summary and Tips & Preview; the
   base .bk-tl-intro__copy's right-side max(20px, (100vw - wrap)/2) formula
   is a Hub-hero-specific "align to the page's centred wrap on wide
   screens" choice that only happens to equal 64px at exactly 1440px width
   (where 100vw - wrap = 128px) — at 1920px it balloons to ~304px. It's
   also on the wrong SIDE for the reverse (Tips) layout specifically: text
   sits in the LEFT column there (order: -1), so the edge that should hug
   the true viewport edge is the left, not the right — copying the base
   formula unchanged put the fixed 64px on the wrong side twice over. */
.bk-tl-intro--reverse .bk-tl-intro__copy,
.bk-tl-intro--event .bk-tl-intro__copy {
    padding: 64px;
}

.bk-tl-intro--reverse .bk-tl-intro__copy {
    order: -1;
}

/* Cap the actual reading measure at Figma's own ~590px (Frame 23 is
   592px inside this 64px padding) — border-box, so max-width includes the
   padding: 590 + 64 + 64 = 718px. On any column wider than that (every
   viewport past ~1440px, since the column is half the full-bleed band),
   centre the capped box in the leftover space instead of leaving it
   pinned to whichever edge borders the image — a block that only grows
   away from the image looks stuck to one side rather than sitting in the
   column. */
.bk-tl-intro--reverse .bk-tl-intro__copy {
    max-width: 718px;
    margin-left: auto;
}

.bk-tl-intro--event .bk-tl-intro__copy {
    max-width: 718px;
    margin-right: auto;
}

/* Both variants: the row height must come from the COPY column only, at any
   viewport width — not from the photo. An aspect-ratio on the img (tried
   first) only matches Figma's own 1440px canvas by coincidence: the image's
   pixel height still scales with the column's width, so on anything wider
   than 1440 the photo once again outgrows the (fixed-size) text and
   .bk-tl-intro__copy's align-self:center pads the gap back out — confirmed
   live at 1920px (padding grew to ~180px). Taking the img out of flow
   entirely with absolute positioning fixes this at every width: its parent
   .bk-tl-intro__media keeps stretching to the grid row's height as before,
   but now contributes nothing of its own to that height (its only child no
   longer participates in layout), so the row is sized purely by the copy
   column, and the image just covers whatever that turns out to be. */
.bk-tl-intro--reverse .bk-tl-intro__media,
.bk-tl-intro--event .bk-tl-intro__media {
    position: relative;
}

.bk-tl-intro--reverse .bk-tl-intro__media img,
.bk-tl-intro--event .bk-tl-intro__media img {
    position: absolute;
    inset: 0;
    min-height: 0;
    aspect-ratio: auto;
}

/* Meeting Summary heading — white on the navy band (Figma 1271:4172).
   Tips & Preview reuses the same title class with --navy since its band is
   yellow, not navy (Figma 1271:4470). */
.bk-event-summary__title {
    margin: 0 0 32px;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.bk-event-summary__title--navy {
    color: var(--bk-navy);
}

.bk-event-summary__facts {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* A second (or third) bk_event_races row — Figma: no icon, no label, 60%
   white, smaller and tighter to the fact row above it than the standard
   32px gap (negative margin pulls it in to roughly the ~16px the render
   shows). Deliberately plain text, not another .bk-event-fact row. */
.bk-event-summary__note {
    margin: -16px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, .6);
}

/* One fact row: an 80px icon circle (2px yellow stroke, Figma sampled) +
   yellow bold label + white value. Reused for Venue/Dates and the first
   bk_event_races row only — any further races render as the muted
   .bk-event-summary__note above instead (see rc_event_meeting_summary()). */
.bk-event-fact {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.bk-event-fact__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 2px solid var(--bk-yellow);
    border-radius: 50%;
}

.bk-event-fact__icon-svg {
    width: 32px;
    height: 32px;
    fill: #fff;
}

/* .bk-event-summary ancestor bumps specificity to 2 classes, beating the
   existing .bk-tl-intro__copy p rule (1 class + 1 element) that would
   otherwise repaint these <p> tags navy-on-navy and make them invisible —
   found live: the label/value text was in the HTML but not visible on the
   page, this is why. */
.bk-event-summary .bk-event-fact__label {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--bk-yellow);
}

.bk-event-summary .bk-event-fact__value {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

/* Best Bookmakers for This Event — rc_bk_ranking_table() in render.php.
   Figma 1271:4399: navy header row, 66px-tall white body rows. The tint is
   on the "Best for" COLUMN specifically, every row — not alternating row
   stripes, confirmed by sampling pixels (Rank/Bookmaker stay white on every
   sample row; "Best for" is #f4f6fb-ish on every sample row). An earlier
   pass built ordinary zebra striping instead, mistaking that column's own
   background for row banding. */
.bk-rank-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 12px;
}

.bk-rank-table th,
.bk-rank-table td {
    padding: 20px 32px;
    text-align: left;
    font-size: 18px;
    border: 1px solid #e3e6ee;
}

.bk-rank-table thead th {
    background: var(--bk-navy);
    font-weight: 700;
    color: #fff;
}

.bk-rank-table__rank {
    width: 1%;
    white-space: nowrap;
    padding-left: 32px;
    padding-right: 16px;
    text-align: center;
    font-weight: 700;
    color: var(--bk-navy);
}

.bk-rank-table tbody tr {
    background: #fff;
}

.bk-rank-table__brand a {
    font-weight: 700;
    color: var(--bk-navy);
}

.bk-rank-table__best {
    background: #f4f6fb;
    color: var(--bk-navy);
}

/* Cross-link cards (racecourse guide, RC Syndicates CTA) — same navy/2px
   yellow border/40px radius shape as .bk-rank__item and .bk-hub-trust,
   but its own row layout: a 128px badge on the left, title/subtitle/CTA
   stacked in a column to its right (Figma 1271:4475 — re-zoomed into after
   a report the badge looked wrong: it's a big left column, not a small
   64px image stacked above the text like an earlier pass had it). */
.bk-event-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.bk-event-link {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    padding: 32px;
    background: var(--bk-navy);
    border: 2px solid var(--bk-yellow);
    border-radius: 40px;
}

.bk-event-link__logo {
    flex: none;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
}

.bk-event-link__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.bk-event-link__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.bk-event-link__text {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

.bk-event-link__cta {
    margin-top: auto;
}

/* upcoming races — placeholder cards until bk_event (Phase 6) replaces them.
   Figma: card padding is 32px top/bottom only (the date pill and photo sit
   flush with the sides); simplified here to a uniform 32px with the date pill
   pulled back out to the corner. */
.bk-hub-races__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.bk-hub-race {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 64px 32px 32px;
    background: var(--bk-yellow);
    border: 2px solid var(--bk-navy);
    border-radius: 40px;
    color: var(--bk-navy);
    /* Figma: this card does NOT clip its content (clipsContent: false). The
       date pill's square corner sits right at the card's true top-left point
       and simply paints over the small rounded notch of the card underneath
       (both navy, so even the 2px border seam is invisible) — overflow:hidden
       here would instead clip the pill DOWN to the card's curve, separating
       it from the corner. Deliberately not set. */
}

.bk-hub-race__dates {
    align-self: flex-start;
    margin: -32px 0 0 -32px;
    padding: 18px 24px;
    border-radius: 0 30px 30px 0;
    background: var(--bk-navy);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

/* a single circular photo, centred — not a banner image (Figma: 150x150,
   radius 100, centred in the card) */
.bk-hub-race__media {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: #181f1d;
}

.bk-hub-race__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bk-hub-race__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Figma: no rule between the photo and the title — the two hairlines sit
   directly above and below the summary paragraph instead */
.bk-hub-race__rule {
    display: block;
    height: 1px;
    background: rgba(22, 72, 109, .25);
}

.bk-hub-race__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.bk-hub-race__venue {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

.bk-hub-race__summary {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.bk-hub-race__cta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
}

.bk-hub-race__cta .bk-btn {
    width: 100%;
}

/* .bk-btn--primary is yellow-on-yellow here (the card itself is yellow) — give
   it a navy outline so it still reads as a button */
.bk-hub-race__cta .bk-btn--primary {
    border-color: var(--bk-navy);
}

/* bookmaker logo strip — auto, from the live bookmaker records */
.bk-hub-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.bk-hub-logos__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--bk-border);
}

.bk-hub-logos__tile img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    border-radius: 6px;
}

/* trust cards — placeholder links until the Trust Layer pages (Phase 10)
   exist. Figma: plain white card, no border/shadow — it reads against the
   tint-blue band by colour contrast alone. Icon is an outline circle, not a
   filled one (the fill colour is a per-icon placeholder in the mock). */
.bk-hub-trust__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
}

.bk-hub-trust {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    background: #fff;
    border-radius: 40px;
    color: var(--bk-navy);
}

/* "person" variant — a team member instead of a topic (Figma: yellow card,
   2px navy border, circular photo instead of the outline icon) */
.bk-hub-trust--person {
    background: var(--bk-yellow);
}

.bk-hub-trust__avatar {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.bk-hub-trust__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    border: 2px solid var(--bk-navy);
    border-radius: 50%;
    background: #fff;
}

.bk-hub-trust__icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.bk-hub-trust__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.bk-hub-trust__text {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

.bk-hub-trust__btn {
    margin-top: auto;
    align-self: flex-start;
    padding: 10px 32px;
}

/* "Learn How It Works" excerpt — additive to .bk-tl-guide (the Category Hub's
   own guide teaser doesn't render one) */
.bk-tl-guide__excerpt {
    margin: 8px 24px 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
    /* backstop alongside the 20-word server-side trim (hub.php) so cards with
       longer words still clamp to the same visual height */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* "Learn How It Works" category badge — visible here; the Category Hub's own
   guide teaser never renders one, so this is purely additive to .bk-tl-guide */
.bk-tl-guide__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bk-navy);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: #fff;
    text-transform: uppercase;
}

/* --------------------------------------- betting/toplist ACF block ---- */
/* The ranked list + detailed cards dropped into an arbitrary page. No navy
   band behind it (that is the hub's own framing) — just the two listings
   stacked on the host page background, each in the standard wrap. */
.bk-block-toplist {
    --bk-wrap: 1312px;
    margin: 40px 0;
}

.bk-block-toplist .bk-wrap+.bk-wrap {
    margin-top: 50px;
}

.bk-block-toplist .bk-tl-detailed__title {
    margin-top: 0;
}

.bk-block-toplist__title {
    margin: 0 0 40px;
    text-align: center;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.2;
    color: var(--bk-navy);
}

/* ------------------------------------------------------- responsive ---- */
@media (max-width: 900px) {
    .bk-tl-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-tl-intro__media img {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .bk-tl-intro__copy {
        align-self: start;
        padding: 40px 20px;
    }

    .bk-event-teasers {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-event-teaser--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-event-teaser--single .bk-event-teaser__media img {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .bk-event-teaser--single .bk-event-teaser__body {
        align-self: start;
        padding: 32px 20px;
    }

    .bk-tl-intro--reverse .bk-tl-intro__copy {
        order: 0;
        padding: 40px 20px;
    }

    /* On mobile .bk-tl-intro/copy/media stack as separate rows instead of
       sharing one grid row, so there's no sibling text height for the
       absolutely-positioned image to fill — give .bk-tl-intro__media itself
       a real height via aspect-ratio here (the image still just covers it). */
    .bk-tl-intro--reverse .bk-tl-intro__media,
    .bk-tl-intro--event .bk-tl-intro__media {
        aspect-ratio: 16 / 10;
    }

    .bk-event-links {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-event-link {
        flex-direction: column;
    }

    .bk-event-link__logo {
        width: 80px;
        height: 80px;
    }

    .bk-rank-table th,
    .bk-rank-table td {
        padding: 16px 20px;
    }

    .bk-rank__item,
    .bk-tl-card {
        flex-wrap: wrap;
        gap: 24px 32px;
        padding-right: 24px;
    }

    .bk-rank__cta,
    .bk-tl-card__cta {
        width: 100%;
    }

    .bk-rank__cta .bk-btn,
    .bk-tl-card__cta .bk-btn {
        width: 100%;
    }

    .bk-hwr__body {
        padding-left: 0;
        border-left: 0;
    }

    .bk-tl-guides__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .bk-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .bk-compare__cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-hub-races__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bk-band--flush-y {
        padding: 40px 0;
    }

    .bk-band {
        padding: 56px 0;
    }

    .bk-band--yellow {
        padding: 32px 0;
    }

    .bk-band--flush {
        padding: 0;
    }
}

@media (max-width: 780px) {
    .bk-proscons__cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .bk-verdict {
        padding: 24px;
        gap: 20px;
    }

    .bk-verdict__cta {
        align-items: stretch;
        align-self: stretch;
    }

    .bk-verdict__cta .bk-btn {
        width: 100%;
    }

    .bk-byline {
        flex-direction: column;
        align-items: flex-start;
    }

    .bk-compliance {
        flex-direction: column;
        gap: 12px;
    }

    .bk-faq__q {
        font-size: 18px;
    }

    .bk-rank__item,
    .bk-tl-card {
        padding: 24px 20px 24px 20px;
        gap: 20px 24px;
    }

    .bk-rank__num,
    .bk-tl-card__num {
        min-width: 52px;
        padding: 12px 20px;
        font-size: 20px;
        border-radius: 30px;
    }

    .bk-rank__logo,
    .bk-tl-card__logo {
        width: 88px;
        height: 88px;
    }

    .bk-hwr {
        padding: 32px 24px;
    }
}

@media (max-width: 480px) {

    .bk-glance__row dt,
    .bk-glance__row dd {
        flex-basis: 100%;
        max-width: 100%;
        text-align: left;
    }
}

/* ===========================================================================
   Specificity guard.

   The theme's global stylesheet sets `body { font-weight: 500 }` and the
   Elementor "kit" (`.elementor-kit-2632 h1..h6 / p / a`, specificity 0-1-1)
   restyles headings, paragraphs and links. Both can win over the plain-class
   rules above depending on stylesheet load order, which is what caused the
   size / weight drift. Every typographic value the design depends on is
   re-stated here under `.bk-page` (specificity 0-2-x) so it always wins.
   Values are the Figma "Bookmaker Reviews" frame, verbatim.
   =========================================================================== */
.bk-page :is(h1, h2, h3, p, ul, li, dl, dt, dd, button, a) {
    font-family: 'Open Sans', sans-serif;
}

/* 48 — page H1 / section H2 */
.bk-page .bk-titlebar__h1,
.bk-page .bk-proscons__title,
.bk-page .bk-faq__title,
.bk-page .bk-compare__title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
}

.bk-page .bk-review__section:first-of-type h3 {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 700;
    line-height: 1.2;
}

/* 32 — verdict brand */
.bk-page .bk-verdict__brand {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

/* 24 — sub-heads, glance title, card labels, rating, byline, compliance lead */
.bk-page .bk-review__section h3,
.bk-page .bk-proscons__head,
.bk-page .bk-glance__title,
.bk-page .bk-compare__card-label,
.bk-page .bk-byline__name {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

.bk-page .bk-byline__name em {
    font-weight: 700;
    font-style: italic;
}

.bk-page .bk-stars__label {
    font-size: 24px;
    font-weight: 700;
}

.bk-page .bk-compliance__lead {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
}

/* 20 — list items, FAQ question, breadcrumb, buttons */
.bk-page .bk-proscons__col li {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
}

.bk-page .bk-faq__q {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #17486d;
}

.bk-page .bk-btn {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
}

.bk-page .bk-breadcrumb {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
}

/* 18 — body copy */
.bk-page .bk-verdict__offer,
.bk-page .bk-review__intro,
.bk-page .bk-review__section p {
    font-size: 18px;
    line-height: 1.5;
}

.bk-page .bk-review__section p {
    font-weight: 400;
}

/* 16 — labels, values, meta */
.bk-page .bk-titlebar__meta,
.bk-page .bk-glance__row,
.bk-page .bk-glance__year,
.bk-page .bk-byline__date,
.bk-page .bk-compliance__text,
.bk-page .bk-faq__a p {
    font-size: 16px;
}

/* colours that the kit would otherwise repaint */
.bk-page .bk-titlebar__h1,
.bk-page .bk-faq__title,
.bk-page .bk-compare__title,
.bk-page .bk-review__section h3,
.bk-page .bk-byline__name,
.bk-page .bk-byline__date,
.bk-page .bk-compliance__lead,
.bk-page .bk-compliance__text,
.bk-page .bk-breadcrumb,
.bk-page .bk-breadcrumb a,
.bk-page .bk-glance__row dt,
.bk-page .bk-glance__row dd {
    color: var(--bk-navy);
}

/* The kit's own `p` selector (0-1-1) would otherwise repaint the wysiwyg
   field's <p> inside .bk-compliance__text — same fix as .bk-review__section p
   above, one rule covering every property instead of splitting across the
   shared blocks. */
.bk-page .bk-compliance__text p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bk-navy);
}

/* Offers page (bk_offer) guards — same reasoning as above: the kit's own
   `select`/`h2`/`p` selectors would otherwise repaint these. */
.bk-page .bk-offer-filter__select {
    font-size: 20px;
    font-weight: 600;
    color: var(--bk-navy);
}

.bk-page .bk-offer-explain__title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-page .bk-offer-explain__text p {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--bk-navy);
}

.bk-page .bk-event-block__title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-page .bk-event-teaser--card .bk-event-teaser__title {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bk-navy);
}

.bk-page .bk-event-teaser--card .bk-event-teaser__venue {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bk-navy);
}

.bk-page .bk-event-teaser--single .bk-event-teaser__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-page .bk-event-teaser--single .bk-event-teaser__venue {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-page .bk-event-summary__title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.bk-page .bk-event-summary__title--navy {
    color: var(--bk-navy);
}

.bk-page .bk-event-summary .bk-event-fact__label {
    font-size: 20px;
    font-weight: 700;
    color: var(--bk-yellow);
}

.bk-page .bk-event-summary .bk-event-fact__value {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

.bk-page .bk-event-summary .bk-event-summary__note {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, .6);
}

.bk-page .bk-rank-table th,
.bk-page .bk-rank-table td {
    font-size: 18px;
}

.bk-page .bk-rank-table__brand a {
    font-weight: 700;
    color: var(--bk-navy);
}

.bk-page .bk-event-link__title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.bk-page .bk-event-link__text {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

.bk-page .bk-glance__title,
.bk-page .bk-verdict__brand,
.bk-page .bk-proscons__title {
    color: #fff;
}

.bk-page .bk-verdict__offer {
    color: #fff;
}

.bk-page .bk-compare__card,
.bk-page .bk-compare__card-label {
    color: var(--bk-yellow);
}

.bk-page .bk-compare__card-btn,
.bk-page .bk-btn--primary {
    color: var(--bk-navy);
}

.bk-page .bk-btn--navy {
    color: #fff;
}

/* toplist / Category Hub — type scale + colours the kit would repaint */
.bk-page .bk-rank__brand {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--bk-yellow);
}

.bk-page .bk-rank__offer {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}

.bk-page .bk-rank__offer-row .bk-stars__label {
    color: #fff;
}

.bk-page .bk-rank__num {
    color: #000;
}

.bk-page .bk-rank__chip {
    font-size: 16px;
    font-weight: 400;
    color: var(--bk-yellow);
}

.bk-page .bk-hwr__title {
    font-weight: 700;
    line-height: 1.2;
    font-size: clamp(32px, 5vw, 48px);
    color: var(--bk-yellow);
}

.bk-page .bk-hwr__text {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}

.bk-page .bk-tl-intro__copy,
.bk-page .bk-tl-intro__copy p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bk-navy-2);
}

.bk-page .bk-tl-detailed__title,
.bk-page .bk-tl-guides__title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
}

.bk-page .bk-tl-detailed__title {
    color: var(--bk-navy);
}

.bk-page .bk-tl-guides__title {
    color: var(--bk-navy-2);
}

.bk-page .bk-tl-card__brand {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-page .bk-tl-card__excerpt {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-page .bk-tl-card__more {
    font-size: 18px;
    font-weight: 600;
    color: var(--bk-navy);
}

.bk-page .bk-tl-guide__title,
.bk-page .bk-tl-guide__title a {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    color: #17486d;
}

.bk-page .bk-tl-guide__meta {
    font-size: 12px;
    font-weight: 400;
    color: #adadad;
}

/* Section Hub */
.bk-page .bk-hub-head__title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}

.bk-page .bk-hub-head__sub {
    font-size: 18px;
    font-weight: 400;
    color: var(--bk-navy);
}

/* on either navy band ("This Week's Offers" / "Learn How It Works"), the
   heading flips to yellow/white — needs the extra class to out-specify the
   navy default just above */
.bk-page .bk-band--navy .bk-hub-head__title {
    color: var(--bk-yellow);
}

.bk-page .bk-band--navy .bk-hub-head__sub {
    color: #fff;
}

.bk-page .bk-rank__terms {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

.bk-page .bk-tl-guide__excerpt {
    font-size: 14px;
    font-weight: 400;
    color: var(--bk-navy);
}

.bk-page .bk-compare__card-desc {
    font-size: 16px;
    font-weight: 600;
    color: var(--bk-yellow);
}

.bk-page .bk-hub-race__dates {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.bk-page .bk-hub-race__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--bk-navy);
}

.bk-page .bk-hub-race__venue,
.bk-page .bk-hub-race__summary {
    font-size: 16px;
    font-weight: 400;
    color: var(--bk-navy);
}

.bk-page .bk-hub-race__summary {
    font-size: 14px;
}

/* the "View betting" button on a yellow card is navy-bg / yellow-text — the
   opposite of .bk-btn--navy's usual white text, so this needs to out-specify
   the guard's own `.bk-page .bk-btn--navy { color:#fff }` rule below */
.bk-page .bk-hub-race__cta .bk-btn--navy {
    color: var(--bk-yellow);
}

.bk-page .bk-hub-trust__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--bk-navy);
}

.bk-page .bk-hub-trust__text {
    font-size: 16px;
    font-weight: 400;
    color: var(--bk-navy);
}

.bk-page .bk-tl-guide__badge {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
}

.bk-page .bk-titlebar__sub {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bk-navy);
}

.bk-page .bk-block-toplist__title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bk-navy);
}