/* ================================================================
   luckicasino.live - Lucki Casino Club Gate
   Midnight blue ground, azure accent, brass 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 ---------------------------------------------------
   A hairline runs the width of the column and the heading sits under it
   with a small azure block at the start of the line. Sub headings are
   brass and slightly wider tracked, so the two levels never blur. */
.content-section h2 {
  position: relative;
  padding-top: 1.15rem;
  border-top: 1px solid var(--color-border-2);
}
.content-section h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--color-accent);
}
.content-section h3 {
  color: var(--color-accent-secondary, #ffd98c);
  letter-spacing: 0.02em;
}
.content-section h3::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  margin-top: 0.45rem;
  background: var(--color-cta);
  opacity: 0.75;
}

/* ---- Section illustrations -------------------------------------
   The client supplied nine transparent 900x1000 renders. 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.35rem;
  padding: 0.85rem 0.95rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-cta);
  border-radius: 4px;
}
.stats-bar__inner .stat__value {
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--color-accent-secondary, #ffd98c);
  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(17, 29, 46, 0.55);
}
.content-section table td.amount {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-secondary, #ffd98c);
}
@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-left: 3px solid var(--color-cta);
  border-radius: 4px;
  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; }
}

/* ---- Language badges -------------------------------------------
   Two editions of the same language sit in the switcher, so the euro
   one carries the European field and the pound one the union flag. */
.lang-flag--eu {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><rect width='60' height='40' fill='%23003399'/><g fill='%23FFCC00'><circle cx='30' cy='11' r='1.7'/><circle cx='38.5' cy='13.3' r='1.7'/><circle cx='44.6' cy='19.4' r='1.7'/><circle cx='46.9' cy='28' r='1.7'/><circle cx='44.6' cy='36.6' r='1.7'/><circle cx='38.5' cy='42.7' r='1.7'/><circle cx='21.5' cy='13.3' r='1.7'/><circle cx='15.4' cy='19.4' r='1.7'/><circle cx='13.1' cy='28' r='1.7'/><circle cx='15.4' cy='36.6' r='1.7'/></g></svg>");
}
.lang-flag--uk {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='60' height='42' fill='%23012169'/><path d='M0,0 L60,42 M60,0 L0,42' stroke='%23ffffff' stroke-width='8'/><rect x='24' width='12' height='42' fill='%23ffffff'/><rect y='15' width='60' height='12' fill='%23ffffff'/><rect x='26.5' width='7' height='42' fill='%23C8102E'/><rect y='17.5' width='60' height='7' fill='%23C8102E'/></svg>");
}
.lang-switcher__menu { max-height: 22rem; overflow-y: auto; }