/**
 * @file
 * Header layout for the utility bar, masthead bar and primary navigation.
 *
 * Companion to js/custom/header.js, which folds the top-bar menus into the
 * single mobile drawer. The masthead itself is deliberately untouched.
 */

/* ---------------------------------------------------------------------------
 * Utility bar
 * ------------------------------------------------------------------------- */

/* Every block in this region carries width:100% (local-theme.css sets it on
   the social block by id), so as flex items they split the bar equally: the
   two 26px social icons claimed 354px of 708px and the five-item menu was
   squeezed into the rest, wrapping its last link onto a second row.
   flex-basis takes precedence over width for a flex item, so sizing here
   avoids an id-specificity fight with local-theme.css.

   The region is only display:flex on some sites, via per-site CSS rather than
   the theme, so declare it here and stop depending on that. */
.region-pre-header-left {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0 24px;
}

/* Size to content, ignoring the inherited width:100%. */
.region-pre-header-left > * {
  flex: 0 0 max-content;
  max-width: 100%;
}

/* The menu takes whatever is left over. */
.region-pre-header-left > .block-superfish,
.region-pre-header-left > .block-menu {
  flex: 1 1 0%;
  min-width: 0;
}

.region-pre-header-right {
  align-items: center;
  justify-content: flex-end;
}

/* Subscribe is the only element in the header that gains emphasis. The class
   is applied in js/custom/header.js, which matches the account menu's own
   link, so a site without one simply keeps the plain row. */
/* Carries the full descendant chain rather than the shorter
   `#pre-header a.header-cta`: the coloured bars set link colour through
   selectors like `#pre-header ul.menu li a`, which counts more elements and
   therefore wins on a tie. Without this the label went white on a white fill
   and the button read as an empty box on desktop.

   The two !important flags are deliberate and narrow. This is the one filled
   control in the header, its label has to stay legible, and it competes with
   blanket `color: #fff` rules that vary across 31 sites and a dozen colour
   schemes -- several of which already use !important themselves. Winning that
   race by selector length alone is not something worth re-testing per scheme.
   They apply to the CTA only. */
#pre-header [id*="useraccount"] ul.menu > li > a.header-cta,
#header-top [id*="useraccount"] ul.menu > li > a.header-cta {
  background: #ffffff !important;
  color: var(--color-primary, #3f3f3f) !important;
  font-weight: 600;
  border-radius: 3px;
  padding: 7px 16px;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

/* A slight hover on Subscribe: darken the white fill a shade. Needs !important
   to beat the base's forced white. --color-gray-lightest would match a light-
   area bar (#f3f3f3) and vanish the button, so use a fixed grey a step darker
   that stays distinct on both light and coloured bars. Applies at all widths,
   so desktop and mobile share it. */
#pre-header [id*="useraccount"] ul.menu > li > a.header-cta:hover,
#pre-header [id*="useraccount"] ul.menu > li > a.header-cta:focus,
#header-top [id*="useraccount"] ul.menu > li > a.header-cta:hover,
#header-top [id*="useraccount"] ul.menu > li > a.header-cta:focus {
  background-color: #e6e6e6 !important;
  text-decoration: none;
}

/* The coloured bars underline links at rest and drop the underline on hover,
   so the account links read as underlined text and their only hover feedback
   was the underline vanishing -- next to Subscribe, which visibly changes,
   they looked inert. Drop the underline and give them a colour shift, the
   same treatment the social icons get. */
#pre-header [id*="useraccount"] ul.menu > li > a,
#header-top [id*="useraccount"] ul.menu > li > a {
  text-decoration: none;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

#pre-header [id*="useraccount"] ul.menu > li > a:not(.header-cta):hover,
#pre-header [id*="useraccount"] ul.menu > li > a:not(.header-cta):focus,
#header-top [id*="useraccount"] ul.menu > li > a:not(.header-cta):hover,
#header-top [id*="useraccount"] ul.menu > li > a:not(.header-cta):focus {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
}

/* Desktop utility bar is a thin row. secondary-menu.css gives the plain links
   zero vertical padding, but the CTA carries 7px, so the button was the
   tallest thing -- it defined the bar height and filled it edge-to-edge while
   the links sat at the top. Keep the button as it is, give it a couple of
   pixels of margin the bar grows around so it clears both edges, and centre
   the plain items against it. Mobile is untouched: its account buttons keep
   the 44px min-height set in the max-width block below. */
@media all and (min-width: 992px) {
  #pre-header [id*="useraccount"] ul.menu,
  #header-top [id*="useraccount"] ul.menu {
    align-items: center;
  }

  #pre-header [id*="useraccount"] ul.menu > li > a.header-cta,
  #header-top [id*="useraccount"] ul.menu > li > a.header-cta {
    margin-top: 2px;
    margin-bottom: 2px;
  }
}

/* ---------------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------------- */

@media all and (max-width: 991px) {
  /* One hamburger. The primary navigation owns it; the top-bar menus are
     folded into that same drawer by js/custom/header.js, so their own
     Superfish toggles would be a second, unlabelled control for the same
     job. The primary menu's own toggle is exempt: js/custom/header.js moves it
     into this bar, so by then it lives here too. */
  #pre-header .sf-accordion-toggle:not(.header-toggle-moved),
  #header-top .sf-accordion-toggle:not(.header-toggle-moved) {
    display: none;
  }

  /* Likewise the top-bar menu itself, now that its links live in the drawer.
     Scoped to the left region so the account menu on the right, which stays in
     the bar as buttons, is unaffected. Keyed on `menu` rather than `sf-menu`
     because Superfish menus carry both, so this covers the sites whose
     secondary menu is a plain menu block too. Prefixed with `body` to outrank
     local-theme.css, which sets the same selector to display:flex and loads
     after this file -- without it the links showed in the bar *and* in the
     drawer.

     Keyed on the class js/custom/header.js puts on a menu it has actually
     folded, rather than on the region: one site keeps its account menu in the
     left region, and a region-based rule hid Log In / Subscribe / e-Edition
     there with nothing folding them back. Hide what was folded, nothing
     else. */
  body #pre-header ul.menu.header-folded-source,
  body #header-top ul.menu.header-folded-source {
    display: none;
  }

  /* Account links become real targets rather than 31px of text. The row's
     gutters are settled in local-theme.css, which loads after this file. */
  #pre-header [id*="useraccount"] ul.menu,
  #header-top [id*="useraccount"] ul.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    padding: 0 0 10px;
    margin: 6px 0 0;
  }

  #pre-header [id*="useraccount"] ul.menu > li,
  #header-top [id*="useraccount"] ul.menu > li {
    flex: 1 1 auto;
    margin: 0;
  }

  #pre-header [id*="useraccount"] ul.menu > li > a,
  #header-top [id*="useraccount"] ul.menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 3px;
    text-align: center;
  }

  /* Restated with the button rule's own specificity. The generic
     `#pre-header a.header-cta` is less specific than the selector above, so
     Subscribe was losing its fill, its text colour and its padding and kept
     only the bold weight -- a call to action that looked like a slightly
     heavier version of its neighbours. */
  #pre-header [id*="useraccount"] ul.menu > li > a.header-cta,
  #header-top [id*="useraccount"] ul.menu > li > a.header-cta {
    background-color: #ffffff;
    color: var(--color-primary, #3f3f3f);
    border-color: #ffffff;
    font-weight: 600;
  }

  #pre-header [id*="useraccount"] ul.menu > li > a.header-cta:hover,
  #pre-header [id*="useraccount"] ul.menu > li > a.header-cta:focus,
  #header-top [id*="useraccount"] ul.menu > li > a.header-cta:hover,
  #header-top [id*="useraccount"] ul.menu > li > a.header-cta:focus {
    background-color: var(--color-gray-lightest, #f3f3f3);
    border-color: var(--color-gray-lightest, #f3f3f3);
    color: var(--color-primary, #3f3f3f);
  }

  /* As buttons they also brighten their outline, so the feedback reads at a
     glance rather than only in the label colour. */
  #pre-header [id*="useraccount"] ul.menu > li > a:not(.header-cta):hover,
  #pre-header [id*="useraccount"] ul.menu > li > a:not(.header-cta):focus,
  #header-top [id*="useraccount"] ul.menu > li > a:not(.header-cta):hover,
  #header-top [id*="useraccount"] ul.menu > li > a:not(.header-cta):focus {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.85);
    color: #ffffff;
  }

  .region-pre-header-left {
    flex-wrap: wrap;
  }

  /* The primary menu's toggle, moved here from the navigation region by
     js/custom/header.js so it sits beside the social icons. In normal flow,
     so it scrolls with the page rather than following the viewport. */
  /* Anchored to the bar itself so it sits flush with the viewport edge --
     the container and the region each add 8px of padding, which otherwise
     leaves it inset. Absolute, not fixed: it scrolls away with the page. */
  #pre-header {
    position: relative;
  }

  #pre-header .region-pre-header-left .sf-accordion-toggle.header-toggle-moved {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    width: 52px;
    height: 52px;
    text-align: center;
    background: rgba(0, 0, 0, 0.12);
    border-bottom-left-radius: 6px;
    z-index: 2;
  }

  /* Prefixed with #pre-header to outrank menu.css, which gives this anchor
     `padding: 15px 10px 5px` and a right-aligned parent -- that pushed the
     glyph high and to the right of its box instead of centring it. */
  /* Tapping the toggle sets the hash, and the :target fallback then reveals
     the block's "close" twin -- which is still sitting in the navigation
     region, so it appeared as a stray second hamburger below the masthead
     after the first tap. js/custom/header.js drives open and close from the
     one control now.

     Conditioned on the relocation having actually happened, so that with
     JavaScript off nothing moves, the twin stays beside its partner and the
     :target fallback still works. */
  body:has(.menu-toggle.header-toggle-moved)
    #main-navigation
    .region-navigation
    .menu-toggle--hide {
    display: none;
  }

  /* The plain menu block renders its toggle as the anchor itself rather than
     wrapping it, so it needs the box styling directly. */
  #pre-header .region-pre-header-left a.menu-toggle.header-toggle-moved {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    color: #ffffff;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.12);
    border-bottom-left-radius: 6px;
    z-index: 2;
  }

  #pre-header .region-pre-header-left a.menu-toggle.header-toggle-moved::after {
    content: "\f0c9";
    font-family: "FontAwesome", fantasy;
    font-size: 24px;
    line-height: 1;
    position: static;
    right: auto;
  }

  #pre-header .region-pre-header-left .sf-accordion-toggle.header-toggle-moved a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    color: #ffffff;
  }

  #pre-header
    .region-pre-header-left
    .sf-accordion-toggle.header-toggle-moved
    a::after {
    line-height: 1;
  }

  /* The drawer reads as one list, not a three-column grid. */
  .region-navigation ul.menu > li {
    display: block;
    width: 100%;
    float: none;
  }

  .region-navigation ul.menu > li > a,
  .region-navigation ul.menu > li > span.nolink {
    display: flex;
    align-items: center;
    min-height: 48px;
    line-height: 1.35;
    padding: 0 16px;
    white-space: normal;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  /* A drawer item whose destination is already an account button above.
     Applied in js/custom/header.js. */
  .region-navigation ul.menu > li.header-duplicate {
    display: none;
  }

  /* The folded-in top-bar links sit as peers of the sections above them, so
     mark where they start. Matches the first folded item by position rather
     than needing a class, and resolves to nothing when there is no fold. */
  .region-navigation ul.menu > li:not(.header-folded) + li.header-folded {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
  }

  /* A tapped/hovered row flipped to a solid white block with black text, which
   turned the currentColor focus ring black. Hold it to a subtle tint. */
  .region-navigation ul.menu > li > a:hover,
  .region-navigation ul.menu > li > a:focus {
    background-color: rgba(255, 255, 255, 0.14);
    color: #ffffff;
  }

  /* Keep the focus ring, but zero the 2px gap and hold it white. */
  .region-navigation ul.menu > li > a:focus,
  .region-navigation ul.menu > li > a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
  }
}