@layer reset {
  /*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

  /* Use a more-intuitive box-sizing model */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Remove default margin */
  * {
    margin: 0;
  }

  /* Add accessible line-height */
  body {
    line-height: 1.5;
  }

  /* Improve media defaults */
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  /* Inherit fonts for form controls */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  /* Avoid text overflows */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  /* Improve line wrapping */
  p {
    text-wrap: pretty;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  /* Create a root stacking context */
  #root,
  #__next {
    isolation: isolate;
  }
}

@layer tokens {
  /* font embeds /*

  /* libre-baskerville-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Libre Baskerville";
    font-style: normal;
    font-weight: 700;
    src: url("/assets/fonts/libre-baskerville-v24-latin-700.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* libre-baskerville-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Libre Baskerville";
    font-style: normal;
    font-weight: 400;
    src: url("/assets/fonts/libre-baskerville-v24-latin-regular.woff2")
      format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* inter-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    src: url("/assets/fonts/inter-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  :root {
    /* colors */
    --c-warm-white: hsl(45, 50%, 98%);
    --c-carbon: hsl(0, 0%, 10%);
    --c-graphite: hsl(0, 0%, 20%);
    --c-muted-subtle: hsl(0, 0%, 30%);
    --c-charcoal-blue: hsl(201, 20%, 23%);

    /* typography */
    --ff-serif: "Libre Baskerville", Georgia, serif;
    --ff-sans: "Inter", system-ui, sans-serif;
  }
}

@layer global {
  body {
    background-color: var(--c-warm-white);
    font-family: var(--ff-sans);
    color: var(--c-graphite);
  }

  h1,
  h2,
  h3 {
    font-family: var(--ff-serif);
    font-weight: 400;
    color: var(--c-carbon);
  }

  h1 {
    font-weight: 700;
  }

  a {
    text-decoration: none;
  }
}

@layer layout {
  /* used for nav */
  .wrapper {
    display: grid;
    grid-template-columns: 1fr calc(100% - 64px) 1fr;

    @media (width >= calc(768 / 16 * 1rem)) {
      grid-template-columns: 1fr min(calc(100% - 80px), calc(1110 / 16 * 1rem)) 1fr;
    }

    & > * {
      grid-column: 2;
    }
  }

  .full-bleed {
    width: 100%;
    grid-column: 1 / -1;
  }

  /* used for text sections */
  .wrapper-measure {
    display: grid;
    grid-template-columns:
      1fr
      calc(100% - 64px)
      1fr;

    & > * {
      grid-column: 2;
    }

    @media (width >= calc(768 / 16 * 1rem)) {
      grid-template-columns: 1fr min(42rem, 100%) 1fr;
    }
  }
}

@layer components {
  .button {
    display: block;
    width: fit-content;
    padding: 12px 24px;
    color: var(--c-graphite);
    background-color: var(--c-warm-white);
    border: var(--c-carbon) solid 2px;
    border-radius: 32px;

    cursor: pointer;

    transition: transform 160ms ease-out;
    &:hover {
      transform: scale(1.025);
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;

      &:hover {
        transform: none;
      }
    }
  }

  .separator {
    width: 100%;
    border-top: 1px solid var(--c-charcoal-blue);
  }
}

@layer navigation {
  .header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;

    .logo {
      font-family: var(--ff-serif);
      color: var(--c-carbon);
      display: flex;
      flex-direction: column;

      .logo-1 {
        /* center bottom word "mediation", 4.5 px */
        margin-left: 0.28125rem;
      }
    }

    .header-links {
      display: flex;
      align-items: center;
      padding-left: 0;
      margin-left: 4rem;
      gap: 32px;
      list-style: none;
    }

    .header-link {
      color: var(--c-graphite);
    }

    .header-cta-button {
      display: none;
    }

    @media (width >= calc(768 / 16 * 1rem)) {
      & {
        height: 6rem;
        justify-content: flex-start;
      }

      .header-cta-button {
        margin-left: auto;
        display: block;
      }
    }
  }
}

@layer hero {
  .hero {
    padding-block: 32px 96px;

    .hero-content {
      justify-self: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .hero-kicker {
      font-family: var(--ff-sans);
      font-size: calc(11 / 16 * 1rem);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 1rem;
    }

    p {
      margin-block: 24px 0px;
    }

    .separator {
      margin: 2rem 0;
    }

    .service-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      justify-items: start;
      gap: 1.5rem 1rem;
      padding: 0;
      list-style: none;

      font-size: 0.875rem;
      color: var(--c-muted-subtle);

      li {
        display: flex;
        align-items: flex-start;
        text-align: left;
      }

      & li::before {
        content: "•";
        margin-inline-end: 0.5rem;
        color: var(--c-charcoal-blue);
      }
    }

    .hero-button {
      margin-block-start: 3rem;
    }

    /* 
    600 instead of default tablet 768px, just looks better

    contrains content width and changes service list from 2x2 grid to 1x4 row
    */
    @media (width >= calc(600 / 16 * 1rem)) {
      .hero-content {
        max-width: 34.375rem;
      }

      .service-list {
        grid-template-columns: repeat(4, 1fr);
        column-gap: 2rem;
      }

      .service-list > li {
        white-space: nowrap;
      }
    }
  }
}

@layer mission {
  .mission {
    padding-block: 32px;

    p {
      margin-block: 16px;
    }
  }
}

@layer authority {
  .authority {
    padding-block: 32px;

    p {
      margin-block: 16px;
    }

    .authority-content {
      display: flex;
      flex-direction: column;
    }
  }
}

@layer explanation {
  .explanation {
    padding-block: 32px;

    p {
      margin-block: 16px;
    }

    .explanation-content {
      display: flex;
      flex-direction: column;
    }
  }
}

@layer process {
  .process {
    padding-block: 32px 64px;

    h2 {
      margin-bottom: 32px;
    }

    .steps {
      display: flex;
      flex-direction: column;
      gap: 32px;
      padding: 0;
    }

    .step {
      display: grid;
      grid-template-columns: 2ch 1fr;
      column-gap: 0.5rem;

      .step-number {
        font-family: var(--ff-serif);
        font-weight: 400;
      }

      .step-content h3 {
        margin-bottom: 0.4rem;
      }
    }

    @media (width >= calc(600 / 16 * 1rem)) {
      .steps {
        padding-inline-start: 40px;
      }
    }
  }
}

@layer logistics {
  .logistics {
    padding-block: 32px 64px;

    h2 {
      margin-bottom: 32px;
    }

    .logistics-list {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
  }
}

@layer cta {
  .cta {
    padding-block: 32px 64px;

    h2 {
      margin-bottom: 32px;
    }

    p {
      margin-block: 0 32px;
    }
  }
}

@layer about {
  .about {
    padding-block: 32px;

    p {
      margin-block: 16px;
    }

    h2 {
      margin-block: 32px 0;
    }

    .button {
      margin-block: 16px 32px;
      justify-self: center;
    }

    @media (width >= calc(600 / 16 * 1rem)) {
      .button {
        display: none;
      }
    }
  }
}

@layer faq {
  .faq {
    padding-block: 32px 64px;

    p {
      margin-top: 0.5rem;
    }

    .faq-category {
      margin-top: 3rem;
    }

    .faq-mark {
      font-family: var(--ff-serif);
      margin-right: 0.5rem;
      color: var(--c-muted-subtle);
    }

    .faq-question {
      font-family: var(--ff-serif);
      color: var(--c-carbon);

      position: relative;
      top: 0.05rem;
    }

    .faq-list dt {
      display: grid;
      grid-template-columns: auto 1fr;

      margin-block: 2.5rem 1rem;
      position: relative;
    }

    .faq-list dd {
      color: var(--c-graphite);
      margin-left: 2.8ch;

      a {
        color: inherit;
        text-decoration: underline;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.15em;
      }

      a:hover {
        text-decoration-thickness: 0.12em;
      }
    }
  }
}

@layer contact {
  .contact {
    padding-block: 32px 64px;

    p {
      margin-block: 16px;
    }

    .contact-form {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px 32px;

      margin-block: 32px;

      @media (width >= calc(600 / 16 * 1rem)) {
        grid-template-columns: 1fr 1fr;
      }
    }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    input,
    select,
    textarea {
      border-radius: 4px;
      border: var(--c-carbon) solid 1.5px;
    }

    .contact-form .button {
      justify-self: center;
    }

    .footer-line {
      text-align: center;
    }
  }
}