/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@layer reset, base, components;

/* Desktop header */
header.desktop {
  nav {
    max-width: 80rem;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  ul.logo-and-locale {
    display: flex;
  }

  ul.main-navigation {
    display: flex;
    gap: 0.5rem;
  }

  ul.login-and-signup {
    justify-self: end;
    display: flex;
    gap: 1rem;
  }

  /* Hide desktop header on small screens */
  @media (width <= 1024px) {
    & {
      display: none;
    }
  }

}

/* Mobile header */
header.mobile {
  nav {
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    padding: 1.5rem;
    align-items: center;
    justify-content: space-between;
  }
}

/* Hide mobile header on large screens */
@media (width > 1024px) {
  header.mobile {
    display: none;
  }
}

@layer components {
  button, .button {
    display: inline-flex;
    border-width: 2px;
    border-radius: 1lh;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: .35rem 1.5rem;
    text-decoration: none; 
    border-color: rgb(76 84 223);
    color: rgb(76 84 223);

    &:hover {
      border-color: rgb(36 38 199);
      background-color: rgb(36 38 199);
      color: white;
    }
  }

  .primary.button {
    border-color: rgb(76 84 223);
    background-color: rgb(76 84 223);
    color: white;

    &:hover {
      border-color: rgb(36 38 199);
      background-color: rgb(36 38 199);
    }
  }

  .main-navigation .menu.button {
    all: revert-layer;
    display: inline-flex;
    border-radius: 1lh;
    gap: .25rem;
    align-items: center;
    padding: 0 .75rem;
    font-size: 0.875rem;
    font-weight: 600; 
    line-height: 1.5rem; 
    text-decoration: none; 

    &:hover {
      background-color: rgb(76 84 223);
      color: white;
    }

    svg.chevron {
      height: 1.25rem;
    }
  }
}