:root {
  --color-orange: #f36e10;
  --color-orange-dark: #662d05;
  --color-green: #71b706;
  --color-green-dark: #2a4205;
  --color-blue: #2a909f;
  --color-blue-dark: hsl(188, 58%, 20%);
}

.btn--sign-up {
  --btn-bg-color: var(--color-orange);
  --btn-bg-color-open: var(--color-orange-dark);
}

.btn--sign-in {
  --btn-bg-color: var(--color-green);
  --btn-bg-color-open: var(--color-green-dark);
}

.btn--calendar {
  --btn-bg-color: var(--color-blue);
  --btn-bg-color-open: var(--color-blue-dark);
}

.btn--sign-up,
.btn--sign-in,
.btn--calendar {
  color: white;
  font-weight: 700;
  border-radius: 0.25rem;
  padding: 0.5em 1em;
  transition: background-color 0.3s ease-in-out;
}

.btn--sign-up {
  background-color: var(--btn-bg-color);
}

.btn--sign-in {
  background-color: var(--btn-bg-color);
}

.btn--calendar {
  background-color: var(--btn-bg-color);
}

.header-ctas {
  & > * {
    width: 100%;
    max-width: 100%;
    min-width: 12em;
    box-shadow: none !important;
  }
}

.header-ctas {
  display: flex;
  flex-flow: column nowrap;
  flex: 1;
  justify-content: center;
  align-self: center;
  gap: 0.5rem;

  .btn {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    gap: 0.5rem;
    justify-content: flex-start;
    width: 100%;
    font-size: 19px;
    font-weight: 700;
    padding: 0.2em 0.8em;

    .icon {
      margin: 0;
      height: 1em;
      width: 1em;
      flex-shrink: 0;
      flex-grow: 0;
      fill: currentColor;
    }
  }
}

.btn--dropdown {
  /* align-self: center; */
  display: flex;
  flex-flow: column nowrap;
  font-size: 19px;
  font-weight: 700;
  gap: 0.5rem;
  justify-content: flex-start;
  padding: 0 !important;
  width: 100%;

  .icon {
    margin: 0;
    height: 1em;
    width: 1em;
    flex-shrink: 0;
    flex-grow: 0;
  }

  ::marker,
  details,
  summary {
    list-style: none;
    appearance: none;
    -webkit-appearance: none;
    &::marker {
      display: none;
    }
  }

  details {
    width: 100%;
    padding: 0.2em 0.8em;

    & > div {
      display: flex;
      flex-flow: row nowrap;
      gap: 0.2em;
      padding: 0.2em;
    }

    a {
      border-radius: 0.25rem;
      border: 1px solid var(--btn-bg-color);
      color: white;

      font-size: 12px;
      line-height: normal;
      padding: 0.65em 0.5em;
      text-align: center;
      text-decoration: none;
      transition: background-color 0.3s ease-in-out;

      display: flex;
      flex: 1;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;

      &:focus,
      &:hover {
        background-color: var(--btn-bg-color-open);
      }
    }
  }

  details[open] {
    padding: 0;
    summary {
      display: none;
    }
  }

  summary {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-grow: 1;
    cursor: pointer;

    .icon {
      margin: 0;
    }
  }

  &.btn:focus:not(:has(details[open])),
  &.btn:hover:not(:has(details[open])) {
    background-color: #3e3d42;
    box-shadow: 0 0 0 2px white inset;
    color: white;
  }

  &.btn:has(details[open]) {
    background-color: var(--btn-bg-color-open);
  }
}

/* @media (max-width: 300px) {
  .header-ctas {
    & .btn {
      font-size: 1rem;
    }
  }
} */

@media screen and (max-width: 1250px) {
  .site-baseline--text {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 1170px) {
  .header-ctas * {
    font-size: 0.875rem;
  }
}