@media (min-width: 992px) {
  /* On desktop, the logo starts at 60% when the page loads. */
  #logo {
	width: 150px;
  }

  /* On desktop, the logo becomes 40% when the user scrolls. */
  #logo.scrolled {
	width: 100px;
  }
}

.language-selector {
  position: relative;
  cursor: pointer;
  font-weight: 600;
  color: #fff; /* default = white in header */
}

.language-selector-current {
  display: flex;
  align-items: center;
  gap: 6px;
}

.language-selector-current .lang-flag {
  display: none; /* hidden by default on desktop closed state */
}

.language-selector-current .lang-text {
  display: inline-block;
}

.language-selector-current .arrow {
  font-size: 12px;
  margin-left: 4px;
  transition: transform 0.3s ease;
}

/* open dropdown */
.language-selector.open .arrow {
  transform: rotate(180deg);
}

/* dropdown menu */
.header-window {
	display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 5px 0;
    z-index: 999;
	margin-top: 5px;
}

.language-selector.open .header-window {
  display: block;
}

.header-window ul {
  display: flex;
  flex-wrap: wrap; /* let items wrap on small screens */
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 5px 10px;
}

.header-window ul li {
  flex: 0 0 auto; /* don’t stretch */
}

.header-window ul li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
  border-radius: 6px;
}

.header-window ul li a:hover {
  background: #f5f5f5;
}

/* --- MOBILE --- */
@media (max-width: 991px) {
  .language-selector-current .lang-text {
    display: none; /* hide EN/FR text on mobile closed */
  }
  .language-selector-current .lang-flag {
    display: inline-block; /* show flag */
  }
  
}

/* --- SCROLL CHANGE (when your header gets black text) --- */
.custom-headermenucolor-scroll .language-selector,
.custom-headermenucolor-scroll .language-selector-current {
  color: #000;
}

.lang-flag {
  border-radius: 50%;
  width: 20px;   /* fixed size */
  height: 20px;  /* keep it square */
  object-fit: cover; /* prevents distortion */
}

@media (max-width: 768px) {
  .lang-flag {
    width: 24px;
    height: 24px;
  }
}

.language-selector{
	  right:0%;
  }
  
@media (max-width: 991px) {
  .language-selector {
    position: absolute; /* position relative to nearest positioned parent */
    top: 50%;           /* vertical center */
    right: 60px;        /* space from the right edge (adjust as needed) */
    transform: translateY(-50%);
    z-index: 9999;
  }

  /* optional: make the dropdown open nicely */
  .language-selector .header-window {
    right: 0; /* align dropdown under selector */
  }
}