/* A suggestion above the navigation; the page remains usable without JavaScript. */
.language-suggestion[hidden] { display: none; }
.language-suggestion { background: #eee9e1; border-bottom: 1px solid var(--line); }
.language-suggestion-inner { display: flex; align-items: center; gap: 18px; padding-block: 16px; }
.language-suggestion p { margin: 0; flex: 1; font-size: 14px; line-height: 1.45; }
.language-suggestion-choice { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.language-suggestion select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid #bfb7ad; border-radius: 10px; padding: 10px 34px 10px 12px; min-width: 170px; }
.language-suggestion-close { border: 0; background: transparent; color: var(--ink-soft); font-size: 28px; line-height: 1; width: 44px; height: 44px; cursor: pointer; }
.language-suggestion :is(button, select):focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 3px; }
@media (max-width: 650px) {
  .language-suggestion-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
  .language-suggestion p { grid-column: 1 / 3; }
  .language-suggestion-close { grid-column: 3; grid-row: 1; }
  .language-suggestion-choice { grid-column: 1 / 3; flex-wrap: wrap; }
  .language-suggestion select { min-width: 0; flex: 1; }
  .language-suggestion .btn { grid-column: 3; grid-row: 2; }
}