@import url("colors.css");
@import url("spacing.css");

body,
ul,
h1,
p {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.flex-column {
  flex-direction: column;
}

.flex-normal {
  justify-content: normal;
}

.flex-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.img-fit {
  object-fit: cover;
}

.border {
  border: 2px solid var(--primary-text);
  border-radius: 0.25rem;
  transition: 0.3s;
}

.border:hover {
  background-color: var(--primary-text);
  color: var(--primary-300);
}

.line {
  position: relative; /* Essential: creates context for absolute positioning */
  padding-bottom: 5px; /* Make space for the line */
}

.line::after {
  content: "";
  position: absolute;
  bottom: 0;

  /* Centering logic */
  left: 50%;
  transform: translateX(-50%);

  /* Initial State (The 2px dot) */
  width: 1rem;
  height: 2px; /* Thickness of the line */
  background-color: var(--primary-text);

  /* Animation settings */
  transition: width 0.3s ease-in-out;
}

/* 3. The Hover State */
.line:hover::after {
  width: 100%; /* Expand to full width */
}

.border-round {
  border-radius: 1rem;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.hamburger-btn {
  color: var(--primary-text);
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  /* padding: 15px; */
  top: 0;
  left: 0;
  z-index: 200; /* Higher than the menu */
}

/* 2. THE SIDEBAR MENU */
.sidebar {
  height: 100%;
  width: 250px;
  background-color: var(--primary-500);
  position: fixed; /* Stays in place when scrolling */
  top: 0;
  left: 0;

  /* KEY MECHANISM: Move it off-screen to the left */
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;

  z-index: 100;
}

/* 3. THE ACTIVE CLASS (Applied via JS) */
.sidebar.active {
  transform: translateX(0); /* Brings it back on screen */
}

@media (max-width: 600px) {
  .mainlink {
    display: none;
  }

  .hamburger-btn {
    display: block;
  }
}