/*** 1. GLOBAL ***/

/* Reset / Josh W. Cormeau
============================= */
/* Variables
  ============================= */

:root {
  --color-white: #fff;
  --color-off-white: #faf9f6;
  --color-baby-powder: #fffffc;
  --color-coquelicot: #ff3f00;
  --color-vermilion: #f64740;
  --color-red: #e50037;
  --color-licorice: #1f1300;
  --color-eerie-black: #181f1c;
  --color-isabelline: #f4f3ee;
  --color-light-grey: #f2f2f3;
  --color-grey: #7d7c83;
  --color-dark-grey: #444746;
  --color-green: #08805b;
  --color-phthalo-green: #123534;
  --color-dark-green: #096a2e;
  --color-medium-grey: #b1b0b5;
  --color-gold: #e5b80b;
  --color-blue: #0066ff;
  --color-vibrant-blue: #22f;

  --error-color: var(--color-vermilion);
  --text-color: var(--color-eerie-black);
  --valid-color: var(--color-dark-green);
  --surface-color: hsl(220, 37%, 97%);

  --font-size-x-small: 1.2rem;
  --font-size-small: 1.4rem;
  --font-size-medium: 1.6rem;
  --font-size-large: 1.8rem;
  --font-size-x-large: 2.3rem;
  --font-size-xx-large: 3rem;
  --font-size-xxx-large: 4.8rem;

  --font-weight-regular: 400;
  --font-weight-bold: 800;

  /* --font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
  --font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  --font-family-accent: "Young Serif", serif;

  /* FOOTER */
  --footer-padding: 5rem 0rem 1rem;

  /* NAVBAR */
  --nav-item-font-family: var(--font-family);
  --nav-item-font-size: var(--font-size-medium);
  --nav-item-font-weight: var(--font-weight-bold);
  --nav-item-link-hover: var(--color-phthalo-green);
  --nav-item-margin: 0 0 0 2rem;
  --nav-item-letter-spacing: 0.04rem;
  --nav-item-link-hover: var(--color-gold);

  /** SECTION **/
  --section-padding: 5rem 1.5rem;
  --section-header-padding: 0 0 5rem;
  --section-header-align: center;
  --section-title-font-size: var(--font-size-xxx-large);
  --section-title-font-weight: var(--font-weight-bold);
  --section-tagline-font-family: var(--font-family-headings);
  --section-tagline-font-weight: var(--font-weight-bold);
  --section-body-padding: 2rem 0 0rem;
  --section-footer-padding: 3rem 0 0;
  --section-footer-align: center;

  /** FOOTER **/
  --footer-padding: 5rem 2rem 1rem;

  /** MOTION **/
  --transition-duration: 0.3s;
  --transition-cubic-bezier: cubic-bezier(0.17, 0.67, 0, 1.01);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

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

* {
  margin: 0;
  line-height: calc(1em + 0.5rem);
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-regular);
  min-height: 100dvh;
  min-width: 100dvw;
}

body.has-modal {
  overflow: hidden;
}

img,
video,
canvas,
svg,
picture {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  outline: none;
}

:is(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

ul,
ol,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: var(--color-eerie-black);
  cursor: pointer;
}

a.link {
  display: inline-block;
  position: relative;
  transition: color 0.1s;
}

a.link--btn {
  border-radius: 0.8rem;
  border: 1px solid var(--color-medium-grey);
  background: transparent;
  font-size: var(--font-size-small);
  font-variation-settings: "wght" 500;
  padding: 0.4rem;
}

a.link--primary {
  color: var(--color-dark-green);
}

.link--hover:hover {
  text-decoration: underline;
}


.btn {
  display: block;
  width: 100%;
  cursor: pointer;
  position: relative;
  border: none;
  white-space: nowrap;
  font-variation-settings: "wght" 600;
  font-family: var(--font-family);
  transition:
    box-shadow 0.1s,
    color 0.1s,
    background 0.1s;
}

.btn--m {
  border-radius: 1rem;
  font-size: var(--font-size-medium);
  padding: 0 2.1rem;
  height: 4.6rem;
  line-height: 4.6rem;
}

.btn--s {
  border-radius: 0.8rem;
  font-size: var(--font-size-small);
  padding: 0 1.2rem;
  height: 3.6rem;
  line-height: 3.6rem;
}

.btn--primary {
  color: var(--color-off-white);
  background: var(--valid-color);
  box-shadow:
    rgba(255, 255, 255, 0) 0 0 0 3px,
    rgba(0, 102, 255, 0) 0 0 0 4px;
}

.btn--cancel {
  color: var(--color-blue);
}

.btn--transparent {
  background-color: transparent;
}

.btn--danger {
  color: var(--color-off-white);
  background: var(--error-color);
  box-shadow:
    rgba(255, 255, 255, 0) 0 0 0 3px,
    rgba(0, 102, 255, 0) 0 0 0 4px;
}

.btn--icon {
  height: 3.2rem;
  width: 3.2rem;
  padding-block: 0.2rem;
  margin-top: -0.32rem;
}

.btn::after {
  content: "";
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate3d(-50%, -50%, 0) rotate(0deg);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.btn--m::after {
  width: 20px;
  height: 20px;
}

.btn--primary::after {
  border-color: var(--color-white) rgba(255, 255, 255, 0.2)
    rgba(255, 255, 255, 0.2);
}

._m-b-2 {
  margin-bottom: 1.4rem;
}

.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip-path: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.toast-container {
  display: none;
  flex-flow: column;
  align-items: flex-start;
  position: fixed;
  bottom: 30px;
  max-width: calc(100% - 60px);
  /* center the container in the middle of the viewport */
  left: 50%;
  transform: translate3d(-50%, 0, 0);

  .toast {
    max-width: 100%;
    opacity: 0;
    height: 0;
    margin: 0 auto;
    transition:
      all 0.3s cubic-bezier(0.6, 0.4, 0, 1),
      opacity 0s linear;

    .toast_inner {
      --text-color: var(--color-eerie-black);
      --bg-color: var(--color-off-white, transparent);

      border-radius: 25px;
      padding: 0 20px;
      position: relative;
      display: flex;
      align-items: center;
      margin-top: 14px;
      height: 50px;
      transform: scale(1) translate3d(0, 100%, 0);

      svg {
        margin-right: 15px;
        flex-shrink: 0;
      }

      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 20px;
        font-variation-settings: "wght" 500;
      }
    }

    &.is-visible {
      height: 64px;
      opacity: 1;

      &.toast--success {
        & > .toast_inner {
          --bg-color: var(--color-green);
          --text-color: var(--color-white);
        }
      }

      &.toast--error {
        & > .toast_inner {
          --bg-color: var(--color-red);
          --text-color: var(--color-white);
        }
      }

      &.toast--info {
        & > .toast_inner {
          --bg-color: var(--color-eerie-black);
          --text-color: var(--color-white);
        }
      }

      .toast_inner {
        transform: scale(1) translate3d(0, 0, 0);
        transition: all 0.3s cubic-bezier(0.6, 0.4, 0, 1);
        background-color: var(--bg-color);
        color: var(--text-color);
      }
    }
  }
}