/* Forge masthead fit. One stylesheet, linked last in <head> on every page that
   carries the masthead (English, es, hmn, so), so it overrides the per-page
   rules of the same name and a fix here holds everywhere.

   The rule this file enforces: the header is as tall as its content needs.
   Nav items never break inside a label, the call-to-action never squeezes,
   and when brand + weather + nav do not fit one row the nav drops to its own
   row under the brand instead of wrapping word by word. Type sizes are not
   touched: a longer translation gets more room, never smaller type.

   Row 1: brand, shoreline, date and weather (the last two only from 1280px).
   Row 2: the nav, only when it will not fit beside them. */

.masthead .wrap{
  flex-wrap:wrap; height:auto; min-height:70px;
  padding-top:10px; padding-bottom:10px;
  column-gap:28px; row-gap:6px;
}
.masthead .brand{ margin-right:26px }

/* The nav keeps its own width; its items wrap as whole labels, never inside. */
.masthead .mnav{
  margin-left:0; flex:0 1 auto; min-width:0;
  flex-wrap:wrap; column-gap:26px; row-gap:2px;
}
.masthead .mnav a{ white-space:nowrap }
.masthead .mnav .try{ flex:none; line-height:1.4 }

/* The weather glyph sits in the line. The homepage reset (img,svg{display:block})
   had been breaking the strip into three stacked lines. */
.wx svg{ display:inline-block }

/* Phones and small tablets: only the call-to-action remains in the nav, so it
   stays beside the brand when it fits and drops under it, right-aligned, when
   it does not. */
@media (max-width:800px){
  .masthead .wrap{ column-gap:14px }
  .masthead .brand{ margin-right:0 }
  .masthead .mnav{ margin-left:auto; justify-content:flex-end }
}