:root {
  --header-height: 60px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height, 60px);

  background-color: var(--color-primary-300);
  padding-right: var(--p-4);
  padding-left: 0;
}

header .logo-wrapper {
  position: relative;
}

header .logo-wrapper img {
  padding-left: var(--p-12);
  z-index: 1;
}

header .logo-wrapper::after {
  position: absolute;
  bottom: 0;
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background-color: var(--color-accent);
}

header .user {
  display: flex;
  align-items: center;
  gap: var(--p-1);

  text-decoration: none;
  color: var(--color-on-primary);
}

header .user:hover {
  color: var(--color-on-primary-variant);
}

header .header-navigation ul {
  display: flex;
  align-items: center;

  gap: var(--p-3);
  list-style: none;
  font-size: 0.75rem;
}

header .header-navigation a:not([href]) {
  opacity: 0.5;
}

header .header-navigation a.link {
  text-decoration: none;
  color: var(--color-on-primary);
}

header .header-navigation a.link.active {
  text-decoration: underline;
  text-underline-offset: var(--p-1);
}

header .header-navigation a.link:hover {
  color: var(--color-on-primary-variant);
}

header .header-navigation .button-on-primary {
  font-size: 0.75rem;
  padding: var(--p-2) var(--p-4);
}

.drawer-toggle {
  display: none;
  background: transparent;
  border: none;

  color: var(--color-on-primary);
  cursor: pointer;
}

.drawer-toggle:hover {
  color: var(--color-on-primary-variant);
}

@media (max-width: 768px) {
  .drawer-toggle {
    display: block; /* Show toggle button on small screens */
  }

  .header-navigation {
    position: fixed;
    top: var(--header-height);
    left: -100%; /* Hide by default */
    width: 80%;
    height: 100%;
    z-index: 1000;

    background-color: var(--color-primary-200);
    transition: left 0.3s;
    /* Additional styles for the drawer */
  }

  .header-navigation.open {
    left: 0; /* Show drawer */
  }

  /* Make the navigation list vertical */
  header .header-navigation ul {
    flex-direction: column;
    align-items: flex-start;
    font-size: 1rem;
  }

  header .header-navigation ul li:last-child {
    margin-top: var(--p-3);
  }
}

.banner {
  background: rgb(158, 0, 0);
  color: white;
  text-align: center;
  padding: var(--p-1);
}

footer {
  --line-thickness: 1px;

  background-color: var(--color-primary-300);
  color: var(--color-on-primary);
  padding: var(--p-8) var(--p-12);

  border-top: var(--line-thickness) solid var(--color-on-primary);

  display: grid;
  gap: var(--p-6);
}

footer a {
  color: var(--color-on-primary);
  text-decoration: none;
}

footer a:hover {
  color: var(--color-on-primary-variant);
}

footer .footer-navigation {
  display: flex;
  align-items: center;
  gap: var(--p-6);
}

footer .footer-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer .footer-line {
  margin: var(--p-12) 0 0 0;
  height: var(--line-thickness);
  background-color: var(--color-on-primary);
}

footer .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-on-primary);
  display: inline-block;
  margin: 3px 6px;
}

.footer {
  background-color: #1a2a4a;
  color: white;
  padding: 40px 0 20px;
}
.footer a {
  color: white;
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
}
.footer a:hover {
  text-decoration: underline;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 20px;
  margin-top: 20px;
  font-size: 14px;
}
.footer-bottom a {
  display: inline;
  margin: 0 5px;
}