/* Mobile First Base Styles */

.navbar__title {
 font-size: calc(0.75 * var(--font-base-size));
 margin: 0;
 color: hsl(260, 100%, 20%);
}

.the-link {
 font-size: var(--font-base-size);
 color: hsl(270, 100%, 20%);
 font-weight: 600;
}

.navbar__thelink {
 color: hsl(270, 80%, 20%);
 /* font-size: var(--font-base-size); */
 padding: 0;
 margin: 0 auto;
 transition: transform 0.6s ease;
}

.navbar__thelink:hover {
 /* text-decoration: underline; */
 color: white;
transform: scale(1.2);
/* var(--hover-base-color); */

}


/* HEADER */
header {
 position: relative;
 top: 0;
 left: 0;
 right: 0;
 width: 100vw;
 z-index: 1000;
 background-color: transparent;
 z-index: 1000;
}

.navbar {
 position: relative;
 top: 1rem;
 padding: var(--space-sm) var(--space-md);
 min-width: 100%;
 margin: 0;
 margin-bottom: 3rem;
 height: 1rem;
 padding: 1rem;
}

.btnlang {
 color: hsl(0, 100%, 100%, 0.75);
}

.navbar__toggle {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100%;
 /* padding: var(--space-xs); */
 margin: 0;
 cursor: pointer;
}

.navbar__toggle i {
 display: flex;
 font-size: 1rem;
 color: var(--font-base-color);
 /* width:2rem; height:2rem; */
 padding: 0.5rem;
 border-radius: 50%;
 aspect-ratio: 1;
 /* 0.25rem; */
 /* background-color: hsla(270,20%,80%,0.25); */
}

.logo-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 margin-right: 1.5rem;
 border-radius: 10px;
}

.logo-container img {
 max-width: calc(2 * var(--font-base-size));
 aspect-ratio: 1;
}

/* Add hover state */
.logo-container:hover {
 background-color: hsla(var(--link-color), var(--hover));
}

.links {
 display: none;
}




/* MAIN DROPDOWN MENU */
.navbar__dropdown {
 display: none;
 position: absolute;
 /* left: 10vw; */
 top: 50vh; 
transform: translateY(-50%);
 /* width: 80vw; */

 /* background: linear-gradient(to bottom, hsla(270, 40%, 80%, 0.75) 0%,
   hsla(270, 80%, 80%, 0.75) 100%); */
 background-color:  var(--menu-background-color);
 /* background-color: hsla(360,20%,80%,0.25); */
 opacity: 1;
 backdrop-filter: blur(6px);
 border-radius: 0.75rem;
}

.navbar__dropdown.open {
 display: grid;
 grid-template-columns: repeat(1fr);
 position: relative;
 align-items: center;
 justify-content: center;
 /* gap: var(--space-xxl); */
 padding: 1rem;
 /* right: 4vw; */
 /* animation: forwards 0.3s ease-out dropdown_slide; */
 box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.1);
 z-index: 540;
margin: 0 ;
}

@keyframes dropdown_slide {
 from {
  opacity: 0%;
  /* top: 15vh;
  height: 75vh; */
  border-radius: 50%;
aspect-ratio: 1;
 backdrop-filter: blur(0px);
 }

 to {
  opacity: 100%;
  /* top: 10vh;
  height: 80vh; */
  border-radius: 2rem;
aspect-ratio: unset;
 backdrop-filter: blur(100px);
 }
}

.navbar__links-container,
.navbar__language {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 gap: 0.5rem;
 cursor: pointer;
padding:1rem;
}

.navbar__dropdownsubcategory {
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 gap: var(--space-xl);
 width: 100%;
}

.navbar__menusubcategory {
 color: white;
 cursor: none;
 font-weight: 700;
}

.navbar__navgroup {
 position: relative;
 display: inline-block;
}

.navbar__navgrouptitle {
 color: hsl(260, 100%, 20%);
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: var(--space-xs);
 font-size: calc(var(--font-base-size) * 0.7);
 font-weight: 600;
 transition: color 0.3s ease;
 /* Smooth color transition */
}

.navbar__navgrouptitle:hover {
 color: hsl(260, 100%, 60%);
 /* Match link hover color */
}

.navbar__navgrouptitle i {
 transition: transform 0.3s ease;
}


.navbar__navgrouptitle {
 /* ...existing styles... */
 position: relative;
 user-select: none;
 /* Prevents text selection on double click */
}

/* Optional: Add a visual indicator */
.navbar__navgrouptitle::after {
 content: '▼';
 font-size: 0.8em;
 /* margin-left: var(--space-xs); */
}

.btnlangregular {
 cursor: pointer;
 color: hsl(260, 100%, 20%);
}

.btnlangregular::after {
 content: '▼';
 font-size: 0.5em;
 margin-left: var(--space-xs);
}

.navbar__regularlanguagespace {
 position: relative;
 /* Add this to make it the positioning context */
 display: inline-block;
 /* Ensures proper width for child positioning */
}

.navbar__regularlanguagemenu {
 display: none;
 position: absolute;
 top: 100%;
 left: 50%;
 /* Start from center of parent */
 transform: translateX(-50%);
 /* Center the dropdown */
 background: white;
 min-width: 120px;
 /* Adjust based on your content */
 box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.15);
 border-radius: var(--radius-sm);
 padding: var(--space-sm);
 z-index: 1000;
 margin-top: var(--space-xs);
 /* Add some space between toggle and dropdown */
 text-align: center;
 /* Center the text inside */
}

.navbar__regularlanguagemenu.show {
 display: block;
}


/* Media Queries using em units */
@media (min-width: 576px) {



}

@media (min-width: 768px) {


}

/* Handle shorter screens / landscape mode */
@media (max-height: 480px) {

}

@media (min-width: 992px) {




}

@media (min-width: 1200px) {

  .logo-container img {
  max-width: calc(1.5 * var(--font-base-size));
  aspect-ratio: 1;
 }

 .links {
  display: flex;
  /* Show regular links */
  gap: var(--space-xs);
  /* gap: var(--space-lg); */
  align-items: center;
  justify-content: center;
 }

}