/* ==================================================================
   gamble-gorilla.casino - site sheet, loaded last, after base.css,
   style.css and theme4.css.

   Goal: a Theme 4 shell that reads as GambleGorilla Casino and does
   not read as any of the sister sites in the repository.

   1. Charcoal cocoa ground taken from the artwork, jungle emerald as
      the first accent and amber copper as the CTA glow, with ivory
      body text for a lantern-lit ranger post feel.
   2. Serif display headings on a sans body: Georgia stack in front,
      DejaVu Sans body and Iosevka style monospace on numbers.
   3. Topic markers are amber copper pills with cocoa text.
   4. Step tables put the rung number in an emerald key column.
   5. Supplied artwork keeps its transparent background and sits in an
      emerald into copper wash so it never floats on flat cocoa.
   ================================================================== */

:root {
  --font-display: 'Georgia', 'DejaVu Serif', 'Liberation Serif', 'Times New Roman', serif;
  --font-body: 'DejaVu Sans', 'Liberation Sans', Verdana, system-ui, -apple-system, sans-serif;
  --font-num: 'Iosevka', 'DejaVu Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --gt-rule: rgba(63, 178, 122, 0.28);
  --gt-rule-strong: rgba(224, 138, 60, 0.5);
  --gt-gold-wash: rgba(63, 178, 122, 0.08);
  --gt-mag-wash: rgba(224, 138, 60, 0.1);
  --gt-row: rgba(37, 25, 15, 0.55);
}

/* ---- 1. Sidebar on the left, gold hairline ---------------------- */
@media (min-width: 1025px) {
  .wi-shell {
    grid-template-columns: 274px 1fr;
    grid-template-areas: "sidebar main";
  }
  .wi-sidebar {
    grid-column: 1;
    grid-row: 1;
    border-left: 0;
    border-right: 1px solid var(--color-border-2, #54366f);
    background: linear-gradient(180deg, rgba(46, 32, 71, 0.85), rgba(15, 8, 25, 0.97));
  }
  .wi-main { grid-column: 2; grid-row: 1; min-width: 0; margin-inline: auto; }
}

.wi-sidebar__nav-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.6rem;
  color: var(--color-text-faint, #9b88ae);
}

.wi-sidebar__nav-label-text {
  display: inline-block;
  padding: 0.24rem 0.6rem;
  font-size: 0.6rem;
  letter-spacing: 1.7px;
  border: 1px solid var(--gt-rule);
  border-radius: 4px;
  background: var(--gt-gold-wash);
  color: var(--color-accent, #ffc800);
}

/* ---- 2. Headings ------------------------------------------------ */
h1, h2, h3, h4,
.hero h1,
.page-hero h1,
.wi-hero__title,
.wi-page-header h1,
.content-section h2,
.content-section h3,
.wi-seo__heading,
.wi-games-tabs__title,
.wi-payments__title,
.wi-faq__title,
.wi-cta-banner__title,
.wi-banking__title,
.section-title,
.seo-content h2,
.seo-content h3,
.wi-faq-item__question,
.faq-accordion__question {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.004em;
  hyphens: none;
}

h1, .wi-page-header h1, .wi-hero__title { line-height: 1.14; }
h2 { line-height: 1.26; }
h3 {
  line-height: 1.4;
  font-size: 1.06rem;
  color: var(--color-accent, #ffc800);
  clear: both;
}
h4 { color: var(--color-text, #f6f0fa); }

.wi-main p,
.wi-main li,
.wi-main td,
.wi-main th {
  font-family: var(--font-body);
  hyphens: none;
  overflow-wrap: break-word;
}

.wi-main p, .wi-main li { font-size: 0.95rem; line-height: 1.72; }

.wi-page-header__eyebrow,
.wi-hero__eyebrow,
.wi-footer__col-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Two short gold rungs in front of the text, a short magenta hairline
   underneath. Nothing runs the full width of the column. */
.wi-main .content-section .container > h2,
.wi-main .seo-content h2 {
  position: relative;
  border-bottom: 0;
  padding: 0 0 0.6rem 2.15rem;
}
.wi-main .content-section .container > h2::before,
.wi-main .seo-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 1.45rem;
  height: 0.62rem;
  border-top: 3px solid var(--color-accent, #ffc800);
  border-bottom: 3px solid var(--color-accent, #ffc800);
}
.wi-main .content-section .container > h2::after,
.wi-main .seo-content h2::after {
  content: "";
  position: absolute;
  left: 2.15rem;
  bottom: 0;
  width: 4.6rem;
  height: 3px;
  border-radius: 2px;
  background: var(--color-cta, #ff2d78);
}

/* ---- 3. Topic marker: solid magenta pill ------------------------ */
.step {
  display: inline-block;
  vertical-align: 0.12em;
  margin-right: 12px;
  padding: 0.26em 0.7em;
  font-family: var(--font-body);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--color-cta, #ff2d78);
  border-radius: 4px;
  white-space: nowrap;
}

/* ---- 4. Step tables: the rung, then what it asks for ------------ */
.pairs {
  margin: 1.7rem 0;
  border: 1px solid var(--color-border, #382450);
  border-radius: 8px;
  overflow: hidden;
}

.pr-row {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0;
  border-bottom: 1px solid var(--color-border, #382450);
}
.pr-row:last-child { border-bottom: 0; }
.pr-row:nth-child(even) { background: var(--gt-row); }

.pr-row > span {
  padding: 0.72rem 0.95rem;
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--color-text-muted, #c6b6d6);
  border-right: 1px solid var(--color-border, #382450);
}
.pr-row > span:last-child { border-right: 0; }

.pr-key {
  color: var(--color-accent, #ffc800);
  font-family: var(--font-num);
  font-size: 0.85rem;
  background: var(--gt-gold-wash);
}
.pr-val { color: var(--color-text, #f6f0fa); }

.pr-head > span {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-text, #f6f0fa);
  background: rgba(15, 8, 25, 0.72);
}

@media (max-width: 700px) {
  .pr-row { grid-template-columns: 1fr; }
  .pr-row > span { border-right: 0; border-bottom: 1px dotted var(--gt-rule); }
  .pr-row > span:last-child { border-bottom: 0; }
  .pr-head { display: block; padding: 0.55rem 0.95rem 0.5rem; background: rgba(15, 8, 25, 0.72); }
  .pr-head > span { display: inline; padding: 0; border: 0; background: none; }
  .pr-head > span + span::before { content: "\00A0\2192\00A0"; color: var(--color-text-muted, #c6b6d6); }
  .pr-row:not(.pr-head) > .pr-val { border-left: 3px solid var(--color-cta, #ff2d78); }
}

/* Figures inside running text */
.fig {
  font-family: var(--font-num);
  font-size: 0.92em;
  letter-spacing: -0.01em;
  color: var(--color-accent, #ffc800);
}

/* ---- 5. Box for the terms the operator has not published -------- */
.blank-fields {
  margin: 1.8rem 0;
  padding: 1.1rem 1.3rem 0.95rem;
  background: var(--gt-mag-wash);
  border: 1px solid var(--gt-rule-strong);
  border-left: 3px solid var(--color-cta, #ff2d78);
  border-radius: 0 8px 8px 0;
}
.blank-fields h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  color: var(--color-text, #f6f0fa);
}
.blank-fields ul { margin: 0; padding-left: 1.15rem; }
.blank-fields li { margin-bottom: 0.42rem; }

/* ---- 6. Aside paragraph ---------------------------------------- */
p.aside {
  margin: 1.5rem 0;
  padding: 0.9rem 1.15rem;
  background: var(--color-surface, #231634);
  border: 1px solid var(--gt-rule);
  border-left: 3px solid var(--color-accent, #ffc800);
  border-radius: 0 8px 8px 0;
  font-size: 0.94rem;
  color: var(--color-text-muted, #c6b6d6);
}

/* ---- 7. Supplied artwork, transparent background --------------- */
.shot {
  margin: 0 0 1.1rem;
  padding: 0;
  background:
    radial-gradient(118% 76% at 34% 14%, rgba(255, 45, 120, 0.22) 0%, rgba(255, 200, 0, 0.09) 52%, rgba(15, 8, 25, 0) 100%);
  border-radius: 12px;
  filter: drop-shadow(0 14px 26px rgba(8, 4, 16, 0.7));
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 761px) {
  .shot { width: 300px; max-width: 42%; }
  .shot--right { float: right; margin-left: 1.9rem; }
  .shot--left  { float: left;  margin-right: 1.9rem; }
}

@media (max-width: 760px) {
  .shot {
    width: 100%;
    max-width: 330px;
    margin-inline: auto;
    float: none;
  }
}

/* A following block must not slide up beside a floated image. */
.wi-main .content-section .container::after {
  content: "";
  display: block;
  clear: both;
}

/* ---- 8. Hero recoloured ---------------------------------------- */
.wi-hero::before {
  background: linear-gradient(
    92deg,
    rgba(15, 8, 25, 0.96) 0%,
    rgba(46, 32, 71, 0.7) 50%,
    rgba(46, 32, 71, 0.08) 100%
  );
}

.wi-hero__eyebrow {
  color: var(--color-accent, #ffc800);
  border-color: var(--gt-rule);
  background: var(--gt-gold-wash);
  border-radius: 4px;
}

/* ---- 9. Sticky bar at the bottom ------------------------------- */
.sticky-cta {
  background: rgba(15, 8, 25, 0.96);
  border-top: 1px solid var(--color-cta, #ff2d78);
}
.sticky-cta__bonus {
  text-transform: none;
  letter-spacing: 0;
}

/* ---- 10. Accent details ---------------------------------------- */
.wi-sidebar__cta a { color: #1a0f2b; }
.wi-sidebar__cta-sub { color: #2a1a3f; opacity: 0.92; }
.wi-pay { border-radius: 6px; }
blockquote, .wi-infobox { border-left: 3px solid var(--color-cta, #ff2d78); }

/* ---- 11. Tables, readable on a phone too ----------------------- */
.wi-main table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.92rem;
}
.wi-main thead th {
  font-family: var(--font-display);
  text-align: left;
  font-size: 0.66rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-accent, #ffc800);
  border-bottom: 1px solid var(--color-accent-dark, #c79b00);
  padding: 0.6rem 0.7rem;
}
.wi-main tbody td {
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid var(--color-border, #382450);
  vertical-align: top;
}
.wi-main tbody tr:nth-child(even) td { background: var(--gt-row); }
.wi-main table caption {
  caption-side: top;
  padding: 0.55rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text-muted, #c6b6d6);
  background: rgba(15, 8, 25, 0.6);
  border-bottom: 1px solid var(--gt-rule);
}

@media (max-width: 760px) {
  .wi-main table { display: block; overflow-x: auto; }
  .wi-main table thead,
  .wi-main table tbody { min-width: 34rem; }
}

/* ---- Sticky bar: keep it compact on narrow screens ------------- */
@media (max-width: 640px) {
  .sticky-cta__bonus {
    font-size: .74rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .sticky-cta__text { min-width: 0; }
  .sticky-cta .container { gap: .6rem; }
}

/* ---- Table scroll container ------------------------------------ */
.tw {
  margin: var(--space-5) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--gt-rule);
  background: rgba(15, 8, 25, 0.35);
}
.tw > table {
  margin: 0;
  border: 0;
  min-width: 34rem;
}
@media (max-width: 620px) {
  .tw { box-shadow: inset -12px 0 12px -12px rgba(0, 0, 0, 0.65); }
  .tw > table { min-width: 30rem; font-size: 0.9rem; }
  .tw > table th,
  .tw > table td { padding: 0.55rem 0.7rem; }
}

/* ---- Centred call to action ------------------------------------ */
.cta-banner h2::before,
.cta-banner h2::after { display: none; }
.cta-banner h2 { padding-left: 0; text-align: center; }
.cta-banner .container--narrow p { max-width: 46rem; margin-left: auto; margin-right: auto; }

/* ---- Payments strip, wrapped ----------------------------------- */
.wi-payments__strip {
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 10px;
}
.wi-payments__strip .wi-pay { flex: 1 1 auto; }
@media (max-width: 520px) {
  .wi-payments__strip .wi-pay { min-width: 88px; }
}

/* ---- 11b. Wide tables get more room on a large display ---------- */
@media (min-width: 1300px) {
  .wi-main { max-width: 1080px; }
}
.wi-main table.tbl-wide { font-size: 0.84rem; }
.wi-main table.tbl-wide thead th { padding: 0.55rem 0.5rem; font-size: 0.62rem; letter-spacing: 0.9px; }
.wi-main table.tbl-wide tbody td { padding: 0.55rem 0.5rem; }

/* ---- 14. Lift the dimmest payment name for contrast ------------- */
.wi-pay--eth .wi-pay__name { color: #b9c1e0; }