/*
  VOX Casino — Dark Theme Stylesheet
  - Component‑scoped CSS using custom properties
  - Mobile‑first, responsive breakpoints
  - Accessibility: focus states, readable contrast
  - Tables: mobile adaptation to stacked rows
  - Hero banner CTA: right on desktop, centered on mobile
*/

/* =============================
   CSS VARIABLES (Dark Theme)
   ============================= */
:root {
  --color-bg: #0b0f14;            /* App background */
  --color-surface: #121823;       /* Cards, surfaces */
  --color-surface-2: #0e141d;     /* Deeper surface */
  --color-text: #e6ecf2;          /* Primary text */
  --color-muted: #9aa7b2;         /* Secondary text */
  --color-border: #243041;        /* Subtle borders */
  --color-brand: #1bb56b;         /* Primary brand */
  --color-brand-600: #15995b;     /* Brand hover */
  --color-accent: #3b82f6;        /* Accent (links) */
  --color-orange: #ff7a1a;        /* Header CTA (orange) */
  --color-orange-600: #e56e14;    /* Hover */
  --shadow-lg: 0 12px 24px rgba(0,0,0,.35);
  --radius: 14px;
  --radius-sm: 10px;
  --container: 1200px;
}

/* =============================
   GLOBAL RESETS & ELEMENTS
   ============================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  outline: 2px solid var(--color-brand);
}

/* Focus ring for all focusable elements */
:where(a, button, summary, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* =============================
   HEADER & NAVIGATION
   ============================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 15, 20, 0.85);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--color-border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 16px;
}

.brand img { filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }

.site-nav .menu {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--color-brand);
  border-color: transparent;
  color: #05140c;
}
.btn--primary:hover { background: var(--color-brand-600); }
.btn--secondary { background: var(--color-surface-2); }
.btn--ghost { background: transparent; border-color: var(--color-border); }

/* Header buttons in orange */
.site-nav .btn {
  background: var(--color-orange);
  border-color: transparent;
  color: #1a1209;
}
.site-nav .btn:hover { background: var(--color-orange-600); }
.site-nav .btn--ghost {
  background: transparent;
  border-color: var(--color-orange);
  color: var(--color-orange);
}
.site-nav .btn--ghost:hover { background: rgba(255, 122, 26, 0.12); }

/* =============================
   BREADCRUMBS
   ============================= */
.breadcrumbs {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.breadcrumbs ol {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 10px 16px;
  list-style: none;
}
.breadcrumbs li {
  color: var(--color-muted);
}
.breadcrumbs li + li::before {
  content: "/";
  margin-inline: 6px;
  color: var(--color-border);
}
.breadcrumbs a { color: var(--color-text); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* =============================
   HERO BANNER
   - Semi‑transparent CTA box; right on desktop, centered on mobile
   ============================= */
.hero {
  position: relative;
  isolation: isolate;
}
.hero picture, .hero img { width: 100%; }
.hero img { object-fit: cover; object-position: center top; height: clamp(240px, 36vw, 560px); }

.hero__cta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 10px;
  max-width: min(520px, 90%);
  background: rgba(10, 16, 24, 0.68);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  border-radius: var(--radius);
}
.hero__title { margin: 0; font-size: clamp(20px, 3.2vw, 34px); line-height: 1.2; }
.hero__subtitle { margin: 0; color: var(--color-muted); font-size: clamp(14px, 2.2vw, 16px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; justify-content: center; }

@media screen and (max-width: 767.98px) {
  .hero__cta { text-align: center; }
  .hero img { height: auto; object-fit: contain; }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; }
}

/* =============================
   SLOTS GRID
   - 6 per row on desktop, responsive down to 2 on small devices
   ============================= */
.slots { padding: 28px 0; }
.slots h2 { margin: 0 0 12px; font-size: clamp(18px, 2.6vw, 24px); }
.slots__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.slots__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.slots__item img { aspect-ratio: 1 / 1; object-fit: cover; }

@media screen and (min-width: 600px) {
  .slots__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (min-width: 1024px) {
  .slots__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* =============================
   ARTICLE / MAIN CONTENT
   ============================= */
.main { padding: 16px 0 40px; }
.main article { display: grid; gap: 12px; }
.main h2, .main h3, .main h4 { line-height: 1.25; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }

/* =============================
   TABLES
   - Desktop: standard table
   - Mobile (<= 640px): stacked rows with labels generated from <th>
   ============================= */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; min-width: 520px; }
.table th, .table td { border: 1px solid var(--color-border); padding: 10px 12px; text-align: left; }
.table thead th { background: var(--color-surface-2); color: var(--color-text); position: sticky; top: 0; }
.table tbody tr:nth-child(odd) { background: rgba(255,255,255,0.02); }

@media screen and (max-width: 640px) {
  .table { min-width: 0; border: 0; }
  .table thead { display: none; }
  .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); margin-bottom: 10px; overflow: hidden; }
  .table td { border: 0; border-bottom: 1px solid var(--color-border); }
  .table td:last-child { border-bottom: 0; }
  .table td { position: relative; padding-left: 44%; }
  .table td::before {
    content: attr(data-label);
    position: absolute;
    left: 12px; top: 50%; transform: translateY(-50%);
    width: 40%;
    color: var(--color-muted);
    font-weight: 600;
    white-space: normal;
  }
}

/* =============================
   FOOTER
   ============================= */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface-2); padding: 20px 0 30px; }
.pay-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 14px; align-items: center; padding: 0; margin: 0 0 14px; list-style: none; }
.pay-logos img { margin-inline: auto; filter: grayscale(20%) brightness(0.95); opacity: 0.95; }
.footer-nav ul { display: flex; gap: 14px; padding: 0; margin: 0 0 6px; list-style: none; }
.footer-nav a { color: var(--color-muted); }
.footer-nav a:hover { color: var(--color-text); }
.copyright { color: var(--color-muted); font-size: 13px; }

/* =============================
   ORIENTATION LOCK OVERLAY (Mobile Landscape)
   ============================= */
body.is-locked { height: 100vh; overflow: hidden; }
#orientation-lock[hidden] { display: none !important; }
#orientation-lock {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  display: grid; place-items: center;
  padding: 24px;
}
.orientation-lock__content {
  background: var(--color-surface);
  color: var(--color-text);
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  text-align: center;
}