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

   Goal: a shell that reads differently from every other Tower Casino
   build without leaving the tested renderers behind.

   1. Sidebar stays on the left at the theme width, but the nav label
      sits in a boxed tag rather than plain small caps.
   2. Headings are set in mixed case with a wide tracking and a short
      accent rule above, not in condensed capitals.
   3. Section markers are square tags with a slash, e.g. 01 / 08.
   4. Reading block: two columns, what the screen prints and what
      follows from it by arithmetic.
   5. Deep teal ground, cyan accent, periwinkle as the second colour.
   ================================================================== */

:root {
  --font-display: 'Segoe UI', 'Noto Sans', 'DejaVu Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Segoe UI', 'Noto Sans', 'DejaVu Sans', system-ui, -apple-system, sans-serif;
  --font-num: 'DejaVu Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --tc-rule: rgba(143, 162, 255, 0.34);
  --tc-rule-strong: rgba(53, 183, 201, 0.55);
}

/* ---- 1. Sidebar nav label as a boxed tag ------------------------ */
@media (min-width: 1025px) {
  .wi-shell {
    grid-template-columns: 272px 1fr;
    grid-template-areas: "sidebar main";
  }
  .wi-sidebar {
    border-left: 0;
    border-right: 1px solid var(--color-border, #273a43);
    background: linear-gradient(180deg, rgba(28, 44, 52, 0.55), rgba(7, 13, 16, 0.9));
  }
  .wi-main { min-width: 0; margin-inline: auto; }
}

.wi-sidebar__nav-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 0.6rem;
  color: var(--color-accent, #35b7c9);
}

.wi-sidebar__nav-label-text {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 1.4px;
  border: 1px solid var(--tc-rule-strong);
  border-radius: 3px;
  background: rgba(53, 183, 201, 0.08);
}

/* ---- 2. Headings: mixed case, wide tracking, rule above --------- */
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: 600;
  font-stretch: normal;
  text-transform: none;
  letter-spacing: 0.012em;
  hyphens: none;
}

h1, .wi-page-header h1, .wi-hero__title { line-height: 1.16; font-weight: 700; }
h2 { line-height: 1.26; }
h3 {
  line-height: 1.34;
  font-size: 1.04rem;
  color: var(--color-accent-secondary, #8fa2ff);
}

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

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

/* A short cyan rule sits above every section heading. No underline. */
.wi-main .content-section .container > h2,
.wi-main .seo-content h2 {
  position: relative;
  border-bottom: 0;
  padding-bottom: 0;
  padding-top: 0.85rem;
  overflow: hidden;
}
.wi-main .content-section .container > h2::before,
.wi-main .seo-content h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 2px;
  background: var(--color-accent, #35b7c9);
  border-radius: 2px;
}

/* ---- 3. Section marker: short uppercase topic tag ---------------- */
.step {
  display: inline-block;
  vertical-align: 0.12em;
  margin-right: 12px;
  padding: 0.24em 0.55em;
  font-family: var(--font-num);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--color-accent-secondary, #8fa2ff);
  background: rgba(143, 162, 255, 0.1);
  border: 1px solid var(--tc-rule);
  border-radius: 3px;
  white-space: nowrap;
}

/* ---- 4. Reading block: printed value, then what follows --------- */
.reading {
  margin: 1.7rem 0;
  border: 1px solid var(--color-border, #273a43);
  border-radius: 6px;
  overflow: hidden;
}

.rd-row {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 0;
  border-bottom: 1px solid var(--color-border, #273a43);
}
.rd-row:last-child { border-bottom: 0; }
.rd-row:nth-child(even) { background: rgba(28, 44, 52, 0.5); }

.rd-row > span {
  padding: 0.72rem 0.95rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted, #9fb4bd);
  border-right: 1px solid var(--color-border, #273a43);
}
.rd-row > span:last-child { border-right: 0; }

.rd-screen {
  color: var(--color-text, #e8f1f4);
  font-family: var(--font-num);
  font-size: 0.86rem;
}
.rd-follows { color: var(--color-text, #e8f1f4); }

.rd-head > span {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-accent, #35b7c9);
  background: rgba(7, 13, 16, 0.6);
  font-family: var(--font-display);
}

@media (max-width: 700px) {
  .rd-row { grid-template-columns: 1fr; }
  .rd-row > span { border-right: 0; border-bottom: 1px dotted var(--tc-rule); }
  .rd-row > span:last-child { border-bottom: 0; }
  .rd-head { display: block; padding: 0.55rem 0.95rem 0.5rem; background: rgba(7, 13, 16, 0.6); }
  .rd-head > span { display: inline; padding: 0; border: 0; background: none; }
  .rd-head > span + span::before { content: "\00A0\2192\00A0"; color: var(--color-text-muted, #9fb4bd); }
  .rd-row:not(.rd-head) > .rd-follows { border-left: 3px solid var(--color-accent-secondary, #8fa2ff); }
}

/* Figures in tables and inline runs of numbers */
.fig {
  font-family: var(--font-num);
  font-size: 0.93em;
  letter-spacing: -0.01em;
  color: var(--color-text, #e8f1f4);
}

/* ---- 5. Box for the fields the screens leave empty -------------- */
.blank-fields {
  margin: 1.8rem 0;
  padding: 1.1rem 1.3rem 0.95rem;
  background: rgba(143, 162, 255, 0.06);
  border: 1px solid var(--tc-rule);
  border-left: 3px solid var(--color-accent-secondary, #8fa2ff);
  border-radius: 0 6px 6px 0;
}
.blank-fields h3 {
  margin: 0 0 0.6rem;
  font-size: 0.98rem;
  color: var(--color-text, #e8f1f4);
}
.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, #152128);
  border: 1px dashed var(--tc-rule-strong);
  border-radius: 6px;
  font-size: 0.96rem;
  color: var(--color-text-muted, #9fb4bd);
}

/* ---- 7. Supplied artwork, transparent background --------------- */
.shot {
  margin: 0 0 1.1rem;
  padding: 0;
  background:
    linear-gradient(160deg, rgba(53, 183, 201, 0.14) 0%, rgba(143, 162, 255, 0.05) 55%, rgba(7, 13, 16, 0) 100%);
  border-radius: 6px;
  filter: drop-shadow(0 12px 24px rgba(3, 7, 9, 0.6));
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 761px) {
  .shot { width: 292px; 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 section 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(7, 13, 16, 0.95) 0%,
    rgba(20, 38, 46, 0.62) 50%,
    rgba(20, 38, 46, 0.08) 100%
  );
}

.wi-hero__eyebrow {
  color: var(--color-accent, #35b7c9);
  border-color: var(--tc-rule-strong);
  background: rgba(53, 183, 201, 0.08);
  border-radius: 3px;
}

/* ---- 9. Sticky bar at the bottom ------------------------------- */
.sticky-cta {
  background: rgba(7, 13, 16, 0.96);
  border-top: 1px solid var(--color-accent-dark, #1b7c8b);
}
.sticky-cta__bonus {
  text-transform: none;
  letter-spacing: 0;
}

/* ---- 10. Accent details ---------------------------------------- */
.wi-sidebar__cta a { color: var(--color-cta-text, #f2fdff); }
.wi-pay { border-radius: 3px; }
blockquote, .wi-infobox { border-left: 3px solid var(--color-accent, #35b7c9); }

/* ---- 11. Tables, readable on a phone too ----------------------- */
.wi-main table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.94rem;
}
.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, #35b7c9);
  border-bottom: 1px solid var(--color-accent-dark, #1b7c8b);
  padding: 0.6rem 0.7rem;
}
.wi-main tbody td {
  padding: 0.62rem 0.7rem;
  border-bottom: 1px solid var(--color-border, #273a43);
  vertical-align: top;
}
.wi-main tbody tr:nth-child(even) td {
  background: rgba(28, 44, 52, 0.5);
}

@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; }
}