@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    max-width: 100%;
    min-width: 0px;
  }

  img {
    display: block;
    max-width: 100%;
  }
}

@layer base {
  :root {
    --spacing: 2em;
    --clr-primary: #b8084b;

    font-family: "Oswald", sans-serif;
  }
}

@layer layout {
  body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
    background-image: url("../images/footer-bg.jpg");
    background-size: cover;
    background-position: center;
    background-color: hsl(0, 0%, 0%, 0.8);
    background-blend-mode: overlay;

    color: white;
    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      "Open Sans",
      "Helvetica Neue",
      sans-serif;
  }

  header {
    padding-block: 1em;

    & a {
      display: block;
      max-width: max-content;
      margin-inline: auto;
    }
  }

  footer {
    padding-block: 1em;
    text-align: center;
    color: white;
  }

  #overlays {
    position: fixed;
    inset: 0;

    overflow: auto;

    pointer-events: none;
    z-index: var(--z-index-overlay);

    & * {
      pointer-events: auto;
    }
  }
}

@layer components {
  #flash {
    max-width: max-content;
    padding: 1em;
    margin-block-start: 0em;
    margin-inline-start: auto;

    & ul {
      list-style: none;
    }

    & ul.alerts {
      --flash-message-bg-color: darkgreen;
      --flash-message-color: white;
    }

    & ul.errors {
      --flash-message-bg-color: darkred;
      --flash-message-color: white;
    }

    & li {
      cursor: pointer;
      background-color: var(--flash-message-bg-color, darkorange);
      font-weight: bold;
      color: var(--flash-message-color, white);
      padding: 0.5em 1em;
      border-radius: 0.25em;
      box-shadow: 1px 1px 2px 1px hsl(0, 0%, 0%, 0.5);
      animation: flash-show 500ms cubic-bezier(0, 1.7, 0.3, 0.7);

      margin-block-end: 0.5em;
      margin-inline-start: auto;
      max-width: max-content;

      font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
    }
  }

  @keyframes flash-show {
    from {
      transform: translateY(-100%);
    }

    to {
      transform: translateY(0%);
    }
  }
}

@layer utilities {
  .sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
  }

  .wrapper {
    width: min(var(--max-width, 1200px), 90%);
    margin-inline: auto;
  }

  .global-button {
    --bg-color: var(--clr-primary);

    cursor: pointer;
    display: inline-block;

    padding-inline: calc(var(--spacing) / 1);
    padding-block: calc(var(--spacing) / 2);

    border-radius: 4px;
    background-color: var(--bg-color);

    color: white;
    text-decoration: none;
    font-weight: bold;

    &:hover {
      background-color: hsl(from var(--bg-color) h s calc(l - 10));
    }
  }

  .fieldset {
    padding-block: calc(var(--spacing) / 4);
    padding-inline: calc(var(--spacing) / 2);
    margin-block: calc(var(--spacing) / 2);

    & legend {
      padding-inline: calc(var(--spacing) / 4);
    }
  }

  .checkbox-group,
  .radio-group {
    margin-block: calc(var(--spacing) / 4);

    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: calc(var(--spacing) / 4);

    & label,
    & input {
      cursor: pointer;
    }

    & label {
      line-height: 1;
    }
  }

  .field-group,
  .select-group {
    margin-block-end: calc(var(--spacing) / 2);

    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing) / 4);

    & label {
      padding-inline: calc(var(--spacing) / 6);
    }

    & input,
    & textarea,
    & select {
      padding: calc(var(--spacing) / 2);
      resize: vertical;
    }
  }

  [class^="columns-"] {
    --width: 150px;

    display: grid;
    gap: calc(var(--spacing) / 2);

    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--width), 100%), 1fr)
    );
  }
}