/**
 * Give Olivero's primary navigation its own full-width row below the branding.
 *
 * The reinstated primary nav uses Olivero's built-in `main` menu, rendered by
 * the theme's primary-nav block. By default Olivero lays the nav out in the
 * header row beside the site branding, which -- with this site's wide branding
 * (logo + name + long slogan) and the four D7 menu labels -- leaves the nav too
 * little width, so it wraps to two lines and Olivero's nav-resize.js auto-
 * collapses it to the mobile hamburger at every width (`is-always-mobile-nav`).
 *
 * Letting the header container wrap and giving `.header-nav` a full-width row
 * gives the nav the whole container width, so it stays on one line and Olivero
 * keeps the horizontal desktop navigation. Scoped to Olivero's desktop nav
 * breakpoint so the mobile drawer is untouched at narrow widths.
 */

@media (min-width: 75rem) {
  .site-header__inner__container {
    flex-wrap: wrap;
  }

  .site-header__inner__container .header-nav {
    flex: 0 0 100%;
    max-width: 100%;
    justify-content: flex-start;
    /* Olivero keeps the mobile drawer's white background on the desktop nav row,
       which would cover the header colour. Match the header. Scoped to the
       desktop breakpoint so the mobile slide-in drawer keeps its own white
       background. */
    background: #E7EDFF;
  }
}

/**
 * Header / branding colours, restored from the original D7 theme
 * (omegabridgeart/css/global.css: `div.region-menu-inner { background-color:
 * #E7EDFF }`). Olivero renders the header row white and gives the left branding
 * block its own blue gradient with white text; recolour both to the D7 light
 * blue and darken the branding text so it stays readable.
 */

/* Header background (was --color--white). The descendant selector raises
   specificity above Olivero's own `.site-header__inner` rule, which loads after
   this module's CSS. */
.site-header .site-header__inner {
  background: #E7EDFF;
}

/* The block on the left of the header (logo + site name + slogan): override
   Olivero's blue gradient so it matches the header. */
.site-header .site-branding {
  background-image: none;
  background-color: #E7EDFF;
}

/* Branding text was white for the dark gradient; make it dark on light blue.
   Links inside inherit this. Primary-nav links sit outside .site-branding and
   are already dark, so they are left untouched. */
.site-header .site-branding__text {
  color: #1b1b1b;
}

/* The far-left sticky-header toggle strip (Olivero's `.site-header__initial`,
   primary-50 blue): recolour to match the header, and darken the toggle's icon
   bars, which are white for the blue strip, so they stay visible on light blue. */
.site-header .site-header__initial {
  background-color: #E7EDFF;
}

.site-header .sticky-header-toggle__icon > span {
  background-color: #1b1b1b;
}