/* ================================================================
   towers.casino - Tower Casino Ledger
   Graphite ground, spring green accent, magenta call to action.
   Loaded after base.css and style.css, overrides only.
   ================================================================ */

/* ---- One editorial column -------------------------------------
   The shared theme puts a 1200px container around a 720px prose cap.
   A right floated illustration then lands almost 450px away from the
   sentence it belongs to. Narrowing the section container and dropping
   the prose cap puts text, tables and artwork in one aligned column. */
.content-section .container { max-width: 800px; }
.content-section p,
.content-section ul,
.content-section ol,
.content-section h2,
.content-section h3,
.content-section table { max-width: none; }

/* ---- Headings get a green rule instead of the shared underline ---- */
.content-section h2 {
  position: relative;
  padding-left: 1rem;
  border-left: 3px solid var(--color-accent);
}
.content-section h3 {
  color: var(--color-accent-secondary, #5fd0b8);
  letter-spacing: 0.005em;
}

/* ---- Section illustrations -------------------------------------
   The client supplied ten transparent 900x1000 captures. They carry
   their own frame, so no card background and no shadow here. */
.section-illus--transparent {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  max-width: 268px;
}
.section-illus--right { margin: 4px 0 18px 28px; }
.section-illus--left  { margin: 4px 28px 18px 0; }
@media (max-width: 1080px) {
  .section-illus--transparent { max-width: 238px; }
}
@media (max-width: 900px) {
  .section-illus--transparent {
    max-width: 300px;
    margin: 14px auto 22px auto;
  }
}

/* ---- Stats band ------------------------------------------------
   The shared stylesheet targets .stats-bar__grid while home.php emits
   .stats-bar__inner, so without this the six figures stack in one
   column. Rendered here as two rows of three on a raised strip. */
.stats-bar {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-alt) 100%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.stats-bar__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
}
.stats-bar__inner .stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--color-accent-dark, #b23f68);
}
.stats-bar__inner .stat__value {
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--color-accent-secondary, #5fd0b8);
  white-space: nowrap;
}
.stats-bar__inner .stat__label {
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 0;
}
@media (max-width: 720px) {
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1.25rem; }
  .stats-bar__inner .stat__value { font-size: 1.3rem; }
}
@media (max-width: 420px) {
  .stats-bar__inner { grid-template-columns: 1fr; }
}

/* ---- Tables ----------------------------------------------------
   Amount columns must never break between the figure and the euro
   sign, and a six column table has to scroll rather than overflow. */
.table-wrap { width: 100%; }
.content-section table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.5rem;
}
.content-section table th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border-2);
  text-align: left;
  padding: 0.7rem 0.75rem;
}
.content-section table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px dotted var(--color-border);
  vertical-align: top;
}
.content-section table tbody tr:nth-child(odd) td {
  background: rgba(51, 32, 42, 0.42);
}
.content-section table td.amount {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-secondary, #5fd0b8);
}
@media (max-width: 900px) {
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table { min-width: 40rem; }
  .content-section table { font-size: 0.82rem; }
  .content-section table th,
  .content-section table td { padding: 0.55rem 0.5rem; }
}

/* ---- Question blocks ------------------------------------------ */
.content-section details {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  padding: 0.85rem 1.1rem;
  margin: 0.6rem 0;
}
.content-section details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
}
.content-section details summary::-webkit-details-marker { display: none; }
.content-section details summary::before {
  content: "+";
  display: inline-block;
  width: 1.1em;
  color: var(--color-accent);
  font-weight: 700;
}
.content-section details[open] summary::before { content: "\2212"; }
.content-section details p {
  margin: 0.7rem 0 0;
  color: var(--color-text-muted);
}

/* ---- Floats must be cleared before the next section ------------- */
.content-section .container::after {
  content: "";
  display: block;
  clear: both;
}

/* ---- Anchor targets must clear the sticky header ---------------- */
.content-section[id],
.hero[id] { scroll-margin-top: 92px; }

/* ---- Hero headline -------------------------------------------
   The brand name and the claim are two separate lines, otherwise the
   first word of the claim gets stranded on the brand-name line. */
.hero h1 .brand-name,
.hero h1 .brand-type { display: block; }
.hero h1 .brand-type { margin-top: 0.15em; }

/* ---- Wide tables scroll sideways on narrow screens instead of
   pushing their last columns past the viewport edge. The tables are
   emitted as bare <table> elements, so the scroll box is the table. */
@media (max-width: 900px) {
  .content-section table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .content-section table thead,
  .content-section table tbody { display: table; width: 100%; min-width: 36rem; }
  .content-section table thead { table-layout: fixed; }
}