/* ==========================================================================
   Theme B palette and corrections
   --------------------------------------------------------------------------
   theme.css is generated from the reference and keeps its original colours, so
   the build looks like the reference by default. This file loads after it and
   is the only place to change colour or correct a rule that does not suit this
   build. theme.css is never hand-edited.
   ========================================================================== */

/* the skip link is ours, not the reference's */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: #fff;
  color: #111;
}
.skip-link:focus { left: 0; }

/* The reference opens the menu with Bootstrap's JS, which also paints the
   backdrop and locks the body. Ours does the same with two classes. */
.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgb(0 0 0 / 50%);
}
body.offcanvas-open { overflow: hidden; }

/* Bootstrap ships `.offcanvas { visibility: hidden }` and then sets
   `style.visibility = 'visible'` from JavaScript on open - there is no CSS rule
   for the open state anywhere in the reference, so nothing could be extracted.
   Declaring it here keeps the panel readable without shipping Bootstrap's JS. */
.offcanvas.show { visibility: visible; }

/* The CTA is a <button> here so the destination never reaches the status bar.
   The theme's own rules are written for `a.btn`, so a button element picks up
   none of them - it needs the anchor's box back, or the header collapses from
   119px to 71px and the arrow icon stops centring. */
button.btn {
  appearance: none;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.header__buttons-holder button.btn,
.header-mobile__buttons-holder button.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* the card CTA is a block in the reference, with the arrow inline */
.bk-rating-list .buttons button.btn { display: block; }

/* Each brand logo sits on its own tinted tile. The reference writes the colour
   inline per casino; ours comes from the casino record, with the theme navy as
   the default. */
.bk-rating-list .item .logo { background-color: var(--tile, #102c57); }

/* ==========================================================================
   Corrections found by measuring against the reference
   ========================================================================== */

/* The card CTA is an <a> in the reference and fills its column. Ours is a
   <button>, which shrinks to its text - 79px instead of 336px on a phone. */
.bk-rating-list .buttons button.btn { display: block; width: 100%; }

/* A wide table has to scroll inside its own box rather than squeeze: at 430px
   the reference keeps the table 718px wide and scrolls it, while ours was
   crushing eight columns into 376px. */
.data-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table > table { min-width: 700px; }

/* The theme already collapses the answer and rotates the plus into a cross off
   `.item.show`; it just needs something to add the class. The whole question
   row is the hit target, not only the 24px icon. */
.faq-section .item .question { cursor: pointer; }
.faq-section .item .question button { transition: transform 0.2s ease; }

/* The reference separates the label from the arrow with a plain space in the
   markup - there is no rule for it anywhere in the theme. A margin is steadier
   than relying on whitespace surviving the template. */
.bk-rating-list .buttons .btn svg { margin-left: 6px; }

/* ==========================================================================
   Contents strip: the revealed state
   --------------------------------------------------------------------------
   Below 992px the theme hides this strip and brings it back only once the
   reader is into the article, keyed on a `show` class its own script adds.
   The extractor cannot see either rule - a class that exists only part-way
   down a scroll matches nothing at capture time - so both are restated here
   from the reference stylesheet verbatim.
   ========================================================================== */

.toc_navigation.show { display: flex; }

@media (max-width: 991px) {
  .toc_navigation.show { display: flex; }
}

/* The theme clamps the card logo with `max-height: 50px` and nothing else, so
   the width came from the HTML width attribute and the mark was drawn 280x50 -
   twice as wide as it should be. The reference ships these images with no
   width/height attributes at all, which is why it never distorts.

   Keeping the attributes (they reserve the box and stop layout shift) and
   restoring `width: auto` gets both: correct proportions and no CLS. */
.bk-rating-list .item .logo img {
  width: auto;
  height: auto;
  max-width: 100%;
}

/* The reference wraps every h2 and h3's text in <strong>, which computes to
   weight 900 - the heading rules themselves only say 600. Our copy carries no
   such wrapper, so the headings came out lighter than the donor's. Setting the
   weight here gets the same result without littering the content with markup
   that means nothing semantically. h1 already matches at 700. */
.sec-title { font-weight: 900; }

/* The overlay ships hidden and the script reveals it; `hidden` alone loses to
   the theme's `display: flex`. The close control is a real button, so the
   donor's image-based close icon becomes a background. */
/* The theme's base rule is `display: none` and the donor's plugin flips it to
   flex from JavaScript. Doing it off the `hidden` attribute keeps the state in
   one place - the attribute - instead of split between markup and inline style. */
.promo-popup[hidden] { display: none; }
.promo-popup:not([hidden]) { display: flex; }

/* Everything the donor writes inline on the popup's own elements. Without it
   the panel is plain white, the cards have no fill and the logo tiles are
   transparent - which is exactly why it read as unfinished. */
.promo-popup .promo-popup__holder {
  background: linear-gradient(to bottom right, #eadbc8, #eadbc8);
}
.promo-popup .promo-popup__content-bookmakers .bookmaker {
  background-color: #fff;
  border: 1px solid #efefef;
}
.promo-popup .promo-popup__content-bookmakers .logo { background-color: #102c57; }

/* the donor's pick of the week: accent border, badge, and a CTA in the same
   colour so the eye lands on one card rather than three equal ones */
.promo-popup .promo-popup__content-bookmakers .bookmaker.recomended {
  border: 2px solid var(--flx-popup-bookmaker-accent);
  position: relative;
}
.promo-popup .recomended-title {
  background-color: var(--flx-popup-bookmaker-accent);
  color: #000;
  gap: 6px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-weight: 700;
  font-size: 14px;
}
.promo-popup .recomended-title p { margin: 0; }
.promo-popup .bookmaker.recomended button {
  background-color: var(--flx-popup-bookmaker-accent);
  color: #000;
}
.promo-popup .promo-popup__content-bookmakers .bookmaker .bookmaker-title {
  /* the theme centres this at (0,4,0); the donor overrides it inline to left */
  text-align: left;
}

/* the donor sets these per-popup inline; ours come from the theme */
.promo-popup {
  --flx-popup-bookmaker-accent: var(--bs-primary, #dd8d16);
  --flx-popup-bookmaker-card-text-color: #102c57;
  --flx-popup-bookmaker-card-button-text-color: #fff;
  --flx-popup-text-color: #102c57;
}
.promo-popup .promo-popup__content-bookmakers .bookmaker button {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  background-color: var(--flx-popup-bookmaker-accent);
  color: var(--flx-popup-bookmaker-card-button-text-color);
  font-weight: 500;
  padding: 12px 18px;
  border-radius: 10px;
  width: 100%;
  margin-top: auto;
}
/* The page is deliberately NOT locked while the promo is open.
   `overflow: hidden` on body removes the scrollbar, and with it 15px of
   viewport width: the fixed header grows by 15px and the whole page jumps
   sideways the moment the overlay appears. The donor does not lock either -
   its body stays `overflow: visible` - and the overlay scrolls on its own with
   overscroll-behavior: contain, so nothing is gained by locking. */
.promo-popup .promo-close-popup {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: url('/assets/theme-b/img/close-icon.png') center / contain no-repeat;
  cursor: pointer;
}

/* ==========================================================================
   Cookie notice
   --------------------------------------------------------------------------
   Rebuilt from the donor's rendered geometry rather than shipping its plugin:
   the plugin's stylesheet was 15.6 KB for a single strip. Measured values are
   the donor's - bar rgb(32,32,32) at 63px, button #0C4DA2, 150px radius,
   14px/700, 8px 30px padding.
   ========================================================================== */

.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9900;
  background: #202020;
  color: #fff;
  font-size: 16px;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar__container { max-width: 1200px; margin: 0 auto; padding: 10px 16px; }
.cookie-bar__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  text-align: center;
}
.cookie-bar__notice p {
  /* the donor sets these at 14px/18px; 16px made the strip read heavier than
     a dismissible notice should */
  margin: 0;
  font-size: 14px;
  line-height: 18px;
}
.cookie-bar__notice a { color: #fff; text-decoration: underline; }
.cookie-bar .mgbutton {
  appearance: none;
  border: 0;
  cursor: pointer;
  background-color: #0c4da2;
  color: #fff;
  border-radius: 150px;
  padding: 8px 30px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
}
.cookie-bar .mgbutton:hover { background-color: #0a3f86; }

@media (max-width: 768px) {
  .cookie-bar__content { gap: 12px; }
  .cookie-bar__notice p { font-size: 13px; line-height: 17px; }
}

/* ------------------------------------------------------------ author block

   Spacing and the job title follow the sister site's own author component: the
   paragraphs there carry margin: 0 and the column spaces them with an 8px gap,
   which is why its block reads tight. Ours was stacking default 16px paragraph
   margins on top of each other and came out 256px tall for five short lines. */

.media_block_v2 .acf-innerblocks-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.media_block_v2 .acf-innerblocks-container > * { margin: 0; }

.author-name {
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #102c57;
}
.author-position {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c39a6b;
}
.author-bio {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.9;
}
/* just a quiet line - a pill with a border and a fill drew far more attention
   to a review date than a review date deserves */
.author-reviewed {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 2px;
}

.media_block_v2 .media img { width: 100%; height: auto; border-radius: 16px; }

/* ==========================================================================
   Promo overlay: always reachable, never taller than the screen
   --------------------------------------------------------------------------
   Three stacked cards come to 952px, which does not fit a 667px phone. The
   panel declares overflow-y: auto but has no height to scroll within, so it
   simply overflowed and the last call to action sat off-screen with no way to
   reach it. Capping the panel and letting the overlay scroll fixes both cases:
   it centres when it fits, and scrolls when it does not.
   ========================================================================== */

.promo-popup {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  /* `align-items: center` clips the top of an overflowing child in a scroll
     container - the panel's heading and close button became unreachable above
     the scroll origin. `margin: auto` on the child centres it when it fits and
     leaves it scrollable from the top when it does not. */
  align-items: flex-start;
}
.promo-popup .promo-popup__holder {
  max-height: none;
  margin: auto;
}

@media (max-width: 768px) {
  /* The donor turns the three cards into a Slick carousel here: one card
     centred, its neighbours peeking in from either side, swipeable, with dots
     underneath. That is why its panel is 533px instead of three stacked cards.
     Same result with scroll snapping - no carousel library, no jQuery. */
  .promo-popup .promo-popup__content-bookmakers .bookmakers-holder {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* `overflow-x: auto` forces the vertical axis to auto as well, so the
       "Today's BEST!" badge - which hangs 17px above its card - was being
       clipped by the scroller. The padding gives it room and the matching
       negative margin keeps the track where it was. */
    padding-block: 20px 4px;
    margin-block: -20px 0;
    margin-inline: -16px;
    padding-inline: calc(50% - 160px);
  }
  .promo-popup .promo-popup__content-bookmakers .bookmakers-holder::-webkit-scrollbar { display: none; }
  .promo-popup .promo-popup__content-bookmakers .bookmaker {
    flex: 0 0 320px;
    scroll-snap-align: center;
  }

  .promo-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .promo-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(16 44 87 / 25%);
    cursor: pointer;
  }
  .promo-dot.is-active { background: var(--flx-popup-bookmaker-accent); }

  /* Nothing else is tightened: the carousel means the panel is one card tall,
     so the donor's own spacing fits a phone without change. */
}

/* Dots belong to the phone carousel only - the desktop panel shows all three
   cards at once. Scoped to a min-width query rather than a bare rule, which
   sat after the mobile block and hid them everywhere. */
@media (min-width: 769px) {
  .promo-dots { display: none; }
}

/* The theme caps the footer badges by height alone, so the width has to come
   from the image itself - otherwise the width attribute wins and every badge is
   drawn to the same box whatever its shape. Same trap as the card logos.

   Only the width is released: with height released too, a lazy image that has
   not loaded yet has nothing left to size from and collapses to 0x0. Leaving
   height alone keeps the box the width/height attributes reserve. */
.footer_logos_police img {
  width: auto;
  max-width: 100%;
}

/* the standfirst under a section heading - the donor's "Choose your BEST!" */
.section-sub {
  margin-top: -8px;
  opacity: 0.8;
}