/* ============================================================
   COMPONENT: the language layer. The stay-on-the-page notice, and the secondary note
   under a block whose content is English.

   The EN badge lives in masthead.css, next to the menu it was written for; the same class
   marks the three block headings on /es/ whose content is English.

   A ".rfi-foreign" block used to live here too, the homepage card row naming those three
   sections. It was removed on 2026-07-31: the sections it named were already on the page
   in full a few hundred pixels above, so the badge on their own headings says the same
   thing where the reader already is.
   ============================================================ */

/* ---- The stay-on-the-page notice ----------------------------------------------------
   Shown by :target and by nothing else. The switcher's link for a language with no
   version of this page is a FRAGMENT, so the click never leaves the page and never
   reaches the server: no request, no second pageview, no cache variant, no URL for a
   crawler to find. On a direct visit there is no fragment, so the bar is hidden.

   This is the whole mechanism. There is no JavaScript for it anywhere in the theme. */

.rfi-langnotice { display: none; }

/* scroll-margin-top is not cosmetic. Following a fragment scrolls its target to the top
   of the viewport, which would push the masthead off screen on a page the reader has not
   scrolled at all. A margin larger than anything above the bar makes the computed scroll
   position negative, and browsers clamp it to 0, so the page stays exactly where it was. */
.rfi-langnotice:target {
  display: flex; align-items: flex-start; gap: 12px;
  scroll-margin-top: 600px;
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--rfi-navy-tint);
  border: 1px solid var(--rfi-border);
  border-radius: var(--rfi-radius);
}

.rfi-langnotice__text {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: var(--rfi-font-text); font-size: 14px; line-height: 1.5; color: var(--rfi-text);
}

.rfi-langnotice__link {
  font-weight: 600; color: var(--rfi-navy); text-decoration: underline;
  text-underline-offset: 2px;
}
.rfi-langnotice__link:hover { color: var(--rfi-teal); }

.rfi-langnotice__close {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: -2px -4px 0 0;
  font-size: 20px; line-height: 1; color: var(--rfi-text-3); border-radius: var(--rfi-radius-xs);
}
.rfi-langnotice__close:hover { color: var(--rfi-text); background: var(--rfi-surface); }

/* ---- The English-content note --------------------------------------------------------
   Sits UNDER a row whose items are English, currently the partner logos. A note and not a
   warning: nothing is broken, the reader is simply told what they are about to open. So it
   takes the secondary text colour and the small size, and carries no badge, border or
   ground of its own; anything louder would read as an error above a row of paying
   partners' logos. */

.rfi-langnote {
  margin: 10px 0 0;
  font-family: var(--rfi-font-text); font-size: 12.5px; line-height: 1.45;
  color: var(--rfi-text-2);
}
@media (max-width: 768px) {
  .rfi-langnotice:target { margin-top: 10px; padding: 11px 12px; }
  /* 44px of target: this is the only control in the bar and it must be usable on a phone. */
  .rfi-langnotice__close { width: 44px; height: 44px; margin: -8px -10px 0 0; }
}