/* Kopio tehtaan kanonisesta lahteesta:
 * _dev-tools/claude-home/skills/uusi-sivusto/templates/tehdas-lomake/
 * Versio 2026-09-12. Korjaa viat ENSIN lahteeseen, ei tahan kopioon.
 */

:root {
  /* Mitattu Elementorin omasta lomakkeesta renderoimalla raakalahde
     paikallisesti (ei kuormaa asiakkaan palvelimelle). Korvaavan komponentin
     on vietava sama tila kuin korvatun, muuten kaikki sen alapuolella
     siirtyy ja sivu on eri korkuinen kuin lahde. */
  --ah-kentta-korkeus: 53px;
  --ah-tekstialue-korkeus: 96px;
  /* Mitattu: tehtaan nappi on 31 px korkeampi kuin Elementorin, koska
     kosketuskohde on 44 px. Erotus otetaan pois marginaalista, jotta
     lomake vie saman tilan kuin korvattu. */
  --ah-toiminnot-marginaali: 1px;
}
.ah-lomake,
.ah-lomake *,
.ah-lomake *::before,
.ah-lomake *::after {
  box-sizing: border-box;
}

.ah-lomake {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #575757;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.ah-lomake__kentat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.ah-lomake__kentta {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.ah-lomake__kentta--puolikas {
  grid-column: span 1;
}

.ah-lomake__selite,
.ah-lomake__ansa {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ah-lomake .ah-lomake__ohjain {
  display: block;
  width: 100%;
  height: var(--ah-kentta-korkeus, 52px);
  min-height: var(--ah-kentta-korkeus, 52px);
  margin: 0;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  outline: 0;
  background: #F5F5F5;
  box-shadow: none;
  color: #212529;
  caret-color: #3D2976;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  appearance: none;
  -webkit-appearance: none;
}

.ah-lomake .ah-lomake__ohjain--tekstialue {
  height: auto;
  min-height: var(--ah-tekstialue-korkeus, 136px);
  padding-top: 16px;
  padding-bottom: 16px;
  border-radius: 26px;
  overflow: auto;
  resize: vertical;
}

.ah-lomake .ah-lomake__ohjain::placeholder {
  color: #575757;
  opacity: 1;
}

.ah-lomake .ah-lomake__ohjain:focus {
  border-color: #3D2976;
  outline: 3px solid #3D2976;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #FFBC7D;
}

.ah-lomake .ah-lomake__ohjain[aria-invalid="true"],
.ah-lomake__kentta--virheellinen .ah-lomake__ohjain {
  border-color: #3D2976;
  box-shadow: inset 0 0 0 1px #3D2976;
}

.ah-lomake .ah-lomake__ohjain[aria-invalid="true"]:focus,
.ah-lomake__kentta--virheellinen .ah-lomake__ohjain:focus {
  outline: 3px solid #212529;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #FFBC7D;
}

/* Tyhja virhepaikka ei saa varata tilaa: kuusi tyhjaa kappaletta kasvattaa
   lomaketta kymmenilla pikseleilla, ja kloonissa se siirtaa kaiken lomakkeen
   alapuolella. Tila varataan vasta kun viesti on olemassa. */
.ah-lomake__virhe:empty {
  display: none;
}

.ah-lomake__virhe {
  display: block;
  min-height: 0;
  margin: 0 22px;
  padding: 0;
  color: #212529;
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.ah-lomake__virhe:not(:empty) {
  margin-top: 6px;
}

.ah-lomake__toiminnot {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  /* Kloonissa tasta kompensoidaan se, etta tehtaan nappi on korkeampi kuin
     korvattu: kosketuskohteen 44 px minimi ei jousta, joten sovitus tehdaan
     marginaalista eika napin koosta. */
  margin: var(--ah-toiminnot-marginaali, 16px) 0 0;
  padding: 0;
}

.ah-lomake .ah-lomake__laheta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-width: 154px;
  min-height: 52px;
  margin: 0;
  padding: 10px 18px 10px 24px;
  border: 2px solid #3D2976;
  border-radius: 999px;
  outline: 0;
  background: #3D2976;
  box-shadow: none;
  color: #F5F5F5;
  font-family: "Archivo", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.ah-lomake__laheta-teksti {
  display: inline-block;
}

.ah-lomake__laheta-kuvake {
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: #FFBC7D;
  pointer-events: none;
}

.ah-lomake .ah-lomake__laheta:focus {
  outline: 3px solid #212529;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #FFBC7D;
}

.ah-lomake .ah-lomake__laheta:active {
  transform: translateY(1px);
}

.ah-lomake .ah-lomake__laheta:disabled,
.ah-lomake .ah-lomake__laheta[aria-disabled="true"] {
  opacity: 1;
  cursor: not-allowed;
}

.ah-lomake--lahettaa .ah-lomake__laheta,
.ah-lomake .ah-lomake__laheta[aria-busy="true"] {
  cursor: progress;
}

.ah-lomake__tilaviesti {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: #212529;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ah-lomake__tilaviesti:not(:empty) {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: 14px;
  padding: 8px 0 8px 14px;
  border-left: 4px solid #3D2976;
}

.ah-lomake__tilaviesti--lahettaa:not(:empty) {
  border-left-color: #BABABA;
  color: #575757;
}

.ah-lomake__tilaviesti--onnistui:not(:empty) {
  border-left-color: #3D2976;
  color: #3D2976;
}

.ah-lomake__tilaviesti--epaonnistui:not(:empty) {
  border-left-color: #212529;
  color: #212529;
}

.ah-lomake--onnistui .ah-lomake__tilaviesti,
.ah-lomake--epaonnistui .ah-lomake__tilaviesti {
  font-weight: 600;
}

@media (hover: hover) {
  .ah-lomake .ah-lomake__laheta:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: #212529;
    background: #212529;
  }
}

@media (max-width: 680px) {
  .ah-lomake__kentat {
    grid-template-columns: minmax(0, 1fr);
  }

  .ah-lomake__kentta--puolikas {
    grid-column: 1 / -1;
  }
}