/* Desktop header spacing (testing-team report: search box, social icons and the Shop / Discover / Collaborate / Start a Project cluster overlapped on PC and MacBook).
   Loaded after the layout's own CSS by layouts/main.php, layouts/mainCopy.php and layouts/newmain.php. Nothing here applies at 768px or narrower, so the phone header is unchanged.
   Reasoned widths: 1024, 1280, 1366, 1440, 1512, 1600. */

/* 1. main and mainCopy layouts (header.mobile-view): logo | search | nav. The grid made the nav column 33% wide, but the five-item nav is 400px+ wide, so it
   spilled left over the search box. From 992px up the row is a flex row: logo and nav keep their own width (flex-shrink 0), the search box takes what is left. */
@media (min-width: 992px) {
  header.mobile-view .row:not(.hidden-md) { display: flex; flex-wrap: nowrap; align-items: flex-start; }
  header.mobile-view .row:not(.hidden-md):before,
  header.mobile-view .row:not(.hidden-md):after { display: none; }
  header.mobile-view .row:not(.hidden-md) > .col-md-1 { flex: 0 0 80px; width: 80px; max-width: 80px; }
  header.mobile-view .row:not(.hidden-md) > .col-md-7 { flex: 1 1 0; width: auto; max-width: none; min-width: 160px; float: none; margin: 0 24px 0 16px; }
  header.mobile-view .row:not(.hidden-md) > .rgt-nav { flex: 0 0 auto; width: auto; max-width: none; float: none; margin-left: auto; }
  header.mobile-view .rgt-nav nav > ul { float: none; display: flex; flex-wrap: nowrap; }
  header.mobile-view .rgt-nav nav > ul > li { flex: 0 0 auto; min-width: 56px; }
}

/* 2. Start a Project icon (main layout). The link had no icon element at all (the sprite img/top-header-nav.png has no start-project image). The span holds an inline
   svg that points at the existing symbol dc-i-edit in web/svg/dc-icons.svg. Shown from 769px up (rule in the last block); hidden at 768px and narrower so the phone header stays as it was. */
header.mobile-view .rgt-nav li a span.start-link { display: none; }

/* 3. newmain layout (home and marketing pages): the search and cart icons (.dcHdrIcons) are positioned absolutely at the right edge, and the social icons
   were laid out under them. The nav box now keeps 104px (two 44px icons + 16px edge) clear on the right, the social row is a non-wrapping flex row that grows leftwards,
   and each social icon is a 40px target. */
@media (min-width: 769px) {
  header.mobile-view .rgt-nav li a span.start-link { display: block; background-image: none; overflow: visible; }
  header.mobile-view .rgt-nav li a span.start-link svg { display: block; width: 26px; height: 26px; margin: 2px auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  header .rgtNav { padding-right: 104px; }
  header .topSocialWrap ul { display: flex; flex-wrap: nowrap; justify-content: flex-end; }
  header .topSocialWrap ul li a { height: 40px; width: 40px; }
}