/*
 * SCR: WS Form -lomakkeiden ulkoasu.
 *
 * WS Formin omat tyylit (base, layout, styler, button, checkbox, select, file ...) on kytketty pois
 * asetuksista css_layout ja css_style, joten tämä tiedosto hoitaa sekä toiminnalliset säännöt
 * (ruudukko, piilotus, virheilmoitusten näyttö) että ulkoasun sivuston tokeneilla.
 *
 * Säännöt ovat kerrosten ulkopuolella, koska scr-foundation.css:n kerroksettomat WS Form -säännöt
 * pitää voida ohittaa. Painike seuraa .c-btn-ilmettä, kentät uutiskirjeen ja osioiden kenttiä.
 */

/* ── Lomake ja ruudukko (korvaa WS Formin layout-tyylit) ── */

.wsf-form {
  --wsf-gap: calc(var(--u) * 20);
  --wsf-field-border: color-mix(in oklch, var(--color-text) 35%, transparent);
  --wsf-danger: var(--color-red-600);

  box-sizing: border-box;
  accent-color: var(--theme-brand);

  & *,
  & *::before,
  & *::after { box-sizing: border-box; }

  & .wsf-section,
  & .wsf-fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  & .wsf-grid {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--wsf-gap) / -2);
  }

  /* Leveys tulee sarakeluokasta (--wsf-c), oletuksena koko rivi */
  & .wsf-tile {
    position: relative;
    flex: 0 0 calc(var(--wsf-c, 12) * 100% / 12);
    inline-size: 100%;
    max-inline-size: calc(var(--wsf-c, 12) * 100% / 12);
    padding-inline: calc(var(--wsf-gap) / 2);
  }

  & .wsf-field-wrapper { margin-block-end: var(--wsf-gap); }
  & .wsf-field-wrapper:is([data-type="html"], [data-type="texteditor"], [data-type="divider"], [data-type="message"]) { margin-block-end: 0; }

  & .wsf-bottom { align-self: flex-end; }
  & .wsf-top { align-self: flex-start; }
  & .wsf-middle { align-self: center; }

  & .wsf-hidden { display: none !important; }

  & .wsf-hidden-element {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* Sarakeleveydet WS Formin taitepisteillä (576, 768, 992, 1200 px) */
.wsf-extra-small-1 { --wsf-c: 1; } .wsf-extra-small-2 { --wsf-c: 2; } .wsf-extra-small-3 { --wsf-c: 3; }
.wsf-extra-small-4 { --wsf-c: 4; } .wsf-extra-small-5 { --wsf-c: 5; } .wsf-extra-small-6 { --wsf-c: 6; }
.wsf-extra-small-7 { --wsf-c: 7; } .wsf-extra-small-8 { --wsf-c: 8; } .wsf-extra-small-9 { --wsf-c: 9; }
.wsf-extra-small-10 { --wsf-c: 10; } .wsf-extra-small-11 { --wsf-c: 11; } .wsf-extra-small-12 { --wsf-c: 12; }

@media (min-width: 576px) {
  .wsf-small-1 { --wsf-c: 1; } .wsf-small-2 { --wsf-c: 2; } .wsf-small-3 { --wsf-c: 3; }
  .wsf-small-4 { --wsf-c: 4; } .wsf-small-5 { --wsf-c: 5; } .wsf-small-6 { --wsf-c: 6; }
  .wsf-small-7 { --wsf-c: 7; } .wsf-small-8 { --wsf-c: 8; } .wsf-small-9 { --wsf-c: 9; }
  .wsf-small-10 { --wsf-c: 10; } .wsf-small-11 { --wsf-c: 11; } .wsf-small-12 { --wsf-c: 12; }
}

@media (min-width: 768px) {
  .wsf-medium-1 { --wsf-c: 1; } .wsf-medium-2 { --wsf-c: 2; } .wsf-medium-3 { --wsf-c: 3; }
  .wsf-medium-4 { --wsf-c: 4; } .wsf-medium-5 { --wsf-c: 5; } .wsf-medium-6 { --wsf-c: 6; }
  .wsf-medium-7 { --wsf-c: 7; } .wsf-medium-8 { --wsf-c: 8; } .wsf-medium-9 { --wsf-c: 9; }
  .wsf-medium-10 { --wsf-c: 10; } .wsf-medium-11 { --wsf-c: 11; } .wsf-medium-12 { --wsf-c: 12; }
}

@media (min-width: 992px) {
  .wsf-large-1 { --wsf-c: 1; } .wsf-large-2 { --wsf-c: 2; } .wsf-large-3 { --wsf-c: 3; }
  .wsf-large-4 { --wsf-c: 4; } .wsf-large-5 { --wsf-c: 5; } .wsf-large-6 { --wsf-c: 6; }
  .wsf-large-7 { --wsf-c: 7; } .wsf-large-8 { --wsf-c: 8; } .wsf-large-9 { --wsf-c: 9; }
  .wsf-large-10 { --wsf-c: 10; } .wsf-large-11 { --wsf-c: 11; } .wsf-large-12 { --wsf-c: 12; }
}

@media (min-width: 1200px) {
  .wsf-extra-large-1 { --wsf-c: 1; } .wsf-extra-large-2 { --wsf-c: 2; } .wsf-extra-large-3 { --wsf-c: 3; }
  .wsf-extra-large-4 { --wsf-c: 4; } .wsf-extra-large-5 { --wsf-c: 5; } .wsf-extra-large-6 { --wsf-c: 6; }
  .wsf-extra-large-7 { --wsf-c: 7; } .wsf-extra-large-8 { --wsf-c: 8; } .wsf-extra-large-9 { --wsf-c: 9; }
  .wsf-extra-large-10 { --wsf-c: 10; } .wsf-extra-large-11 { --wsf-c: 11; } .wsf-extra-large-12 { --wsf-c: 12; }
}

/* ── Otsikot, ohjeet ja virheilmoitukset ── */

.wsf-form.wsf-form {
  & label.wsf-label,
  & div.wsf-label {
    display: block;
    margin-block-end: calc(var(--u) * 4);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
  }

  & .wsf-text-danger { color: var(--wsf-danger); }
  & .wsf-required-wrapper strong { font-weight: var(--weight-semibold); }

  & .wsf-help {
    display: block;
    margin-block-start: calc(var(--u) * 6);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }

  & .wsf-help-pre { margin-block: 0 calc(var(--u) * 6); }

  & .wsf-invalid-feedback {
    display: none;
    margin-block-start: calc(var(--u) * 6);
    color: var(--wsf-danger);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
  }

  /* WS Form lisää lomakkeelle .wsf-validated-luokan ensimmäisen lähetysyrityksen jälkeen */
  &.wsf-validated :is(.wsf-field:invalid, .wsf-field.wsf-invalid, [role="radiogroup"][data-wsf-invalid], fieldset[data-wsf-invalid]) ~ .wsf-invalid-feedback {
    display: block;
  }

  /* Vapaa HTML-kenttä (esim. lomakkeen väliotsikot) */
  & [data-type="html"] [data-html] {
    margin-block: calc(var(--u) * 8) calc(var(--u) * 16);

    & > * + * { margin-block-start: calc(var(--u) * 8); }
  }
}

/* ── Kentät ── */

.wsf-form.wsf-form :is(input, textarea, select).wsf-field:not([type="checkbox"], [type="radio"]) {
  display: block;
  inline-size: 100%;
  min-block-size: calc(var(--u) * 48);
  margin: 0;
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  border: 1px solid var(--wsf-field-border);
  border-radius: var(--radius-s);
  background-color: var(--color-white);
  box-shadow: none;
  color: var(--color-black);
  font-family: inherit;
  font-size: calc(var(--u) * 16);
  line-height: var(--leading-normal);
  transition: border-color var(--duration-fast) var(--ease);

  &::placeholder { color: var(--color-grey-700); opacity: 0.7; }

  @media (hover: hover) {
    &:hover:not(:disabled, :focus) { border-color: var(--color-grey-700); }
  }

  &:focus-visible {
    border-color: var(--color-focus);
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  &:disabled,
  &[readonly] {
    background-color: var(--color-beige-50);
    color: var(--color-grey-700);
    cursor: not-allowed;
  }
}

.wsf-form.wsf-form textarea.wsf-field {
  min-block-size: calc(var(--u) * 110);
  resize: vertical;
}

/* Valinta: oma nuoli, WS Formin nuolielementti piiloon. Kaksoisluokka ohittaa
   scr-foundation.css:n background-lyhenteen, joka muuten nollaisi kuvan. */
.wsf-form.wsf-form select.wsf-field.wsf-field:not([multiple], [size]) {
  appearance: none;
  padding-inline-end: calc(var(--u) * 40);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  background-position: right calc(var(--u) * 14) center;
  background-repeat: no-repeat;
  background-size: calc(var(--u) * 12) auto;
  cursor: pointer;
}

.wsf-form .wsf-select-arrow { display: none; }

/* Virheellinen kenttä lähetysyrityksen jälkeen */
.wsf-form.wsf-validated :is(input, textarea, select).wsf-field:not([type="checkbox"], [type="radio"]):is(:invalid, .wsf-invalid) {
  border-color: var(--wsf-danger);
}

/* ── Valintaruudut ja valintanapit ── */

.wsf-form.wsf-form :is([data-row-checkbox], [data-row-radio]) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: calc(var(--u) * 10);
  align-items: start;

  & + :is([data-row-checkbox], [data-row-radio]) { margin-block-start: calc(var(--u) * 8); }

  & label.wsf-label {
    margin: 0;
    font-weight: var(--weight-medium);
    cursor: pointer;
  }

  & .wsf-invalid-feedback { grid-column: 2; }
}

.wsf-form.wsf-form input.wsf-field:is([type="checkbox"], [type="radio"]) {
  inline-size: calc(var(--u) * 20);
  block-size: calc(var(--u) * 20);
  margin: calc(var(--u) * 1) 0 0;
  cursor: pointer;

  &:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }
}

.wsf-form.wsf-validated input.wsf-field:is([type="checkbox"], [type="radio"]):invalid {
  outline: 1px solid var(--wsf-danger);
  outline-offset: 1px;
}

/* ── Liitetiedosto (DropzoneJS) ── */

.wsf-form.wsf-form .dropzone {
  padding: calc(var(--u) * 18) calc(var(--u) * 12);
  border: 1px dashed var(--wsf-field-border);
  border-radius: var(--radius-s);
  background-color: var(--color-white);
  color: var(--color-grey-700);
  font-size: var(--text-s);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease);

  @media (hover: hover) {
    &:hover { border-color: var(--color-grey-700); }
  }

  &.dz-drag-hover { border-color: var(--color-focus); border-style: solid; }
  &.dz-started .dz-message { display: none; }

  & .wsf-dropzonejs-previews { pointer-events: none; text-align: start; }
  & .wsf-dropzonejs-preview { pointer-events: all; cursor: default; }
  & .wsf-dropzonejs-preview img[data-dz-thumbnail]:not([src]) { display: none !important; }
  & .wsf-dropzonejs-preview .wsf-help { margin-block-start: calc(var(--u) * 2); color: var(--color-text); }
  & .wsf-dropzonejs-preview [data-dz-name] { font-size: var(--text-s); font-weight: var(--weight-semibold); }
  & .wsf-dropzonejs-preview [data-dz-remove] { color: var(--color-link); font-weight: var(--weight-semibold); }

  & .wsf-progress {
    block-size: calc(var(--u) * 4);
    margin-block-start: calc(var(--u) * 6);
    overflow: hidden;
    border-radius: var(--radius-pill);
    background-color: var(--color-border);
  }

  & .wsf-upload { block-size: 100%; background-color: var(--theme-brand); }
  & .dz-complete .wsf-progress { display: none; }
  & .wsf-invalid-feedback { display: block; }
}

.wsf-form.wsf-validated input.wsf-field[data-file-type="dropzonejs"]:invalid ~ .dropzone {
  border-color: var(--wsf-danger);
}

/* ── Lähetyspainike: sama ilme kuin .c-btn ── */

.wsf-form.wsf-form button.wsf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: calc(var(--u) * 48);
  margin: 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 24);
  border: 0 solid transparent;
  border-radius: var(--radius-pill);
  background: var(--action-bg);
  box-shadow: none;
  color: var(--action-text);
  font-family: var(--action-font);
  font-size: calc(var(--u) * 16);
  font-weight: var(--action-weight);
  line-height: var(--leading-normal);
  text-align: center;
  text-transform: var(--action-transform);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);

  @media (hover: hover) {
    &:hover { background: var(--action-bg-hover); }
  }

  &:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &.wsf-button-full { inline-size: 100%; }
}

.wsf-form.wsf-form-post-lock-progress,
.wsf-form.wsf-form-post-lock-progress button.wsf-button { cursor: progress; }

/* ── Lähetyksen jälkeinen viesti ── */

.wsf-alert {
  margin-block: 0 var(--space-s);
  padding: var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  background-color: var(--color-card);
  color: var(--color-black);
  font-size: var(--text-m);
  line-height: var(--leading-normal);

  & > :first-child { margin-block-start: 0; }
  & > :last-child { margin-block-end: 0; }
  & a { color: inherit; text-decoration: underline; }

  &.wsf-alert-danger { border-color: var(--color-red-600); color: var(--color-red-600); }
}

/* ── Uutiskirje footerissa: värillinen pinta ──
   Kenttä ja painike seuraavat .c-newsletter__input- ja .c-newsletter__submit-ilmettä. */

.c-newsletter .wsf-form.wsf-form input.wsf-field:not([type="checkbox"], [type="radio"]) {
  border-color: var(--color-beige-100);
  background-color: transparent;
  color: var(--color-text);
  padding: calc(var(--u) * 8.5) calc(var(--u) * 10);

  &::placeholder { color: var(--color-text); opacity: 0.8; }

  @media (hover: hover) {
    &:hover:not(:disabled, :focus) { border-color: var(--color-beige-300); }
  }
}

.c-newsletter .wsf-form.wsf-form button.wsf-button {
  min-inline-size: calc(var(--u) * 189);
  border-radius: calc(var(--u) * 50);
}

.c-newsletter .wsf-form.wsf-form {
  & .wsf-invalid-feedback { color: var(--color-text); }

  & .wsf-help { color: var(--color-text); }
}

.c-newsletter .c-newsletter__form .wsf-form.wsf-validated input.wsf-field:is(:invalid, .wsf-invalid) {
  border-width: 2px;
  border-color: var(--color-beige-100);
}