/* ═══════════════════════════════════════════════════════════
   SUOMENKALAT.FI — style.css
   Typografia: Fraunces (otsikot), Newsreader (leipäteksti),
   Outfit (nimiöt, painikkeet)
   Paletti: syvä yönvesi + akvamariini — kylmä vesiteema
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:       #0a1016;   /* syvä yönvesi              */
  --bg-2:     #0d151d;   /* korotettu pinta           */
  --bg-3:     #111c26;   /* kortit                    */
  --ink:      #e7edf0;   /* viileä luunvalkoinen      */
  --muted:    #93a6b0;   /* vaimennettu teksti        */
  --aqua:     #58c9b4;   /* akvamariini-aksentti      */
  --aqua-dim: #2e7c6e;   /* tumma akvamariini         */
  --line:     rgba(88,201,180,.26);
  --line-2:   rgba(88,201,180,.13);
  --disp:     "Fraunces", Georgia, serif;
  --serif:    "Newsreader", Georgia, serif;
  --sans:     "Outfit", "Segoe UI", system-ui, sans-serif;
  --wrap:     72rem;
  --ease:     cubic-bezier(.22,.6,.2,1);
}

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

html{ scroll-behavior:smooth }

[id]{ scroll-margin-top:5.5rem }

body{
  background:var(--bg);
  color:var(--ink);
  font:400 1.14rem/1.68 var(--serif);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Hienojakoinen vedenpintakohina koko kankaalle */
body::after{
  content:""; position:fixed; inset:0; z-index:2000; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  opacity:.045; mix-blend-mode:soft-light;
}

.wrap{ max-width:var(--wrap); margin-inline:auto; padding:5rem 1.5rem }

h1,h2,h3{ font-family:var(--disp); font-weight:500; color:var(--ink) }
h2{ font-size:clamp(1.9rem,4.5vw,2.9rem); line-height:1.15; margin-bottom:1rem }
h3{ font-size:1.32rem; margin-bottom:.5rem }
p{ max-width:38em }

a{ color:var(--aqua); text-decoration:none; transition:color .3s var(--ease) }
a:hover{ color:var(--ink) }

::selection{ background:var(--aqua); color:var(--bg) }

.skip{
  position:absolute; left:-999px; top:.5rem; z-index:100;
  background:var(--aqua); color:var(--bg);
  padding:.6rem 1.2rem; font-family:var(--sans);
}
.skip:focus{ left:.5rem }

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

/* Nimiöt */
.label{
  font:500 .72rem/1 var(--sans);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--aqua); margin-bottom:1.1rem;
}
.eyebrow{
  font:400 .78rem/1.5 var(--sans);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--aqua);
}
.sec-lead{ color:var(--muted); font-size:1.13rem; margin-top:.4rem }
.sec-head{ margin-bottom:3rem }

/* ── Painikkeet ─────────────────────────────────────────── */

.btn{
  display:inline-block;
  font:500 .8rem/1.6 var(--sans);
  letter-spacing:.22em; text-transform:uppercase;
  padding:.85rem 2.2rem;
  border:1px solid var(--aqua);
  transition:background .35s var(--ease), color .35s var(--ease),
             transform .35s var(--ease);
}
.btn-aqua{ background:var(--aqua); color:var(--bg) }
.btn-aqua:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg); transform:translateY(-2px) }
.btn-line{ color:var(--aqua) }
.btn-line:hover{ background:var(--aqua); color:var(--bg); transform:translateY(-2px) }

/* ── Yläpalkki ──────────────────────────────────────────── */

.head{
  position:fixed; inset:0 0 auto 0; z-index:900;
  background:rgba(10,16,22,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);
}
.head-in{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.5rem;
}
.brand{
  font:600 1.25rem/1 var(--disp); color:var(--ink);
  display:flex; align-items:center; letter-spacing:.01em;
}
/* Ei gapia: nimessä on kolme palaa (Suomen + kalat + .fi) ja flexin gap
   erottaisi ne toisistaan välilyönnein. Väli tulee logon omasta marginista. */
.brand svg{ width:1.5rem; height:1.5rem; flex:none; margin-right:.55rem }
.brand span{ color:var(--aqua) }
.brand:hover{ color:var(--aqua) }

.nav{ display:flex; align-items:center; gap:2.2rem; list-style:none }
.nav a{
  font:500 .78rem/1 var(--sans);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
}
.nav a:hover{ color:var(--aqua) }
.nav-cta a{ color:var(--aqua) }
.nav .tulossa{
  font-size:.56rem; letter-spacing:.14em; vertical-align:super;
  color:var(--muted); border:1px solid var(--line); border-radius:2px;
  padding:.1rem .3rem; margin-left:.35rem;
}

.nav-btn{ display:none; background:none; border:0; cursor:pointer; padding:.5rem }
.nav-btn span{
  display:block; width:1.6rem; height:2px; background:var(--ink);
  margin:.32rem 0; transition:transform .3s var(--ease), opacity .3s var(--ease);
}

@media (max-width:820px){
  .nav-btn{ display:block }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:.5rem 0 1.2rem;
    background:rgba(10,16,22,.97); border-bottom:1px solid var(--line-2);
    display:none;
  }
  .nav.auki{ display:flex }
  .nav li{ width:100%; text-align:center }
  .nav a{ display:block; padding:.9rem }
  .nav-btn[aria-expanded="true"] span:first-child{ transform:translateY(.4rem) rotate(45deg) }
  .nav-btn[aria-expanded="true"] span:last-child{ transform:translateY(-.4rem) rotate(-45deg) }
}

/* ── Hero ───────────────────────────────────────────────── */

.hero{
  min-height:92vh; display:flex; align-items:center;
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 10%, rgba(88,201,180,.12), transparent 55%),
    radial-gradient(90% 70% at 20% 100%, rgba(23,58,74,.55), transparent 60%),
    linear-gradient(180deg, #0a1016 0%, #0c1722 55%, #0a141c 100%);
}
.hero::before{ /* syvyysviivat — kaikuluotain */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg,
    transparent 0, transparent 118px, rgba(88,201,180,.045) 119px, transparent 120px);
}
.hero-in{ max-width:var(--wrap); margin-inline:auto; padding:8.5rem 1.5rem 5rem; position:relative; z-index:2 }
.hero h1{
  font-size:clamp(2.6rem,7vw,4.6rem); line-height:1.06; font-weight:500;
  max-width:13em; margin:1.2rem 0;
}
.hero h1 em{ font-style:italic; color:var(--aqua) }
.hero-lead{ font-size:1.28rem; color:var(--muted); max-width:34em }
.hero-btns{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem }
.hero-viiva{ /* siima ja koukku -koriste */
  position:absolute; top:0; right:8%; height:100%; width:200px;
  pointer-events:none; opacity:.5;
}
@media (max-width:820px){ .hero-viiva{ display:none } }

/* ── Kortit ─────────────────────────────────────────────── */

.grid{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)) }

.kortti{
  background:var(--bg-3); border:1px solid var(--line-2);
  padding:2rem 1.8rem; display:block; color:var(--ink);
  transition:border-color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.kortti:hover{ border-color:var(--line); transform:translateY(-4px); background:var(--bg-2); color:var(--ink) }
.kortti h3{ display:flex; align-items:baseline; gap:.6rem }
.kortti .tiet{ font:italic 400 .85rem/1.4 var(--serif); color:var(--muted) }
.kortti p{ color:var(--muted); font-size:1.02rem; margin-top:.5rem }
.kortti .lue{
  display:inline-block; margin-top:1.1rem;
  font:500 .72rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:var(--aqua);
}
.kortti-tulossa{ opacity:.55; pointer-events:none }

/* ── Artikkelisivut ─────────────────────────────────────── */

.artikkeli{ padding-top:8rem }
.artikkeli h1{ font-size:clamp(2rem,5.5vw,3rem); line-height:1.12; margin-bottom:1rem }
.murupolku{
  font:400 .72rem/1.6 var(--sans); letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:1.6rem; max-width:none;
}
.murupolku a{ color:var(--aqua) }
/* Reset nollaa marginit, joten leipätekstin kappaleväli on annettava
   erikseen — ilman sitä peräkkäiset kappaleet lukkiutuvat yhdeksi massaksi. */
.leipa p{ max-width:44em; margin-bottom:1.05em }
.leipa h2{ margin-top:2.8rem; font-size:clamp(1.5rem,3.5vw,2.1rem) }
.leipa ul,.leipa ol{ max-width:42em; margin:.8rem 0 .8rem 1.4rem }
.leipa li{ margin:.35rem 0 }
.leipa li::marker{ color:var(--aqua) }

/* Lajitietotaulu */
.lajitaulu{
  border-collapse:collapse; margin:1.6rem 0; max-width:34em; width:100%;
  font-size:1.02rem;
}
.lajitaulu th,.lajitaulu td{
  text-align:left; padding:.55rem .9rem .55rem 0;
  border-bottom:1px solid var(--line-2); vertical-align:top;
}
.lajitaulu th{ font:500 .74rem/1.6 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap }

/* Säädöslaatikko */
.saadosbox{
  background:var(--bg-2); border:1px solid var(--line);
  border-left:3px solid var(--aqua);
  padding:1.5rem 1.7rem; margin:2rem 0; max-width:44em;
}
.saadosbox h3{ font-family:var(--sans); font-weight:500; font-size:.82rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--aqua); margin-bottom:.7rem }
.saadosbox p{ font-size:1.02rem; margin:.4rem 0 }
.saadosbox .huom{ color:var(--muted); font-size:.92rem; margin-top:.8rem }

/* FAQ */
.ukk{ max-width:44em; margin-top:1rem }
.ukk details{ border-bottom:1px solid var(--line-2); padding:1rem 0 }
.ukk summary{
  cursor:pointer; font-family:var(--disp); font-size:1.12rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.ukk summary::after{ content:"+"; color:var(--aqua); font-size:1.3rem; flex:none }
.ukk details[open] summary::after{ content:"–" }
.ukk details p{ margin-top:.7rem; color:var(--muted) }

/* ── Kartta ─────────────────────────────────────────────── */

.karttasivu main{ padding-top:4.3rem }
#kartta{ height:calc(100vh - 4.3rem); min-height:30rem; background:var(--bg-2) }
.kartta-seloste{ background:var(--bg-2); border-top:1px solid var(--line-2) }
.leaflet-container{ font-family:var(--sans) }
.paikanna{
  position:absolute; z-index:800; right:.7rem; bottom:1.6rem;
  background:var(--aqua); color:var(--bg); border:0; cursor:pointer;
  font:500 .74rem/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  padding:.8rem 1.2rem; box-shadow:0 2px 12px rgba(0,0,0,.45);
}
.paikanna:hover{ background:var(--ink) }

/* ── Alaosat ────────────────────────────────────────────── */

.osio-vali{ border-top:1px solid var(--line-2) }
.osio-tumma{ background:var(--bg-2) }

.footer{
  border-top:1px solid var(--line-2); background:var(--bg-2);
  padding:3.5rem 1.5rem 2.5rem;
}
.footer-in{ max-width:var(--wrap); margin-inline:auto;
  display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)) }
.footer h4{ font:500 .74rem/1 var(--sans); letter-spacing:.24em;
  text-transform:uppercase; color:var(--aqua); margin-bottom:1rem }
.footer ul{ list-style:none }
.footer li{ margin:.45rem 0 }
.footer a{ color:var(--muted); font-size:1rem }
.footer a:hover{ color:var(--aqua) }
.footer p{ color:var(--muted); font-size:.98rem }
.footer-alaviite{
  max-width:var(--wrap); margin:2.5rem auto 0; padding-top:1.5rem;
  border-top:1px solid var(--line-2);
  font:400 .8rem/1.7 var(--sans); color:var(--muted);
}

/* ── Pikavastaus ────────────────────────────────────────── */

.pika{
  background:var(--bg-2); border:1px solid var(--line);
  border-left:3px solid var(--aqua);
  padding:1.4rem 1.7rem; margin:2rem 0 1rem; max-width:44em;
}
.pika-otsikko{
  font:500 .74rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--aqua); margin-bottom:.6rem;
}
.pika p{ font-size:1.08rem; margin:0 }

.tark{
  font:400 .86rem/1.6 var(--sans); color:var(--muted);
  margin:.4rem 0 1.4rem; max-width:44em;
}

/* ── Lähteet ────────────────────────────────────────────── */

.lahteet-wrap{ margin-top:3.2rem; padding-top:1.6rem; border-top:1px solid var(--line-2) }
.lahteet-wrap h2{ margin-top:0 }
.lahteet{ max-width:44em; margin:1rem 0 0 1.4rem; font-size:.98rem; color:var(--muted) }
.lahteet li{ margin:.5rem 0 }

/* ── Jatkolinkit ────────────────────────────────────────── */

.jatko{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line-2) }
.jatko h2{ margin-top:0; font-size:clamp(1.3rem,2.6vw,1.7rem) }
.jatko-linkit{ display:flex; flex-wrap:wrap; gap:.7rem 1.4rem; margin-top:1rem }
.jatko-link{
  font:500 .76rem/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding-bottom:.2rem;
}
.jatko-link:hover{ border-color:var(--ink) }

/* ── Lajihaku ja pikalinkit ─────────────────────────────── */

.lajihaku{ margin:2rem 0 1.5rem; max-width:34em }
.lajihaku-label{
  display:block; font:500 .72rem/1.5 var(--sans); letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.5rem;
}
.lajihaku-kentta{
  width:100%; background:var(--bg-2); color:var(--ink);
  border:1px solid var(--line); padding:.85rem 1rem;
  font:400 1.05rem/1.4 var(--sans);
}
.lajihaku-kentta:focus{ outline:2px solid var(--aqua); outline-offset:2px }
.lajihaku-kentta::placeholder{ color:var(--muted) }
.lajihaku-tulos{ font:400 .9rem/1.6 var(--sans); color:var(--aqua); margin-top:.6rem; min-height:1.6em }

.pikalinkit{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 3rem }
.pikalinkki{
  font:500 .7rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--line-2); padding:.5rem .85rem; color:var(--muted);
}
.pikalinkki:hover{ border-color:var(--aqua); color:var(--aqua) }

/* ── Lajiryhmät ─────────────────────────────────────────── */

.lajiryhma{ margin:0 0 4rem }
.lajiryhma h2{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap }
.lajiryhma .maara{
  font:400 .68rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
.ryhma-kuvaus{ color:var(--muted); margin:.3rem 0 1.6rem; max-width:44em }
.aakkoslista{ max-width:none; line-height:2.1; color:var(--muted) }
.lajikortti[hidden]{ display:none }

.kohdelista{ max-width:44em }
.kohdelista li{ margin:.5rem 0 }

/* ── Säädöstaulut ───────────────────────────────────────── */

.saadostaulu{ border-collapse:collapse; margin:.4rem 0 1rem; width:100%; max-width:38em }
.saadostaulu th,.saadostaulu td{
  text-align:left; padding:.45rem .9rem .45rem 0; vertical-align:top;
  border-bottom:1px solid var(--line-2); font-size:1rem;
}
.saadostaulu th{
  font:500 .7rem/1.6 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--aqua); white-space:nowrap; width:9.5rem;
}

.taulu-otsikko{ margin-top:2.6rem; font-size:1.2rem; color:var(--aqua) }
.taulu-vieritys{ overflow-x:auto; margin:.8rem 0 2rem; border:1px solid var(--line-2) }
.saadostaulukko{ border-collapse:collapse; width:100%; min-width:38rem; font-size:.98rem }
.saadostaulukko th,.saadostaulukko td{
  text-align:left; padding:.6rem .9rem; border-bottom:1px solid var(--line-2);
  vertical-align:top;
}
.saadostaulukko thead th{
  font:500 .7rem/1.6 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--aqua); background:var(--bg-2); position:sticky; top:0;
}
.saadostaulukko tbody tr:hover{ background:var(--bg-2) }
.saadostaulukko .tiet{ font:italic 400 .85em/1.4 var(--serif); color:var(--muted) }

.kasitteet{ max-width:44em; margin:1.2rem 0 }
.kasitteet dt{ font-family:var(--disp); font-size:1.08rem; color:var(--ink); margin-top:1.1rem }
.kasitteet dd{ color:var(--muted); margin:.2rem 0 0 }

/* ── HowTo-ohje ─────────────────────────────────────────── */

.ohje{
  background:var(--bg-2); border:1px solid var(--line-2);
  padding:1.8rem 1.9rem; margin:2.6rem 0; max-width:46em;
}
.ohje h2{ margin-top:0; font-size:clamp(1.3rem,2.8vw,1.8rem) }
.ohje h3{
  font:500 .74rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:var(--aqua); margin:1.6rem 0 .7rem;
}
.ohje-valineet{ margin-left:1.3rem; color:var(--muted) }
.ohje-vaiheet{ margin-left:1.3rem; counter-reset:none }
.ohje-vaiheet li{ margin:.75rem 0 }
.ohje-vaiheet strong{ color:var(--aqua); font-weight:500 }

/* ── Kausikalenteri ─────────────────────────────────────── */

.kuukausi{ margin:0 0 2.8rem; padding-bottom:2rem; border-bottom:1px solid var(--line-2) }
.kuukausi h2{ margin-top:0; display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap }
.kuukausi-otsikko{
  font:400 .78rem/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.kuukausi-vinkki{
  border-left:2px solid var(--aqua); padding-left:1rem; margin-top:.9rem;
  color:var(--muted); font-size:1.02rem;
}
.kuukausi-vinkki strong{ color:var(--aqua); font-weight:500 }

/* ── Pikkuyksityiskohdat ────────────────────────────────── */

.h1-tiet{ font-style:italic; color:var(--muted); font-size:.5em; white-space:nowrap }
/* Karttasivun pääotsikko: ruudunlukijalle ja hakukoneelle, ei silmälle. */
.piilo-otsikko{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.koordinaatit{ font-size:.9rem; color:var(--muted) }
.summary-lisa{ color:var(--muted); font-size:.85em }
.footer-motto{ font-family:var(--disp); font-style:italic; color:var(--aqua); margin-top:.7rem }
.hero-meta{ font:400 .8rem/1.6 var(--sans); color:var(--muted); margin-top:1.8rem }

/* ── Paljastusanimaatio ─────────────────────────────────── */

.js .reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease) }
.js .reveal.nakyy, .reveal-fallback .reveal{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .js .reveal{ opacity:1; transform:none; transition:none }
}