/* css/maa-laskuri.css */

/* 1. Wrapper perii Astra Pro:n body-fontin, WP-presetin ja teksti­värin */
.maa-laskuri {
  font-family: var(--astra-body-font-family, var(--wp--preset--font-family--body, inherit));
  font-size:   var(--wp--preset--font-size--normal, 1rem);
  color:       var(--wp--preset--color--text, currentColor);
  margin:      var(--astra-global-spacing-1, var(--wp--preset--spacing--30, 1rem)) 0;
}

/* 2. Grid-asettelu perityillä spacing-preseteillä */
.ml-grid {
  display: grid;
  gap: var(--astra-global-spacing-0-5, var(--wp--preset--spacing--20, 0.5rem));
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* 3. Labelit perityllä font-weightilla ja spacingillä */
.ml-label,
.ml-field label {
  font-weight: var(--wp--preset--font-weight--semi-bold, 600);
  margin-bottom: var(--wp--preset--spacing--5, 0.25rem);
}

/* 4. Syöttökentät perityillä border-, radius- ja padding-arvoilla */
.ml-input {
  width: 100%;
  padding: var(--astra-global-spacing-0-5, var(--wp--preset--spacing--15, 0.5rem));
  font-size: var(--wp--preset--font-size--normal, 1rem);
  border: 1px solid var(--astra-global-color-border, var(--wp--preset--color--border, #ddd));
  border-radius: var(--astra-border-radius-small, var(--wp--preset--border-radius--small, 0.25rem));
  box-sizing: border-box;
}

/* 5. Readonly-kenttien tausta perityllä secondary-värillä */
#ml-volume,
#ml-weight {
  background-color: var(--wp--preset--color--background-secondary, #f9f9f9);
}