@use "sass:color";
@use "variables";

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-size: 1.1rem;
  display: grid;
//   grid-template-columns: 1.5fr 3fr 1.5fr;
//   grid-template-rows: variables.$navbar-height-mobile;
  grid-template-areas:
  "AdminBar"
  "NavBar";

  &__nav {
    grid-area: NavBar;
    display: grid;
    grid-template-columns: 1.5fr 3fr 1.5fr;
    grid-template-rows: variables.$navbar-height-mobile;
    grid-template-areas:
    "Logo . NavButton"
    "Menu Menu Menu";

    @media screen and (min-width: variables.$breakpoint) {
      grid-template-rows: variables.$navbar-height-desktop;
      grid-template-areas:
      "Logo . Menu";
    }

  }

  &__logo {
    margin: .5rem auto 0 auto;

    & img {
      height: 40px;
      width: 40px;

      @media screen and (min-width: variables.$breakpoint) {
        height: 50px;
        width: 50px;
      }
    }
  }

  &__navbar {
    display: none;
    width: fit-content;
    height: 100%;
    width: 100%;
    grid-area: Menu;
    justify-content: space-around;

    @media screen and (min-width: variables.$breakpoint) {
      display: flex;
      margin: auto;
    }
  }

  &__navbar.burger-active {
    display: flex;
  }

  &__nav-links {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    width: fit-content;
    width: 100%;
    height: max-content;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding-bottom: 1rem;

    @media screen and (min-width: variables.$breakpoint) {
      position: static;
      height: 100%;
      padding: 1rem;
      background-color: transparent;
      backdrop-filter: none;
      box-shadow: none;
      margin-bottom: 0;
    }

    & > li {
      margin: 1rem 0 1rem 3rem;

      @media screen and (min-width: variables.$breakpoint) {
        margin: 1rem 0;
      }
    }

    & a, button {
      width: fit-content;
      padding: 0.7rem;
      text-align: center;
      display: inline-block;
      border: none;
      background: none;
      font-size: inherit;
      font-family: inherit;
      color: inherit;
    }

    & button {
      padding: 0.468rem;
    }

    @media screen and (min-width: variables.$breakpoint) {
      flex-direction: row;
      width: 60rem;
      align-items: center;
    }

    @mixin link-color($color) {
      & > a:hover, & > button:hover, .menu-color-active {
        color: white;
        box-shadow: inset 0 -40px 0 -1px $color;
        text-shadow: 0 0 10px color.adjust($color, $saturation: +15%, $lightness: -25%);
      }

      & button + ul a:hover {
        border-bottom: 2px solid $color;
      }
    }

    &--yellow {
      @include link-color(#f0d042);
    }

    &--blue {
      @include link-color(#004aad);
    }

    &--green {
      @include link-color(#7ed957);
    }

     &--orange {
      @include link-color(#ff8255);
     }

     &--turquoise {
      @include link-color(#44ab8a);
    }

    &--red {
      @include link-color(#fc1818);
    }

    &--light-blue {
      @include link-color(#7db4ff);
    }
  }

  &__buttons {
    grid-area: NavButton;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1.7rem;
    padding-right: 1rem;
    border: none;
    background: none;
    color: inherit;

    @media screen and (min-width: variables.$breakpoint) {
      display: none;
    }

    &::before {
      content: '\2630';
    }

    &.burger-active::before {
      content: '\2715';
    }
  }

  &__admin {
    grid-area: AdminBar;
    background-color: #E97132; /* Couleur jaune vif pour attirer l'attention */
    color: #333; /* Texte sombre pour un bon contraste */
    padding: 10px 20px; /* Espacement interne */
    text-align: center; /* Centrer le texte */
    font-size: 1rem; /* Taille de police lisible */
    font-weight: bold; /* Texte en gras */
    border-bottom: 3px solid #b85a33; /* Ligne de séparation pour délimiter */

    & p {
        color: #072B61; /* Couleur bleue pour les liens */
        margin-left: 15px; /* Espacement entre le texte et le lien */
        transition: color 0.3s ease; /* Animation douce pour le survol */
    }

    & a:hover {
        color: #152E4C; /* Couleur plus sombre au survol */
        text-decoration: underline; /* Ajoute un soulignement au survol */
    }
}

&__user {
    color: #333; /* Couleur du texte */
    display: flex; /* Utilisation de flexbox pour aligner les éléments */
    align-items: center; /* Aligne verticalement le texte et le lien */
    gap: 10px; /* Espacement entre le texte et le lien */
}
}