/* ========== All In Blind — Light Theme (mobile-first, accessibility tuned) ========== */
/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
:focus-visible { outline: 2px solid var(--ring, rgba(13,110,253,.35)); outline-offset: 2px; }

/* Theme */
:root{
  --bg:#f9fafb;
  --bg-soft:#ffffff;
  --ink:#0a1020;
  --muted:#1f2937;
  --accent:#0d47a1;           /* single strong accent (deep blue) */
  --accent-2:#0d6efd;          /* hover/alt accent */
  --ring: rgba(13, 71, 161, .25);
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --max: 1200px;
  --radius: 16px;
}

body{
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.7;                 /* increased for readability */
  font-size: 17px;                  /* bump base font size for mobile */
}

/* Layout */
.container{ max-width: var(--max); margin: 0 auto; padding: 20px; }
header{ background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; position: relative; }
.brand{ font-weight:800; letter-spacing:.2px; text-decoration:none; color:var(--ink); padding:10px 12px; border-radius:12px; }
.brand img.brand-logo{ width:28px; height:28px; vertical-align:middle; margin-right:6px; display:inline-block; border-radius:6px; }
.brand span{ vertical-align:middle; }
.breadcrumbs{ color: var(--muted); font-size: .95rem; margin-top: 4px; }
.breadcrumbs a{ color: inherit; text-decoration: none; }
.breadcrumbs a:hover{ text-decoration: underline; }

/* Allow breadcrumbs to wrap nicely on small screens */
.breadcrumbs{ white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

.nav ul{ list-style:none; display:flex; gap:8px; margin:0; padding:0; }
.nav a{ color:var(--ink); text-decoration:none; padding:10px 12px; border-radius:10px; transition: background .2s ease, transform .12s ease; }
.nav a:hover{ background: #f1f5f9; }
.nav a.active{ background:#e9f0ff; color:#0b3bdb; }
.nav a:focus-visible{ box-shadow: 0 0 0 3px var(--ring); }

.nav-search{ margin-left: 8px; border:1px solid var(--border); border-radius:10px; padding:8px 10px; min-width: 160px; }

/* Hamburger */
.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:#fff; }
.nav-toggle:focus-visible{ box-shadow: 0 0 0 3px var(--ring); }
.nav-menu{ display:flex; }
@media (max-width: 820px){
  .nav-menu{ display:none; position:absolute; left:20px; right:20px; top:70px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:10px; flex-direction:column; gap:6px; z-index: 20; }
  .nav.open .nav-menu{ display:flex; }
  .brand{ padding-left:0; }
  .nav-search{ width:100%; }
}

/* Hero */
.hero{
  background: linear-gradient(180deg, #ffffff, #f6f8ff);
  border:1px solid var(--border);
  border-radius:24px;
  padding: clamp(18px, 4vw, 36px);
  box-shadow: var(--shadow);
  margin: 14px 0 24px;
}
.hero h1{ margin:0 0 8px; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height:1.2; word-break: break-word; overflow-wrap: anywhere; }
.lead{ color: var(--muted); font-size: clamp(1.05rem, 2.8vw, 1.2rem); line-height: 1.75; }

/* Typography */
h1, h2, h3{ line-height:1.25; margin:18px 0 10px; }
h2{ font-size: clamp(1.28rem, 2.8vw, 1.65rem); }
h3{ font-size: clamp(1.12rem, 2.4vw, 1.28rem); }
p{ margin:12px 0; color:#18212f; }
small, .note{ color: var(--muted); }
a{ color: var(--accent); }
a:hover{ color: var(--accent-2); }

/* Cards */
.cards h2{ margin-top: 24px; }
.card-grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
@media (min-width: 640px){ .card-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px){ .card-grid{ grid-template-columns: 1fr 1fr 1fr; } }
.card, .blog-item{
  border-radius: var(--radius);
  padding: 16px;
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);           /* subtle elevation */
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.filters{ display:flex; gap:8px; align-items:center; margin: 8px 0 12px; }
.filters input[type="search"], .filters select{
  border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:#fff;
}
.card:hover, .blog-item:hover{ transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,.10); }
.card h3{ margin: 0 0 6px; }
.card p{ margin: 0; color: var(--muted); }

/* Key blocks */
.keyfacts ul, .seasonality ul{ list-style: disc; padding-left: 20px; }
aside{ background: #f9fbff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }

/* Generic Tables */
table{ width:100%; border-collapse: collapse; }
th, td{ padding:12px; border-bottom: 1px solid var(--border); text-align:left; }
th{ background:#f3f6fb; color:#0b1220; }

/* FAQ Table */
.faq-table{ width:100%; border-collapse: collapse; border:1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.faq-table th, .faq-table td{ padding:14px; border-bottom: 1px solid var(--border); text-align:left; vertical-align: top; }
.faq-table th{ background:#eef3ff; color:#0e223a; width: 24%; }
.faq-table tr:last-child td{ border-bottom:none; }
.faq-q{ font-weight:700; }
.faq-a{ color:#28384a; }

/* Carousel (logos) */
.carousel{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type: x mandatory; padding: 8px 4px; }
.carousel::-webkit-scrollbar{ height:8px; }
.carousel::-webkit-scrollbar-thumb{ background:#c7d2fe; border-radius: 8px; }
.carousel .item{ flex: 0 0 auto; width: 140px; height: 70px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:12px; background:#fff; scroll-snap-align: start; }
@media (max-width:480px){
  .carousel .item{ width: 120px; height: 64px; }
}

/* Mega Menu (if used) */
.mega{ position: absolute; left:0; right:0; top:100%; background:#fff; border:1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); display:none; padding:16px; }
.nav li:hover .mega{ display:block; }
.mega-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
.mega-card{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; }
.mega-card img{ width:100%; height:100px; object-fit:cover; }
.mega-card .cap{ padding:8px 10px; font-size:.95rem; color:#374151; }

/* Footer */
.footer{ margin-top: 36px; padding-top: 12px; border-top:1px solid var(--border); color: var(--muted); }
.footer a{ color: var(--accent-2); text-decoration: none; }
.footer a:hover{ text-decoration: underline; }

/* Reveal animation (gentle) - optimized for performance */
.reveal{ opacity:1; transform:none; }


/* --- NAV Standardization Fixes --- */
.nav-list{ list-style: none; display:flex; gap:10px; margin:0; padding:0; }
.nav-list > li{ margin:0; padding:0; }
.nav-list a{ display:inline-block; padding:10px 12px; border-radius:10px; text-decoration:none; }
/* Ensure no stray bullets anywhere inside header */
header ul{ list-style: none; margin: 0; padding-left: 0; }

/* --- Image fallback: hide broken/missing --- */
img[src=""], img:not([src]), img[onerror]{ display:none; }
img{ height:auto; max-width:100%; }

/* --- Layout refinements --- */
@media (min-width: 1024px){
  .container{ padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 820px){
  header .nav{ align-items: center; }
  .brand{ font-size: 1.05rem; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav .nav-list{ flex-wrap: wrap; }
  .nav .nav-list a{ max-width: 100%; }
}

/* Ultra-small devices: ensure no horizontal overflow */
@media (max-width: 360px){
  body, .container, header, main, footer{ overflow-x: hidden; }
  .nav{ gap:8px; }
  .nav-toggle{ width:38px; height:38px; }
  h1, h2, h3{ word-break: break-word; overflow-wrap: anywhere; }
}

/* --- Hero spacing & cards --- */
.hero{ margin-top: 18px; }
.cards{ margin-top: 18px; }
.card-grid .card{ min-height: 108px; display:block; }

/* --- Carousel sanity on desktop/tablet --- */
.carousel{ display:flex; gap:16px; overflow-x:auto; padding: 4px; scroll-snap-type: x mandatory; }
.carousel .item{ flex: 0 0 auto; width: 140px; height: 70px; scroll-snap-align: start; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:12px; background:#fff; }
@media (min-width: 900px){
  .carousel{ overflow-x: visible; flex-wrap: wrap; }
  .carousel .item{ width: 160px; height: 80px; }
}

/* --- Tablet breakpoint grid --- */
@media (min-width: 700px) and (max-width: 1023px){
  .grid.two{ grid-template-columns: 3fr 2fr; }
}

/* --- Footer spacing --- */
.footer{ margin-bottom: 40px; }

/* --- Carousel 2.0 (auto-scroll + pause on hover, no duplicates) --- */
.carousel{ overflow:hidden; position:relative; border:1px solid var(--border); border-radius:12px; background:#fff; }
.carousel-track{ display:flex; gap:16px; padding:10px; animation: car-scroll 30s linear infinite; }
.carousel:hover .carousel-track{ animation-play-state: paused; }
.carousel .logo{ flex: 0 0 auto; width: 180px; height: 80px; display:flex; align-items:center; justify-content:center; }
.carousel .logo img{ width: 100%; height: 100%; object-fit: contain; }
@keyframes car-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}


/* Stronger hover states for links & buttons */
a:hover{ text-decoration: underline; }
.btn{ display:inline-block; padding:10px 14px; border-radius:10px; background:var(--accent); color:#fff; text-decoration:none; border:1px solid #0b5ed7; transition: filter .2s ease, transform .08s ease; }
.btn:hover{ filter: brightness(0.95); transform: translateY(-1px); }

/* ========== Accessibility Improvements ========== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
  border-radius: 4px;
}
.skip-link:focus {
  top: 6px;
}

/* ========== Performance Optimizations ========== */
/* Reduced animation complexity for better performance */
.reveal {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Optimized carousel animation with better performance */
@keyframes car-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.carousel-track {
  animation: car-scroll 30s linear infinite;
  will-change: transform;
  contain: layout style paint;
}

.carousel:hover .carousel-track {
  animation-play-state: paused;
}

/* Performance optimizations for cards */
.card {
  contain: layout style;
  transform: translateZ(0); /* Force hardware acceleration */
  height: 120px; /* Fixed height to prevent CLS */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card h3 {
  line-height: 1.3;
  flex-shrink: 0;
}

.card p {
  font-size: 0.95rem;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    animation: none;
  }
  .card:hover {
    transform: none;
  }
  .btn:hover {
    transform: none;
  }
}

/* Additional performance optimizations */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  content-visibility: auto;
}

/* Typography & spacing refinements */
main p{ line-height:1.7; margin:0 0 .8rem; }
h2, h3{ line-height:1.25; margin:0 0 .6rem; }

/* Gallery */
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.gallery figure{ margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#fff; }
.gallery img{ width:100%; height:160px; object-fit:cover; }
.gallery figcaption{ padding:8px 10px; font-weight:600; }

/* New & Updated ticker */
.ticker{ position:relative; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:#fff; height:44px; display:flex; align-items:center; }
.ticker ul{ list-style:none; padding:0 12px; margin:0; display:flex; gap:24px; animation:ticker-x 18s linear infinite; }
.ticker a{ text-decoration:none; color:var(--ink); font-weight:600; white-space:nowrap; }
@keyframes ticker-x{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .ticker ul{ animation:none; } }

/* FAQ Accordion */
.faq-accordion details{ border:1px solid var(--border); border-radius:12px; background:#fff; padding:10px 12px; }
.faq-accordion details+details{ margin-top:8px; }
.faq-accordion summary{ cursor:pointer; font-weight:700; }

/* Game category visuals */
.card--bg{ color:#fff; position:relative; }
.card--bg::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45)); border-radius:var(--radius); }
.card--bg>*{ position:relative; z-index:1; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.card--blackjack{ background:url('/assets/img/og-blackjack.webp') center/cover no-repeat; }
.card--poker{ background:url('/assets/img/og-vegas.webp') center/cover no-repeat; }
.card--roulette{ background:url('/assets/img/og-home.webp') center/cover no-repeat; }

/* House edge bar */
.edge{ margin-top:6px; }
.edge-bar{ height:6px; border-radius:999px; background:#e5e7eb; overflow:hidden; }
.edge-bar span{ display:block; height:100%; background:linear-gradient(90deg,#10b981,#ef4444); width:var(--w,40%); }

/* Newsletter form specific styles */
.newsletter-form {
  height: auto !important; /* Override fixed height for forms */
  min-height: 200px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  margin-bottom: 2rem; /* Add space before next section */
}

.newsletter-form label {
  font-weight: 600;
  color: var(--ink);
  margin: 8px 0 4px 0;
}

.newsletter-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
  margin: 0 0 8px 0;
}

.newsletter-form .btn {
  align-self: flex-start;
  margin: 8px 0;
}

/* Forms placed inside .card should not be constrained by fixed card height */
.cards form.card, #resource-suggest.card { height: auto !important; min-height: 240px; }