/* ==================================================================
   towercasino.games site override
   Loaded last, after base.css, style.css and theme4.css.

   Purpose: give this site a shell that reads differently from the four
   sibling Tower guides while reusing the same tested renderers.

   towercasino.to   sidebar left, condensed uppercase, navy and gold
   towercasino.live topnav, charcoal, teal and orange
   towercasino.app  sidebar left, plum and gold
   towercasino.bet  sidebar right, humanist serif, forest and parchment
   towercasino.games sidebar left, wide grotesque sentence case, umber
                     and copper, every section numbered like a panel

   1. Typography: a wide grotesque, sentence case, generous tracking.
   2. Numbered panel treatment on section headings (CSS counters).
   3. Illustrations sit on a hard edged copper plate, not a soft glow.
   4. Hero, sticky bar and accent details restated in umber and copper.
   ================================================================== */

:root {
  --font-display: 'Trebuchet MS', 'Segoe UI', 'DejaVu Sans', Verdana, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --panel-rule: rgba(217, 138, 74, 0.38);
}

/* ---- 1. Typography ---------------------------------------------
   The shared stylesheets force uppercase on .content-section h2,
   .hero h1 and .page-hero h1, so these selectors are deliberately
   specific enough to win on specificity.                          */
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-deal-card__title,
.wi-offer-feed__title,
.wi-payments__title,
.wi-faq__title,
.wi-faq-item__question,
.wi-cta-banner__title,
.wi-banking__title,
.section-title,
.seo-content h2,
.seo-content h3,
.faq-accordion__question {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0.005em;
  font-weight: 700;
}

h1, .wi-page-header h1 { line-height: 1.16; }
h2 { line-height: 1.24; }

/* Eyebrows and column labels: small, widely tracked, body face */
.wi-page-header__eyebrow,
.wi-hero__eyebrow,
.wi-footer__col-label,
.wi-sidebar__nav-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 600;
}

/* ---- 2. Numbered panel treatment -------------------------------
   Each top level section heading in the main column is prefixed with
   a running number in a copper chip and sits above a thin rule. This
   is the visual signature of this site and none of the siblings use
   it.                                                              */
.wi-main { counter-reset: panel; }

.wi-main .content-section .container > h2,
.wi-main .content-section > h2,
.wi-main .wi-seo__prose > h3 {
  position: relative;
  padding-bottom: 12px;
}

.wi-main .content-section .container > h2::before,
.wi-main .content-section > h2::before {
  counter-increment: panel;
  content: counter(panel, decimal-leading-zero);
  display: inline-block;
  vertical-align: 0.14em;
  margin-right: 12px;
  min-width: 34px;
  padding: 2px 0;
  font-family: var(--font-body);
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--color-cta-text, #0d1615);
  background: var(--color-accent, #d98a4a);
  border-radius: 3px;
}

/* Centred call to action panels are not readouts, so they take no
   number and no rule. */
.wi-main .content-section.cta-banner .container > h2 { border-bottom: 0; }

.wi-main .content-section.cta-banner .container > h2::before { content: none; }

/* The other section renderers get the same rule, without a number,
   so the page reads as one consistent stack of panels. */
.wi-games-tabs__title,
.wi-offer-feed__title,
.wi-payments__title,
.wi-banking__title,
.wi-faq__title,
.wi-seo__heading {
  padding-bottom: 12px;
}

/* ---- 3. Copper plate behind the supplied illustrations ---------
   The uploads are transparent PNGs of operator screens, so a hard
   edged plate with a corner notch suits them better than a glow.  */
.section-illus--transparent {
  background:
    linear-gradient(160deg, rgba(217, 138, 74, 0.13) 0%, rgba(217, 138, 74, 0) 62%),
    var(--color-surface-alt, #1f1712);
  border: 1px solid rgba(217, 138, 74, 0.30);
  border-radius: 4px 18px 4px 18px;
  padding: 10px;
  box-shadow: 0 12px 28px rgba(15, 11, 8, 0.55);
}

.section-illus--transparent img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 4. Hero, sticky bar and accents in umber and copper -------
   theme4.css hardcodes its own hero gradient and eyebrow pill, and
   style.css hardcodes the sticky bar, so restate all three.      */
.wi-hero::before {
  background: linear-gradient(
    90deg,
    rgba(15, 11, 8, 0.93) 0%,
    rgba(26, 20, 16, 0.64) 54%,
    rgba(26, 20, 16, 0.12) 100%
  );
}

.wi-hero__eyebrow {
  color: var(--color-accent, #d98a4a);
  border-color: rgba(217, 138, 74, 0.44);
  background: rgba(217, 138, 74, 0.08);
}

.sticky-cta {
  background: rgba(15, 11, 8, 0.95);
  border-top: 1px solid var(--color-border-2, #6b4f36);
}

.sticky-cta__bonus {
  text-transform: none;
  letter-spacing: 0.005em;
}

.wi-sidebar__cta a { color: var(--color-cta-text, #0d1615); }

.wi-pay { border-radius: 4px; }

blockquote,
.wi-infobox {
  border-left: 3px solid var(--color-accent, #d98a4a);
  border-radius: 0 6px 6px 0;
}

/* Tables read as panel readouts: tighter rules, copper header row */
.prose-table-wrap table th {
  background: var(--color-surface-2, #33261d);
  border-bottom: 2px solid var(--panel-rule);
  letter-spacing: 0.02em;
}