/* =========================================
   HEADER HOVER STYLING
   ========================================= */

:root {
  --nav-text-color: #626262;
  --nav-hover-text-color: #3f3f3f;
  --nav-hover-background: #eeeeee;

  --partner-text-color: #626262;
  --partner-border-color: #999999;
  --partner-hover-background: #626262;
  --partner-hover-text-color: #ffffff;
  --partner-hover-border-color: #626262;
}

/* Page titles: Home, Farmers, Partners */
.header-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 20px;
  border-radius: 999px;

  color: var(--nav-text-color);
  background-color: transparent;

  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    font-weight 0.25s ease,
    transform 0.25s ease;
}

/* Page-title hover */
.header-nav-link:hover,
.header-nav-link:focus-visible {
  background-color: var(--nav-hover-background);
  color: var(--nav-hover-text-color);
  font-weight: 700;

  outline: none;
}

/* Partner with us button */
.header-partner-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 16px 36px;
  border: 1px solid var(--partner-border-color);
  border-radius: 999px;

  color: var(--partner-text-color);
  background-color: transparent;

  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

/* Partner-button hover */
.header-partner-button:hover,
.header-partner-button:focus-visible {
  background-color: var(--partner-hover-background);
  color: var(--partner-hover-text-color);
  border-color: var(--partner-hover-border-color);

  outline: none;
}