/* Mostbet FI — ay-oikeudet.fi
   Raskladka: kysymyskortisto (kortoteka voprosov). Fintish class-sanasto. */

:root{
  --sini-tumma:#003266;
  --sini:#094B95;
  --sini-vaalea:#428CDC;
  --sini-vaalea2:#509AEA;
  --oranssi:#FA4D00;
  --oranssi-2:#FA5E00;
  --kulta:#FFBA00;
  --harmaa-vaalea:#DDE4EC;
  --harmaa:#E8ECF1;
  --tumma:#02101F;
  --valkoinen:#FFFFFF;
  --teksti:#0C1E30;
  --teksti-vaimea:#3E566E;
  --raja:#CBD4DF;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;

  --sade-nappi:50px;
  --sade-kortti:15px;

  --z-dropdown:100; --z-sticky:200; --z-ylos:300;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Roboto",Arial,Helvetica,sans-serif;
  color:var(--teksti);
  background:var(--valkoinen);
  line-height:1.6;
  font-size:16px;
  overflow-wrap:anywhere;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.25;margin:0 0 var(--space-3)}
p{margin:0 0 var(--space-4)}
button{font-family:inherit}

.kehys{max-width:1180px;margin-inline:auto;padding-inline:var(--space-4)}

/* skip link */
.ohita-sisaltoon{
  position:absolute;left:var(--space-3);top:-60px;
  background:var(--sini-tumma);color:#fff;padding:var(--space-2) var(--space-4);
  border-radius:var(--space-2);z-index:1000;transition:top .2s ease;
}
.ohita-sisaltoon:focus{top:var(--space-3)}

:focus-visible{outline:3px solid var(--kulta);outline-offset:2px}

/* ---------- napit ---------- */
.linkkinappi{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  border:none;cursor:pointer;text-decoration:none;
  border-radius:var(--sade-nappi);
  background:linear-gradient(0deg,var(--oranssi),var(--oranssi-2));
  color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  padding:14px 28px;font-size:16px;
  box-shadow:0 10px 30px rgba(250,65,0,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.linkkinappi:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(250,65,0,.45)}
.linkkinappi--iso{padding:18px 36px;font-size:18px}
.linkkinappi--pieni{padding:9px 20px;font-size:14px}
.linkkinappi--vaalea{background:linear-gradient(0deg,var(--sini-vaalea),var(--sini-vaalea2));box-shadow:0 10px 26px rgba(66,140,220,.35)}

@media (prefers-reduced-motion:reduce){
  .linkkinappi{transition:none}
  .linkkinappi:hover{transform:none}
}

.linkkinappi-rivi{display:flex;justify-content:center;padding-block:var(--space-8)}

/* ---------- ylaosa (header) ---------- */
.ylaosa{
  background:var(--sini-tumma);color:#fff;
  position:sticky;top:0;z-index:var(--z-sticky);
}
.ylaosa-rivi{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);
  padding-block:var(--space-3);
}
.tunnus{display:inline-flex;margin-right:auto}
.tunnus img{height:32px;width:auto}
.ylaosa-ankkurit{display:flex;flex-wrap:wrap;gap:var(--space-4);margin:0;padding:0;list-style:none}
.ylaosa-ankkurit a{
  color:#DDE4EC;text-decoration:none;font-size:14px;font-weight:500;
  padding:var(--space-1) 0;border-bottom:2px solid transparent;
}
.ylaosa-ankkurit a:hover,.ylaosa-ankkurit a:focus-visible{border-color:var(--kulta);color:#fff}

@media (min-width:48em){
  .tunnus img{height:38px}
}

/* ---------- esittely (hero) ---------- */
.esittely{
  background:linear-gradient(160deg,var(--sini-tumma) 0%, var(--sini) 60%, var(--sini-vaalea) 130%);
  color:#fff;
  padding-block:clamp(40px,7vw,88px);
}
.esittely-sisalto{max-width:820px}
.esittely h1{font-size:clamp(1.7rem,3.6vw + 1rem,2.6rem);color:#fff}
.esittely p{color:#E8ECF1;font-size:clamp(1rem,.4vw + .95rem,1.15rem)}

/* ---------- yleiskatsaus (overview table section) ---------- */
.yleiskatsaus{background:var(--harmaa-vaalea);padding-block:var(--space-8)}

.paneeli-otsikko{
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:14px;color:var(--sini);
  margin-bottom:var(--space-3);
  padding-left:var(--space-3);
  border-left:4px solid var(--oranssi);
}

.taulukko-kaari{
  overflow-x:auto;
  background:#fff;border:1px solid var(--raja);border-radius:var(--sade-kortti);
  -webkit-overflow-scrolling:touch;
}
.taulukko-kaari table{
  border-collapse:collapse;width:100%;min-width:480px;
}
.taulukko-kaari th,.taulukko-kaari td{
  text-align:left;padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--harmaa);font-size:15px;
}
.taulukko-kaari thead th{
  background:var(--sini-tumma);color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.03em;
}
.taulukko-kaari tbody tr:last-child td{border-bottom:none}
.taulukko-kaari tbody tr:nth-child(even){background:var(--harmaa)}

/* ---------- aihe-suodatin (signature: topic filter with live counter) ---------- */
.aihe-suodatin{background:#fff;border-bottom:1px solid var(--raja)}
.aihe-suodatin-sisalto{padding-block:var(--space-4)}
.aihe-napit{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3)}
.aihe-nappi{
  border:2px solid var(--raja);background:#fff;color:var(--teksti-vaimea);
  border-radius:var(--sade-nappi);padding:8px 18px;font-size:14px;font-weight:600;
  cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.aihe-nappi:hover{border-color:var(--sini-vaalea)}
.aihe-nappi[aria-pressed="true"]{
  background:linear-gradient(0deg,var(--sini-vaalea),var(--sini-vaalea2));
  border-color:transparent;color:#fff;
}
.aihe-maara{margin:0;font-size:14px;color:var(--teksti-vaimea);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .aihe-nappi{transition:none}
}

/* dim/highlight state applied to cards, never removes them from DOM */
.kysymys-kortti.himmea,.vastaus-kortti.himmea{
  opacity:.38;
}
.kysymys-kortti.korostettu,.vastaus-kortti.korostettu{
  box-shadow:inset 4px 0 0 var(--oranssi);
}
@media (prefers-reduced-motion:no-preference){
  .kysymys-kortti,.vastaus-kortti{transition:opacity .2s ease}
}

/* ---------- kysymyskortisto (card catalog) ---------- */
.kysymyskortisto{
  background:#fff;border-block:1px solid var(--raja);
}
.kysymys-kortti{
  border-bottom:1px solid var(--raja);
  padding-block:var(--space-8);
}
.kysymys-kortti:last-child{border-bottom:none}
.kysymys-kortti:nth-child(odd){background:#fff}
.kysymys-kortti:nth-child(even){background:#FBFCFE}

.kysymys-sisalto{display:flex;gap:var(--space-6);align-items:flex-start}
.kysymys-numero{
  flex:0 0 auto;
  width:clamp(48px,9vw,84px);
  font-family:"Roboto Condensed","Roboto",sans-serif;
  font-weight:700;
  font-size:clamp(1.7rem,4vw,2.6rem);
  color:var(--harmaa);
  -webkit-text-stroke:1.5px var(--sini);
  line-height:1;
}
.kysymys-runko{flex:1 1 auto;min-width:0}
.kysymys-runko h2{font-size:clamp(1.25rem,1.6vw + 1rem,1.6rem);color:var(--sini-tumma)}
.kysymys-runko h3{font-size:1.1rem;color:var(--sini)}

.kysymys-jako{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
@media (min-width:64em){
  .kysymys-jako--laaja{grid-template-columns:1.3fr 1fr}
}
.vastaus-teksti{min-width:0}
.vastaus-sivu{min-width:0}

/* ---------- widgetit ---------- */
.bonus-merkki{
  background:linear-gradient(135deg,var(--sini-tumma),var(--sini));
  border-radius:var(--sade-kortti);color:#fff;padding:var(--space-6);
}
.bonus-merkki-otsikko{
  display:inline-block;background:var(--kulta);color:var(--tumma);
  font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em;
  padding:4px 12px;border-radius:var(--sade-nappi);margin-bottom:var(--space-3);
}
.bonus-luvut{display:flex;flex-wrap:wrap;gap:var(--space-4);margin:0 0 var(--space-2);padding:0;list-style:none}
.bonus-luvut li{flex:1 1 100px}
.bonus-luku{display:block;font-size:1.6rem;font-weight:700;font-family:"Roboto Condensed","Roboto",sans-serif}
.bonus-selite{display:block;font-size:12px;color:#DDE4EC}

.pelimuodot{
  border-radius:var(--sade-kortti);background:var(--harmaa-vaalea);padding:var(--space-4);
}
.pelimuodot-ruudukko{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);margin:0 0 var(--space-4);list-style:none;padding:0;
}
.pelimuodot-ruudukko li{border-radius:var(--space-2);overflow:hidden;background:var(--sini-tumma)}
.pelimuodot-ruudukko img{aspect-ratio:2/3;object-fit:cover;width:100%;height:100%}
@media (min-width:30em){
  .pelimuodot-ruudukko{grid-template-columns:repeat(3,1fr)}
}

.tarjoajat{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin:0;padding:0;list-style:none}
.tarjoaja-kuva{display:flex;align-items:center;justify-content:center;height:32px}
.tarjoaja-kuva img{height:100%;width:auto;object-fit:contain;filter:grayscale(0)}

.maksukanavat{
  border-radius:var(--sade-kortti);background:var(--harmaa-vaalea);padding:var(--space-4);
  display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;
}
.maksukanavat li{list-style:none;display:flex;align-items:center;height:28px}
.maksukanavat img{height:100%;width:auto;object-fit:contain}

.tuki-lista{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}
.tuki-lista li{
  background:var(--harmaa-vaalea);border-radius:var(--sade-nappi);
  padding:6px 14px;font-size:13px;font-weight:600;color:var(--sini);
}

/* ---------- FAQ-kortti (card 09, contains 6 vastaus-kortti) ---------- */
.vastaus-ruudukko{
  display:grid;grid-template-columns:1fr;gap:var(--space-4);
}
@media (min-width:48em){
  .vastaus-ruudukko{grid-template-columns:1fr 1fr}
}
.vastaus-kortti{
  border:1px solid var(--raja);border-radius:var(--sade-kortti);padding:var(--space-4);background:#fff;
}
.vastaus-kortti h3{font-size:1rem;margin-bottom:var(--space-2)}
.vastaus-kortti p{margin:0;font-size:14px;color:var(--teksti-vaimea)}
.vastaus-aihemerkki{
  display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--sini);margin-bottom:var(--space-2);
}

/* ---------- alaosa (footer) ---------- */
.alaosa{background:var(--tumma);color:#B9C6D4;padding-block:var(--space-8)}
.alaosa-sisalto{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.alaosa-tunnus img{height:28px}
.alaosa-ika{
  display:inline-block;background:var(--kulta);color:var(--tumma);font-weight:700;
  padding:3px 12px;border-radius:var(--sade-nappi);font-size:13px;
}
.alaosa p{margin:0;font-size:13px;line-height:1.6}
.alaosa-oikeudellinen{max-width:760px;color:#8496A8}
.alaosa-copy{color:#66798C}

/* ---------- evastepalkki (cookie banner) ---------- */
.evastepalkki{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:var(--sini-tumma);color:#fff;
  box-shadow:0 -6px 24px rgba(0,0,0,.25);
}
.evastepalkki[hidden]{display:none}
.evastepalkki-sisalto{
  display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between;
  padding-block:var(--space-3);
}
.evastepalkki p{margin:0;font-size:14px;flex:1 1 240px}

/* ---------- ylos-nappi (back to top) ---------- */
.ylos-nappi{
  position:fixed;right:var(--space-4);bottom:88px;z-index:var(--z-ylos);
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(0deg,var(--oranssi),var(--oranssi-2));color:#fff;
  font-size:20px;box-shadow:0 10px 24px rgba(250,65,0,.4);
}
.ylos-nappi[hidden]{display:none}

/* ---------- 404 ---------- */
.virhe-sivu{padding-block:clamp(48px,8vw,120px);text-align:center}
.virhe-sivu h1{font-size:clamp(2.4rem,6vw,4rem);color:var(--sini-tumma)}
.virhe-linkit{
  display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;list-style:none;
  padding:0;margin-top:var(--space-6);
}
.virhe-linkit a{
  border:1px solid var(--raja);border-radius:var(--sade-nappi);padding:8px 18px;
  text-decoration:none;color:var(--sini);font-weight:600;font-size:14px;
}
.virhe-linkit a:hover{border-color:var(--sini-vaalea);color:var(--sini-vaalea)}