.language-toggle {
  display: none; /* skjul checkbox */
}

.header-language-button {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  margin: 0 1rem;
  align-items: center;
  justify-content: center;
}

/* Label til flag + trekant */
.language-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
}

/* Dropdown */
.flags-dropdown {
  display: none;
  position: absolute;
  top: 6px;
  left: -6.75rem;
  grid-template-columns: repeat(3, auto);
  gap: 10px;
  width: 300%;
  margin-top: 1.2rem;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: opacity 0.2s ease;
}

/* 🔥 Vis dropdown når der hovres over hele .header-language-button (altså inkl. dropdown) */
.header-language-button:hover .flags-dropdown {
  display: grid;
}

/* Vis dropdown når pinned */
.language-toggle:checked ~ .flags-dropdown {
  display: grid;
}

/* Trekanten */
.language-triangle {
  width: 12px;
  height: 12px;
  transform: rotate(270deg);
  margin-left: 5px;
  fill: grey;
  transition: transform 0.5s ease, fill 0.3s ease;
}

/* Trekant roteres ved hover */
.header-language-button:hover .language-triangle {
  transform: rotate(180deg);
}

/* Trekant roteres & farves ved pin (checked) */
.language-toggle:checked + .language-label .language-triangle {
  transform: rotate(180deg);
  fill: var(--logo-color);
}

/* Flagbillede */
.header-image-language {
  width: 40px;
}

.flags-dropdown a {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* Sprogvisning */
.language {
  display: none !important;
}

.language.active {
  display: contents !important;
}