/*
  Light Theme Stylesheet for verdecasino-club.com
  - Semantic layout: header, nav, main, footer
  - Responsive: mobile-first, fluid typography, grid and flex
  - Accessibility: focus styles, readable contrasts
  - Components: buttons, breadcrumbs, hero, table, slots grid, footer payments
*/

/* CSS Variables (theme tokens) */
:root {
  --color-bg: #ffffff;
  --color-surface: #f7f8fa;
  --color-text: #0f172a; /* slate-900 */
  --color-muted: #475569; /* slate-600 */
  --color-primary: #16a34a; /* green-600 */
  --color-primary-contrast: #ffffff;
  --color-border: #e2e8f0; /* slate-200 */
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-header-bg: #0b1a4a; /* dark navy header like screenshot */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --container: 1200px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.12);
  --control-size: 48px; /* slightly bigger header & buttons */
}

/* Base reset and typography */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

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

/* Utility */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}
.muted { color: var(--color-muted); }

/* Accessible skip link */
.skip-link{
  position: absolute; left: -9999px; top: auto;
}
.skip-link:focus{
  left: 16px; top: 16px; z-index: 1000;
  background: #111827; color: #fff; padding: 8px 12px; border-radius: var(--radius-sm);
}

/* Header */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--color-header-bg);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 0; min-height: var(--control-size);
}
.brand img{ max-height: calc(var(--control-size) - 12px); height: auto; width: auto; }
.site-header .btn--link{ color: #e2e8f0; }
.site-header .btn--link:hover{ color: #cbd5e1; }
.nav__list{ display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }

/* Buttons */
.btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-pill); font-weight: 600; line-height: 1; border: 1px solid transparent; transition: all .2s ease; min-height: var(--control-size); padding: 0 16px; }
.btn:focus-visible{ outline: 3px solid #22c55e55; outline-offset: 2px; }
.btn--primary{ background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover{ filter: brightness(0.95); text-decoration: none; }
.btn--outline{ background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn--outline:hover{ background: #16a34a10; text-decoration: none; }
.btn--link{ background: transparent; color: var(--color-text); padding-inline: 10px; }
.btn--link:hover{ color: var(--color-primary); text-decoration: none; }

/* Breadcrumbs */
.breadcrumbs{ border-bottom: 1px solid var(--color-border); background: var(--color-surface); margin-bottom: 0; }
.breadcrumbs__list{ display: flex; gap: 8px; padding: 4px 16px; list-style: none; margin: 0; font-size: 0.95rem; }
.breadcrumbs__list li{ color: var(--color-muted); }
.breadcrumbs__list a{ color: var(--color-text); }
.breadcrumbs__list li+li::before{ content: "/"; margin-inline: 4px; color: var(--color-muted); }

/* Hero */
.hero{ position: relative; min-height: 60vh; display: block; margin: 0; overflow: hidden; width: 100%; }
.hero picture{ display: block; width: 100%; line-height: 0; }
.hero__img{ display: block; width: 100%; height: clamp(360px, 56vh, 620px); object-fit: cover; object-position: center; filter: saturate(1.05); }
.breadcrumbs + .hero{ margin-top: 0; }
.hero__overlay{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.hero__overlay > *{ text-align: center; }
.hero__title{
  color: #fff; font-size: clamp(1.5rem, 3.5vw + .5rem, 3rem); margin: 0 0 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.hero__subtitle{ color: #f1f5f9; margin: 0 0 10px; }
.hero__actions{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Semi-transparent centered CTA card */
.hero__overlay::before{ content: none !important; }
.hero__card{ width: min(560px, 92%); background: rgba(15, 23, 42, 0.65); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 16px 18px; text-align: center; backdrop-filter: saturate(140%) blur(10px); }
.hero__overlay > *{ position: relative; z-index: 1; }

/* Main prose */
.prose{ display: grid; gap: 16px; padding-block: 16px; }
.article__header{ display: grid; gap: 8px; margin-bottom: 8px; }
.article__lede{ color: var(--color-muted); }

/* Table (responsive) */
.table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.table{ width: 100%; border-collapse: collapse; min-width: 640px; }
.table th, .table td{ padding: 12px 14px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.table thead th{ background: var(--color-surface); font-weight: 700; }

/* Mobile table stacking: convert rows to cards on small screens */
@media (max-width: 640px){
  .table{ border: 0; min-width: 0; }
  .table thead{ display: none; }
  .table tr{ display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--color-border); padding: 8px; margin: 0; }
  .table td{ display: grid; grid-template-columns: 140px 1fr; gap: 8px; border: 0; padding: 8px; margin: 0; }
  .table td::before{ content: attr(data-label); font-weight: 600; color: var(--color-muted); }
}

/* Slots grid */
.slots{ padding-block: 0 24px; }
.slots h2{ margin: 8px 0 10px; }
.slots__grid{
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
.slots__item{ border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: #fff; transition: transform .15s ease, box-shadow .15s ease; }
.slots__item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }

@media (min-width: 640px){
  .hero{ min-height: 70vh; }
  .hero__img{ height: 70vh; }
  .slots__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px){
  .slots__grid{ grid-template-columns: repeat(6, 1fr); }
}

/* Mobile header adjustments */
@media (max-width: 640px){
  :root{ --control-size: 44px; }
  .primary-nav .btn--link:nth-child(1),
  .primary-nav .btn--link:nth-child(2){ display: none; }
  .brand img{ max-height: 36px; }
  .btn{ min-height: 36px; padding: 0 12px; }
}

/* Footer */
.site-footer{ border-top: 1px solid var(--color-border); background: var(--color-surface); }
.footer__top{ display: grid; grid-template-columns: 1fr; gap: 16px; padding-block: 20px; }
.footer__nav ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.footer__payments{ padding-block: 16px 28px; }
.payments__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
.payments__list img{ width: 100%; max-width: 88px; margin-inline: auto; filter: saturate(1.1) contrast(1.05); }

@media (min-width: 720px){
  .footer__top{ grid-template-columns: 1fr auto; align-items: start; }
  .payments__list{ grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

/* Focus styles */
:where(a, button, [role="button"], .btn){ outline: none; }
:where(a, button, [role="button"], .btn):focus-visible{ box-shadow: 0 0 0 3px #22c55e55; border-radius: var(--radius-sm); }

/* Viewport height fix for mobile (used alongside JS) */
:root { --vh: 1vh; }
.fix-100vh{ min-height: calc(var(--vh) * 100); }