/* Display-language control added to server-rendered pages. Product target, above some WCAG
   minima; not a conformance assertion. Colours and type come from the page's shared tokens. */
:root { --touch-target: 44px; }

.locale-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--htw-s2, .5rem) var(--htw-s3, .75rem);
  margin: 0 0 var(--htw-s5, 1.5rem);
  padding-bottom: var(--htw-s3, .75rem);
  border-bottom: 1px solid var(--htw-line, #d5d9e0);
  font-size: var(--htw-fs-1, .833rem);
}

.locale-controls label {
  margin: 0;
}

.locale-controls select {
  display: inline-block;
  width: auto;
}

.locale-controls p {
  flex-basis: 100%;
  margin: 0;
  color: var(--htw-ink-muted, #525a68);
}

.locale-controls p:empty {
  display: none;
}

button, select, summary { min-block-size: var(--touch-target); min-inline-size: var(--touch-target); }
button, p, h1, h2, h3, li, label, summary { overflow-wrap: anywhere; }
button { white-space: normal; max-inline-size: 100%; }
bdi { unicode-bidi: isolate; }
input, textarea, select { max-inline-size: 100%; }
.localized-fields:empty { display: none; }

@media (max-width: 40rem) {
  button, select { margin-inline: 0; }
}

@media print { .locale-controls { display: none; } }