/*
Theme Name: Virolaiset nettikasinot
Theme URI: https://virolaiset-nettikasinot.net/
Author: Saarema Media OÜ
Description: Kevyt ja nopea teema virolaisten nettikasinoiden vertailusivustolle. Sisältää Kasino-sisältötyypin, toplista-shortcoden ja rakenteisen datan.
Version: 1.0.5
Requires at least: 6.2
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: virolaiset-nettikasinot
*/

/* ---------------------------------------------------------------- tokens */

:root {
  /* ink */
  --ink-900: #0c1f33;
  --ink-800: #142e48;
  --ink-700: #1d3f60;
  --tx: #17293a;
  --tx-soft: #43586b;
  --tx-faint: #6b7d8e;
  --on-dark: #eaf1f7;
  --on-dark-soft: #a9bccd;

  /* Estonian blue accent */
  --blue-600: #0b5ec4;
  --blue-500: #0f72e0;
  --blue-400: #3c92ef;
  --blue-bg: #eaf3fe;
  --link: #0b5ec4;

  /* semantic */
  --pos: #12764a;
  --pos-bg: #e7f5ed;
  --neg: #b02a25;
  --neg-bg: #fceceb;
  --warn: #8a6100;
  --warn-bg: #fdf4e0;

  /* surfaces */
  --bg: #f4f6f9;
  --card: #ffffff;
  --bg-alt: #f8fafc;
  --line: #dfe5ec;
  --line-strong: #c6d0da;

  /* metrics */
  --w-text: 760px;
  --w-wide: 1040px;
  --w-rail: 1290px;
  --r: 8px;
  --r-lg: 14px;
  --shadow-1: 0 1px 2px rgba(12, 31, 51, .06), 0 2px 8px rgba(12, 31, 51, .05);
  --shadow-2: 0 4px 14px rgba(12, 31, 51, .09), 0 12px 30px rgba(12, 31, 51, .07);
  --header-h: 62px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--w-text); margin-inline: auto; padding-inline: 20px; }
.wrap-wide { width: 100%; max-width: var(--w-wide); margin-inline: auto; padding-inline: 20px; }

main { padding-bottom: 10px; }
main section { scroll-margin-top: calc(var(--header-h) + 14px); }

.entry-content > * { max-width: var(--w-text); margin-inline: auto; }
.entry-content > .alignwide { max-width: var(--w-wide); }

/* ---------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--ink-900);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); letter-spacing: -.024em; }
h2 { font-size: clamp(1.45rem, 3.2vw, 1.85rem); margin-top: 2.3em; }
h3 { font-size: clamp(1.12rem, 2.3vw, 1.26rem); margin-top: 1.8em; margin-bottom: .4em; }
h4 { font-size: 1.03rem; margin-top: 1.4em; margin-bottom: .3em; }

h2 + h3, h3 + h4 { margin-top: .9em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

strong { font-weight: 700; color: var(--ink-800); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: .45em; }
li::marker { color: var(--blue-500); }

.lead { font-size: 1.1rem; color: var(--tx-soft); }
.small { font-size: .88rem; color: var(--tx-faint); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  background: var(--ink-900); border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.masthead .bar {
  max-width: var(--w-rail); margin-inline: auto; padding-inline: 20px;
  height: var(--header-h); display: flex; align-items: center; gap: 18px;
}
.masthead .brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.masthead .brand img { height: 30px; width: auto; display: block; }
.admin-bar .masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar .masthead { top: 46px; } }

.masthead-nav ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.masthead-nav a { color: var(--on-dark-soft); font-size: .92rem; font-weight: 600; text-decoration: none; }
.masthead-nav a:hover { color: #fff; }
@media (max-width: 860px) { .masthead-nav { display: none; } }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: inherit; font-weight: 700; font-size: .98rem; line-height: 1;
  padding: 13px 21px; border-radius: var(--r); border: 0;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { text-decoration: none; }

.btn-cta { background: var(--blue-600); color: #fff; box-shadow: 0 1px 0 #084a9c, 0 5px 14px rgba(11, 94, 196, .28); }
.btn-cta:hover { background: var(--blue-500); transform: translateY(-1px); }
.btn-cta:active { transform: translateY(1px); box-shadow: 0 1px 0 #084a9c; }

.btn-ghost { background: transparent; color: var(--ink-700); border: 1.5px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--blue-500); color: var(--blue-600); }

.btn-sm { padding: 9px 15px; font-size: .87rem; border-radius: 6px; }
.btn-block { display: flex; width: 100%; }
.masthead-cta { padding: 10px 16px; font-size: .88rem; }

/* ---------------------------------------------------------------- page top */

.pagetop { padding: 34px 0 4px; }
.pagetop h1 { margin-bottom: .3em; }

.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 0 0 18px; font-size: .87rem; color: var(--tx-faint);
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.byline .who { display: flex; align-items: center; gap: 7px; }
.byline img { width: 28px; height: 28px; border-radius: 50%; display: block; }
.byline a { color: var(--ink-800); font-weight: 700; }
.byline .sep { color: var(--line-strong); }
@media (max-width: 560px) {
  .byline { flex-direction: column; align-items: flex-start; gap: 7px; }
  .byline .sep { display: none; }
}

.intro-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 6px; }

.trustrow {
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 20px 0 4px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.trustrow span {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-alt); border: 1px solid var(--line);
  color: var(--tx-soft); border-radius: 999px; padding: 6px 13px;
  font-size: .81rem; font-weight: 600;
}

.crumbs { font-size: .84rem; color: var(--tx-faint); margin-bottom: 14px; }
.crumbs a { color: var(--tx-faint); font-weight: 500; }
.crumbs .sep { margin: 0 7px; color: var(--line-strong); }

.subhead { padding: 30px 0 2px; }
.subhead h1 { margin-bottom: .25em; }
.subhead > .wrap > p { color: var(--tx-soft); margin: 0 0 14px; }

/* ---------------------------------------------------------------- toplist */

.ranklist { display: flex; flex-direction: column; gap: 13px; margin: 24px 0 8px; }

.rank-card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 18px 20px;
  display: grid; grid-template-columns: 46px minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 200px);
  gap: 18px; align-items: center;
}
.rank-card.is-top { border-color: var(--blue-400); box-shadow: var(--shadow-2); }

.rank-num {
  width: 38px; height: 38px; border-radius: 50%; background: var(--ink-900); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.rank-card.is-top .rank-num { background: var(--blue-600); }

.rank-ribbon {
  position: absolute; top: -11px; left: 74px;
  background: var(--blue-600); color: #fff; font-size: .7rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px;
}

.rank-who { display: flex; flex-direction: column; gap: 7px; min-width: 0; align-items: center; text-align: center; }
.rank-logo { height: 42px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rank-logo img { max-height: 42px; width: auto; object-fit: contain; }
.rank-name { font-weight: 800; color: var(--ink-900); font-size: 1.02rem; }
.rank-score { display: flex; align-items: center; gap: 6px; font-size: .83rem; color: var(--tx-faint); }
.rank-score b { color: var(--ink-900); font-size: .95rem; }

.rank-bonus { font-weight: 700; color: var(--ink-800); margin-bottom: 8px; }
.rank-data { margin: 0; font-size: .84rem; }
.rank-data div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dotted var(--line); }
.rank-data div:last-child { border-bottom: 0; }
.rank-data dt { color: var(--tx-faint); }
.rank-data dd { margin: 0; font-weight: 600; color: var(--ink-800); text-align: right; }

.rank-perks { list-style: none; margin: 10px 0 0; padding: 0; font-size: .85rem; }
.rank-perks li { position: relative; padding-left: 23px; margin-bottom: .35em; line-height: 1.45; }
.rank-perks li::before {
  content: "✓"; position: absolute; left: 0; top: 2px; color: #fff; background: var(--pos);
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  font-size: .64rem; font-weight: 700;
}

.rank-cta { display: flex; flex-direction: column; gap: 7px; }
.rank-terms { font-size: .72rem; color: var(--tx-faint); text-align: center; line-height: 1.35; }

@media (max-width: 1040px) {
  .rank-card { grid-template-columns: 42px minmax(140px, 1fr) minmax(150px, 1fr); row-gap: 14px; }
  .rank-perks { grid-column: 2 / -1; }
  .rank-cta { grid-column: 1 / -1; }
  .rank-ribbon { left: 66px; }
}
@media (max-width: 620px) {
  .rank-card { grid-template-columns: 38px minmax(0, 1fr); padding: 16px; }
  .rank-data, .rank-perks { grid-column: 1 / -1; }
  .rank-who { align-items: flex-start; text-align: left; }
}

/* toplist placeholder while no casinos exist yet */
.rank-empty {
  border: 2px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--bg-alt); padding: 22px; text-align: center; color: var(--tx-soft);
  margin: 22px auto; font-size: .93rem;
}
.rank-empty b { display: block; color: var(--ink-900); margin-bottom: 5px; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }

/* ---------------------------------------------------------------- toc */

.toc {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 22px; margin: 1.9em auto;
}
.toc h2 { margin: 0 0 .6em; font-size: 1rem; margin-top: 0; }
.toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 26px; font-size: .9rem; }
.toc li { margin-bottom: .3em; break-inside: avoid; }
.toc a { color: var(--tx-soft); font-weight: 500; }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* ---------------------------------------------------------------- content blocks */

.pointlist {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 22px; margin: 1.7em auto; box-shadow: var(--shadow-1);
}
.pointlist ul { list-style: none; padding: 0; margin: 0; }
.pointlist li { position: relative; padding-left: 30px; margin-bottom: .5em; }
.pointlist li::before {
  content: "✓"; position: absolute; left: 0; top: 3px; color: #fff; background: var(--pos);
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: .73rem; font-weight: 700;
}

.note {
  background: var(--blue-bg); border-left: 4px solid var(--blue-500);
  border-radius: 0 var(--r) var(--r) 0; padding: 16px 20px; margin: 1.7em auto;
}
.note.warn { background: var(--warn-bg); border-left-color: #d9a119; }
.note.neg { background: var(--neg-bg); border-left-color: var(--neg); }
.note > :last-child { margin-bottom: 0; }
.note h3 { margin-top: 0; }

/* Multi-paragraph hero intro (set per page in _vn_hero_html). */
.hero-intro p:last-child { margin-bottom: 0; }
.hero-intro ul { margin: 0 0 1.05em; }
.hero-intro li { margin-bottom: .3em; }

/* Section banner: brand band carrying the heading (the h2 above is the real one). */
.section-banner { display: block; width: 100%; height: auto; margin: 4px 0 22px; border-radius: var(--r); }

figure { margin: 1.8em auto; }
figure img, figure svg { border-radius: var(--r); display: block; width: 100%; }
figcaption { font-size: .84rem; color: var(--tx-faint); margin-top: .55em; text-align: center; }

.table-wrap { overflow-x: auto; margin: 1.7em auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--card); border-radius: var(--r); overflow: hidden; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--ink-800); color: #fff; font-weight: 700; font-size: .86rem; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--bg-alt); }
td .yes { color: var(--pos); font-weight: 700; }
td .no { color: var(--neg); font-weight: 700; }

.prosandcons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.8em auto; }
.prosandcons > div { border-radius: var(--r-lg); padding: 16px 20px; border: 1px solid var(--line); }
.prosandcons .pro { background: var(--pos-bg); border-color: #bfe3ce; }
.prosandcons .con { background: var(--neg-bg); border-color: #f3ccca; }
.prosandcons h3 { margin-top: 0; font-size: 1.02rem; }
.prosandcons .pro h3 { color: var(--pos); }
.prosandcons .con h3 { color: var(--neg); }
.prosandcons ul { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.prosandcons li { position: relative; padding-left: 20px; margin-bottom: .45em; }
.prosandcons .pro li::before { content: "+"; position: absolute; left: 0; top: 0; color: var(--pos); font-weight: 800; }
.prosandcons .con li::before { content: "−"; position: absolute; left: 0; top: 0; color: var(--neg); font-weight: 800; }
@media (max-width: 680px) { .prosandcons { grid-template-columns: 1fr; } }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 1.7em auto; }
.steps > li { counter-increment: s; position: relative; padding: 0 0 0 48px; margin-bottom: 1.4em; }
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px;
  border-radius: 50%; background: var(--blue-600); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
}
.steps h3 { margin-top: 0; margin-bottom: .3em; }

/* author card */
.person {
  display: flex; gap: 15px; align-items: flex-start; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 20px;
  margin: 1.3em auto; box-shadow: var(--shadow-1);
}
.person img { width: 60px; height: 60px; border-radius: 50%; flex: none; }
.person > div { min-width: 0; }
.person h3 { margin: 0 0 .15em; font-size: 1.02rem; }
.person .role { color: var(--blue-600); font-weight: 700; font-size: .86rem; margin-bottom: .5em; }
.person p { margin: 0 0 .5em; font-size: .92rem; color: var(--tx-soft); }

.sources { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px; margin: 1.9em auto; }
.sources h2, .sources h3 { margin-top: 0; }
.sources ol, .sources ul { margin: 0; padding-left: 1.2em; font-size: .9rem; }
.sources li { margin-bottom: .4em; }

.changelog { list-style: none; margin: 1.1em 0 0; padding: 0; font-size: .88rem; }
.changelog li { position: relative; padding: 7px 0 7px 92px; border-bottom: 1px solid var(--line); min-height: 20px; }
.changelog li:last-child { border-bottom: 0; }
.changelog time { position: absolute; left: 0; top: 7px; width: 78px; color: var(--tx-faint); font-variant-numeric: tabular-nums; }

details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 0; margin: 0 auto .6em; max-width: var(--w-text);
}
details summary {
  cursor: pointer; padding: 13px 17px; font-weight: 700; color: var(--ink-900);
  list-style: none; position: relative; padding-right: 42px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--blue-600); font-weight: 800; font-size: 1.2rem; line-height: 1;
}
details[open] summary::after { content: "−"; }
details .faq-a { padding: 0 17px 15px; color: var(--tx-soft); font-size: .95rem; }
details .faq-a > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- contents rail */

.article-shell { width: 100%; max-width: var(--w-rail); margin-inline: auto; padding-inline: 20px; }
.contents-rail { display: none; }

@media (min-width: 1180px) {
  .article-shell {
    display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 44px; align-items: start;
  }
  .article-shell > .entry-content { min-width: 0; }
  .article-shell > .entry-content > * { margin-inline: 0; }
  .contents-rail { position: sticky; top: calc(var(--header-h) + 18px); display: block; }

  /* Hero column lines up with the article column below it. */
  .pagetop .wrap { max-width: var(--w-rail); }
  .pagetop h1,
  .pagetop .byline,
  .pagetop .lead,
  .pagetop .intro-actions,
  .pagetop .trustrow,
  .pagetop .hero-intro,
  .pagetop .pagetop-art { max-width: var(--w-text); margin-inline: 0; }
}

.contents-rail nav {
  border-left: 2px solid var(--line); padding: 2px 0 2px 16px;
  max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; overscroll-behavior: contain;
}
.contents-rail h2 { margin: 0 0 .7em; font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tx-faint); }
.contents-rail ol { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.contents-rail li { margin-bottom: .1em; }
.contents-rail a { display: block; padding: 4px 0; color: var(--tx-faint); font-weight: 500; }
.contents-rail a:hover { color: var(--link); }
.contents-rail a.is-active { color: var(--ink-900); font-weight: 700; }

/* ---------------------------------------------------------------- sticky mobile cta */

.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--ink-900); border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 12px;
}
.mobilebar .txt { color: #fff; font-size: .79rem; line-height: 1.3; min-width: 0; }
.mobilebar .txt b { display: block; font-size: .89rem; }
.mobilebar .txt span { color: var(--on-dark-soft); }
.mobilebar .btn { flex: none; margin-left: auto; }
@media (max-width: 860px) { .mobilebar { display: flex; } body { padding-bottom: 64px; } }

/* ---------------------------------------------------------------- legal pages */

.legal { font-size: .96rem; }
.legal h2 { font-size: 1.28rem; margin-top: 1.9em; }
.legal h3 { font-size: 1.03rem; }

/* ---------------------------------------------------------------- footer */

.sitefoot { background: var(--ink-900); color: var(--on-dark-soft); font-size: .87rem; padding: 36px 0 22px; margin-top: 52px; }
.sitefoot a { color: var(--on-dark-soft); font-weight: 500; text-decoration: none; }
.sitefoot a:hover { color: #fff; text-decoration: underline; }
.sitefoot h3 { color: #fff; font-size: .84rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .9em; }
.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot li { margin-bottom: .45em; }

.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 30px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.brandcol img { height: 30px; width: auto; margin-bottom: 12px; }
.brandcol p { color: var(--on-dark-soft); margin: 0; }
.addr { font-style: normal; line-height: 1.7; }

.seals { display: flex; flex-wrap: wrap; gap: 9px; align-items: stretch; margin: 26px 0 0; }
.seal {
  display: flex; align-items: center; gap: 9px; flex: 1 1 200px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r); padding: 10px 13px; color: var(--on-dark-soft); text-decoration: none;
}
.seal b { display: block; color: #fff; font-size: .82rem; }
.seal span span { font-size: .77rem; }
.seal svg { flex: none; }
@media (max-width: 560px) { .seal { flex: 1 1 100%; } }

.sitefoot-base {
  border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 24px; padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  font-size: .83rem;
}
.sitefoot-resp { display: flex; align-items: center; gap: 11px; }
.sitefoot-resp span { min-width: 0; }
.foot-badge { height: 32px; width: auto; flex: none; }

/* ---------------------------------------------------------------- utils */

.visually-hidden, .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto;
  background: #fff; color: var(--ink-900); padding: 10px 16px; border-radius: var(--r);
  box-shadow: var(--shadow-2); z-index: 100; font-weight: 700;
}
.center { text-align: center; }
.mt0 { margin-top: 0; }
.alignwide { max-width: var(--w-wide); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* ---------------------------------------------------------------- telegram link */
/* Colour-agnostic on purpose: this same rule ships on footers with different
   backgrounds, so it borrows the surrounding text colour rather than naming one. */
.foot-tg {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid currentColor; color: inherit;
  font-size: .88rem; font-weight: 700; line-height: 1;
  text-decoration: none; opacity: .82;
  transition: opacity .15s ease, background-color .15s ease;
}
.foot-tg svg { flex: none; }
.foot-tg:hover { opacity: 1; background: rgba(127, 127, 127, .18); }
.foot-tg:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .foot-tg { transition: none; } }


/* ---------------------------------------------------------------- toplist card */
/* Leans on the theme's own custom properties so the card picks up this site's
   palette; every var has a fallback because the themes do not all define the
   same set. The CTA reuses .btn-cta, so it is on-brand automatically. */
.toplist, .ranklist, .cmp-list, .caslist { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 8px; }

.tl-card {
  --tl-accent: var(--blue-600);
  --tl-surface: var(--card-alt, #f6f7f8);
  --tl-ink: var(--ink-900, var(--tx, #1b1f22));
  display: grid; grid-template-columns: 54px 158px minmax(0, 1fr) 192px;
  gap: 20px; align-items: center; position: relative;
  background: var(--card, #fff); border: 1px solid var(--line, #e3e6e8);
  border-radius: var(--r-lg, 14px); padding: 20px 22px; box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,.07));
}
.tl-card:hover { box-shadow: var(--shadow-2, 0 6px 18px rgba(0,0,0,.10)); }
.tl-card.is-top { border: 2px solid var(--tl-accent); padding-top: 26px; }
.tl-ribbon {
  position: absolute; top: -12px; left: 22px; background: var(--tl-accent); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px;
}
.tl-rank {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tl-surface); color: var(--tx-faint, #6f797e); font-weight: 800; font-size: 1.1rem;
}
.tl-card.is-top .tl-rank { background: var(--tl-accent); color: #fff; }

.tl-brand { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tl-logo { height: 46px; display: grid; place-items: center; background: var(--tl-surface); border-radius: var(--r, 10px); overflow: hidden; }
.tl-logo img { max-height: 40px; max-width: 100%; width: auto; }
.tl-logo.is-empty { border: 1px dashed var(--line-strong, #c9cfd3); color: var(--tx-faint, #6f797e); font-size: .78rem; font-weight: 800; text-align: center; padding: 0 8px; }
.tl-name { font-weight: 800; color: var(--tl-ink); font-size: 1.02rem; }
.tl-score { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--tx-faint, #6f797e); }
.tl-score b { color: var(--tl-ink); font-size: .98rem; }
.tl-stars { color: var(--tl-accent); letter-spacing: .5px; }

/* The offer is the reason anyone clicks, so it carries the largest type. */
.tl-mid { min-width: 0; }
.tl-offers { display: flex; gap: 10px; flex-wrap: wrap; }
.tl-offer { flex: 1 1 150px; min-width: 0; background: var(--tl-surface); border: 1px solid var(--line, #e3e6e8); border-radius: var(--r, 10px); padding: 8px 14px; text-align: center; }
.tl-offer.is-alt { flex: 0 1 108px; }
.tl-olab { display: block; font-size: .61rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--tx-faint, #6f797e); }
.tl-oval { display: block; font-size: 1.24rem; font-weight: 800; color: var(--tl-ink); line-height: 1.15; margin-top: 2px; }

.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tl-chip { background: var(--tl-surface); border: 1px solid var(--line, #e3e6e8); border-radius: 6px; padding: 4px 9px; font-size: .76rem; color: var(--tx-soft, #4d565b); }
.tl-chip b { color: var(--tl-ink); font-weight: 700; }

.tl-lic { margin-top: 9px; font-size: .76rem; font-weight: 700; color: var(--pos, #1aa251); }
.tl-lic::before { content: "\2713\00a0"; }
.tl-lic.is-warn { color: var(--warn, #b4690e); }
.tl-lic.is-warn::before { content: "\26A0\00a0"; }

.tl-more { margin-top: 9px; }
.tl-more > summary { cursor: pointer; list-style: none; font-size: .78rem; font-weight: 700; color: var(--link, var(--tl-accent)); display: inline-flex; align-items: center; gap: 5px; }
.tl-more > summary::-webkit-details-marker { display: none; }
.tl-more > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.tl-more[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.tl-more-in { padding-top: 10px; }
.tl-perks { list-style: none; margin: 0 0 8px; padding: 0; font-size: .84rem; }
.tl-perks li { position: relative; padding-left: 23px; margin-bottom: .3em; line-height: 1.45; }
.tl-perks li::before { content: "\2713"; position: absolute; left: 0; top: 2px; color: var(--pos, #1aa251); font-weight: 800; background: var(--pos-bg, #e8f6ee); width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; }
.tl-terms { font-size: .72rem; color: var(--tx-faint, #6f797e); margin: 8px 0 0; line-height: 1.45; }

.tl-go { display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.tl-btn { font-size: 1rem; padding: 14px 12px; }
.tl-micro { font-size: .69rem; color: var(--tx-faint, #6f797e); margin-top: 7px; line-height: 1.4; }
.tl-why { font-size: .76rem; font-weight: 700; color: var(--link, var(--tl-accent)); margin-top: 7px; }

@media (max-width: 1040px) {
  .tl-card { grid-template-columns: 46px 140px minmax(0, 1fr); row-gap: 16px; }
  .tl-go { grid-column: 1 / -1; }
  .tl-btn { padding: 15px 12px; }
}
@media (max-width: 680px) {
  .tl-card { grid-template-columns: 42px 1fr; row-gap: 14px; padding: 18px 16px; }
  .tl-rank { width: 34px; height: 34px; font-size: .95rem; }
  .tl-brand { flex-direction: row; align-items: center; gap: 12px; }
  .tl-logo { width: 74px; flex: none; height: 40px; }
  .tl-mid, .tl-go { grid-column: 1 / -1; }
  .tl-oval { font-size: 1.12rem; }
}

/* The card also has to survive inside a narrow reading column, not just a wide
   one, so it reflows on its own width rather than the viewport. The viewport
   queries above stay as the fallback for browsers without container queries. */
.toplist, .ranklist, .cmp-list, .caslist { container-type: inline-size; }
@container (max-width: 820px) {
  .tl-card { grid-template-columns: 46px 140px minmax(0, 1fr); row-gap: 16px; }
  .tl-go { grid-column: 1 / -1; }
  .tl-btn { padding: 15px 12px; }
}
@container (max-width: 680px) {
  .tl-card { grid-template-columns: 42px 1fr; row-gap: 14px; padding: 18px 16px; }
  .tl-rank { width: 34px; height: 34px; font-size: .95rem; }
  .tl-brand { flex-direction: row; align-items: center; gap: 12px; }
  .tl-logo { width: 74px; flex: none; height: 40px; }
  .tl-mid, .tl-go { grid-column: 1 / -1; }
  .tl-oval { font-size: 1.12rem; }
}

/* touch-targets: the logo and the small CTAs render 32-34px tall, which is under
   the comfortable thumb size. Only the hit area grows; the artwork is unchanged. */
@media (max-width: 860px) {
  .masthead .brand,
    .btn-cta,
    .mobilebar .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- 18+ age badge ------------------------------------------------------
   Drawn in CSS rather than shipped as artwork: `color: inherit` means it takes
   the surrounding footer's text colour, so it is legible on a dark slab and on
   a light footer without two versions of a PNG. Sized so "18+" clears the ring
   even in the Arial fallback. */
.age-badge {
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	border: 2px solid currentColor;
	color: inherit;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
	display: inline-grid;
	place-items: center;
	flex: none;
	opacity: .92;
}

/* The hero already caps its text at --w-text inside a --w-rail wrap, which left
   the right-hand third empty on wide screens. The brand mark fills it. */
.pagetop-brand { margin: 0 0 18px; }
.pagetop-brand img { display: block; width: 100%; max-width: 300px; height: auto; }

@media (min-width: 1180px) {
	.pagetop .wrap {
		display: grid;
		grid-template-columns: minmax(0, var(--w-text)) 1fr;
		column-gap: 48px;
		align-items: start;
	}
	.pagetop .wrap > *:not(.pagetop-brand) { grid-column: 1; }
	.pagetop-brand {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: center;
		margin: 0;
	}
	.pagetop-brand img { max-width: 360px; margin-inline: auto; }
}

/* the licence graphic in its new home */
.section-figure { margin: 22px 0; }
.section-figure img { display: block; width: 100%; height: auto; border-radius: 14px; }
.section-figure figcaption {
	margin-top: 8px; font-size: .85rem; color: var(--tx-faint);
}

/* Named editorial opinion inside the article. Deliberately a different shape to
   the .note boxes so a reader can tell a person is speaking, and the portrait
   plus linked name make the attribution checkable. author quote */
.authorquote {
	margin: 26px 0; padding: 24px 26px 20px;
	background: var(--bg-alt, #f3f1f7);
	border-radius: 16px;
	text-align: center;
}
.aq-face {
	display: block; width: 72px; height: 72px; border-radius: 50%;
	margin: 0 auto 14px; background: #fff;
}
.authorquote .aq-text {
	margin: 0; padding: 0; border: 0; font-style: normal;
}
.authorquote .aq-text p {
	margin: 0; font-size: 1.02rem; line-height: 1.6; font-weight: 600;
	color: var(--tx, #1b1b2b);
}
/* straight quotes, per house style */
.authorquote .aq-text p::before { content: "\0022"; }
.authorquote .aq-text p::after  { content: "\0022"; }
.aq-by {
	margin-top: 14px; font-size: .82rem; line-height: 1.45;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.aq-by .aq-name { font-weight: 700; text-decoration: none; }
.aq-by .aq-name:hover { text-decoration: underline; }
.aq-by .aq-role { color: #58586e; }

@media (max-width: 640px) {
	.authorquote { padding: 20px 18px 16px; margin: 22px 0; }
	.authorquote .aq-text p { font-size: .97rem; }
}

/* Refinement: the quote was reading as loud as a section of its own. Narrower
   than the text column, smaller portrait and lighter type, so it sits inside the
   section as an aside rather than competing with it. author quote smaller */
.authorquote {
	max-width: 560px;
	margin: 22px auto;
	padding: 18px 22px 15px;
	border-radius: 14px;
}
.aq-face { width: 54px; height: 54px; margin-bottom: 10px; }
.authorquote .aq-text p {
	font-size: .93rem;
	line-height: 1.55;
	font-weight: 500;
}
.aq-by { margin-top: 10px; font-size: .76rem; }
.aq-by .aq-role { font-size: .72rem; }

@media (max-width: 640px) {
	.authorquote { max-width: none; padding: 16px 16px 13px; margin: 18px 0; }
	.authorquote .aq-text p { font-size: .9rem; }
	.aq-face { width: 48px; height: 48px; }
}

/* --- toimituksen testikommentit -------------------------------------------
   Card track with a page counter, mid-page. One row that scroll-snaps rather
   than a wrapping grid, so the same block takes four cards or nine without the
   section changing height. Colours come from this theme's own palette; the
   accent is darkened where the brand colour is too light to read as text. */
.tk { --tk-card: #f8fafc; --tk-line: #dfe5ec; --tk-ink: #17293a;
      --tk-soft: #43586b; --tk-faint: #6b7d8e; --tk-accent: #0b5ec4;
      margin: 44px 0; }
.tk > h2 { margin-bottom: 10px; }
.tk-lead { color: var(--tk-soft); margin-bottom: 20px; }

.tk-wrap { position: relative; }
.tk-track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3);
	gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-padding-left: 0; padding-bottom: 4px;
	scrollbar-width: none; -ms-overflow-style: none;
}
.tk-track::-webkit-scrollbar { display: none; }
.tk-track:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 3px; }

.tk-card {
	position: relative; scroll-snap-align: start;
	background: var(--tk-card); border: 1px solid var(--tk-line);
	border-radius: 10px; padding: 16px 18px 18px;
}
.tk-q {
	position: absolute; top: 6px; right: 12px;
	font-size: 30px; line-height: 1; font-weight: 700;
	color: var(--tk-line); pointer-events: none;
}
.tk-head {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 10px; padding-right: 26px; margin-bottom: 8px;
}
.tk-who { font-weight: 700; color: var(--tk-ink); font-size: .95rem; }
.tk-brand { font-weight: 700; color: var(--tk-accent); font-size: .95rem; white-space: nowrap; }
.tk-card p { margin: 0; color: var(--tk-soft); font-size: .93rem; line-height: 1.55; }

.tk-foot {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: 14px;
}
.tk-count { color: var(--tk-faint); font-size: .85rem; }
.tk-count b { color: var(--tk-ink); }
.tk-nav { display: flex; gap: 8px; }
.tk-btn {
	width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
	border: 1px solid var(--tk-line); background: transparent;
	color: var(--tk-soft); font-size: 1.05rem; line-height: 1;
	display: grid; place-items: center;
}
.tk-btn:hover:not(:disabled) { border-color: var(--tk-accent); color: var(--tk-accent); }
.tk-btn:disabled { opacity: .35; cursor: default; }
/* Four cards on a wide screen still page; one screenful of cards does not. */
.tk-single .tk-foot { display: none; }

@media (max-width: 900px) {
	.tk-track { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 620px) {
	.tk-track { grid-auto-columns: 86%; }
	.tk { margin: 32px 0; }
}

/* --- arvostelut: hub list and review card ---------------------------------
   One row per casino: identity, offer and facts, action. Three columns on a
   wide screen, stacked below 860px. Colours are this theme's own, with the
   accent darkened where the brand colour is too light to read as text. */
.rv-list { --rv-card: #ffffff; --rv-tint: #f8fafc; --rv-line: #dfe5ec;
           --rv-ink: #17293a; --rv-soft: #43586b; --rv-faint: #6b7d8e;
           --rv-accent: #0b5ec4;
           display: grid; gap: 14px; margin: 26px 0 34px; }

.rv-row {
	display: grid; grid-template-columns: minmax(0, 1fr) 186px;
	grid-template-areas: "lead act" "mid act";
	gap: 10px 18px; align-items: start;
	background: var(--rv-card); border: 1px solid var(--rv-line);
	border-radius: 12px; padding: 16px 18px;
}
.rv-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv-rank {
	flex: none; width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center; font-weight: 800; font-size: .8rem;
	background: var(--rv-accent); color: #fff;
}
/* Fixed plate, flex not grid: a percentage height on a centred grid item
   resolves to auto and a tall logo overflows. */
.rv-logo {
	flex: none; width: 104px; height: 48px; border-radius: 8px;
	background: var(--rv-tint); display: flex; align-items: center;
	justify-content: center; overflow: hidden; padding: 6px 8px;
}
.rv-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rv-logo i { font-style: normal; font-weight: 800; color: var(--rv-soft); }
.rv-id { display: grid; gap: 2px; min-width: 0; }
.rv-id b { color: var(--rv-ink); font-size: 1.02rem; }
.rv-rate { color: var(--rv-faint); font-size: .84rem; }

.rv-mid { display: grid; gap: 3px; min-width: 0; }
.rv-lab {
	font-size: .64rem; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; color: var(--rv-faint);
}
.rv-bonus { font-weight: 700; color: var(--rv-ink); font-size: 1rem; line-height: 1.3; }
.rv-spins { color: var(--rv-accent); font-weight: 600; font-size: .86rem; }
.rv-facts {
	display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px;
	padding-top: 8px; border-top: 1px solid var(--rv-line);
}
.rv-facts div { display: flex; gap: 6px; font-size: .82rem; }
.rv-facts span { color: var(--rv-faint); }
.rv-facts b { color: var(--rv-soft); font-weight: 600; }

.rv-act { display: grid; justify-items: center; gap: 6px; }
.rv-act .rv-go { width: 100%; text-align: center; }
.rv-more { font-size: .86rem; font-weight: 600; color: var(--rv-accent); }
.rv-soon { font-size: .82rem; color: var(--rv-faint); }
.rv-fine { font-size: .68rem; color: var(--rv-faint); }

.rv-single { margin-top: 0; }
.rv-single .rv-row { background: var(--rv-tint); }

@media (max-width: 620px) {
	.rv-row { grid-template-columns: 1fr; grid-template-areas: "lead" "mid" "act"; }
	.rv-act { justify-items: stretch; align-self: stretch; }
}
.rv-lead { grid-area: lead; }
.rv-mid  { grid-area: mid; }
.rv-act  { grid-area: act; align-self: center; }
.rv-id b { overflow-wrap: anywhere; }

/* ==========================================================================
   [esittely] - TOP casino showcase block
   Compact strip, sized so a full roster of eight does not run to 6 000px.

   Surfaces, rules and muted text are mixed from currentColor rather than from
   this theme's token names, because the twenty installs that carry this block
   name their palette tokens about a dozen different ways. The mix adapts on its
   own: dark text on a light page gives a slightly darker panel, light text on a
   dark page a slightly lighter one. Only the accent and the two semantic pairs
   are injected, and each falls back to this theme's own token when it has one.
   ========================================================================== */

.es-wrap {
  --es-surface: color-mix(in srgb, currentColor 4%, transparent);
  --es-rule: color-mix(in srgb, currentColor 16%, transparent);
  --es-rule-2: color-mix(in srgb, currentColor 26%, transparent);
  --es-soft: color-mix(in srgb, currentColor 68%, transparent);
  --es-faint: color-mix(in srgb, currentColor 52%, transparent);
  --es-accent: #0b5ec4;
  --es-accent-ink: #ffffff;
  --es-warn: var(--warn, #8a5a00);
  --es-warn-bg: var(--warn-bg, var(--warn-l, #fdf3e2));
  --es-pos: var(--pos, var(--good, #1b7a52));
  --es-pos-bg: var(--pos-bg, var(--good-l, #e6f3ed));
  --es-star: var(--star, #d8a318);
  margin: 40px 0;
}

.es-eyebrow {
  margin: 0 0 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--es-accent);
}

.es-title { margin: 0 0 8px; line-height: 1.14; text-wrap: balance; }

.es-stand { margin: 0 0 22px; max-width: 62ch; color: var(--es-soft); }

.es-cards { display: flex; flex-direction: column; gap: 16px; }

.es-card {
  display: grid;
  /* Proportional, not fixed: the twenty article columns this lands in run from
     about 660px to 920px wide. A flat 320px shot left only ~330px for the
     content on the narrow ones, which wrapped the fact chips onto four rows and
     pushed the card past 400px. */
  grid-template-columns: minmax(0, clamp(210px, 34%, 320px)) minmax(0, 1fr);
  background: var(--es-surface);
  border: 1px solid var(--es-rule);
  border-radius: 12px;
  overflow: hidden;
}

/* ---------- screenshot ---------- */

.es-shot { position: relative; border-right: 1px solid var(--es-rule); }

.es-shot-img { position: absolute; inset: 0; overflow: hidden; }

/* Absolute, or the image's own intrinsic height sets the card height instead of
   the content doing it. Anchored left because that is where an operator's offer
   headline sits; a centre crop cut one of the two in half. */
.es-shot-img:not(.is-empty) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
}

.es-shot-img.is-empty {
  display: grid;
  place-items: center;
  padding: 18px;
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.es-shot-img.is-empty img {
  position: static;
  width: auto;
  height: auto;
  max-width: 190px;
  max-height: 68%;
  object-fit: contain;
}

.es-wordmark { font-weight: 700; font-size: 1.15rem; color: var(--es-soft); }

.es-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--es-accent);
  color: var(--es-accent-ink);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

/* ---------- content ---------- */

.es-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 15px 18px 16px;
  min-width: 0;
}

.es-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.es-id { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }

.es-name { margin: 0; font-size: 1.25rem; line-height: 1.15; }

.es-site { font-size: .74rem; color: var(--es-faint); }

.es-score { margin-left: auto; display: flex; align-items: baseline; gap: 7px; flex-shrink: 0; }

.es-score b { font-size: 1.2rem; font-variant-numeric: tabular-nums; line-height: 1; }

.es-stars { color: var(--es-star); font-size: .76rem; letter-spacing: .03em; }

.es-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.es-offer {
  margin: 0;
  padding: 9px 12px;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid var(--es-rule);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Facts inline. As tiles these cost ~120px of card height each. */
.es-bits {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  margin: 0;
  font-size: .76rem;
  line-height: 1.3;
}

.es-bit {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--es-rule-2);
  border-radius: 6px;
  font-weight: 600;
}

.es-bit i {
  font-style: normal;
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--es-faint);
}

.es-tax {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 700;
  color: var(--es-warn);
  background: var(--es-warn-bg);
}

.es-tax.is-good { color: var(--es-pos); background: var(--es-pos-bg); }

.es-note { margin: 0; color: var(--es-soft); font-size: .86rem; line-height: 1.5; }

.es-cta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 2px;
}

.es-btn {
  display: inline-flex;
  align-items: center;
  background: var(--es-accent);
  color: var(--es-accent-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: .88rem;
  padding: 9px 18px;
  border-radius: 8px;
  transition: filter .13s ease, transform .13s ease;
}

.es-btn:hover,
.es-btn:focus-visible {
  color: var(--es-accent-ink);
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.es-fine { font-size: .7rem; line-height: 1.4; color: var(--es-faint); }

@media (max-width: 720px) {
  /* Stacked, with the shot back on a ratio since nothing beside it sets a height. */
  .es-card { grid-template-columns: minmax(0, 1fr); }
  .es-shot { border-right: 0; border-bottom: 1px solid var(--es-rule); aspect-ratio: 16 / 9; }
  .es-name { font-size: 1.15rem; }
  .es-offer { font-size: .95rem; }
  .es-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { .es-btn { transition: none; } }


/* ==========================================================================
   TOP 4 block
   The accent falls through this theme's own token names before a neutral, so
   the highlighted card picks up the site's colour wherever one is defined.
   ========================================================================== */

.top4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 1.8em 0 2.2em;
  align-items: stretch;
}

.top4-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: var(--card, var(--bg-alt, #fff));
  border: 1px solid var(--line, var(--es-rule, #e2e5ec));
  border-radius: 14px;
  padding: 18px 14px 16px;
}
.top4-card.is-top { border-width: 2px; }

.top4-lab {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--es-soft, var(--ink-3, #6b7280));
}
.top4-card.is-top .top4-lab { font-weight: 800; }

.top4-rank { font-size: 1.3rem; font-weight: 800; line-height: 1; color: var(--es-faint, var(--line-2, #c3c8d4)); }
.top4-card.is-top .top4-rank { color: inherit; }

.top4-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; margin: 2px 0; }
.top4-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.top4-name { font-weight: 700; font-size: 1.02rem; }
.top4-offer { font-weight: 700; font-size: 1.04rem; line-height: 1.25; }
.top4-meta { font-size: .8rem; color: var(--es-soft, var(--ink-3, #6b7280)); }

.top4-cta {
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 1000px) { .top4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .top4 { grid-template-columns: minmax(0, 1fr); } }

/* Narrow phones: the toplist card's grid used a hardcoded second column
   (42px 222px), so on a 320px card the score and stars rendered past the
   screen edge and were cut off - the page does not scroll sideways, so that
   content was simply lost. Let the content column shrink instead. */
@media (max-width: 480px) {
  .tl-card { grid-template-columns: 38px minmax(0, 1fr); }
  .tl-brand { flex-wrap: wrap; min-width: 0; }
  .tl-brand > * { min-width: 0; }
  .tl-score, .tl-stars, .rank-score { flex-shrink: 1; min-width: 0; }
}

/* The mobile sticky bar is position:fixed but computed wider than the
   viewport, leaving its CTA partly off-screen. Pin it and let the button
   shrink. Same defect as .stickybar on the sibling themes. */
@media (max-width: 480px) {
  .mobilebar { width: 100vw; max-width: 100vw; box-sizing: border-box; }
  .mobilebar > * { min-width: 0; }
  .mobilebar .btn { flex-shrink: 1; min-width: 0; white-space: nowrap; }
}