/* ==================================================================
   sher-luck.com - site sheet, loaded last, after base.css,
   style.css and theme4.css.

   1. Near black ground with a faint green cast, emerald for accents,
      warm gold for every button, champagne for secondary labels.
      Colours follow the black screens, the gold Log in and Activate
      Promocode keys and the green Android app badge in the artwork.
   2. Bodoni Moda headings over Mulish body text.
   3. Sidebar on the left (Theme 4 default); each H2 has an emerald
      underline and a small gold square.
   4. Supplied artwork keeps its transparent background and sits on a
      soft emerald glow, floated left or right of the matching text.
   ================================================================== */

:root {
  --font-display: 'Bodoni Moda', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Mulish', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sk-green-wash: rgba(52, 199, 123, 0.10);
  --sk-green-line: rgba(52, 199, 123, 0.36);
  --sk-gold-line: rgba(226, 180, 87, 0.40);
  --sk-champ-line: rgba(216, 201, 163, 0.24);
  --sk-row: rgba(26, 32, 29, 0.6);
}

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

/* ---- 1. Sidebar on the left with an emerald edge ----------------- */
@media (min-width: 1025px) {
  .wi-sidebar {
    border-right: 1px solid var(--sk-green-line);
    background: linear-gradient(180deg, rgba(19, 23, 21, 0.96) 0%, rgba(6, 8, 7, 0.99) 100%);
  }
  .wi-main { min-width: 0; margin-inline: auto; }
}

.wi-sidebar__logo-img { max-width: 200px; 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, #d8c9a3);
}

.wi-sidebar__nav a { font-family: var(--font-body); font-weight: 700; border-radius: 4px; }
.wi-sidebar__nav a.active,
.wi-sidebar__nav a:hover {
  background: var(--sk-green-wash);
  color: var(--color-accent-hover, #5ad896);
  box-shadow: inset 3px 0 0 var(--color-accent, #34c77b);
}
.wi-sidebar__nav-icon { color: var(--color-cta, #e2b457); font-size: 0.9rem; }

.wi-sidebar__cta a {
  color: var(--color-cta-text, #16110a);
  background: linear-gradient(180deg, #edc877 0%, #e2b457 60%, #c79a3f 100%);
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0.4px;
}
.wi-sidebar__cta-sub { color: #2b2210; 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, #d8c9a3);
  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, #f2f4f1); }
.wi-main a:not(.btn):not(.wi-hero__cta):not(.wi-topbar-auth__btn) { color: var(--color-accent-hover, #5ad896); }

/* Emerald underline with a gold square at its start */
.wi-main .content-section .container > h2 {
  position: relative;
  padding: 0 0 0.7rem;
  margin-bottom: 1.1rem;
}
.wi-main .content-section .container > h2::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  bottom: 0;
  width: min(220px, 50%);
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent, #34c77b) 0%, rgba(52, 199, 123, 0) 100%);
}
.wi-main .content-section .container > h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 8px;
  height: 8px;
  background: var(--color-cta, #e2b457);
}

/* ---- 3. Hero ---------------------------------------------------- */
.wi-hero::before {
  background: linear-gradient(100deg, rgba(6, 8, 7, 0.92) 0%, rgba(10, 12, 11, 0.6) 55%, rgba(10, 12, 11, 0.05) 100%);
}
.wi-hero__eyebrow {
  color: var(--color-accent, #34c77b);
  border: 1px solid var(--sk-green-line);
  background: rgba(52, 199, 123, 0.08);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 1.4px;
}
.wi-hero__h1 { color: var(--color-text, #f2f4f1); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12; }
.wi-hero__bg { filter: none; }
.wi-hero__cta--primary {
  background: linear-gradient(180deg, #edc877 0%, #e2b457 60%, #c79a3f 100%);
  color: var(--color-cta-text, #16110a);
  border-color: transparent;
}
.wi-hero__cta--ghost { border-color: var(--sk-green-line); color: var(--color-text, #f2f4f1); }
.wi-hero__trust-dot { background: var(--color-accent, #34c77b); }

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

/* ---- 4. Supplied artwork --------------------------------------- */
.shot {
  margin: 0 0 1.1rem;
  padding: 0;
  border-radius: 18px;
  background: radial-gradient(100% 75% at 50% 30%, rgba(52, 199, 123, 0.13) 0%, rgba(226, 180, 87, 0.06) 55%, rgba(10, 12, 11, 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, #34403a);
  border-radius: 6px;
  background: rgba(19, 23, 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, #e2b457);
  background: rgba(6, 8, 7, 0.7);
  border-bottom: 1px solid var(--sk-gold-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, #5ad896);
  background: #102219;
  border-bottom: 1px solid var(--sk-green-line);
}
.tw tbody td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--color-border, #26302b);
  vertical-align: top;
  color: var(--color-text, #f2f4f1);
}
.tw tbody tr:last-child td { border-bottom: 0; }
.tw tbody tr:nth-child(even) td { background: var(--sk-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, #34403a); border-radius: 6px; overflow: hidden; }
.pr-row { display: grid; grid-template-columns: 10rem 1fr; border-bottom: 1px solid var(--color-border, #26302b); }
.pr-row:last-child { border-bottom: 0; }
.pr-row:nth-child(even) { background: var(--sk-row); }
.pr-row > span { padding: 0.66rem 0.9rem; font-size: 0.93rem; line-height: 1.55; }
.pr-key { color: var(--color-cta, #e2b457); border-right: 1px solid var(--color-border, #26302b); font-weight: 800; }
.pr-val { color: var(--color-text, #f2f4f1); }
@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, #131715);
  border: 1px solid var(--sk-champ-line);
  border-top: 3px solid var(--color-accent, #34c77b);
  border-radius: 0 0 8px 8px;
  color: var(--color-text-muted, #a9b5ae);
}

/* ---- 6. CTA banner, payments strip, FAQ ------------------------- */
.cta-banner {
  background: linear-gradient(120deg, rgba(52, 199, 123, 0.14) 0%, rgba(19, 23, 21, 0.95) 55%, rgba(226, 180, 87, 0.12) 100%);
  border: 1px solid var(--sk-green-line);
  border-radius: 8px;
}
.cta-banner h2 { color: var(--color-text, #f2f4f1); }
.cta-banner .btn--primary,
.btn--primary {
  background: linear-gradient(180deg, #edc877 0%, #e2b457 60%, #c79a3f 100%);
  color: var(--color-cta-text, #16110a);
  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, #34403a); }
.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, #34403a); background: var(--color-surface, #131715); }
.wi-pay__name { color: var(--color-text, #f2f4f1); }
.wi-payments__link { color: var(--color-accent-hover, #5ad896); }
@media (max-width: 520px) { .wi-payments__strip .wi-pay { min-width: 90px; } }

.wi-faq-item { border-color: var(--color-border, #26302b); }
.wi-faq-item__question { font-family: var(--font-body); font-weight: 800; color: var(--color-text, #f2f4f1); }
.wi-faq-item__question[aria-expanded="true"] { color: var(--color-accent-hover, #5ad896); }
.wi-faq-chevron { color: var(--color-cta, #e2b457); }

/* ---- 7. Top bar, mobile bar, sticky CTA ------------------------- */
.wi-topbar-auth__btn--solid,
.wi-mobile-topbar__cta {
  background: linear-gradient(180deg, #edc877 0%, #e2b457 100%);
  color: var(--color-cta-text, #16110a);
  border-color: transparent;
}
.wi-topbar-auth__btn--ghost,
.wi-mobile-topbar__signin { border-color: var(--sk-green-line); color: var(--color-text, #f2f4f1); }
.wi-mobile-topbar { background: rgba(6, 8, 7, 0.96); border-bottom: 1px solid var(--sk-green-line); }

.sticky-cta { background: rgba(6, 8, 7, 0.97); border-top: 1px solid var(--color-accent, #34c77b); }
.sticky-cta__bonus { text-transform: none; letter-spacing: 0; color: var(--color-cta, #e2b457); }
@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, #5ad896); }
.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 Bodoni Moda 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, 32px); }

/* ---- 8. SherLuck UK extras -------------------------------------- */
.wi-main .content-section .container > ul li::marker,
.wi-main .content-section .container > ol li::marker { color: var(--color-cta, #e2b457); font-weight: 800; }
.wi-main .content-section .container > p,
.wi-main .content-section .container > ul,
.wi-main .content-section .container > ol { max-width: none; }