/* ============================================================
   LANGUAGE SELECTOR (NNA-15)
   The current language's flag in the header next to the account and
   search icons, opening a short list of flags with each language's
   own name; the same list as a row of chips at the foot of the
   slide-out menu on phones. Flags are images/flags/*.svg, already
   circular (circle-flags, MIT — see images/flags/README.md).
   Gold on hover, like the rest of the header chrome.
   ============================================================ */
#main-header .lang-switch {
  position: relative;
  display: flex;
  align-items: center;
}

#main-header .lang-switch-btn {
  /* style.css gives every <button> a 200px minimum width */
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 8px 0 7px;
  border-radius: 19px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
#main-header .lang-switch-btn:hover,
#main-header .lang-switch-btn[aria-expanded="true"] {
  background: rgba(193, 145, 20, 0.16);
  border-color: rgba(193, 145, 20, 0.5);
}
#main-header .lang-switch-btn:focus-visible {
  outline: 2px solid #c19114;
  outline-offset: 2px;
}
#main-header .lang-switch-btn .lang-switch-caret {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex: 0 0 auto;
  opacity: .7;
  transition: transform .2s ease;
}
#main-header .lang-switch-btn[aria-expanded="true"] .lang-switch-caret {
  transform: rotate(180deg);
}

/* The flags: a thin ring keeps the white in the French and English flags
   from bleeding into light surroundings, and gives every flag the same edge. */
.lang-flag {
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
  /* style.css sizes some header images; the flag keeps its own size */
  max-width: none;
}

#main-header .lang-switch-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(10, 11, 14, 0.97);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  z-index: 120;
}
#main-header .lang-switch-menu[hidden] {
  display: none;
}
#main-header .lang-switch-menu li {
  margin: 0;
}
#main-header .lang-switch-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #e8e8e8;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
#main-header .lang-switch-menu a:hover,
#main-header .lang-switch-menu a:focus-visible {
  background: rgba(193, 145, 20, 0.16);
  color: #fff;
  outline: none;
}
#main-header .lang-switch-menu a.current {
  color: #c19114;
  font-weight: 700;
}
#main-header .lang-switch-menu a.current .lang-flag {
  box-shadow: 0 0 0 2px #c19114;
}
#main-header .lang-switch-menu a.current::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c19114;
}

/* Slide-out menu: the languages as chips under the links */
.desktop-menu .menu-langs {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  width: 100%;
}
.desktop-menu .menu-langs-label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.desktop-menu .menu-langs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.desktop-menu .menu-langs-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 6px 13px 6px 7px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  color: #e8e8e8;
}
.desktop-menu .menu-langs-list a.current {
  border-color: #c19114;
  color: #c19114;
  font-weight: 700;
}

/* Phones: the header keeps only the flag, in the same 30px circle as the
   other header icons; the language list is also in the slide-out menu. */
@media screen and (max-width: 768px) {
  #main-header .lang-switch-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  #main-header .lang-switch-btn .lang-flag {
    width: 18px;
    height: 18px;
  }
  #main-header .lang-switch-caret {
    display: none;
  }
  #main-header .lang-switch-menu {
    right: -40px;
  }
}

/* A notice at the top of a page whose content is not yet translated
   (legal documents awaiting the professional translation). */
.i18n-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 24px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(193, 145, 20, 0.45);
  background: rgba(193, 145, 20, 0.10);
  color: inherit;
  font-size: 14px;
  line-height: 1.55;
  /* Sits among the article's dateline styles; keep it plain text. */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  text-align: left;
}
.i18n-notice::before,
.i18n-notice::after {
  content: none;
}
.i18n-notice svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: #c19114;
}

/* Title Case is an English convention. French, Portuguese and Spanish write
   headlines and labels in sentence case, so the capitalize rules in
   style.css / mobile.css are switched off on the translated pages. */
html:not([lang="en"]) #weather-bar,
html:not([lang="en"]) #weather-bar span,
html:not([lang="en"]) .page .breadcrumb span,
html:not([lang="en"]) .single-post .sec1 .article h2,
html:not([lang="en"]) .single-post .related h3,
html:not([lang="en"]) .single-post .related .grid5 .product .info,
html:not([lang="en"]) .single-post .related .grid5 .product .title,
html:not([lang="en"]) .home .archive-cards .info {
  text-transform: none;
}

/* The follow bar under the byline (label + five social icons + the 460px store
   badge grid) fits on one line only while the label stays roughly as wide as
   the English one. Measured 2026-09-22 at both 1440px and 1920px: the article
   column gives the row ~891-900px, the badge grid takes 460px and the icons
   195px, which leaves the label a budget of about 216px.

     "Follow us on social media"            192px   fits, 22px to spare
     "Siga-nos nas redes sociais"           194px   fits, 20px to spare
     "Síguenos en redes sociales"           197px   fits, 17px to spare
     "Suivez-nous sur les réseaux sociaux"  268px   OVER by ~52px

   When it does not fit, the grid is pushed onto a line of its own, where its
   margin-left:auto pins it to the right and leaves a 431px hole beside it —
   which is what the French article pages were showing.

   The cause is tracking, not wording: post-modern.css gives the label
   letter-spacing: 2px, and French needs 35 characters for this phrase, so the
   tracking alone adds 70px — almost exactly the overflow. Wide letter-spacing
   is an English display convention, the same reason the Title Case rules above
   are switched off here, so translated pages get normal tracking. That returns
   70px to French (198px, back on one line) and ~26px to Portuguese and
   Spanish, which were only 20px and 17px clear.

   max-width is the backstop, set below the 216px budget: a future translation
   longer than this wraps onto a second line inside its own slot rather than
   ejecting the badge grid and reopening the same hole.

   Desktop and tablet only. On phones (post-modern.css, max-width 768px) the
   label takes a full line of its own with the five icons centred underneath;
   a 210px cap there stopped it filling that line, so three icons squeezed in
   beside it and two dropped to a second row (client report, 28 Sep 2026). */
html:not([lang="en"]) .single-post .share-bar .share-label {
  letter-spacing: normal;
}
@media screen and (min-width: 769px) {
  html:not([lang="en"]) .single-post .share-bar .share-label {
    max-width: 210px;
  }
}