/* Pienet lisäykset Base44:n oman tyylin päälle. Muu ulkoasu on assets/base44.css:ssä. */
html.dark{color-scheme:dark;background:#000}
html.dark body{background:#000}
html:not(.js) .lk-reveal{opacity:1;transform:none}
[hidden]{display:none!important}
.mobiilivalikko{display:flex;flex-direction:column;gap:2px;padding:12px 28px 24px;border-top:1px solid hsl(var(--border));background:hsl(var(--background));font-weight:600;font-size:15px}
.mobiilivalikko a,.mobiilivalikko button{display:block;width:100%;text-align:left;padding:12px 0;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.mobiilivalikko .tarjous{margin-top:10px;width:max-content;padding:10px 18px;border-radius:2px;background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-size:12px;font-weight:700;letter-spacing:.025em;text-transform:uppercase}
[data-liuku]:focus-visible{outline:2px solid hsl(var(--foreground));outline-offset:2px}

/* Sisältöön ohitus näppäimistöllä */
.ohita{position:absolute;left:-999px;top:8px;z-index:70;padding:10px 14px;background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:700}
.ohita:focus{left:12px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid hsl(var(--foreground));outline-offset:2px}

/* Tabletilla päävalikko ei mahdu riviin: hampurilainen käyttöön 1100 px asti */
@media(max-width:1099px){
  header nav.hidden{display:none}
  header button.md\:hidden{display:block}
  .mobiilivalikko{display:flex}
}
@media(min-width:1100px){.mobiilivalikko{display:none}}
@media(min-width:768px) and (max-width:1099px){.mobiilivalikko[hidden]{display:none!important}}

/* Vaaleassa teemassa valkoinen hover peitti napin tekstin */
html:not(.dark) .hover\:bg-white:hover{background-color:hsl(var(--primary));opacity:.85}
input::placeholder,textarea::placeholder{color:hsl(var(--muted-foreground))}

/* Puhelimella sormi osuu */
@media(max-width:767px){
  #valikko-nappi{width:44px;height:44px;margin-right:-10px;display:grid;place-items:center}
  [data-askel]{min-width:44px;min-height:44px}
  #l-maara{min-height:44px}
  a.rounded-sm,button.rounded-sm{min-height:44px;display:inline-flex;align-items:center}
  a.mt-4.inline-block{display:inline-flex}
  a.flex[href^="tel:"],a.flex[href^="mailto:"]{min-height:44px;min-width:0;overflow-wrap:anywhere}
  a.block[href^="tel:"],a.block[href^="mailto:"]{padding-block:8px;line-height:1.4}
  main a.inline-flex{min-height:44px}
  footer a:not(.block){display:inline-block;padding-block:8px}
  input,textarea{font-size:16px!important}
}
.cursor-ew-resize>span{font-size:12px}
#l-maara{-moz-appearance:textfield;appearance:textfield}
#l-maara::-webkit-outer-spin-button,#l-maara::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#l-maara:focus-visible{outline-offset:-2px}

/* Työt-sivun kuvakortit */
.lk-pysty{aspect-ratio:768/944}
.lk-kuvat{display:grid;gap:2px;background:hsl(var(--border))}
.lk-kuvat img{display:block;width:100%;height:100%;object-fit:cover}
.lk-kaksi{grid-template-columns:1fr 1fr}
.lk-kaksi img{aspect-ratio:3/4}
.lk-putket{grid-template-columns:1fr 1fr}
.lk-putket img{aspect-ratio:3/2}
.lk-putket img:nth-child(3),.lk-putket img:nth-child(4){aspect-ratio:3/4}
.lk-putket img:nth-child(5){grid-column:1/3;object-position:50% 30%}
@media(min-width:768px){
  .lk-putket{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;aspect-ratio:3/1}
  .lk-putket img,.lk-putket img:nth-child(3),.lk-putket img:nth-child(4),.lk-putket img:nth-child(5){aspect-ratio:auto;min-height:0}
  .lk-putket img:nth-child(1){grid-area:1/1}
  .lk-putket img:nth-child(2){grid-area:2/1}
  .lk-putket img:nth-child(3){grid-area:1/2/3/3}
  .lk-putket img:nth-child(4){grid-area:1/3/3/4}
  .lk-putket img:nth-child(5){grid-area:1/4/3/5;object-position:50% 50%}
}
.lk-liu{aspect-ratio:4/5}
.lk-vertailut{display:grid;gap:2px;background:hsl(var(--border));grid-template-columns:1fr}
@media(min-width:768px){.lk-vertailut{grid-template-columns:repeat(3,1fr)}}

/* Lomakkeen roskapostiansa */
.lk-ansa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}