/* ============================================================
   components/masthead.css
   One row, one white card. Logo, five feeds, Topics (a list),
   a search ICON, language, and a utility pair (one filled button
   + one outlined).
   Sets no outer margin: the header template places it.
   ============================================================ */
/* No overflow:hidden. It was here to contain a bar that could not fit itself, and all
   it actually did was hide the damage (the nav was being cut in half). The fit is
   solved by the flex rules below, and a clipping bar cannot host the language menu,
   which has to hang below it. */
.rfi-masthead {
  display: flex; align-items: center; gap: 24px;
  background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow);
  padding: 0 22px; height: 74px;
}
.rfi-masthead__logo { display: flex; align-items: center; gap: 14px; flex: none; color: var(--rfi-navy); }
.rfi-masthead__mark { height: 30px; width: auto; color: var(--rfi-navy); }
.rfi-masthead__tag {
  font-family: var(--rfi-font-ui); font-size: 9.5px; font-weight: 500; letter-spacing: .8px;
  text-transform: uppercase; color: var(--rfi-text-3); line-height: 1.4;
  padding-left: 14px; border-left: 1px solid var(--rfi-border);
}
/* The nav never gives way. It used to be the elastic item (flex: 0 1 auto), which
   meant the bar balanced itself by CLIPPING the primary navigation against the
   masthead's overflow:hidden: at 1280 with the utility pair in place, "Magazine" lost
   20px and was silently cut in half. The search is the elastic one by design, so it
   absorbs the shortfall instead.
   These rules describe the FULL ROW, which is English above 1180px and nothing else.
   Below 1180px, and on a translated branch at any width, the nav is not in this row at
   all: see the collapsed menu at the foot of this file. */
.rfi-masthead__nav { display: flex; gap: 24px; flex: none; }
.rfi-masthead__nav > a { font-family: var(--rfi-font-ui); font-size: 16px; font-weight: 500; color: var(--rfi-text); white-space: nowrap; }
.rfi-masthead__nav > a:hover { color: var(--rfi-teal); }
/* Active = colour AND weight: colour alone fails for the ~8% of men with a colour
   vision deficiency, and this audience is mostly male engineers. 700 against the
   500 of its neighbours, not 600: on Jost at 16px a single step is not a difference
   anyone can see, so the weight was carrying none of the state it was there to carry
   and the colour was doing the job alone. */
.rfi-masthead__nav > a.is-active { color: var(--rfi-orange-text); font-weight: 700; }

/* ============================================================
   TOPICS: the one item in the menu that opens.
   It is a <details>, the language switcher's mechanism reused, so it opens, closes and
   answers the keyboard with no JavaScript at all.

   THE STACKED FORM BELOW IS THE DEFAULT, and that is the load-bearing decision in this
   block. .rfi-masthead__nav is three different things depending on width and language:
   the desktop row in English above 1180px, the burger PANEL on every translated branch
   at every width and on English below 1180px, and the mobile drawer below 769px. Two of
   those three are vertical panels where the list has to unfold IN PLACE, and they are
   the only form four of the five languages ever get. So the panel form is what this
   component is by default, and the floating menu is the one narrow exception, added
   further down for the single case that has a row to hang from.
   ============================================================ */
.rfi-masthead__topics-btn {
  display: flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; white-space: nowrap;
  font-family: var(--rfi-font-ui); font-size: 16px; font-weight: 500; color: var(--rfi-text);
}
.rfi-masthead__topics-btn::-webkit-details-marker { display: none; }  /* Safari's own triangle: we draw our own */
.rfi-masthead__topics-btn svg { flex: none; transition: transform .15s; }
.rfi-masthead__topics:hover > .rfi-masthead__topics-btn,
.rfi-masthead__topics[open] > .rfi-masthead__topics-btn { color: var(--rfi-teal); }
.rfi-masthead__topics[open] > .rfi-masthead__topics-btn svg { transform: rotate(180deg); }

.rfi-masthead__topicsmenu { display: flex; flex-direction: column; }
.rfi-masthead__topicsmenu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--rfi-font-ui); font-size: 14.5px; font-weight: 500; color: var(--rfi-text);
  padding: 9px 12px; border-radius: var(--rfi-radius-sm);
}
.rfi-masthead__topicsmenu a:hover { background: var(--rfi-input); color: var(--rfi-teal); }

/* The pinned event. --rfi-navy-tint is the token for exactly this: an informational panel
   that must read as ours rather than as a warning. It is a stacked pair, so it overrides
   the row alignment above rather than inheriting it. */
.rfi-masthead__tev {
  flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--rfi-navy-tint); margin-bottom: 6px;
}
.rfi-masthead__tev:hover { background: var(--rfi-navy-tint); color: var(--rfi-text); }
.rfi-masthead__tev strong { font-weight: 600; }
.rfi-masthead__tev span { font-family: var(--rfi-font-text); font-size: 12px; color: var(--rfi-text-2); }

/* .rfi-masthead__hub was here and is gone (2026-09-06). It styled the HUB badge, which was dropped
   the same week because the site has exactly one hub: a badge on one row and never on the others
   labels nothing. The rule outlived the markup that used it, so it was shipped to every reader on
   every page as bytes nothing could match. Verified unreferenced across the theme and the plugin
   before removal. The data flag behind it went from includes/masthead-menu.php in the same change. */
.rfi-masthead__topicsdiv { display: block; height: 1px; margin: 6px 8px; background: var(--rfi-border); }
.rfi-masthead__topicsall { color: var(--rfi-navy); font-weight: 600; }

/* The right zone CAN compress, and must: with the utility pair in it the bar is
   over-full at 1280, and a zone that cannot shrink does not remove that 20px, it just
   spends the bar's own padding and parks the last button 2px from the edge. Shrinking
   is allowed here so it reaches the search, which is the one elastic control (the
   buttons below are flex:none and nowrap, so they never give). */
/* align-self:stretch so the zone is the BAR's full height. Its own children stay
   centred (align-items), so nothing moves; it exists so the language switcher inside
   can stretch to the bar and anchor its menu to the bar's bottom edge. Stretching the
   switcher alone only reached the height of this zone, which is content-tall. */
.rfi-masthead__right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: 0 1 auto; min-width: 0; align-self: stretch; }
.rfi-masthead__search {
  display: flex; align-items: center; gap: 8px; background: var(--rfi-input);
  border-radius: 999px; padding: 0 14px; height: 36px; flex: 0 1 210px; min-width: 150px;
}
.rfi-masthead__search svg { fill: var(--rfi-text-3); flex: none; }
.rfi-masthead__search input { border: 0; background: none; outline: 0; font-family: inherit; font-size: 13.5px; width: 100%; color: var(--rfi-text); }
.rfi-masthead__search input::placeholder { color: var(--rfi-text-3); }
.rfi-masthead__div { width: 1px; height: 20px; background: var(--rfi-border); flex: none; }

/* The language switcher: a <details>, so it opens and takes the keyboard with no JS.
   flex:none on it AND its caret. The right zone is allowed to shrink so that the
   SEARCH gives way, but shrinking reaches every item that has not opted out: this is a
   flex item whose caret is a flex item, so the bar squeezed the switcher and the caret
   collapsed to nothing first. The arrow is what says the language is changeable at
   all, so it is not something the layout may spend. */
/* Full bar height, so the menu's `top: 100%` means "below the BAR". Anchored to the
   20px-tall "EN" instead, the menu opened over the bar's own bottom edge. */
.rfi-masthead__lang { position: relative; flex: none; color: var(--rfi-text-3); font-size: 14px; align-self: stretch; display: flex; align-items: center; }
.rfi-masthead__lang--solo { display: flex; align-items: center; }
.rfi-masthead__lang-btn { display: flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; white-space: nowrap; }
.rfi-masthead__lang-btn::-webkit-details-marker { display: none; }  /* Safari's own triangle: we draw our own */
.rfi-masthead__lang-btn svg { flex: none; transition: transform .15s; }
.rfi-masthead__lang:hover .rfi-masthead__lang-btn,
.rfi-masthead__lang[open] .rfi-masthead__lang-btn { color: var(--rfi-teal); }
.rfi-masthead__lang[open] .rfi-masthead__lang-btn svg { transform: rotate(180deg); }

/* The menu hangs below the bar, right-aligned to the switcher. Same plate language as
   every other surface on the site: white, one radius, the lifted shadow. */
.rfi-masthead__langmenu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 168px; list-style: none; margin: 0; padding: 6px;
  background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow-up);
}
.rfi-masthead__langmenu a,
.rfi-masthead__langmenu > li > span {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--rfi-font-ui); font-size: 13.5px; color: var(--rfi-text);
  padding: 8px 10px; border-radius: var(--rfi-radius-sm);
}
.rfi-masthead__langmenu a:hover { background: var(--rfi-input); color: var(--rfi-teal); }
/* The language you are already in is marked, not hidden: removing it would make the
   list jump by one every time you switch. It is a <span> and not a link, because it has
   nowhere to lead: as an <a> it pointed at the news feed, so clicking your own language
   threw you out of the article you were reading. */
.rfi-masthead__langmenu .is-active { color: var(--rfi-navy); font-weight: 600; cursor: default; }
.rfi-masthead__langcode { font-size: var(--rfi-label); font-weight: 600; letter-spacing: .5px; color: var(--rfi-text-3); width: 20px; flex: none; }
.rfi-masthead__langmenu .is-active .rfi-masthead__langcode { color: var(--rfi-navy); }

/* A section that is English only on a translated branch (Events, Companies, Cases on
   /es/, /it/, /de/, /fr/). Two signals, not one: the item is muted AND carries the badge, because muting
   alone reads as "disabled" and a badge alone is easy to miss in a horizontal bar. The
   item stays a working link with a real destination; it is marked, never blocked. */
.rfi-masthead__nav > a.is-foreign { color: var(--rfi-text-3); font-weight: 400; }
.rfi-masthead__nav > a.is-foreign:hover { color: var(--rfi-teal); }
.rfi-masthead__en {
  display: inline-block; margin-left: 4px; padding: 1px 4px;
  font-family: var(--rfi-font-text); font-size: 9.5px; font-weight: 700; line-height: 1.4;
  letter-spacing: .5px; vertical-align: 1px; white-space: nowrap;
  color: #8A5A20; background: #FBF2E3; border: 1px solid #E4CFA8; border-radius: 3px;
}

/* The utility pair. A tighter gap than the zone's own 14px, so the two read as one
   unit (an action and its pair) rather than as two unrelated controls next to the
   language switcher. The buttons themselves are the site's one button component at
   its header size: this owns the grouping, not the buttons. */
.rfi-masthead__auth { display: flex; align-items: center; gap: 8px; flex: none; }
.rfi-masthead__auth .rfi-btn { white-space: nowrap; }

/* ---- desktop defaults for the mobile-only chrome --------------
   These elements exist in the markup on every page for the checkbox-hack mobile
   header; on desktop they are inert. The mobile layout (masthead.css's job ends at
   the desktop breakpoints; the <=768px band lives in mobile.css) switches them on.
   The plate is a transparent wrapper here: it holds the logo exactly where the logo
   sat before, so the desktop row is unchanged. */
.rfi-masthead__plate { display: flex; align-items: center; flex: none; }
.rfi-masthead__burger,
.rfi-masthead__lupe,
.rfi-masthead__searchclose,
.rfi-masthead__strip,
.rfi-masthead__navlang { display: none; }

@media (max-width: 1300px) { .rfi-masthead__tag { display: none; } }

/* ============================================================
   THE SEARCH ICON, desktop. The field became a 38px lupe that expands on click.
   Basis: 416 views of the results page in the month to 2026-09-04, 0.9% of traffic,
   against a field that held ~210px of the one row the header has (DECISIONS 2026-09-05).

   NO NEW CONTROL AND NO SCRIPT. The checkbox (#rfi-masthead-search), the lupe label and
   the close have been in the markup on every page since the mobile header was built;
   they were simply display:none above 768px. This turns the SAME three on for the
   desktop layout, so there is one mechanism with two skins rather than two mechanisms.

   INSIDE A min-width QUERY, deliberately, and not merged with the top-level rules. The
   mobile layer styles these same three elements (44px tap targets, a white plate, no
   border) and mobile.css loads last, but only its overlapping declarations would win: a
   `border` set at top level here would have no counterpart there and would have landed
   on the phone. The query is what keeps the mobile header untouched.

   WHAT OPENING COSTS THE ROW: the field replaces the lupe, so the right zone grows by
   about 200px, which comes out of .rfi-masthead__right's own `margin-left: auto`. It is
   free space, so nothing moves and nothing can overflow; when the slack runs out the
   field shrinks to its 110px floor instead, the same floor the collapsed header uses.

   The field is NOT auto-focused, because that would need a script. A reader clicks the
   lupe and then the field. Stated rather than left to be discovered.
   ============================================================ */
@media (min-width: 768.02px) {
  .rfi-masthead__lupe {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none; cursor: pointer; color: var(--rfi-text-3);
    border: 1px solid var(--rfi-border); border-radius: var(--rfi-radius);
  }
  .rfi-masthead__lupe:hover { background: var(--rfi-input); color: var(--rfi-teal); }
  .rfi-masthead__lupe svg { fill: currentColor; }

  .rfi-masthead__search { display: none; }
  .rfi-masthead__searchcb:checked ~ .rfi-masthead__right .rfi-masthead__lupe { display: none; }
  .rfi-masthead__searchcb:checked ~ .rfi-masthead__right .rfi-masthead__search { display: flex; flex: 0 1 210px; min-width: 110px; }
  .rfi-masthead__searchcb:checked ~ .rfi-masthead__right .rfi-masthead__searchclose {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 36px; flex: none; cursor: pointer;
    color: var(--rfi-text-3); font-size: 22px; line-height: 1;
  }
  .rfi-masthead__searchcb:checked ~ .rfi-masthead__right .rfi-masthead__searchclose:hover { color: var(--rfi-teal); }
}

/* ---- Topics as a FLOATING panel: the one case that has a row to hang from ----
   The condition is "the menu is in the header row", which is exactly (width > 1180px)
   AND (not collapsed). Unlike the OR the collapsed menu below has to write out twice,
   this one is an AND of a media query and a negated class, which CSS states directly.

   Everything else, four languages at every width and English below 1180px, keeps the
   stacked form defined at the top of this file and needs nothing here.

   align-self: stretch on the NAV, so that `top: 100%` means "below the BAR". The nav is
   content-tall inside a 74px bar (the bar centres its children), so anchored to the nav's
   own line box the panel would have opened over the bar's bottom edge, which is the same
   bug the language switcher was fixed for and the same fix. */
@media (min-width: 1180.02px) {
  /* ---- SEARCH OPEN: the MENU gives way, and the field takes what it vacated ----
     Same checkbox, one more rule. Nothing is added: `#rfi-masthead-search` is the toggle the
     lupe and the close have always used, and this is a second consequence of the same
     `:checked`, so opening, closing, the close button and the no-JavaScript guarantee are all
     unchanged by construction.

     WHY THE MENU HIDES RATHER THAN THE FIELD SHRINKING. Until now the field opened into
     whatever width happened to be left over, which on a narrow desktop was almost nothing: it
     opened narrow AND pushed the right zone past the container edge. Both symptoms are the same
     cause, that the row was being asked to hold the menu and a usable field at once, and it
     cannot. Search and browse are not simultaneous acts, so the row shows one at a time.

     THE RIGHT ZONE DOES NOT MOVE, and that falls out of the layout rather than needing a rule:
     .rfi-masthead__right is pinned right by `margin-left: auto`, so growing the field spends the
     auto margin and extends the field LEFTWARDS. The language switcher and the two buttons keep
     their positions to the pixel.

     440px, against 210px closed. The arithmetic that says it fits, at the tightest width the
     full row ever has (1420+, where the container caps at 1280 AND the tagline is visible):
     1280 - 80 page padding - 44 bar padding = 1156 inside the bar; the lockup with tagline is
     about 274 and everything in the right zone except the field about 327, plus a 24 gap, which
     leaves roughly 530. At 1240, where the tagline is hidden, it is roughly 615.
     Those are estimates of text widths and are NOT the guarantee. The guarantee is that shrink
     stays enabled with a 110px floor, so if the estimate is wrong the field narrows and the row
     still cannot overflow.

     The TAGLINE is deliberately untouched: it is not paid for here. It only renders above 1300px
     anyway (the top-level rule), which is the widest configuration the header has. */
  .rfi-masthead:not(.rfi-masthead--compact) .rfi-masthead__searchcb:checked ~ .rfi-masthead__nav { display: none; }
  .rfi-masthead:not(.rfi-masthead--compact) .rfi-masthead__searchcb:checked ~ .rfi-masthead__right .rfi-masthead__search { flex: 0 1 440px; }

  .rfi-masthead:not(.rfi-masthead--compact) .rfi-masthead__nav { align-self: stretch; align-items: center; }
  .rfi-masthead:not(.rfi-masthead--compact) .rfi-masthead__topics {
    position: relative; align-self: stretch; display: flex; align-items: center;
  }
  .rfi-masthead:not(.rfi-masthead--compact) .rfi-masthead__topicsmenu {
    position: absolute; top: calc(100% + 8px); left: -12px; z-index: 20;
    width: 300px; padding: 8px;
    background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow-up);
  }
}

/* WHAT USED TO BE HERE, and why nothing is now. A rule gave the search a 44px basis and
   `input { display: none }` below 1180px, while the lupe and the close are display:none
   outside the mobile query: between 769px and 1180px that left a 20-35px pill with a
   magnifier in it that could not be clicked, focused or typed into, live on English.
   The first repair narrowed the field to 110px instead, which worked but cost width and
   left English overflowing from 1110px down. Below 1180px English now uses the same
   collapsed menu as a translated branch, which frees the whole row: the field is the full
   240px there rather than a squeezed 110px, and nothing overflows. See the foot of the
   file. */


/* ============================================================
   THE COLLAPSED MENU. Desktop only; the mobile layer below 769px is untouched by all of
   it and keeps its own drawer.

   IT APPLIES IN TWO CASES, different questions with the same answer:
     1. a translated branch, at EVERY desktop width. Its menu is longer than the English
        one and always will be, so it never goes in the row.
     2. ANY header, English included, between 769px and 1180px. There the row is too
        narrow for five items plus a usable field, whatever the language.

   Case 2 is what closed the band English used to overflow in. The alternatives were tens
   of pixels of tuning (a 90px field, a tighter menu gap) that the next header change
   would have eaten; this closes it outright, and reuses a mechanism that already works.

   THE BODY IS WRITTEN TWICE, deliberately. The condition is "(width >= 769) AND (class
   OR width <= 1180)", and CSS cannot say OR across a class and a media query. The
   alternative was to apply it to everything and then UN-apply it above 1180px for
   English, which fails in the dangerous direction: one forgotten declaration would move
   the English header at full width, the one thing that must not move. Written twice, a
   mistake can only reach the case it is written in.

   NOTHING NEW IS BUILT EITHER WAY. The toggle, the burger label, the nav element and the
   `:checked ~` reveal are the ones mobile.css already uses for its drawer
   (`.rfi-masthead__navcb:checked ~ .rfi-masthead__nav`). Only the presentation differs:
   a panel under the burger instead of a band across the page.
   ============================================================ */

/* ---- case 1: a translated branch, every desktop width ---- */
@media (min-width: 768.02px) {
  /* The panel hangs from the bar, so the bar is its containing block. */
  .rfi-masthead--compact { position: relative; }

  /* WHAT USED TO BE HERE: `.rfi-masthead--compact .rfi-masthead__tag { display: none }`,
     removed 2026-08-01. Its reason was "the tagline is English text and costs 110px", and
     the first half of that stopped being true: the tagline is now the reader's own language
     (one line per language edition in the source site) and links to
     that language's edition page. This SUPERSEDES the session 142 removal rather than
     contradicting it; see DECISIONS.md 2026-08-01.

     The cost side needs no measurement, because of where the tagline is allowed to exist at
     all: a top-level rule hides it at 1300px and below, in every language. So it renders only
     above 1300px, where the bar is capped at --rfi-page and a translated branch has no menu
     in that row, the menu having moved into the burger panel. It lands in the emptiest
     configuration the header ever has.

     English is untouched by the removal, and not by luck: English is only --compact at 1180px
     and below, where the 1300px rule hides the tagline anyway, so this selector could never
     fire for English in a state where it was visible. */

  /* Burger BEFORE the logo (reference), one line of order rather than a second markup
     path: the label stays where the mobile layout needs it. */
  .rfi-masthead--compact .rfi-masthead__plate { gap: 14px; }
  .rfi-masthead--compact .rfi-masthead__burger {
    order: -1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; width: 38px; height: 38px; flex: none; cursor: pointer;
    border: 1px solid var(--rfi-border); border-radius: var(--rfi-radius);
  }
  .rfi-masthead--compact .rfi-masthead__burger:hover { background: var(--rfi-input); }
  .rfi-masthead--compact .rfi-masthead__burger span {
    display: block; width: 16px; height: 2px; background: var(--rfi-navy); border-radius: 1px;
  }
  .rfi-masthead--compact .rfi-masthead__navcb:checked ~ .rfi-masthead__plate .rfi-masthead__burger { background: var(--rfi-input); }

  /* 240px, wider than the 210 English carries in its full row, because the menu has left
     the row and for once there is room to give back rather than take.
     An explicit width and not a flex-basis: the right zone is sized to its own
     max-content, and the max-content of a form is the intrinsic width of the input inside
     it (about 206px), so a larger basis is measured and then immediately shrunk away.
     Shrink stays enabled with a 110px floor, because at the mobile breakpoint the bar has
     689px for a 566px lockup and the field has to give the difference back rather than
     push the buttons off the edge. */
  .rfi-masthead--compact .rfi-masthead__search { flex: 0 1 auto; width: 240px; min-width: 110px; }

  /* The menu itself: out of the row, into a panel under the burger. */
  .rfi-masthead--compact .rfi-masthead__nav { display: none; }
  .rfi-masthead--compact .rfi-masthead__navcb:checked ~ .rfi-masthead__nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 12px; margin-top: 6px; z-index: 40;
    width: 280px; padding: 8px;
    background: var(--rfi-surface); border-radius: var(--rfi-radius);
    box-shadow: var(--rfi-shadow-up);
  }
  .rfi-masthead--compact .rfi-masthead__nav > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; border-radius: var(--rfi-radius-sm); white-space: normal;
  }
  .rfi-masthead--compact .rfi-masthead__nav > a:hover { background: var(--rfi-input); }
  .rfi-masthead--compact .rfi-masthead__nav > a.is-active { background: var(--rfi-input); }
  /* The badge sits at the end of the row here, not tucked against the word: in a panel
     there is width for it to read as a label rather than as a suffix. */
  .rfi-masthead--compact .rfi-masthead__nav .rfi-masthead__en { margin-left: 8px; }

  /* Topics inside the panel. This is the form four of the five languages get at EVERY
     width, so it is not an edge case: it is the normal one. The summary is a panel row
     like its siblings; the list unfolds under it, indented, and pushes the panel taller
     rather than floating anywhere. No absolute positioning, so it cannot escape a panel
     that is itself absolutely positioned. */
  .rfi-masthead--compact .rfi-masthead__topics-btn {
    padding: 11px 14px; border-radius: var(--rfi-radius-sm);
  }
  .rfi-masthead--compact .rfi-masthead__topics-btn:hover { background: var(--rfi-input); }
  .rfi-masthead--compact .rfi-masthead__topicsmenu { padding: 2px 0 4px 8px; }

  .rfi-masthead--compact .rfi-masthead__navdiv {
    display: block; height: 1px; margin: 6px 8px; background: var(--rfi-border);
  }
}

/* ---- case 2: EVERY header, English included, in the narrow band ----
   The same declarations, prefixed with the bare block instead of the modifier. A
   translated branch matches both and is unaffected, the values being identical. English
   above 1180px matches neither, which is what keeps its full row byte for byte. */
@media (min-width: 768.02px) and (max-width: 1180px) {
  .rfi-masthead { position: relative; }

  .rfi-masthead .rfi-masthead__tag { display: none; }

  .rfi-masthead .rfi-masthead__plate { gap: 14px; }
  .rfi-masthead .rfi-masthead__burger {
    order: -1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; width: 38px; height: 38px; flex: none; cursor: pointer;
    border: 1px solid var(--rfi-border); border-radius: var(--rfi-radius);
  }
  .rfi-masthead .rfi-masthead__burger:hover { background: var(--rfi-input); }
  .rfi-masthead .rfi-masthead__burger span {
    display: block; width: 16px; height: 2px; background: var(--rfi-navy); border-radius: 1px;
  }
  .rfi-masthead .rfi-masthead__navcb:checked ~ .rfi-masthead__plate .rfi-masthead__burger { background: var(--rfi-input); }

  .rfi-masthead .rfi-masthead__search { flex: 0 1 auto; width: 240px; min-width: 110px; }

  .rfi-masthead .rfi-masthead__nav { display: none; }
  .rfi-masthead .rfi-masthead__navcb:checked ~ .rfi-masthead__nav {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 12px; margin-top: 6px; z-index: 40;
    width: 280px; padding: 8px;
    background: var(--rfi-surface); border-radius: var(--rfi-radius);
    box-shadow: var(--rfi-shadow-up);
  }
  .rfi-masthead .rfi-masthead__nav > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; border-radius: var(--rfi-radius-sm); white-space: normal;
  }
  .rfi-masthead .rfi-masthead__nav > a:hover { background: var(--rfi-input); }
  .rfi-masthead .rfi-masthead__nav > a.is-active { background: var(--rfi-input); }
  .rfi-masthead .rfi-masthead__nav .rfi-masthead__en { margin-left: 8px; }

  .rfi-masthead .rfi-masthead__topics-btn {
    padding: 11px 14px; border-radius: var(--rfi-radius-sm);
  }
  .rfi-masthead .rfi-masthead__topics-btn:hover { background: var(--rfi-input); }
  .rfi-masthead .rfi-masthead__topicsmenu { padding: 2px 0 4px 8px; }

  /* English has no badged sections, so the template emits no rule for it and this matches
     nothing. It only ever shows on a translated branch that happens to be in the band. */
  .rfi-masthead .rfi-masthead__navdiv {
    display: block; height: 1px; margin: 6px 8px; background: var(--rfi-border);
  }
}

/* Panel furniture: it exists only inside a collapsed menu. In the English row above
   1180px, and in the mobile drawer below 769px, there is nothing for it to separate. */
.rfi-masthead__navdiv { display: none; }

/* ============================================================
   THE SPLIT HEADER: a collapsed branch above 1180px, when the template prints
   .rfi-masthead--split (flag rfi_lang_header_menu_enabled; DECISIONS 2026-10-28).
   News and Insights sit in the row next to the logo, and a "More" button replaces the burger.

   THE DROPDOWN IS THE BURGER PANEL, unchanged. "More" toggles the same #rfi-masthead-nav
   checkbox (masthead.js), so the panel is revealed by the case-1 rule above, with its width,
   shadow, EN badges and stacked Topics. This block only moves its left edge under the
   button and hides the two items the row already shows, plus the rule that followed them.

   Above 1180px only, the width where English has its own full row. Between 769px and 1180px
   every language, English included, keeps the burger (case 2), and the row is display:none.
   ============================================================ */
.rfi-masthead__row { display: none; }

@media (min-width: 1180.02px) {
  .rfi-masthead--split .rfi-masthead__burger { display: none; }
  .rfi-masthead--split .rfi-masthead__row { display: flex; align-items: center; gap: 24px; flex: none; }

  /* The row's links are styled as the English row's nav links, active state included. */
  .rfi-masthead__row > a { font-family: var(--rfi-font-ui); font-size: 16px; font-weight: 500; color: var(--rfi-text); white-space: nowrap; }
  .rfi-masthead__row > a:hover { color: var(--rfi-teal); }
  .rfi-masthead__row > a.is-active { color: var(--rfi-orange-text); font-weight: 700; }

  /* "More" looks like the Topics summary: the same type and the same caret. */
  .rfi-masthead__more {
    display: flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap;
    margin: 0; padding: 0; border: 0; background: none;
    font-family: var(--rfi-font-ui); font-size: 16px; font-weight: 500; color: var(--rfi-text);
  }
  .rfi-masthead__more svg { flex: none; transition: transform .15s; }
  .rfi-masthead__more:hover,
  .rfi-masthead__more[aria-expanded="true"] { color: var(--rfi-teal); }
  .rfi-masthead__more[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* --rfi-more-left is written by masthead.js when the panel opens: the button's offset in the
     bar, minus 12px, the same overhang as the Topics floating menu. 12px is the burger's own
     value, so without the script nothing moves. */
  .rfi-masthead--split .rfi-masthead__navcb:checked ~ .rfi-masthead__nav { left: var(--rfi-more-left, 12px); }
  .rfi-masthead--split .rfi-masthead__nav > a.is-row,
  .rfi-masthead--split .rfi-masthead__nav > a.is-row + .rfi-masthead__navdiv { display: none; }
}