/* ==========================================================================
   NexPlay palette
   --------------------------------------------------------------------------
   Loads after theme.css and restates every colour on the site. Layout, spacing
   and geometry live in theme.css, which is generated from the reference and is
   never hand-edited - so recolouring means editing this file and nothing else.

   Scheme: light page, dark navy header and footer, restrained accents.
   Headings are near-black rather than coloured; the only saturated colour is
   the call to action, which is where the eye should go.
   ========================================================================== */

:root {
  /* page */
  --page: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f0f3f8;      /* alternating table rows, quiet fills */
  --border: #e2e7f0;

  /* type on the light page */
  --text: #26303f;
  --muted: #64708a;
  --heading: #101c33;

  /* dark bands, tinted very slightly violet so they sit with the accent */
  --dark: #14162b;
  --dark-2: #1e2140;
  --dark-text: #e9eaf6;
  --dark-muted: #979cba;
  --dark-border: #2a2d4e;

  /* Deep indigo-violet rather than the neon one. Same family, far lower
     saturation, so it reads considered instead of loud. */
  --accent: #5548b8;         /* links */
  --accent-ink: #453a99;
  --rank: #2a2550;           /* position badge */

  /* the one saturated colour on the page */
  --cta: #5b4bc4;
  --cta-hover: #4c3fa8;
  --cta-text: #ffffff;

  --star: #eaa300;
  --star-empty: #d5dae4;
  --good: #2f8f68;           /* verification tick only */
  --good-soft: #eceaf8;      /* badge plate, tinted to the accent */
  --bad: #b4455c;

  --shadow: 0 1px 2px rgb(16 28 51 / 5%), 0 4px 14px rgb(16 28 51 / 5%);
}

/* ------------------------------------------------------------------ page */

body,
#wrapper,
.container { background: var(--page); color: var(--text); }

.entry, .entry p, .entry li, .entry td { color: var(--text); }

/* headings stay near-black - the reference coloured them, but a coloured
   heading on every section is what made it shout */
h1, h2, h3, h4, h5, h6,
h1.entry-title, .entry h2 { color: var(--heading); }

/* the theme sets the old magenta here with !important, so this has to match it */
.entry a:not(.rating-card__button) { color: var(--accent) !important; }
.entry a:not(.rating-card__button):hover { color: var(--accent-ink) !important; }

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

#header, #header .pad { background: var(--dark); }
#header { border-bottom: 1px solid var(--dark-border); }

#header .menu a,
#header .menu-item-wrapper > a,
#header .menu-toggle { color: var(--dark-text); }
#header .menu a:hover,
#header .current-menu-item > .menu-item-wrapper > a { color: #ffffff; }
#header .menu-item-wrapper button svg { fill: var(--dark-muted); }

#header .sub-menu {
  background: var(--dark-2);
  border: 1px solid var(--dark-border);
  box-shadow: 0 18px 40px rgb(8 14 26 / 45%);
}
#header .sub-menu a { color: var(--dark-text); }
#header .sub-menu a:hover { background: rgb(255 255 255 / 7%); color: #ffffff; }

/* burger bars are spans, and the bar sits on the dark band */
#header .menu-toggle-icon span { background: var(--dark-text); }
#wrap-nav-mobile, #wrap-nav-mobile .nav-menu { background: var(--dark); }

/* ----------------------------------------------------------------- cards */

#profile,
.faq-item,
.rating-card,
.entry-content table tr,
.entry-content table tr.alt {
  background-color: var(--surface);
  color: var(--text);
}
#profile, .faq-item, .rating-card {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.rating-card:hover { border-color: #cfd8e6; }

#profile #profile-name,
.profile-info,
.faq-item h3,
.rating-card__name { color: var(--heading); }
.profile-date, .profile-info > div:first-child { color: var(--muted); }

.profile-icon svg,
.profile-icon-text svg { fill: var(--accent); }
.faq-answer-icon svg { fill: var(--accent); }

/* ------------------------------------------------------------ casino row */

.rating-card__score { background: var(--rank); color: #ffffff; }

/* The CTA is a <button> rather than an <a> so the destination never reaches
   the status bar. The theme's own rule is `a.rating-card__button`, which no
   longer matches, so its geometry is restated here in full. */
/* `.richtext button` at (0,1,1) zeroes the radius and drops the size, so this
   is scoped through the card to outrank it. */
.rating-card .rating-card__button {
  appearance: none;
  background: var(--cta);
  color: var(--cta-text);
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  height: 46px;
  line-height: 46px;
  min-width: 180px;
  padding: 0 10px;
  width: 100%;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.rating-card .rating-card__button:hover { background: var(--cta-hover); filter: none; }
.rating-card__button:focus-visible,
.rating-card__logo-link:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

/* likewise the logo tile: a <span role="link">, so it needs the pointer back */
.rating-card__logo-link { cursor: pointer; }

/* every brand logo here is artwork made for a dark background, so the tile
   stays dark even though the card around it is white.

   No border: it was drawn outside the 188px column and pushed the tile 2px
   wider than the badge underneath it. */
.rating-card__logo-link {
  background: var(--dark);
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 8px 12px;
}

/* a soft tinted pill rather than a solid block of colour.
   border-box so its 1px border stays inside the 188px column and it lines up
   with the logo tile above it. */
.rating-card__expert {
  background: var(--good-soft);
  color: var(--accent-ink);
  box-sizing: border-box;
  width: 100%;
}
.rating-card__expert svg { color: var(--accent) !important; fill: var(--accent); }

.rating-card__promo { border-color: #c6cedd; background: var(--surface-2); }
.rating-card__promo-code { color: var(--heading); }
.rating-card__copy-btn svg { fill: var(--muted); }
.rating-card__copy-btn:hover svg { fill: var(--heading); }
.rating-card__copy-btn[data-copied='true'] svg { fill: var(--good); }

.rating-card__bonus { color: var(--text); }
.number-rating { color: var(--heading); }
.uk-offers-star-empty { color: var(--star-empty); }
.uk-offers-star-fill { color: var(--star); }

/* ------------------------------------------------------------ pros/cons */

/* The theme draws this block for a black page: a coloured title band over a
   pure black list. On our light page that came out as dark text on black.
   The band stays - it is the shape of the reference - but the list sits on the
   card surface, and the band's own text has to be white to survive on it. */
.pros-block, .cons-block {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.pros-block-title { background-color: var(--good); }
.cons-block-title { background-color: var(--bad); }
.pros-block-title p, .cons-block-title p { color: #ffffff; }

.pros-block-list, .cons-block-list { background-color: var(--surface); }
.pros-block-list li, .cons-block-list li { color: var(--text); }
.pros-block-list ul li::before { color: var(--good); }
.cons-block-list ul li::before { color: var(--bad); }

/* --------------------------------------------------------------- tables */

.entry-content table tr:nth-child(odd) { background-color: var(--surface-2); }
.entry-content table td { border-color: var(--border); }
.entry-content table tr:first-child td { background: var(--dark); color: var(--dark-text); }

/* --------------------------------------------------------------- footer */

#footer,
#footer-bottom,
#footer-widgets,
#footer .nav-menu:not(.mobile) { background: var(--dark); }
#footer { color: var(--dark-muted); border-top: 1px solid var(--dark-border); }
#footer p, #footer .footer-info p { color: var(--dark-muted); }
#footer-bottom a,
#footer-bottom .social-links a { color: var(--dark-text); }
#footer-bottom a:hover,
#footer-bottom .social-links a:hover { color: #ffffff; }
#footer-widgets { border-bottom: 0; border-top: 0; }
/* The theme paints this row pure black, which cuts a seam across the band.
   Its own selector is `#footer .footer-widget-1.grid` at (1,2,0), so this has
   to match that weight to win. */
#footer .footer-widget-1.grid {
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 36px;
  width: 100%;
  float: none;
  margin: 0;
}

#footer-bottom #back-to-top { background: var(--cta); color: var(--cta-text); }
#footer-bottom #back-to-top:hover { background: var(--cta-hover); color: var(--cta-text); }

/* These are the reference's own badges: white-on-transparent artwork drawn for
   a dark footer, so they sit straight on the band. A light plate behind them
   would erase the white halves. */
#footer-widgets .widget_media_image img {
  background: none;
  padding: 0;
  height: 34px;
  width: auto;
  max-width: 100%;
  opacity: 0.85;
}
#footer-widgets .widget_media_image a:hover img { opacity: 1; }


/* ==========================================================================
   Corrections to reference rules that do not suit this build
   ========================================================================== */

/* The reference sizes brand logos with `object-fit: cover` at full width, which
   crops them and makes a wide mark span the tile edge to edge. Ours are
   pre-trimmed onto one canvas, so they only need containing. The same rule also
   carried a stray red bottom border.

   The inset lives on the tile, not here - padding on the image added to its
   fixed 64px height and made the whole block grow. */
.rating-card__logo-link img {
  object-fit: contain;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Scaling a logo on hover is noise, not feedback. */
.rating-card__logo-link img:hover,
.rating-card__copy-btn:hover { transform: none; }

/* The theme underlines every link inside .entry with a 1px box-shadow that
   darkens on hover. On a text link that is fine; on the logo tile it reads as
   a line cracking open along the bottom edge.

   `.entry a:hover` scores (0,2,1), so a bare `.rating-card__logo-link:hover`
   at (0,2,0) loses to it. Scoping through .entry wins on merit rather than
   with !important. */
.rating-card__logo-link,
.rating-card__logo-link:hover,
.rating-card__button,
.rating-card__button:hover { box-shadow: none; }

/* The theme clamps the logo with max-height but leaves width alone, so a mark
   with a different aspect ratio than the reference one gets stretched wide on
   desktop and squeezed on mobile. Let the height drive and the width follow.
   This wordmark is two lines of text plus a map, so it needs more height than
   the single-line one it replaced. */
.site-title a img,
#footer-logo {
  width: auto;
  height: 54px;
  max-height: 54px;
  max-width: 100%;
  padding: 0;
}

/* Below 719px the theme zeroes the header padding entirely, which puts the
   logo hard against the screen edge. */
@media only screen and (max-width: 719px) {
  #header .pad { padding: 8px 16px; }

  /* the theme leaves 20px of dead space under the author box on mobile */
  #profile { padding-bottom: 5px !important; }

  .site-title { padding: 0; }
  .site-title a img { height: 44px; max-height: 44px; }
}

/* Review screenshots run the full width of the text column. The theme centres
   entry images at their natural size, which leaves these floating in a gap. */
.entry figure { margin: 24px 0; }
.entry figure img {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-sizing: border-box;   /* the border was pushing it 2px past the column */
  display: block;
}
.entry figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

/* The theme's horizontal table scrollbar kept the old purple. */
.entry-content table::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}
.entry-content table::-webkit-scrollbar-track {
  background: rgb(16 28 51 / 6%);
  border-radius: 3px;
}
.entry-content table { scrollbar-color: var(--accent) rgb(16 28 51 / 6%); scrollbar-width: thin; }

/* ==========================================================================
   Mobile menu state
   --------------------------------------------------------------------------
   These come from the reference theme verbatim. The extractor keeps a rule
   only if its selector matches the DOM at capture time, and a comma-separated
   selector keeps only the halves that matched - so the "visible" half of this
   pair was always dropped, leaving the open menu invisible.
   ========================================================================== */

.nav-menu.mobile > div > ul.menu,
.nav-menu.mobile.toggled > div > ul.menu ul.sub-menu {
  visibility: hidden;
  transition: all 0.3s ease;
}
.nav-menu.mobile.toggled > div > ul.menu,
.nav-menu.mobile.toggled > div > ul.menu ul.sub-menu.active {
  visibility: visible;
}

/* The collapsed sub-menu is clamped to max-height/max-width 0. The theme
   releases it in two ways: `ul.active` when the caret is clicked, and
   `li.hover > ul` while the pointer is over the item. Both are states that only
   exist at runtime, so the extractor never had one to match against - which is
   why the dropdown opened to a 2px sliver, and why hovering did nothing at all.

   `:hover` is here alongside `.hover` so the pointer works without JS; the
   class remains for keyboard and touch. */
.nav-menu .menu ul.active,
.nav-menu:not(.mobile) .menu li.hover > ul,
.nav-menu:not(.mobile) .menu li.menu-item-has-children:hover > ul {
  max-width: 100vw;
  max-height: 300vh;
}
.nav-menu:not(.mobile) .menu ul.active,
.nav-menu:not(.mobile) .menu li.hover > ul,
.nav-menu:not(.mobile) .menu li.menu-item-has-children:hover > ul {
  overflow: visible;
  width: 220px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.15s linear, transform 0.15s linear;
}
.nav-menu:not(.mobile) .menu li.hover ul.sub-menu:not(.active),
.nav-menu:not(.mobile) .menu li.menu-item-has-children:hover ul.sub-menu:not(.active) {
  opacity: 1;
}

/* The desktop dropdown's pointer, and the invisible strip that bridges the gap
   between the bar and the panel so the menu survives the mouse crossing it. */
.nav-menu:not(.mobile) .menu li.menu-item-has-children > ul:before,
.nav-menu:not(.mobile) .menu li.menu-item-has-children > ul:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 100%;
}
.nav-menu:not(.mobile) .menu li.menu-item-has-children > ul:before {
  left: 0;
  right: 0;
  height: 20px;
}
.nav-menu:not(.mobile) .menu li.menu-item-has-children > ul:after {
  border: 8px solid transparent;
  border-bottom-color: var(--dark-2);
  left: 18px;
}

/* the caret flips while its sub-menu is open */
.nav-menu button.active .svg-icon { transform: rotate(180deg); }
.nav-menu .menu-item-wrapper button .svg-icon { transition: transform 0.2s ease; }

.nav-menu.mobile > div > ul > li:last-child { margin-bottom: 10px; }

/* ==========================================================================
   Footer link groups
   --------------------------------------------------------------------------
   The reference footer carried a single legal row. Ours has three titled
   groups, so the wrapper becomes a grid rather than a floated block.
   ========================================================================== */

/* the blurb column no longer needs two thirds of the row once three link
   groups have to fit beside it */
#footer .footer-main { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; }
#footer .footer-info { float: none; width: auto; }
#footer .footer-info p { margin: 0 0 12px; }

#wrap-nav-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 24px;
  float: none;
  width: auto;
  text-align: left;
}
#footer .footer-group { background: transparent; float: none; width: auto; text-align: left; }
#footer .footer-group-title {
  margin: 0 0 10px;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
#footer .footer-group .menu { margin: 0; padding: 0; list-style: none; }
#footer .footer-group .menu-item { display: block; margin: 0 0 8px; }
#footer .footer-group a { font-weight: 400; }

#footer .footer-copyright {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--dark-border);
  color: var(--dark-muted);
  font-size: 14px;
}

@media only screen and (max-width: 719px) {
  #footer .footer-main { grid-template-columns: 1fr; gap: 8px; }
  #wrap-nav-footer { grid-template-columns: 1fr; gap: 4px; }
  #footer .footer-group-title { margin-top: 16px; }
}

/* ==========================================================================
   404
   ========================================================================== */

.error-code {
  margin: 0 0 4px;
  color: var(--cta);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
@media only screen and (max-width: 719px) {
  .error-code { font-size: 48px; }
}