/* ==================================================================
   kentastic.bet - site sheet, loaded last, after base.css,
   style.css and theme4.css.

   1. Deep plum ground, violet surfaces, mint teal for accents and
      buttons, coral for secondary labels. Colours follow the purple
      points panel, the teal Redeem and Instant labels and the coral
      tags in the supplied Kentastic UK artwork.
   2. Fredoka headings over Lexend body text.
   3. Sidebar on the left; each H2 sits over a short teal pill and a
      violet rule, and tables use rounded violet cards.
   4. Supplied artwork keeps its transparent background and sits on a
      soft teal and violet glow, floated left or right of the text.
   ================================================================== */

:root {
  --font-display: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Lexend', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --kb-teal-wash: rgba(45, 212, 180, 0.10);
  --kb-teal-line: rgba(45, 212, 180, 0.38);
  --kb-coral-line: rgba(255, 107, 138, 0.40);
  --kb-violet-line: rgba(139, 108, 255, 0.28);
  --kb-row: rgba(37, 27, 63, 0.55);
  --kb-btn: linear-gradient(180deg, #6ae8cf 0%, #2dd4b4 55%, #1bb397 100%);
}

body { background: var(--color-bg, #120c1f); }

/* ---- 1. Sidebar on the left with a teal edge --------------------- */
@media (min-width: 1025px) {
  .wi-sidebar {
    border-right: 1px solid var(--kb-teal-line);
    background: linear-gradient(180deg, rgba(37, 27, 63, 0.97) 0%, rgba(11, 7, 20, 0.99) 100%);
  }
  .wi-main { min-width: 0; margin-inline: auto; }
}

.wi-sidebar__logo-img { max-width: 214px; height: auto; }

.wi-sidebar__nav-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-size: 0.62rem;
  color: var(--color-accent-secondary, #ff6b8a);
}

.wi-sidebar__nav a { font-family: var(--font-body); font-weight: 600; border-radius: 999px; }
.wi-sidebar__nav a.active,
.wi-sidebar__nav a:hover {
  background: var(--kb-teal-wash);
  color: var(--color-text, #f3effa);
  box-shadow: inset 3px 0 0 var(--color-accent, #2dd4b4);
}
.wi-sidebar__nav-icon { color: var(--color-accent, #2dd4b4); font-size: 0.9rem; }

.wi-sidebar__cta a {
  color: var(--color-cta-text, #0b1a17);
  background: var(--kb-btn);
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: 999px;
}
.wi-sidebar__cta-sub { color: #0b2a24; opacity: 0.92; font-family: var(--font-body); }

/* ---- 2. Type ----------------------------------------------------- */
h1, h2, h3,
.wi-hero__h1,
.wi-page-header h1,
.wi-faq-accordion__title,
.wi-payments__title,
.cta-banner h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  hyphens: none;
}
h1, .wi-hero__h1, .wi-page-header h1 { line-height: 1.14; }
h2 { line-height: 1.24; }
h3 {
  font-family: var(--font-body);
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-accent-secondary, #ff6b8a);
}

.wi-main p, .wi-main li, .wi-main td, .wi-main th {
  font-family: var(--font-body);
  overflow-wrap: break-word;
  hyphens: none;
}
.wi-main p, .wi-main li { font-size: 0.96rem; line-height: 1.76; color: var(--color-text, #f3effa); }
.wi-main a:not(.btn):not(.wi-hero__cta):not(.wi-topbar-auth__btn) { color: var(--color-accent-hover, #5ee3c9); }

/* Teal pill above each H2 and a violet rule below */
.wi-main .content-section .container > h2 {
  position: relative;
  padding: 0.9rem 0 0.55rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--kb-violet-line);
}
.wi-main .content-section .container > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent, #2dd4b4), var(--color-accent-secondary, #ff6b8a));
}

/* ---- 3. Hero ---------------------------------------------------- */
.wi-hero::before {
  background: linear-gradient(100deg, rgba(11, 7, 20, 0.93) 0%, rgba(18, 12, 31, 0.62) 55%, rgba(18, 12, 31, 0.05) 100%);
}
.wi-hero__eyebrow {
  color: var(--color-accent, #2dd4b4);
  border: 1px solid var(--kb-teal-line);
  background: rgba(45, 212, 180, 0.08);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.8px;
}
.wi-hero__h1 { color: var(--color-text, #f3effa); font-size: clamp(28px, 3.1vw, 43px); line-height: 1.12; }
.wi-hero__bg { filter: none; }
.wi-hero__cta--primary {
  background: var(--kb-btn);
  color: var(--color-cta-text, #0b1a17);
  border-color: transparent;
  border-radius: 999px;
}
.wi-hero__cta--ghost { border-color: var(--kb-coral-line); color: var(--color-text, #f3effa); border-radius: 999px; }
.wi-hero__trust-dot { background: var(--color-accent-secondary, #ff6b8a); }

.wi-page-header__eyebrow {
  color: var(--color-accent, #2dd4b4);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.wi-page-header { border-bottom: 1px solid var(--kb-teal-line); }

/* ---- 4. Supplied artwork --------------------------------------- */
.shot {
  margin: 0 0 1.1rem;
  padding: 0;
  border-radius: 28px;
  background: radial-gradient(100% 75% at 50% 30%, rgba(45, 212, 180, 0.12) 0%, rgba(139, 108, 255, 0.08) 55%, rgba(18, 12, 31, 0) 100%);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.65));
}
.shot img { display: block; width: 100%; height: auto; }

@media (min-width: 761px) {
  .shot { width: 290px; max-width: 40%; }
  .shot--right { float: right; margin-left: 2rem; }
  .shot--left  { float: left;  margin-right: 2rem; }
}
@media (max-width: 760px) {
  .shot { width: 100%; max-width: 300px; margin-inline: auto; float: none; }
}

.wi-main .content-section .container::after { content: ""; display: block; clear: both; }
.wi-main .content-section .container > ul,
.wi-main .content-section .container > ol { display: flow-root; }

/* ---- 5. Tables -------------------------------------------------- */
.tw {
  margin: 1.4rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border-2, #4c3b75);
  border-radius: 16px;
  background: rgba(28, 20, 48, 0.85);
  display: flow-root;
}
.tw > table { width: 100%; margin: 0; border-collapse: collapse; min-width: 30rem; font-size: 0.92rem; }
.tw caption {
  caption-side: top;
  text-align: left;
  padding: 0.7rem 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-accent, #2dd4b4);
  background: rgba(11, 7, 20, 0.6);
  border-bottom: 1px solid var(--kb-teal-line);
}
.tw thead th {
  text-align: left;
  padding: 0.6rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--color-accent-secondary, #ff6b8a);
  background: #2e2150;
  border-bottom: 1px solid var(--kb-coral-line);
}
.tw tbody td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-border, #3a2c5c);
  vertical-align: top;
  color: var(--color-text, #f3effa);
}
.tw tbody tr:last-child td { border-bottom: 0; }
.tw tbody tr:nth-child(even) td { background: var(--kb-row); }
.tw tbody td:first-child { font-weight: 600; }
@media (max-width: 620px) {
  .tw > table { min-width: 0; font-size: 0.85rem; }
  .tw thead th, .tw tbody td { padding: 0.5rem 0.6rem; }
}

/* ---- 6. CTA banner, payments strip, FAQ ------------------------- */
.cta-banner {
  background: linear-gradient(120deg, rgba(45, 212, 180, 0.14) 0%, rgba(28, 20, 48, 0.95) 55%, rgba(255, 107, 138, 0.12) 100%);
  border: 1px solid var(--kb-teal-line);
  border-radius: 22px;
}
.cta-banner h2 { color: var(--color-text, #f3effa); }
.cta-banner .btn--primary,
.btn--primary {
  background: var(--kb-btn);
  color: var(--color-cta-text, #0b1a17);
  border-color: transparent;
  border-radius: 999px;
}
.cta-banner .container--narrow p { max-width: 44rem; margin-left: auto; margin-right: auto; }

.wi-payments { border-color: var(--color-border-2, #4c3b75); }
.wi-payments__strip { flex-wrap: wrap; overflow: visible; row-gap: 10px; }
.wi-payments__strip .wi-pay { flex: 1 1 auto; border-radius: 999px; border-color: var(--color-border-2, #4c3b75); background: var(--color-surface, #1c1430); }
.wi-pay__name { color: var(--color-text, #f3effa); }
.wi-payments__link { color: var(--color-accent-hover, #5ee3c9); }
@media (max-width: 520px) { .wi-payments__strip .wi-pay { min-width: 90px; } }

.wi-faq-item { border-color: var(--color-border, #3a2c5c); }
.wi-faq-item__question { font-family: var(--font-body); font-weight: 600; color: var(--color-text, #f3effa); }
.wi-faq-item__question[aria-expanded="true"] { color: var(--color-accent-hover, #5ee3c9); }
.wi-faq-chevron { color: var(--color-accent-secondary, #ff6b8a); }

/* ---- 7. Top bar, mobile bar, sticky CTA ------------------------- */
.wi-topbar-auth__btn--solid,
.wi-mobile-topbar__cta {
  background: var(--kb-btn);
  color: var(--color-cta-text, #0b1a17);
  border-color: transparent;
  border-radius: 999px;
}
.wi-topbar-auth__btn--ghost,
.wi-mobile-topbar__signin { border-color: var(--kb-violet-line); color: var(--color-text, #f3effa); border-radius: 999px; }
.wi-mobile-topbar { background: rgba(11, 7, 20, 0.96); border-bottom: 1px solid var(--kb-teal-line); }

.sticky-cta { background: rgba(11, 7, 20, 0.97); border-top: 1px solid var(--color-accent, #2dd4b4); }
.sticky-cta__bonus { text-transform: none; letter-spacing: 0; color: var(--color-accent, #2dd4b4); }
@media (max-width: 640px) {
  .sticky-cta__text > span:first-child { display: none; }
  .sticky-cta__bonus { font-size: 0.82rem; line-height: 1.25; }
  .sticky-cta__text { min-width: 0; }
  .sticky-cta .container { gap: 0.6rem; }
  .sticky-cta .btn { white-space: nowrap; }
}

.wi-footer__cols a:hover { color: var(--color-accent-hover, #5ee3c9); }
.content-section[id], .wi-main h2[id] { scroll-margin-top: 80px; }

@media (min-width: 1300px) { .wi-main { max-width: 1080px; } }

/* Theme 4 sets uppercase section titles; this site keeps Fredoka in sentence case */
.wi-main .content-section h2,
.wi-main .wi-faq-accordion h2,
.wi-main .cta-banner h2,
.wi-main .wi-payments__title {
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}
.wi-main .content-section h2 { font-size: clamp(24px, 2.3vw, 31px); }

/* ---- 8. Kentastic UK extras ------------------------------------- */
.wi-main .content-section .container > ul li::marker,
.wi-main .content-section .container > ol li::marker { color: var(--color-accent, #2dd4b4); font-weight: 700; }
.wi-main .content-section .container > p,
.wi-main .content-section .container > ul,
.wi-main .content-section .container > ol { max-width: none; }