/* tchlih.com — content typography + casino-table styling.
   Chrome (top nav, sidebar, footer, layout) lives in Tailwind via the
   builder; this file styles the body content inside <main>.
   Theme: dark warm background + bright gold accents. */

:root {
  --bg: #0c0a05;
  --bg-2: #15110a;
  --bg-3: #1c1810;
  --surface: #1c1810;
  --surface-2: #2b251a;
  --ink: #f5ead4;
  --ink-2: #c9b994;
  --ink-mute: #a08a5a;
  --gold: #facc15;
  --gold-2: #eab308;
  --gold-3: #ca8a04;
  --gold-soft: #fde047;
  --line: #4a4030;
  --line-2: #3a3322;
  --good: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  --radius: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--gold-soft); }

main { color: var(--ink); font-size: 1.125rem; line-height: 1.8; }
main > div > p, main > div > ul, main > div > ol, main p, main ul, main ol {
  font-size: 1.125rem;
  line-height: 1.8;
  margin: 0 0 1.5em;
}

/* Body text is 1.125rem (~18px). Headings are sized to be unmistakably
   bigger so the editorial hierarchy reads at a glance. clamp() lets the
   sizes scale on small screens without crowding.

   IMPORTANT scoping notes:
   - `main > div h1/h2/...` matches headings inside the CONTENT
     container only — NOT inside the hero <section> (which is also a
     direct child of main). The hero's H1 keeps its Tailwind-utility
     sizing so the tagline → H1 gap stays tight.
   - Specificity (0,0,3) — beats Tailwind Play CDN's preflight rule
     `h1, h2, h3, h4, h5, h6 { font-size: inherit }` (specificity 0,0,1),
     which the CDN script injects at runtime sometimes after this CSS
     loads. */
main > div h1, main > div h2, main > div h3, main > div h4,
main > div h5, main > div h6 {
  color: var(--ink);
  line-height: 1.2;
  font-family: 'Hanken Grotesk', sans-serif;
  margin-top: 2.4em;
  margin-bottom: 0.7em;
}
main > div h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
main > div h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 800;
  border-bottom: 2px solid var(--gold);
  padding-bottom: .45em;
  margin-top: 2.8em;
  margin-bottom: 0.9em;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
main > div h3 {
  font-size: clamp(1.55rem, 2.4vw, 1.95rem);
  font-weight: 700;
  color: var(--gold-soft);
  margin-top: 2em;
  margin-bottom: 0.6em;
  line-height: 1.25;
}
main > div h4 {
  font-size: clamp(1.3rem, 1.7vw, 1.5rem);
  font-weight: 700;
  color: var(--ink-2);
  margin-top: 1.8em;
  margin-bottom: 0.4em;
  line-height: 1.3;
}

/* Close the gap between the hero and the first content block. Every
   page lifts its table heading (or otherwise leads with an H2/H3/aside)
   right at the top of the content container; the H2's natural 2.8em
   top margin would push it well below the hero. Zero the first child's
   top margin so it sits tight to the hero's bottom edge. The selector
   targets the very first child of the content <div> regardless of
   what it is (heading or wrapping block). */
main > div > h1:first-child,
main > div > h2:first-child,
main > div > h3:first-child,
main > div > section:first-child,
main > div > div.operator-table:first-child,
main > div > aside:first-child {
  margin-top: 0;
}

ul, ol { padding-inline-start: 1.7em; }
li { margin-bottom: 0.5em; line-height: 1.7; }
li:last-child { margin-bottom: 0; }
table { margin: 0 0 1.5em; }

/* ---- lede ---- */
.lede {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--ink);
  border-inline-start: 4px solid var(--gold);
  padding: 18px 24px;
  background: var(--bg-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.5em 0 2.2em;
}

/* ---- byline ---- */
.byline {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: .8em 0 1.4em;
}
.byline a { color: var(--ink-2); }
.byline .by-author { font-weight: 600; color: var(--ink-2); }
.byline .by-checked::before { content: "· "; }
.byline .by-updated::before { content: "· "; }

/* ---- 3garaat.com-style operator card grid ---- */
.operator-table.dark-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 1.5em 0 2em;
}
.dark-cards .dark-row {
  display: grid;
  grid-template-columns: 48px 134px 1.4fr 1.1fr 1fr 1.4fr 1.1fr;
  gap: 18px;
  align-items: center;
  background: var(--surface);
  border: 1px solid rgba(250, 204, 21, .08);
  border-radius: 16px;
  padding: 18px 22px;
  color: var(--ink);
  transition: border-color 160ms, transform 160ms;
}
.dark-cards .dark-row:hover {
  border-color: rgba(250, 204, 21, .35);
}
.dark-cards .rank-badge {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 50%, var(--gold-2) 100%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #2a1f00;
  font-size: .95rem;
  box-shadow: 0 2px 6px rgba(250, 204, 21, .30), inset 0 1px 0 rgba(255,255,255,.5);
}
.dark-cards .dc-logo {
  width: 134px;
  height: 92px;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  place-items: center;
  border: 1px solid #d6d3c5;
}
.dark-cards .dc-logo.on-dark {
  background: #0c0a05;
  border-color: #2a2418;
}
.dark-cards .dc-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.dark-cards .dc-brand strong {
  display: block;
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}
.dark-cards .dc-brand small {
  display: block;
  font-size: .85rem;
  color: var(--ink-mute);
  margin-top: 4px;
}
.dark-cards .dc-bonus { text-align: center; }
.dark-cards .dc-bonus .bonus-main {
  font-size: 1.05rem;
  font-weight: 800;
  color: #5fd1a3;
  line-height: 1.3;
}
.dark-cards .dc-bonus .bonus-extra {
  font-size: .85rem;
  color: var(--ink-mute);
  margin-top: 6px;
}
.dark-cards .dc-rating { text-align: center; }
.dark-cards .dc-rating .stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 1;
}
.dark-cards .dc-rating .score {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin-top: 6px;
}
.dark-cards .dc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: center;
}
.dark-cards .dc-tag {
  font-size: .75rem;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid;
}
.dark-cards .dc-tag.gold { background: rgba(250,204,21,.14); color: var(--gold); border-color: rgba(250,204,21,.40); }
.dark-cards .dc-tag.emerald { background: rgba(20,146,110,.18); color: #5fd1a3; border-color: rgba(20,146,110,.40); }
.dark-cards .dc-tag.purple { background: rgba(140,118,230,.18); color: #b59cee; border-color: rgba(140,118,230,.42); }
.dark-cards .dc-cta { text-align: center; }
.dark-cards .dc-play {
  display: block;
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 50%, var(--gold-2) 100%);
  color: #1a1306 !important;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none !important;
  font-size: .95rem;
  box-shadow: 0 4px 14px rgba(250,204,21,.30), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform 120ms, box-shadow 120ms;
  text-align: center;
}
.dark-cards .dc-play:hover {
  background: linear-gradient(135deg, #ffe07a 0%, var(--gold-soft) 50%, var(--gold) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(250,204,21,.40), inset 0 1px 0 rgba(255,255,255,.6);
}
.dark-cards .dc-review {
  display: block;
  margin-top: 10px;
  color: var(--ink-mute);
  font-size: .85rem;
  text-decoration: none;
  transition: color 120ms;
  text-align: center;
}
.dark-cards .dc-review:hover { color: var(--gold); }

@media (max-width: 900px) {
  .dark-cards .dark-row {
    grid-template-columns: 48px 1fr;
    grid-template-areas: "rank brand" "logo bonus" "tags tags" "rating cta";
    gap: 14px 16px;
    padding: 18px;
  }
  .dark-cards .rank-badge { grid-area: rank; }
  .dark-cards .dc-brand { grid-area: brand; }
  .dark-cards .dc-logo { grid-area: logo; }
  .dark-cards .dc-bonus { grid-area: bonus; text-align: start; }
  .dark-cards .dc-rating { grid-area: rating; text-align: start; }
  .dark-cards .dc-tags { grid-area: tags; }
  .dark-cards .dc-cta { grid-area: cta; }
}
@media (max-width: 540px) {
  .dark-cards .dark-row {
    grid-template-columns: 1fr;
    grid-template-areas: "rank" "logo" "brand" "bonus" "rating" "tags" "cta";
    text-align: center;
  }
  .dark-cards .rank-badge { justify-self: start; }
  .dark-cards .dc-logo { justify-self: center; }
  .dark-cards .dc-bonus, .dark-cards .dc-rating { text-align: center; }
  .dark-cards .dc-tags { justify-content: center; }
}

/* ---- comparison table ---- */
.casino-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.casino-table th {
  background: linear-gradient(135deg, var(--gold-3), var(--gold-2));
  color: #1a1306;
  text-align: start;
  padding: 12px 10px;
  font-size: .9rem;
  font-weight: 700;
}
.casino-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
  font-size: .95rem;
  color: var(--ink);
}
.casino-table tr:last-child td { border-bottom: 0; }
.casino-table tr:hover td { background: rgba(250, 204, 21, .05); }

.rank {
  font-weight: 700;
  color: var(--gold);
  width: 2.4em;
  text-align: center;
  font-size: 1.1rem;
}
.rank-1 { background: linear-gradient(180deg, rgba(250,204,21,.3), rgba(202,138,4,.15)); }
.rank-2 { background: linear-gradient(180deg, rgba(218,175,79,.2), rgba(146,102,13,.08)); }
.rank-3 { background: linear-gradient(180deg, rgba(218,175,79,.12), rgba(146,102,13,.05)); }

.brand-cell {
  font-weight: 600;
  min-width: 160px;
  text-align: center;
}
/* 3garaat.com-inspired uniform logo card: fixed-dimension white tile,
   10px padding all round, object-fit: contain so every operator's
   logo lands in the same visual footprint regardless of its native
   aspect ratio. No shadow — clean tile on the dark surface. */
.brand-cell .brand-logo {
  display: block;
  width: 134px;
  height: 92px;
  margin: 0 auto 10px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #d6d3c5;
  border-radius: 10px;
  padding: 10px;
  box-shadow: none;
}
.brand-cell .brand-logo.on-dark {
  background: #0c0a05;
  border-color: #2a2418;
  box-shadow: none;
}
@media (max-width: 720px) {
  .brand-cell { min-width: 120px; }
  .brand-cell .brand-logo {
    width: 110px;
    height: 72px;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
  }
}
.brand-cell .lic {
  display: block;
  font-size: .75rem;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 2px;
}

.bonus-cell { min-width: 180px; }
.bonus-amount { font-weight: 700; color: var(--gold-soft); }
.bonus-aed, .bonus-sar {
  display: block;
  font-size: .8rem;
  color: var(--ink-mute);
}

.cta {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #1a1306;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(250, 204, 21, .25);
  transition: all .15s ease;
}
.cta:hover {
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 100%);
  color: #1a1306;
  box-shadow: 0 0 28px rgba(250, 204, 21, .45);
  transform: translateY(-1px);
}

.score {
  display: inline-block;
  font-weight: 700;
  color: var(--gold-soft);
  background: rgba(250, 204, 21, .12);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .9rem;
  border: 1px solid rgba(250, 204, 21, .25);
}

/* ---- callouts ---- */
.callout {
  border-inline-start: 4px solid var(--gold);
  background: var(--bg-3);
  padding: 22px 28px;
  margin: 2em 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.7;
}
.callout p { margin: 0 0 1em; }
.callout p:last-child { margin-bottom: 0; }
.callout ul, .callout ol { margin: 0.5em 0 1em; }
.callout.warn { border-color: var(--warn); background: rgba(251, 191, 36, .08); }
.callout.danger { border-color: var(--bad); background: rgba(248, 113, 113, .08); }
.callout.success { border-color: var(--good); background: rgba(74, 222, 128, .08); }
.callout h3 { margin-top: 0; margin-bottom: 0.7em; color: var(--gold-soft); }

/* ---- rubric ---- */
.rubric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 1.5em 0 2em;
}
.rubric-row { display: grid; grid-template-columns: 1fr 70px; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--line-2); }
.rubric-row:last-child { border-bottom: 0; }
.rubric-weight { font-weight: 700; color: var(--gold); text-align: end; font-size: 1.15rem; }

/* ---- payment chips ---- */
.payment-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: .4em 0; justify-content: center; }
.chip {
  font-size: .78rem;
  background: var(--bg-3);
  color: var(--ink);
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid var(--line);
}
.chip.crypto { background: rgba(250, 204, 21, .12); color: var(--gold-soft); border-color: rgba(250, 204, 21, .3); }
.chip.local { background: rgba(74, 222, 128, .12); color: var(--good); border-color: rgba(74, 222, 128, .3); }

/* ---- legality block ---- */
.legality-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 6px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px;
  margin: 1.8em 0;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1.7;
}
.legality-block p { margin: 0; }
.legality-block .status {
  display: inline-block;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: .95rem;
  margin-bottom: .7em;
}
.status-illegal { background: rgba(248, 113, 113, .15); color: var(--bad); border: 1px solid rgba(248, 113, 113, .3); }
.status-grey { background: rgba(251, 191, 36, .15); color: var(--warn); border: 1px solid rgba(251, 191, 36, .3); }
.status-regulated { background: rgba(74, 222, 128, .15); color: var(--good); border: 1px solid rgba(74, 222, 128, .3); }

/* ---- FAQ ---- */
.faq { margin: 1.5em 0 2em; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  padding: 0 24px;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--gold-soft);
  padding: 20px 0;
  list-style: none;
  font-size: 1.15rem;
  line-height: 1.5;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--gold); font-weight: 700; font-size: 1.4em; }
html[dir="rtl"] .faq summary::after { float: left; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] { padding-bottom: 20px; }
.faq details[open] summary { color: var(--gold); border-bottom: 1px dashed var(--line-2); margin-bottom: 0.8em; }
.faq details p { font-size: 1.1rem; line-height: 1.75; margin: 0.6em 0; color: var(--ink); }

/* ---- author card ---- */
.author-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 1.5em 0;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  color: var(--ink);
}
.author-card .avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-3), var(--gold-2));
  color: #1a1306; font-weight: 800; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.author-card .avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.author-card .name { font-weight: 700; color: var(--gold-soft); }
.author-card .role { font-size: .85rem; color: var(--ink-mute); }
.author-card p { margin: .4em 0 0; font-size: .9rem; color: var(--ink); }

/* ---- bilingual quote ---- */
.quote-ar {
  font-family: "Cairo", "Noto Sans Arabic", serif;
  direction: rtl;
  text-align: right;
  background: var(--bg-2);
  padding: 12px 16px;
  border-inline-start: 3px solid var(--gold);
  margin: 8px 0;
  color: var(--ink);
  border-radius: 0 6px 6px 0;
}

/* ---- responsibility-strip (fallback for builder-emitted pages) ---- */
.responsibility-strip {
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: .8rem;
  text-align: center;
  padding: 6px 20px;
}
.responsibility-strip a { color: var(--gold); text-decoration: underline; }

/* ---- utility ---- */
.muted { color: var(--ink-mute); }
.small { font-size: .85rem; }
.center { text-align: center; }
.no-recommend {
  border: 2px dashed var(--bad);
  background: rgba(248, 113, 113, .08);
  padding: 14px 18px;
  border-radius: var(--radius);
  color: var(--bad);
  font-weight: 600;
}
.toc {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 14px 18px;
  border-radius: var(--radius);
  color: var(--ink);
}
.toc h3 { margin: 0 0 .5em; font-size: 1rem; color: var(--gold-soft); }
.toc ol { margin: 0; }
.toc a { color: var(--ink); }
.toc a:hover { color: var(--gold); }

/* ---- responsive ---- */
@media (max-width: 720px) {
  main { font-size: 1.05rem; line-height: 1.7; }
  main p, main ul, main ol { font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.2em; }
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.6rem; margin-top: 2em; }
  h3 { font-size: 1.25rem; margin-top: 1.5em; }
  .lede { font-size: 1.1rem; padding: 14px 18px; }
  .callout, .rubric, .legality-block { padding: 16px 18px; font-size: 1.02rem; }
  .faq summary { font-size: 1.05rem; padding: 16px 0; }
  .faq details { padding: 0 18px; }
  .casino-table { font-size: .85rem; display: block; overflow-x: auto; }
  .casino-table th, .casino-table td { padding: 8px 6px; }
}

/* ---- print ---- */
@media print {
  .cta { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* hide legacy chrome that gets stripped by the new builder */
.site-header, .site-footer { display: none; }