/**
 * Base button class
 * This class defines the shared structure and basic behavior for all buttons.
 * It can be extended with modifiers like .btn--primary or .btn--secondary.
 */
.btn {
  display: inline-block;              /* Allows setting width and height like a block while flowing inline */
  padding: 6px 12px;                  /* Inner spacing: vertical 6px, horizontal 12px */
  margin-bottom: 0;                  /* Removes extra spacing below the button */
  font-size: 14px;                   /* Base font size */
  font-weight: 400;                 /* Normal font weight */
  line-height: 1.43;                /* Vertical spacing between lines */
  text-align: center;               /* Centers text horizontally */
  white-space: nowrap;              /* Prevents text from wrapping to a new line */
  vertical-align: middle;           /* Aligns button with surrounding elements */
  touch-action: manipulation;       /* Improves responsiveness on touch devices */
  cursor: pointer;                  /* Displays pointer cursor on hover */
  user-select: none;                /* Prevents text selection on click */
  background-image: none;           /* Removes background image (useful if overriding browser defaults) */
  border: 1px solid transparent;    /* Base border, ready for override by modifiers */
  border-radius: 4px;               /* Slightly rounded corners */
}

.a--login {
    top: 10px;
}
.a--loggedin { 
    top: 50px;
}

.a--login, .a--loggedin {
    position: absolute;
    z-index: 100;
    right: 10px;
    margin-top: 40px;
    margin-right: 40px;
}

.btn--login {
    color: #fff;                      /* White text */
    background-color: var(--primary-color-light-2); /* Primary blue background */
    border-color: var(--primary-color-light-1); /* Lighter blue border */
    letter-spacing: .05em;
    text-transform: uppercase;
}

.btn--login:hover {
    color: #fff;     /* Darker blue text on hover */
    background-color: var(--primary-color-light-3); /* Lighter blue background on hover */
    border-color: var(--primary-color-light-2); /* Even lighter border on hover */
}