/* Ohjeet-sivut (penni.pro/ohjeet/). Perusasiat (fontti, värit, valikko, alatunniste) tulevat site.css:stä. */
.navlinkit a[aria-current='page'] { background: white; color: var(--violetti); }

.ohje-runko {
  display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 4.5rem;
  padding: 2.5rem 0 6rem; border-top: 1px solid var(--raja);
}

/* sivupalkki */
.ohje-valikko { position: sticky; top: 1.5rem; align-self: start; max-height: calc(100vh - 3rem); overflow-y: auto; padding-right: .5rem; }
.ohje-valikko h2 { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--himmea); margin: 1.6rem 0 .45rem; }
.ohje-valikko h2:first-child { margin-top: 0; }
.ohje-valikko ul { list-style: none; margin: 0; padding: 0; }
.ohje-valikko a {
  display: block; padding: .38rem .75rem; margin-left: -.75rem; border-radius: .5rem;
  font-size: .9rem; line-height: 1.4; text-decoration: none; color: var(--muste);
}
.ohje-valikko a:hover { background: #f0f0f3; }
.ohje-valikko a[aria-current='page'] { background: #f0effb; color: var(--violetti); font-weight: 550; }
.ohje-valikko .valikon-etusivu { font-weight: 550; margin-bottom: .2rem; }
.ohje-pudotus { display: none; }

/* sisältö */
.ohje { max-width: 44rem; }
.ohje .murut { font-size: .8125rem; color: var(--himmea); margin-bottom: 1.2rem; }
.ohje .murut a { text-decoration: none; }
.ohje .murut a:hover { text-decoration: underline; }
.ohje h1 { font-size: clamp(2.3rem, 4vw, 3.2rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.08; }
.ohje .johdanto { font-size: 1.125rem; color: var(--himmea); margin: 1.1rem 0 2.4rem; line-height: 1.7; max-width: 36em; }
.ohje h2 { font-size: 1.6rem; letter-spacing: -.035em; line-height: 1.2; margin: 3rem 0 .9rem; padding-top: .2rem; }
.ohje h3 { font-size: 1.1rem; letter-spacing: -.015em; margin: 2rem 0 .5rem; }
.ohje p, .ohje ul, .ohje ol, .ohje dl { margin: 0 0 1rem; }
.ohje ul, .ohje ol { padding-left: 1.3rem; }
.ohje li { margin-bottom: .4rem; }
.ohje li::marker { color: var(--violetti); }
.ohje a { color: var(--violetti); text-underline-offset: 3px; }
.ohje strong { font-weight: 600; }
.ohje .nappi-nimi { font-weight: 600; white-space: nowrap; }
.ohje kbd {
  font-family: var(--monofontti); font-size: .8em; padding: .1rem .4rem; border-radius: .35rem;
  background: white; border: 1px solid #d8d8e1; border-bottom-width: 2px; white-space: nowrap;
}

/* numeroidut vaiheet */
.ohje ol.vaiheet { list-style: none; padding: 0; counter-reset: vaihe; }
.ohje ol.vaiheet > li {
  counter-increment: vaihe; position: relative; padding: 0 0 1rem 2.6rem; margin: 0;
}
.ohje ol.vaiheet > li::before {
  content: counter(vaihe); position: absolute; left: 0; top: .05rem;
  width: 1.65rem; height: 1.65rem; border-radius: 50%; display: grid; place-items: center;
  background: #f0effb; color: var(--violetti); font-size: .8rem; font-weight: 600;
}

/* huomio- ja vinkkilaatikot */
.ohje .vinkki, .ohje .huomio {
  padding: 1rem 1.2rem; border-radius: .8rem; margin: 1.4rem 0; font-size: .95rem;
  background: #f0effb; border: 1px solid #dddaf7;
}
.ohje .huomio { background: #fff8eb; border-color: #f6dfb3; }
.ohje .vinkki > :last-child, .ohje .huomio > :last-child { margin-bottom: 0; }
.ohje .vinkki strong:first-child, .ohje .huomio strong:first-child { display: block; margin-bottom: .2rem; }

/* taulukot */
.ohje table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: .925rem; }
.ohje th, .ohje td { text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--raja); vertical-align: top; }
.ohje th { font-weight: 600; font-size: .8125rem; color: var(--himmea); }
.ohje .taulukko { overflow-x: auto; }

/* sanasto */
.ohje dl.sanasto dt { font-weight: 600; margin-top: 1.1rem; }
.ohje dl.sanasto dd { margin: .2rem 0 0; color: var(--himmea); }

/* edellinen / seuraava */
.ohje-selaus { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--raja); }
.ohje-selaus a {
  display: block; padding: 1rem 1.2rem; border: 1px solid var(--raja); border-radius: .9rem;
  text-decoration: none; background: white; color: var(--muste);
}
.ohje-selaus a:hover { border-color: #d3d0f7; background: #f8f8fe; }
.ohje-selaus small { display: block; font-size: .8rem; color: var(--himmea); margin-bottom: .15rem; }
.ohje-selaus .seuraava { grid-column: 2; text-align: right; }
.ohje-palaute { margin-top: 2rem; font-size: .875rem; color: var(--himmea); }
.ohje-palaute a { color: var(--violetti); }

/* ohjeiden etusivu */
.ohje-etusivu { max-width: none; }
.ohje-ryhmat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.ohje-ryhma { padding: 1.5rem 1.6rem; background: white; border: 1px solid var(--raja); border-radius: 1.1rem; }
.ohje-ryhma h2 { font-size: 1.2rem; margin: 0 0 .3rem; letter-spacing: -.02em; padding: 0; }
.ohje-ryhma > p { font-size: .9rem; color: var(--himmea); margin-bottom: .9rem; }
.ohje-ryhma ul { list-style: none; padding: 0; margin: 0; }
.ohje-ryhma li { margin: 0; border-top: 1px solid var(--raja); }
.ohje-ryhma li a { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; text-decoration: none; color: var(--muste); font-size: .95rem; }
.ohje-ryhma li a span { color: var(--himmea); font-size: .85rem; text-align: right; }
.ohje-ryhma li a:hover { color: var(--violetti); }

@media (max-width: 1050px) {
  .ohje-runko { grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; }
}
@media (max-width: 760px) {
  .ohje-runko { grid-template-columns: 1fr; gap: 0; padding-top: 1rem; }
  .ohje-valikko.levea { display: none; }
  .ohje-pudotus { display: block; margin-bottom: 1.8rem; border: 1px solid var(--raja); border-radius: .8rem; background: white; }
  .ohje-pudotus summary { cursor: pointer; padding: .8rem 1rem; font-size: .9rem; font-weight: 550; }
  .ohje-pudotus .ohje-valikko { position: static; max-height: none; padding: 0 1rem 1rem 1.75rem; }
  .ohje-ryhmat { grid-template-columns: 1fr; }
  .ohje-ryhma li a { flex-direction: column; gap: 0; }
  .ohje-ryhma li a span { text-align: left; }
  .ohje-selaus { grid-template-columns: 1fr; }
  .ohje-selaus .seuraava { grid-column: 1; }
}
.ohje code { font-family: var(--monofontti); font-size: .85em; padding: .05rem .3rem; border-radius: .3rem; background: #f0f0f3; }