/* ==========================================================
   STARTIX HUGO — TARGETED FIXES
   ========================================================== */

/* ----------------------------------------------------------
   1. TABLE OF CONTENTS — single vertical list, no columns
   ---------------------------------------------------------- */
.toc-content nav ul,
.toc-content nav > ul {
  columns: unset !important;
  column-count: unset !important;
  -webkit-columns: unset !important;
  display: block !important;
}

/* ----------------------------------------------------------
   2. TABLES — flush, no double borders, proper collapse
   ---------------------------------------------------------- */
.hp-table-scroll {
  border-radius: 0 !important;
  border: none !important;
  margin-bottom: 1.5rem;
}

.hp-table-inner {
  border-radius: 0 !important;
}

article table,
.hp-content table,
.hp-table-scroll table,
.hp-table-inner table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin-bottom: 0 !important;
}

article table th,    article table td,
.hp-content table th, .hp-content table td,
.hp-table-scroll table th, .hp-table-scroll table td,
.hp-table-inner table th,  .hp-table-inner table td {
  border: 1px solid var(--Border) !important;
}

/* Prevent wrapper from adding a second border around already-bordered table */
.hp-table-scroll {
  border: none !important;
  box-shadow: none !important;
  border-radius: 10px;
  margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------
   3. FAQ SECTION — shade2.png background + floating ? decorations
   (mirrors Next.js CtaHomeFive: bg-img bg-dark + inline background-image)
   ---------------------------------------------------------- */
.faq-section {
  /* bg-dark equivalent */
  background-color: #1b1b2f !important;
  /* bg-img equivalent */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
  position: relative;
}

/* Floating question-mark decorations — visible */
.faq-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.faq-deco img {
  width: 130px;
  height: auto;
  opacity: 0.35;
  filter: brightness(10) saturate(0);
}

.faq-deco-1 { top: 5%;    left: 2%; }
.faq-deco-2 { top: 35%;   right: 2%;  transform: rotate(15deg); }
.faq-deco-3 { bottom: 5%; left: 25%;  transform: rotate(-10deg); }
.faq-deco-4 { top: 8%;    left: 52%;  transform: rotate(25deg); }

/* Keep container and dividers above decorations */
.faq-section > .container { position: relative; z-index: 1; }
.faq-section > .divider   { position: relative; z-index: 1; }

/* Hide the old inline .faq-qmark (we're using absolute ones now) */
.faq-qmark { display: none !important; }

/* ----------------------------------------------------------
   4. FAQ QUESTION / ANSWER STYLING
   ---------------------------------------------------------- */

/* Question button: black bg, white text */
.faq-item {
  background: #000000 !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 10px;
  overflow: hidden;
}

.faq-btn {
  background: #000000 !important;
  color: #ffffff !important;
}

.faq-btn:hover {
  color: rgba(255,255,255,0.80) !important;
}

/* Answer block: white bg, black text */
.faq-body-inner {
  background: #ffffff;
  color: #111111 !important;
  padding: 20px 24px !important;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.faq-body-inner p,
.faq-body-inner li,
.faq-body-inner a {
  color: #111111 !important;
}

/* Open item: keep black question, show white answer below */
.faq-item.faq-item-open {
  background: #000000 !important;
  border-color: rgba(255,255,255,0.30) !important;
}

.faq-item.faq-item-open .faq-btn {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Chevron stays white on black */
.faq-chevron {
  background-color: rgba(255,255,255,0.20) !important;
}

.faq-item-open .faq-chevron {
  background-color: rgba(255,255,255,0.35) !important;
}

/* ----------------------------------------------------------
   5 & 6. FOOTER — strict row structure + legibility
   ---------------------------------------------------------- */

/* Reset the multi-column layout to stacked rows */
.footer-section.footer-dark .footer-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Row 1: Logo */
.footer-row-logo {
  padding: 1.6rem 0 1rem;
}

/* Rows 2-3: Disclaimers */
.footer-row-disclaimers {
  padding: 0 0 1.25rem;
}

/* Row 4: Nav links only */
.footer-row-nav {
  padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.footer-row-nav .footer-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer-row-nav .footer-nav-links li a {
  color: rgba(255,255,255,0.70);
  font-size: 14px;
  font-family: var(--Font-Secondary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color var(--Animation-Duration);
}

.footer-row-nav .footer-nav-links li a i {
  color: var(--Primary);
  font-size: 14px;
}

.footer-row-nav .footer-nav-links li a:hover { color: #ffffff; }

/* Row 5: Copyright + casino logos */
.footer-row-bottom {
  padding: 1.25rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-disclaimer-text {
  color: rgba(255,255,255,0.70) !important;
}

.footer-tagline {
  color: rgba(255,255,255,0.70) !important;
}

.footer-copyright {
  color: rgba(255,255,255,0.70) !important;
}

.footer-copyright a {
  color: rgba(255,255,255,0.70) !important;
}

.footer-copyright a:hover { color: var(--Primary) !important; }

article table tr:first-child th,
article table tr:first-child td,
.hp-content table tr:first-child th,
.hp-content table tr:first-child td {
  border-top: none!important;
}

article table tr:last-child th,
article table tr:last-child td,
.hp-content table tr:last-child th,
.hp-content table tr:last-child td {
  border-bottom: none!important;
}

article table tr th:first-child,
article table tr td:first-child,
.hp-content table tr th:first-child,
.hp-content table tr td:first-child {
  border-left: none!important;
}

article table tr th:last-child,
article table tr td:last-child,
.hp-content table tr th:last-child,
.hp-content table tr td:last-child {
  border-right: none!important;
}

.hp-table-inner {
  box-shadow: none !important;
  border: 1px solid var(--Border) !important;
  border-radius: 10px!important;
  margin-bottom: 0;
}

/* ----------------------------------------------------------
   7. HEADER — small mobile fixes (≤ 395px)
   ---------------------------------------------------------- */
@media (max-width: 395px) {
  /* Shrink logo a touch so it doesn't crowd the right-side controls */
  .header-section .navbar-brand img {
    max-height: 34px;
  }

  /* Reduce logo right margin */
  .header-section .navbar-brand {
    margin-right: 0.5rem;
  }

  /* Tighten the gap between play button and toggler */
  .navbar-mobile-end {
    gap: 0.5rem !important;
  }

  /* Compact play button: narrower padding, slightly smaller text */
  .navbar-mobile-end .theme-btn {
    padding: 8px 14px;
    font-size: 12px;
    height: 38px;
    white-space: nowrap;
  }

  /* Prevent the navbar from wrapping to a second line */
  .header-section .navbar {
    flex-wrap: nowrap;
    align-items: center;
  }

  /* Prevent the navbar container overflowing the viewport */
  .header-section .navbar > .container,
  .header-section .navbar > .container-fluid {
    flex-wrap: nowrap;
  }

  /* style-three pill: reduce internal padding so everything fits */
  .header-section.style-three .navbar {
    padding-left: 14px;
    padding-right: 14px;
    margin-left: 3%;
    margin-right: 3%;
  }
}

/* ----------------------------------------------------------
   Footer bottom row — centered on small screens (≤ 676px)
   ---------------------------------------------------------- */
@media (max-width: 676px) {
  .footer-row-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-copyright {
    text-align: center;
  }

  .footer-trust-logos ul {
    justify-content: center;
    flex-wrap: nowrap;
  }

  .footer-trust-logos img {
    max-height: none;
    width: auto;
    max-width: 100%;
    flex-shrink: 1;
    min-width: 0;
  }

  .footer-trust-logos li {
    flex-shrink: 1;
    min-width: 0;
  }
}