/* =========================================================
   components.css — Section, Form, Lists, Actions, Icons, Buttons
   ========================================================= */

/* Section/Article */
section.special,
article.special {
  text-align: center;
}

header {
  margin: 3em 0;
}

header > :first-child {
  margin-bottom: 0;
}

header > :first-child:after {
  content: '';
  display: block;
  background-color: var(--color-accent);
  height: 1px;
  margin: 1.5rem 0 1.75rem 0;
  width: 5rem;
}

.special header > :first-child:after {
  margin-left: auto;
  margin-right: auto;
}

header p {
  font-size: 0.9em;
  letter-spacing: var(--letter-spacing-alt);
  margin-bottom: 0;
  text-transform: uppercase;
}

@media screen and (max-width: 736px) {
  header {
    margin: 2em 0;
  }

  header > :first-child:after {
    margin: 1.25rem 0 1.5rem 0;
  }

  header p {
    font-size: 0.8em;
  }

  header p br {
    display: none;
  }
}

/* Form */
form {
  margin: 0 0 var(--element-margin) 0;
}

form > :last-child {
  margin-bottom: 0;
}

form > .fields {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 3em);
  margin: -1.5em 0 var(--element-margin) -1.5em;
}

form > .fields > .field {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 1.5em 0 0 1.5em;
  width: calc(100% - 1.5em);
}

form > .fields > .field.half {
  width: calc(50% - 0.75em);
}

form > .fields > .field.third {
  width: calc(100% / 3 - 0.5em);
}

form > .fields > .field.quarter {
  width: calc(25% - 0.375em);
}

@media screen and (max-width: 480px) {
  form > .fields > .field,
  form > .fields > .field.half,
  form > .fields > .field.third,
  form > .fields > .field.quarter {
    width: calc(100% - 1.5em);
  }
}

label {
  color: var(--color-fg-bold);
  display: block;
  font-size: 0.8em;
  font-weight: var(--font-weight-bold);
  margin: 0 0 1em 0;
  text-transform: uppercase;
  letter-spacing: 0.25em;
}

input[type="text"],
input[type="email"],
textarea {
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-border-bg);
  border-radius: var(--radius);
  border: solid 1px var(--color-border);
  color: inherit;
  display: block;
  outline: 0;
  padding: 0 1em;
  text-decoration: none;
  width: 100%;
}

input[type="text"]:invalid,
input[type="email"]:invalid,
textarea:invalid {
  box-shadow: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

input[type="text"],
input[type="email"] {
  height: var(--element-height);
}

textarea {
  padding: 0.75em 1em;
}

::placeholder {
  color: var(--color-fg-light) !important;
  opacity: 1;
}

/* Lists */
ol {
  list-style: decimal;
  margin: 0 0 var(--element-margin) 0;
  padding-left: 1.25em;
}

ol li {
  padding-left: 0.25em;
}

ul {
  list-style: disc;
  margin: 0 0 var(--element-margin) 0;
  padding-left: 1em;
}

ul li {
  padding-left: 0.5em;
}

ul.alt {
  list-style: none;
  padding-left: 0;
}

ul.alt li {
  border-top: solid 1px var(--color-border);
  padding: 0.5em 0;
}

ul.alt li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Actions */
ul.actions {
  cursor: default;
  list-style: none;
  margin-left: -1em;
  margin-top: -1em;
  padding-left: 0;
}

ul.actions li {
  display: inline-block;
  margin: 1em 0 0 1em;
  padding-left: 0;
  vertical-align: middle;
}

ul.actions li:last-child {
  padding-right: 0;
}

ul.actions.stacked {
  margin-top: 0;
  margin-left: 0;
}

ul.actions.stacked li {
  display: block;
  margin: 0;
  padding: 1.5em 0 0 0;
  position: relative;
}

ul.actions.stacked li:first-child {
  padding-top: 0;
}

ul.actions.stacked li > * {
  margin-bottom: 0;
}

ul.actions.stacked li > .button {
  min-width: 15em;
}

ul.actions.stacked.special li:after {
  background-color: var(--color-border);
  content: '';
  display: block;
  height: 1.5em;
  left: 50%;
  position: absolute;
  top: 100%;
  width: 1px;
}

ul.actions.stacked.special li:last-child:after {
  display: none;
}

@media screen and (max-width: 736px) {
  ul.actions.stacked.special li {
    padding: 1em 0 0 0;
  }

  ul.actions.stacked.special li:after {
    height: 1em;
  }
}

ul.actions.animated.spinY li {
  perspective: 1000px;
}

ul.actions.animated.spinY li a {
  transition: background-color var(--duration-transition) ease,
              box-shadow var(--duration-transition) ease,
              color var(--duration-transition) ease,
              transform 0.5s ease-in;
}

ul.actions.animated.spinY li a.active {
  transform: rotateY(480deg);
}

ul.actions.animated.spinX li {
  perspective: 1000px;
}

ul.actions.animated.spinX li a {
  transition: background-color var(--duration-transition) ease,
              box-shadow var(--duration-transition) ease,
              color var(--duration-transition) ease,
              transform 0.5s ease-in;
}

ul.actions.animated.spinX li a.active {
  transform: rotateX(480deg);
}

/* Icon */
.icon {
  text-decoration: none;
  border-bottom: none;
  position: relative;
}

.icon:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
}

.icon.solid:before {
  font-weight: 900;
}

.icon > .label {
  display: none;
}

/* Icon list */
ul.icons {
  cursor: default;
  list-style: none;
  padding-left: 0;
}

ul.icons li {
  display: inline-block;
  padding-left: 0;
}

ul.icons li .icon {
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
}

ul.icons li .icon:before {
  font-size: 1.25rem;
}

/* Buttons */
button,
.button {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  transition: background-color var(--duration-transition) ease,
              box-shadow var(--duration-transition) ease,
              color var(--duration-transition) ease;
  background-color: transparent;
  border-radius: var(--radius);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-fg-bold) !important;
  cursor: pointer;
  display: inline-block;
  font-size: 0.8em;
  font-weight: var(--font-weight-bold);
  height: 3.5em;
  letter-spacing: var(--letter-spacing-alt);
  line-height: 3.5em;
  padding: 0 2em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

button.icon:before,
.button.icon:before {
  margin-right: 0.5em;
}

button.back,
.button.back {
  padding-left: 4.75em;
}

button.back:before,
.button.back:before {
  transition: opacity var(--duration-transition) ease;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='112px' height='96px' viewBox='0 0 112 96' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23cccccc%3B stroke-width: 4px %7D%3C/style%3E%3Cline x1='0' y1='46' x2='112' y2='46' /%3E%3Cline x1='24' y1='22' x2='0' y2='46' /%3E%3Cline x1='24' y1='70' x2='0' y2='46' /%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: inherit;
  left: 2em;
  opacity: 1;
  position: absolute;
  top: 0;
  vertical-align: middle;
  width: 2em;
}

button.back:after,
.button.back:after {
  transition: opacity var(--duration-transition) ease;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='112px' height='96px' viewBox='0 0 112 96' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %239b2335%3B stroke-width: 4px %7D%3C/style%3E%3Cline x1='0' y1='46' x2='112' y2='46' /%3E%3Cline x1='24' y1='22' x2='0' y2='46' /%3E%3Cline x1='24' y1='70' x2='0' y2='46' /%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: inherit;
  left: 2em;
  opacity: 0;
  position: absolute;
  top: 0;
  vertical-align: middle;
  width: 2em;
}

button.back:hover:before, button.back.active:before,
.button.back:hover:before, .button.back.active:before {
  opacity: 0;
}

button.back:hover:after, button.back.active:after,
.button.back:hover:after, .button.back.active:after {
  opacity: 1;
}

button.next,
.button.next {
  padding-right: 4.75em;
}

button.next:before,
.button.next:before {
  transition: opacity var(--duration-transition) ease;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='112px' height='96px' viewBox='0 0 112 96' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23cccccc%3B stroke-width: 4px %7D%3C/style%3E%3Cline x1='0' y1='46' x2='112' y2='46' /%3E%3Cline x1='88' y1='22' x2='112' y2='46' /%3E%3Cline x1='88' y1='70' x2='112' y2='46' /%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: inherit;
  right: 2em;
  opacity: 1;
  position: absolute;
  top: 0;
  vertical-align: middle;
  width: 2em;
}

button.next:after,
.button.next:after {
  transition: opacity var(--duration-transition) ease;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='112px' height='96px' viewBox='0 0 112 96' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %239b2335%3B stroke-width: 4px %7D%3C/style%3E%3Cline x1='0' y1='46' x2='112' y2='46' /%3E%3Cline x1='88' y1='22' x2='112' y2='46' /%3E%3Cline x1='88' y1='70' x2='112' y2='46' /%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: inherit;
  right: 2em;
  opacity: 0;
  position: absolute;
  top: 0;
  vertical-align: middle;
  width: 2em;
}

button.next:hover:before, button.next.active:before,
.button.next:hover:before, .button.next.active:before {
  opacity: 0;
}

button.next:hover:after, button.next.active:after,
.button.next:hover:after, .button.next.active:after {
  opacity: 1;
}

button.fit,
.button.fit {
  width: 100%;
}

button.small,
.button.small {
  font-size: 0.7em;
}

button.large,
.button.large {
  font-size: 1em;
}

button:hover, button.active,
.button:hover, .button.active {
  box-shadow: inset 0 0 0 1px var(--color-accent);
  color: var(--color-accent) !important;
}

button:active, button.active,
.button:active, .button.active {
  background-color: rgba(155, 35, 53, 0.05);
}

button.primary,
.button.primary {
  box-shadow: none;
  background-color: var(--color-fg-bold);
  color: var(--color-bg) !important;
}

button.primary:hover,
.button.primary:hover {
  background-color: var(--color-accent);
}

button.primary:active,
.button.primary:active {
  background-color: #711a27;
}

button.disabled, button:disabled,
.button.disabled, .button:disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.25;
}