/* ============================================================
   components/masthead.css
   One row, one white card. Logo, five feeds, search, 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 (it
   already collapses to its icon below 1180), so it absorbs the shortfall instead. */
.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; }

/* 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 {
  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. */
.rfi-masthead__langmenu a.is-active { color: var(--rfi-navy); font-weight: 600; }
.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 a.is-active .rfi-masthead__langcode { color: var(--rfi-navy); }

/* 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__navlang { display: none; }

@media (max-width: 1300px) { .rfi-masthead__tag { display: none; } }
@media (max-width: 1180px) { .rfi-masthead__search { flex-basis: 44px; min-width: 0; padding: 0 10px; } .rfi-masthead__search input { display: none; } }