/* Mostly from the MDN web docs tutorial, IIRC. */
:root {
    --label-width: 5.5em;
    --label-length: 4.5em;
}
:not(search) > form {
  /* To see the outline of the form */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

label {
  /* To make sure that all labels have the same size and are properly aligned */
  display: inline-block;
  width: var(--label-width);
  text-align: right;
}

/* label next to my multi-line select was aligning to the bottom */
label:has(+ select) { vertical-align: top; }

/* ----------------------------------------------------------------------
   unsetting the normalize reset (I like it better this way)
   ---------------------------------------------------------------------- */
fieldset {
  border: 1.5px solid #c0c0c0;
  margin: 0 2px 1ex;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0 2px; /* 2 */
}
/* ---------------------------------------------------------------------- */

fieldset label {
  /* To make sure that all labels have the same size and are properly aligned */
  width: var(--label-length);
}

input:not([type='date']):not([type='reset']):not([type='submit']), textarea, select {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em inherit;

  /* To give the same size to all text fields */
  width: 81%;
  box-sizing: border-box;

  /* To harmonize the look & feel of text field border */
  border: 1px solid #999;
}
/*input[required], textarea[required] { background: #fff3f3; } */
::placeholder, textarea { font-style: italic; }
input:invalid, textarea:invalid, select:invalid { background: light-dark(yellow, #440); }

input:focus, textarea:focus {
  /* To give a little highlight on active elements */
  border-color: CanvasText;
}

textarea {
  /* To properly align multiline text fields with their labels */
  vertical-align: top;
}

textarea:not([name='event-loc-streetAddress']):not([rows]) {
  /* To give enough room to type some text */
  height: 5em;
}

input[type='reset'], input[type='submit'] {
    margin-top: .4em;
    font-size: 1rem;
}

input[type='reset'] {
  /* To position the buttons to the same position of the text fields */
    margin-left: 4.8em;
}