@charset "UTF-8";
/* Colors */
/* Borders */
/* Fonts */
.navbar {
  display: block;
  /* La barra te un tamany fixe*/
  width: 100%;
  height: 80px;
  margin-bottom: 2rem;
  /* Fondo */
  background: url("/assets/images/banner.png") no-repeat center;
  background-size: cover;
  filter: drop-shadow(0 0 0.75rem black);
}

.navbar .flex {
  display: flex;
  height: 100%;
}

/* TITOL I MENU ----------------------------------------------------------------- */
.navbar .flex .esquerra {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar .flex .esquerra .header-link {
  align-content: center;
}

.navbar .flex .esquerra .header-link .header-image {
  text-decoration: none;
  margin-left: 2rem;
  height: 30px;
  /* La imatge original no tenia prous bordes blancs i no es veia be*/
  filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white);
}

.navbar .flex .esquerra .title {
  flex-grow: 1;
  font-size: 2rem;
  font-family: "ardarling";
  color: white;
  text-align: center;
}

.navbar .flex .esquerra .title b {
  width: 100%;
}

/* En el mode d'escriptori, no volem mostrar el hamburger menu */
.navbar .flex .esquerra .hamburger {
  display: none;
}

/* ----------------------------------------------------------------- */
/* Els elements del menú (home, linktree, shop, etc) ------------------------- */
.navbar .flex .dreta {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar .flex .dreta input[type=checkbox] {
  display: none;
}

.navbar .flex .dreta .nav-link {
  margin: 0.5rem;
  padding: 1rem;
  color: white;
  text-decoration: none;
}

/*Com els elements son links, aixi evitem que es posin blaus*/
.navbar .flex .dreta .nav-link .nav-link:visited {
  color: white;
}

.navbar .flex .dreta .nav-link .nav-link:hover {
  background: url("/assets/images/pinzellada.png") no-repeat center;
  background-origin: border-box;
  background-size: contain;
  color: black;
}

/* ----------------------------------------------------------------- */
/* Media Queries

Aixo es tot el que aplica quan la pantalla te menys de 768px d'ample (mobils)

Amb aquestes opcions es sobreescriuen les anteriors, no cal reescriure tot

https://threkk.medium.com/how-to-make-a-css-only-hamburger-menu-f7ad41e13399

--------------------------------------------- */
@media all and (max-width: 1170px) {
  /* La barra de navegacio en mobils si no li posem un z-index i una posicio apareix per sota */
  .navbar {
    z-index: 1000;
    position: relative;
    top: 0px;
    width: 100%;
  }
  .navbar .flex {
    margin-left: 0;
    margin-right: 0;
    display: block;
    background-color: black;
    height: auto;
  }
  /* TITOL I MENU ----------------------------------------------------------------- */
  .navbar .flex .esquerra {
    display: flex;
  }
  .navbar .flex .esquerra .header-link .header-image {
    margin-left: 1rem;
  }
  .navbar .flex .esquerra .title {
    font-size: 1.2rem;
  }
  .navbar .flex .esquerra .hamburger {
    all: initial;
    color: white;
    margin-right: 0.5rem;
    font-size: 2rem;
  }
  .navbar .flex .esquerra .hamburger {
    display: block;
  }
  /* ----------------------------------------------------------------- */
  /* Els elements del menú (home, linktree, shop, etc) ------------------------- */
  /* Aquest CSS fa "target" a un div "germà" al input*/
  .navbar .flex .dreta input[type=checkbox]:checked ~ div {
    display: none;
  }
  .navbar .flex .dreta {
    display: block;
  }
  .navbar .flex .dreta .nav-link {
    width: 100%;
    text-align: center;
    /* Si no posem aixo, el hamburger menu apareix per sota */
  }
  /* ----------------------------------------------------------------- */
}