/*
  Kynsitukku – blog.css
  Yleiset tyylit blogiartikkeleille (mm. Milky Nails vaihe vaiheelta)
  - Typografia ja värit
  - Hero-kuva, figcaptionit
  - Sisällysluettelo (toc)
  - Callout-, tip- ja button-komponentit
  - Responsiivinen layout + printtiystävällisyys
*/

:root{
  --ink:#141414;          /* pääteksti */
  --muted:#5a5a5a;        /* apusävyt */
  --bg:#ffffff;           /* tausta */
  --soft:#fafafa;         /* pehmeä laatikkotausta */
  --border:#e8e8e8;       /* reunaviivat */
  --brand:#111111;        /* brändimusta */
  --radius:14px;          /* korttien kulmat */
  --shadow:0 6px 28px rgba(0,0,0,.06); /* varjo */
  --maxw:900px;           /* lukuleveys */
}

/* Perusrunko */
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--maxw);margin-inline:auto;padding:clamp(16px,3vw,28px)}

/* Linkit */
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Otsikot & teksti */
h1{font-size:clamp(26px,4.5vw,38px);line-height:1.2;margin:8px 0 6px}
h2{font-size:clamp(20px,3.2vw,26px);line-height:1.28;margin:28px 0 8px}
h3{font-size:3.15rem;margin:16px 0 6px;line-height: 30px}
.lead{color:var(--muted);max-width:70ch}
.meta{color:var(--muted);font-size:.92rem;margin:8px 0 18px}

/* Murupolku */
.breadcrumbs{font-size:1.92rem;color:var(--muted);margin:10px 0}
.breadcrumbs a{color:var(--muted)}

/* Hero-kuva */
.hero{padding:20px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#b2c2f2}
.hero img{display:block;width:100%;height:auto}

/* Prose-alue */
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px;padding-left:22px}
.prose li{margin:4px 0}

/* Kuvatekstit */
figure{margin:18px 0}
figcaption{font-size:.92rem;color:var(--muted);margin-top:6px}

/* Kaksipalstainen asettelu isolla näytöllä */
.grid-2{display:grid;gap:16px}
@media(min-width:860px){.grid-2{grid-template-columns:2fr 1fr}}

/* Sisällysluettelo */
.toc{border:1px dashed var(--border);border-radius:12px;padding:12px;background:#fff;margin:12px 0}
.toc strong{display:block;margin-bottom:6px}
.toc a{display:block;padding:6px 0}
.toc a:focus{outline:2px solid #000;outline-offset:2px}

/* Vinkkilaatikko (tip) */
.tip{border-left:4px solid var(--brand);background:#b2c2f2;border:1px solid var(--border);border-left-color:var(--brand);padding:12px;border-radius:10px;margin:14px 0}

/* Callout + työkalulista */
.callout{border:1px solid var(--border);border-radius:12px;padding:16px;background:linear-gradient(180deg,#fff,#fafafa)}
/*.tools{display:grid;gap:8px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fcfcfc}*/
.tools{display:grid;gap:8px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#b2c2f2;margin:20px;}

/* Napit */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:10px 14px;font-weight:600;border:1px solid var(--border);background:#fff;color:var(--ink);transition:box-shadow .2s ease, transform .06s ease}
.btn:hover{box-shadow:0 4px 18px rgba(0,0,0,.08);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Sivupalkki */
aside ul{list-style:none;padding:0;margin:0}
aside li{margin:8px 0}

/* Fokus näkyviin näppäimistölle */
:focus-visible{outline:2px solid #000;outline-offset:2px}

/* Pienet util-luokat */
.muted{color:var(--muted)}
.hidden{display:none !important}
.center{text-align:center}

/* Printti */
@media print{
  .breadcrumbs,.toc,.btn,.cta{display:none!important}
  .container{max-width:100%;padding:0}
  a{text-decoration:none;color:#000}
  body{background:#fff;color:#000}
}

/* Tumma tila (valinnainen – aktivoituu, jos sivusto käyttää data-theme="dark") */
:root[data-theme="dark"]{
  --bg:#0f0f0f;--ink:#f4f4f4;--muted:#b6b6b6;--soft:#161616;--border:#2a2a2a;--brand:#f4f4f4;
}
:root[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .toc,
:root[data-theme="dark"] .callout,
:root[data-theme="dark"] .tools{background:#141414;border-color:#2a2a2a}
:root[data-theme="dark"] .btn{background:#1a1a1a;border-color:#2a2a2a;color:#f4f4f4}
:root[data-theme="dark"] figcaption{color:#b6b6b6}