/**
 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
 * your custom CSS modifications here.
 */

/* for later reading */

/* 
 * https://blog.logrocket.com/style-forms-css/
 */

:root {
  box-sizing: border-box;
  --width-input-border: 2px;
  --radius-inputs: 0.25em;
  --padding-inputs: 0.75em;
  --opacity-input-disabled: 0.5;
  --width-inputs: 250px;
  --width-textarea: 450px;
  --height-textarea: 250px;
  --co-body-accent: #806c78;
//  --co-body-accent: #07c;
  --co-textfld-bg: #222;
  --co-textfld-required-bg: #eac568;
  --co-textfld-border: #333;
  --co-textfld-active-border: #444;
  --co-textfld-focus-border: var(--co-body-accent);
  --co-btn-text: #fff;
  --co-btn-bg: var(--co-body-accent);
  --co-btn-active-bg: #806c78;
  --co-btn-focus-bg: #333;  
  --margin-form-gap: 1.5em;
  --margin-label: 0.5em;
  --co-textfld-valid-border: hsl(140 90% 20%);
  --co-textfld-valid-active-border: hsl(140 90% 30%);
  --co-textfld-valid-focus-border: hsl(140 90% 45%);
  --co-textfld-invalid-border: ...;
  --transition-duration-inputs: 250ms;
  --transition-function-inputs: ease-in-out;

  --transition-inputs: 
    color var(--transition-duration-inputs),
    background-color var(--transition-duration-inputs),
    border-color var(--transition-duration-inputs)
    var(--transition-function-inputs);

}

*,
*::before,
*::after {
  box-sizing: inherit;
}

// input[type="text"] { ... }
// input[type="password"] { ... }
// input[type="submit"] { ... }

/* Validation */
input:valid {}
input:invalid {}

/* Active and inactive */
input:enabled {}
input:disabled {}

/* Required inputs */
input:required { background-color: var(--co-textfield-required-bg); }

/* Read-only text inputs */
input:read-only {}

/* Inputs with their value to be autofilled by the browser */ 
input:autofill {}

input,
select,
button {
  font: inherit;
  color: inherit;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input::file-selector-button {
  cursor: pointer;
}

select,
textarea,
input[type="text"] {
  padding: var(--padding-inputs);
  border: var(--width-input-border) solid;
  border-radius: var(--radius-inputs);
}

select,
textarea,
input[type="text"] {
  &:hover,
  &:active {
    border-color: var(--co-textfld-active-border);
  }

  &:focus {
    border-color: var(--co-textfld-focus-border);
  }
}

:read-only { cursor: default }
:disabled {
  opacity: var(--opacity-input-disabled);
  cursor: not-allowed;
}

select,
input[type="tel"],
input[type="text"],
input[type="email"] {
  width: var(--width-inputs);
  max-width: 100%;
}

textarea {
  width: var(--width-textarea);
  min-height: var(--height-textarea);
  max-width: 100%;
}

input,
select,
button,
textarea {
  accent-color: var(--co-body-accent);
}



button,
select,
input[type="button"],
input[type="file"]::file-selector-button {
  border-color: var(--co-btn-bg);
  background-color: var(--co-btn-bg);
  color: var(--co-btn-text);
  transition: var(--transition-inputs);

  &:hover,
  &:active {
    background-color: var(--co-btn-active-bg);
    border-color: var(--co-btn-active-bg);
  }
  &:focus {
    background-color: var(--co-btn-active-bg);
  }
}



label {
  cursor: pointer;
  display: block;
  
  & + &,
  & + input,
  & + select,
  & + button,
  & + textarea {
    margin-top: var(--margin-label);
  }
}

input::file-selector-button {  margin-right: var(--margin-form-gap) }

select,
textarea,
.form-email, 
input[type="text"],
input[type="email"] {
  &:required {
    &:valid {
      &:hover,
      &:active {
        &:not([readonly], [disabled]) {
            border-color: var(--co-textfld-valid-active-border);
          }
        }
        &:focus {
          &:not([readonly], [disabled]) {
            border-color: var(--co-textfld-valid-focus-border);
          }
        }
      }

      &:invalid {
        /* Similar steps as above */
      }
    }
}

.form-row {
  & + & {
    margin-top: var(--margin-row-gap);
  }
}

.form-item,
.form-actions {
  display: flex;
  flex-wrap: wrap;
}

.form-item { gap: var(--margin-row-gap) }
.form-actions { gap: var(--margin-btn-gap) }

div.form-item label,
div.fieldset-wrapper label,
div#crm-main-content-wrapper label,
form.webform-submission-form label {
  display: inline-block;
  float: left;
  clear: left;
  width: 20%;
  text-align: right;
  padding: 2px;
  padding-right: 8px;
}

div.form-radios,
div.form-item input:not([type="submit"]), 
div.fieldset-wrapper input:not([type="submit"]),
div#crm-main-content-wrapper input:not([type="submit"]),
form.webform-submission-form input:not([type="submit"]) {
  width: 70%;
  display: inline-block;
  float: left;
}


/*
// div.fieldset-wrapper select,


#webform-submission-learn-more-add-form label {
  display: inline-block;
  float: left;
  clear: left;
  width: 20%;
  text-align: right;
  padding: 2px;
}
*/

input {
  float: left;
}

input#edit-campaign-address-postal-code,
select#edit-campaign-address-state-province {
  max-width: 50%;
  float: left;
}

form#webform-submission-learn-more-for-parents-add-form legend {
  display: none;
}

.webform-civicrm-prefix > ul,
.webform-civicrm-prefix > ul li {
  margin-bottom: 0px;
}


form#webform-submission-learn-more-for-parents-add-form br {
  height: 0em;
  white-space: nowrap;
}

form#webform-submission-learn-more-for-parents-add-form fieldset#edit-civicrm-1-contact-1-fieldset-fieldset {
  border-style: solid;
  border-width: medium;
  border-color: #786070;
}

.center {
  text-align: center;
}

/* */