/* Language dropdown in the header (header.php .pdl-lang; behaviour in assets/js/mobile-menu.js).
   Built on <details>, so it opens and closes without JavaScript too. */

.pdl-lang {
  position: relative;
}
.pdl-lang__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--slate-100);
  color: var(--obsidian);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.pdl-lang__current::-webkit-details-marker { display: none; }
.pdl-lang__current::marker { content: ''; }
.pdl-lang__current:hover,
.pdl-lang[open] .pdl-lang__current {
  background: #FFFFFF;
  border-color: var(--slate-300, #CBD5E1);
}
.pdl-lang__current:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.pdl-lang__globe { color: var(--slate-500); flex-shrink: 0; }
.pdl-lang__chevron {
  color: var(--slate-500);
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.pdl-lang[open] .pdl-lang__chevron { transform: rotate(180deg); }

.pdl-lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 110;
  min-width: 176px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  animation: pdl-lang-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pdl-lang-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.pdl-lang__menu li { margin: 0; }
.pdl-lang__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--slate-700);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.pdl-lang__option:hover,
.pdl-lang__option:focus-visible {
  background: var(--slate-50);
  color: var(--obsidian);
  outline: none;
}
.pdl-lang__code {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--slate-400);
}
.pdl-lang__check { color: var(--emerald-600); flex-shrink: 0; visibility: hidden; }
.pdl-lang__option[aria-current="true"] { color: var(--emerald-700); }
.pdl-lang__option[aria-current="true"] .pdl-lang__check { visibility: visible; }

/* Touch screens: a full 44 px target next to the menu toggle. */
@media (max-width: 880px) {
  .pdl-lang__current { height: 44px; padding: 0 9px; }
  .pdl-lang__globe { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pdl-lang__menu { animation: none; }
  .pdl-lang__chevron { transition: none; }
}