/* ---------------------------------------------------------------------------
 * Sticky site navbar — opt-in, per page.
 *
 * A digalu-theme page opts in by adding `sticky-navbar` to its bodyclass block
 * and linking this file. Currently: /features/ and the business-excellence showcase.
 * Every other page keeps the navbar that scrolls away, deliberately — before
 * opting a page in, check that the pinned bar does not cover its first content
 * on a phone (see the min-height note below).
 *
 * Why the theme's own sticky mode does not work: validnavs.js adds .sticked on
 * scroll, but at >=1024px the theme's own
 * `nav.navbar.navbar-default.validnavs.sticked { position: absolute }`
 * outranks its `.sticked { position: fixed }`, and below 1024px the script
 * never adds the class at all. `position: sticky` is no fix either: the
 * navbar's <header> sits in a .wrapper only one viewport tall, so it would let
 * go partway down. So the bar is pinned with `fixed`.
 *
 * On desktop nothing moves at the top of the page — the navbar was already
 * absolutely positioned over it.
 * ------------------------------------------------------------------------ */

/* The pinned bar's height, for pages whose first section must clear it. These
 * are the usual values; js/sticky-navbar.js replaces them with the measured
 * height on pages that load it. */
body.sticky-navbar { --sticky-nav-h: 197px; }
@media (max-width: 1023.98px) {
  body.sticky-navbar { --sticky-nav-h: 64px; }
}

body.sticky-navbar nav.navbar.navbar-default.validnavs {
  position: fixed;
  top: 0;
  /* Bootstrap's fixed-navbar layer, down from project.css's `9999 !important`
   * (hence the !important): once pinned, 9999 sat on top of the mobile drawer
   * (1045) and covered its close button. Opted-in pages must keep their own
   * layers below 1030. */
  z-index: 1030 !important;
}

body.sticky-navbar nav.navbar.navbar-default.validnavs.sticked {
  box-shadow: 0 14px 32px -18px rgba(14, 36, 64, .45);
}

/* Below 1024px validnavs.css pins the navbar with `position: relative
 * !important`, so only an !important of our own reaches it. left/right keep it
 * full width — a fixed box otherwise shrinks to fit its contents.
 * min-height: the bar is 35px but the logo is ~60px, which overhung the page
 * below; harmless while the bar scrolled away, not once it stays on screen.
 * Taken out of the flow, the bar now overlays the top 64px of the page. */
@media (max-width: 1023.98px) {
  body.sticky-navbar nav.navbar.navbar-default.validnavs {
    position: fixed !important;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    min-height: 64px;
    box-shadow: 0 10px 24px -18px rgba(14, 36, 64, .5);
  }
}