/*
Header

Styles for elements within a header that has third-party code:

- FontAwesome icons
  (for Portal navigation)
- Bootstrap
  (for CMS navigation)
  (for Portal navigation)
- a subset of Bootstrap 3.3.7
  (for CMS body content, can affect navigation)

Markup: s-header.html

Styleguide Trumps.Scopes.Header
*/
@import url("../tools/media-queries.css");

/* WARNING: NO-R/EM: CMS uses 1rem = 10px, but Portal uses 1rem = 16px */

.s-header {
  --height: 50px;
  --header-major-border-width: 1px;

  font-size: 14px; /* NO-R/EM: See `font--cms.css` */
  font-weight: var(--bold);
  letter-spacing: 0.025px; /* 14px * 0.025em equals design-requested 0.35px */
  line-height: 1.4; /* `body` line-height differs between CMS, Portal, Docs */

  font-family: var(--global-font-family--sans--portal);
  /* Copied from Portal (via `body`) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* To hide border, set this in theme to match `--header-bkgd-color` value */
  border-bottom: var(--header-major-border-width) solid var(--header-major-border-color);
}

/* To prevent header bar resize whether:
  - navbar is collapsed or expanded
  - logo is wide or narrow
  - logo is raster or vector
*/
.s-header .navbar-brand {
  height: calc(
    var(--height)
    - var(--nav-padding-vert) * 2
    - var(--header-major-border-width)
  );
}

/* Affiliation */

/* SEE: ../branding_logos.css */

/* Logo */

.s-header .navbar-brand {
  /* To align first CMS nav link with Portal "Dashboard" header */
  /* CAVEAT: A wide logo will shift first CMS nav link rightward */
  flex-shrink: 0;
  flex-basis: 175px;
  margin-right: 15px; /* NO-R/EM: 1rem (from Bootstrap via `.navbar-brand`) */

  /* To veritcally center child image that has manual height */
  display: flex;
  align-items: center;

  padding: unset;
}

/* Navigation */

/* To stretch nav items to header height (while retaining vertical centering) */
.s-header,
.s-header .navbar-collapse {
    align-items: stretch;
}

.s-header {
  /* Make horizontal padding match the horizontal content buffer in Portal */
  /* FAQ: The `calc()` keeps track of disparate source of space values */
  /* `16px` = `1rem` from Portal (via `#sidebar .nav-content`) */
  /* `20px` from Portal (via `.nav-link`) */
  --nav-padding-vert: 5px;
  --nav-padding-horz: calc(16px + 20px);

  background-color: var(--header-bkgd-color);
  padding: var(--nav-padding-vert) var(--nav-padding-horz);
}

/* Navigation: Links */

.s-header .nav-link {
  --border-width: 4px;

  border-color: transparent;
  border-style: solid;
  border-width: 0 0 var(--border-width);

  /* If link text uses 2 lines, header grows taller (but it must not do so) */
  white-space: nowrap;
}
.s-header .navbar-nav .nav-link /* to match Bootstrap specificity */
/* FAQ: Bootstrap selector is `.navbar-expand-… .navbar-nav .nav-link` */ {
  padding-inline: 14px;
}
.s-header .nav-link:is(:hover, :active) {
  text-decoration: none;
}
.s-header .nav-link:active {
  border-style: double;
}

@define-mixin header--not-expanded {
  &.s-header .nav-item {
    display: flex;
  }

  &.s-header .nav-link {
    display: flex;
    align-items: center;

    /* To align the underline of a hovered link to bottom of header */
    height: calc(100% + var(--nav-padding-vert) + var(--header-major-border-width));

    padding-block: 5px;
  }
}
@media (--x-narrow-and-above) {
  .navbar-expand-sm { @mixin header--not-expanded; }
}
@media (--narrow-and-above) {
  .navbar-expand-md { @mixin header--not-expanded; }
}
@media (--medium-and-above) {
  .navbar-expand-lg { @mixin header--not-expanded; }
}
@media (--wide-and-above) {
  .navbar-expand-xl { @mixin header--not-expanded; }
}

@define-mixin header--is-expanded {
  &.s-header .nav-item {
    display: flex;
    flex-wrap: wrap;
  }

  &.s-header .nav-link {
    padding-block: 8px;
  }
  &.s-header .dropdown-menu {
    flex-basis: 100%;
  }
}
@media (--x-narrow-and-below) {
  .navbar-expand-sm { @mixin header--is-expanded; }
}
@media (--narrow-and-below) {
  .navbar-expand-md { @mixin header--is-expanded; }
}
@media (--medium-and-below) {
  .navbar-expand-lg { @mixin header--is-expanded; }
}
@media (--wide-and-below) {
  .navbar-expand-xl { @mixin header--is-expanded; }
}

.s-header .nav-link:hover,
.s-header .nav-link:focus,
.s-header .nav-link:active,
.s-header .nav-item.active .nav-link {
  border-color: var(--global-color-secondary--light);
}
.s-header .nav-link {
  color: var(--header-text-color);
}
.s-header button.nav-link {
  font-weight: inherit;
  background-color: inherit;
}
/* To support Bootstrap "Split button" */
/* https://getbootstrap.com/docs/4.6/components/dropdowns/#split-button */
.s-header .nav-link:has(+ .dropdown-toggle-split) {
  padding-right: 0;
}


/* Search */

/* Create a line between search bar and login */
/* FAQ: The line should only exist if both elements are present */
.s-header .s-search-bar ~ .s-portal-nav {
  border-left: 1px solid var(--header-minor-border-color);

  margin-left: 12px;
}

/* Dropdown */

/* To ensure sizes match between clients with different rem value */
/* FAQ: Bootstrap uses rem space values but CMS and Portal rem values differ */
.s-header .dropdown-menu {
  font-size: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.dropdown-menu`) */
}

/* Icons */

/* HACK: Using FontAwesome as placeholder */
.s-header [class*="fa-"] {
  width: 27px; /* NO-R/EM: 1.25em (from Portal `.fa`—FP-228 will deprecate it) */
  text-align: center;
}

/* Theme-based Icon Colors */

/* Sets theme-based colors for selectors in themes that use third party images for icons or need color overrides. */
/* This will eventually be superceded by GH-101. */

/* For black icons:
  - create a rule set like this in s-header.css
    (where `--custom-property` is a relevant name):

    ```css
    .selector-target {
      filter: var(--custom-property);
    };
    ```
  - reset the custom property value in a project stylesheet to inverted value:

    ```css
    .selector-target {
      ...
      "--custom-property": "invert(100%)"
    }
    ```
*/

/* For themed icons using a color:
  - create a rule set like this in s-header.css
    (where `--custom-property` is a relevant name):

    ```css
    .selector-target {
      mix-blend-mode: "overlay";
      filter: var(--custom-property);
    };
    ```
  - reset the custom property value in a project stylesheet to desired color:

    ```css
    .selector-target {
      ...
      "--custom-property": "#ABCDEF"
    }
    ```
*/

.s-header .navbar-toggler {
  border-radius: 0;

  /* to overwrite Bootstrap's use of rem (which is variable across clients) */
  padding: 5px 8px;
}
.s-header button.navbar-toggler {
  /* to match on Bootstrap 4 & 5 e.g. CMS & Portal */
  line-height: 18px;
}
.s-header .navbar-toggler-icon {
  filter: var(--menu-toggle-icon);

  /* to overwrite Bootstrap's use of rem (which is variable across clients) */
  width: 18px;
  height: 18px;
}