/* Ascundem checkbox-ul */
#menu-toggle {
  display: none;
}

/* Buton hamburger */
.menu-icon {
  position: fixed;
  font-size: 30px;
  cursor: pointer;
 
  padding: 10px 15px;
  border-radius: 6px;
  z-index:500;
  
  display: inline-flex;
  align-items: center; /* aliniează vertical imaginea și textul */
  gap: 8px; /* spațiu între imagine și text, poți ajusta */
background-color: #91D4F3;
 width: 300rem;
}

.menu-icon img {
  width: 80px;              /* sau ce dimensiune dorești */
  height: 80px;
  border-radius: 70%;       
  object-fit: contain;      /* NU mai taie din poză, o micșorează ca să încapă */
  border: 2px solid #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  cursor: pointer;
  background-color: #fdfdfd;
}

.menu-icon img:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}
.site-name {
  font-size: 20px;
  font-weight: bold;
  color: #333; /* schimbă după gust */
}
/* Meniul lateral (inițial ascuns) */
.side-menu {
  position: fixed;
  top: 6rem;
  left: -550px; /* 👈 Ascuns în afara ecranului */
  width: 550px;
  height: 60%;
  background-color: #91D4F3;
  
  transition: left 0.5s ease;
  z-index: 500;
   overflow-y: auto;   /* ✅ Scroll vertical dacă este nevoie */
}

/* Afișare meniu când toggle-ul este bifat */
#menu-toggle:checked + .menu-icon + .side-menu {
  left: 0;
}

/* Stil linkuri */
.side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-menu li {
  padding: 10px 20px;
}

.side-menu a {
  color: black;
  text-decoration: none;
  display: block;
  font-size: 1rem;
  background: transparent;
  padding: 10px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.side-menu a:hover {
  background-color: #FDFDFD;
}

.responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.site-title {
  font-size: clamp(1rem, 2vw + 1rem, 2.5rem);!important
}