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

   1. Warm near black ground, crimson for accents, copper for every
      button, silver for secondary labels. Colours follow the red
      Free Money ticket, the copper ring under the VIP Market car and
      the silver payment logos in the supplied TweedBet artwork.
   2. Oswald headings over Karla body text.
   3. Sidebar on the right; each H2 carries a crimson bar on its left
      and a thin silver rule below.
   4. Supplied artwork keeps its transparent background and sits on a
      soft crimson glow, floated left or right of the matching text.
   ================================================================== */

:root {
  --font-display: 'Oswald', 'Arial Narrow', 'Segoe UI', sans-serif;
  --font-body: 'Karla', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --tb-red-wash: rgba(210, 58, 72, 0.10);
  --tb-red-line: rgba(210, 58, 72, 0.40);
  --tb-copper-line: rgba(217, 140, 74, 0.42);
  --tb-silver-line: rgba(199, 204, 212, 0.22);
  --tb-row: rgba(32, 26, 29, 0.6);
  --tb-btn: linear-gradient(180deg, #eaa96e 0%, #d98c4a 60%, #b8703a 100%);
}

body { background: var(--color-bg, #0d0b0c); }

/* ---- 1. Sidebar on the right with a crimson edge ----------------- */
@media (min-width: 1025px) {
  .wi-shell {
    grid-template-columns: 1fr 264px;
    grid-template-areas: "main sidebar";
  }
  .wi-sidebar {
    grid-column: 2;
    grid-row: 1;
    border-right: 0;
    border-left: 1px solid var(--tb-red-line);
    background: linear-gradient(180deg, rgba(32, 26, 29, 0.96) 0%, rgba(8, 6, 7, 0.99) 100%);
  }
  .wi-main { grid-column: 1; grid-row: 1; min-width: 0; margin-inline: auto; }
}

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

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

.wi-sidebar__nav a { font-family: var(--font-body); font-weight: 700; border-radius: 3px; }
.wi-sidebar__nav a.active,
.wi-sidebar__nav a:hover {
  background: var(--tb-red-wash);
  color: var(--color-text, #f4f1f0);
  box-shadow: inset -3px 0 0 var(--color-accent, #d23a48);
}
.wi-sidebar__nav-icon { color: var(--color-cta, #d98c4a); font-size: 0.9rem; }

.wi-sidebar__cta a {
  color: var(--color-cta-text, #170d06);
  background: var(--tb-btn);
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0.4px;
}
.wi-sidebar__cta-sub { color: #2a1608; 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: 700;
  letter-spacing: 0;
  text-transform: none;
  hyphens: none;
}
h1, .wi-hero__h1, .wi-page-header h1 { line-height: 1.14; }
h2 { line-height: 1.26; }
h3 {
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-accent-secondary, #c7ccd4);
  clear: both;
}

.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.98rem; line-height: 1.74; color: var(--color-text, #f4f1f0); }
.wi-main a:not(.btn):not(.wi-hero__cta):not(.wi-topbar-auth__btn) { color: var(--color-accent-hover, #e25a66); }

/* Crimson bar on the left and a silver rule below */
.wi-main .content-section .container > h2 {
  position: relative;
  padding: 0 0 0.6rem 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--tb-silver-line);
}
.wi-main .content-section .container > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.7rem;
  width: 4px;
  border-radius: 2px;
  background: var(--color-accent, #d23a48);
}

/* ---- 3. Hero ---------------------------------------------------- */
.wi-hero::before {
  background: linear-gradient(100deg, rgba(8, 6, 7, 0.92) 0%, rgba(13, 11, 12, 0.6) 55%, rgba(13, 11, 12, 0.05) 100%);
}
.wi-hero__eyebrow {
  color: var(--color-accent, #d23a48);
  border: 1px solid var(--tb-red-line);
  background: rgba(210, 58, 72, 0.08);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 1.4px;
}
.wi-hero__h1 { color: var(--color-text, #f4f1f0); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12; }
.wi-hero__bg { filter: none; }
.wi-hero__cta--primary {
  background: var(--tb-btn);
  color: var(--color-cta-text, #170d06);
  border-color: transparent;
}
.wi-hero__cta--ghost { border-color: var(--tb-red-line); color: var(--color-text, #f4f1f0); }
.wi-hero__trust-dot { background: var(--color-accent, #d23a48); }

.wi-page-header__eyebrow {
  color: var(--color-accent, #d23a48);
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
}
.wi-page-header { border-bottom: 1px solid var(--tb-red-line); }

/* ---- 4. Supplied artwork --------------------------------------- */
.shot {
  margin: 0 0 1.1rem;
  padding: 0;
  border-radius: 18px;
  background: radial-gradient(100% 75% at 50% 30%, rgba(210, 58, 72, 0.13) 0%, rgba(217, 140, 74, 0.06) 55%, rgba(13, 11, 12, 0) 100%);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.7));
}
.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, #45363b);
  border-radius: 6px;
  background: rgba(23, 19, 21, 0.8);
}
.tw > table { width: 100%; margin: 0; border-collapse: collapse; min-width: 30rem; font-size: 0.93rem; }
.tw caption {
  caption-side: top;
  text-align: left;
  padding: 0.65rem 0.9rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-cta, #d98c4a);
  background: rgba(8, 6, 7, 0.7);
  border-bottom: 1px solid var(--tb-copper-line);
}
.tw thead th {
  text-align: left;
  padding: 0.6rem 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-accent-hover, #e25a66);
  background: #2a1519;
  border-bottom: 1px solid var(--tb-red-line);
}
.tw tbody td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--color-border, #33282c);
  vertical-align: top;
  color: var(--color-text, #f4f1f0);
}
.tw tbody tr:last-child td { border-bottom: 0; }
.tw tbody tr:nth-child(even) td { background: var(--tb-row); }
.tw tbody td:first-child { font-weight: 700; }
@media (max-width: 620px) {
  .tw > table { min-width: 0; font-size: 0.86rem; }
  .tw thead th, .tw tbody td { padding: 0.5rem 0.6rem; }
}

/* Key and value rows */
.pairs { margin: 1.5rem 0; border: 1px solid var(--color-border-2, #45363b); border-radius: 6px; overflow: hidden; }
.pr-row { display: grid; grid-template-columns: 10rem 1fr; border-bottom: 1px solid var(--color-border, #33282c); }
.pr-row:last-child { border-bottom: 0; }
.pr-row:nth-child(even) { background: var(--tb-row); }
.pr-row > span { padding: 0.66rem 0.9rem; font-size: 0.93rem; line-height: 1.55; }
.pr-key { color: var(--color-cta, #d98c4a); border-right: 1px solid var(--color-border, #33282c); font-weight: 800; }
.pr-val { color: var(--color-text, #f4f1f0); }
@media (max-width: 520px) { .pr-row { grid-template-columns: 6.6rem 1fr; } }

/* Aside note */
p.aside {
  margin: 1.4rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--color-surface, #171315);
  border: 1px solid var(--tb-silver-line);
  border-top: 3px solid var(--color-accent, #d23a48);
  border-radius: 0 0 8px 8px;
  color: var(--color-text-muted, #b9afb1);
}

/* ---- 6. CTA banner, payments strip, FAQ ------------------------- */
.cta-banner {
  background: linear-gradient(120deg, rgba(210, 58, 72, 0.14) 0%, rgba(23, 19, 21, 0.95) 55%, rgba(217, 140, 74, 0.12) 100%);
  border: 1px solid var(--tb-red-line);
  border-radius: 8px;
}
.cta-banner h2 { color: var(--color-text, #f4f1f0); }
.cta-banner .btn--primary,
.btn--primary {
  background: var(--tb-btn);
  color: var(--color-cta-text, #170d06);
  border-color: transparent;
}
.cta-banner .container--narrow p { max-width: 44rem; margin-left: auto; margin-right: auto; }

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

.wi-faq-item { border-color: var(--color-border, #33282c); }
.wi-faq-item__question { font-family: var(--font-body); font-weight: 800; color: var(--color-text, #f4f1f0); }
.wi-faq-item__question[aria-expanded="true"] { color: var(--color-accent-hover, #e25a66); }
.wi-faq-chevron { color: var(--color-cta, #d98c4a); }

/* ---- 7. Top bar, mobile bar, sticky CTA ------------------------- */
.wi-topbar-auth__btn--solid,
.wi-mobile-topbar__cta {
  background: var(--tb-btn);
  color: var(--color-cta-text, #170d06);
  border-color: transparent;
}
.wi-topbar-auth__btn--ghost,
.wi-mobile-topbar__signin { border-color: var(--tb-red-line); color: var(--color-text, #f4f1f0); }
.wi-mobile-topbar { background: rgba(8, 6, 7, 0.96); border-bottom: 1px solid var(--tb-red-line); }

.sticky-cta { background: rgba(8, 6, 7, 0.97); border-top: 1px solid var(--color-accent, #d23a48); }
.sticky-cta__bonus { text-transform: none; letter-spacing: 0; color: var(--color-cta, #d98c4a); }
@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, #e25a66); }
.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 Oswald 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: 700;
  letter-spacing: 0;
}
.wi-main .content-section h2 { font-size: clamp(24px, 2.3vw, 31px); font-weight: 600; letter-spacing: 0.2px; }

/* ---- 8. TweedBet UK extras -------------------------------------- */
.wi-main .content-section .container > ul li::marker,
.wi-main .content-section .container > ol li::marker { color: var(--color-cta, #d98c4a); font-weight: 800; }
.wi-main .content-section .container > p,
.wi-main .content-section .container > ul,
.wi-main .content-section .container > ol { max-width: none; }
@media (min-width: 1025px) {
  body.layout-sidebar .sticky-cta { left: 0; right: 264px; }
}