/* ==========================================================================
   Navigation - Navbar, Menus, Dropdowns
   ========================================================================== */

/* Navbar */
.navbar {
  margin-bottom: unset;
  background-color: var(--color-text-inverse);
  border-bottom: 1px solid var(--color-border);
}

.navbar-brand {
  color: var(--color-text-base);
  padding: 0;
  margin: 0;
  position: relative;
  top: 0px;

  &:hover {
    color: var(--color-surface-dark);
  }
}

.nav-left,
.nav-right {
  flex-basis: 100%;
}

/* Brand Navigation */
ul.brand-nav {
  &:before {
    content: 'Powered by:';
    color: var(--color-border);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    line-height: 1;
    position: relative;
    top: 1px;
  }

  a {
    text-decoration: none;
    color: var(--color-border);

    &:hover {
      color: var(--color-text-inverse);
    }
  }

  &.network {
    max-width: 75%;

    a {
      color: var(--color-text-base);

      &:hover {
        color: var(--color-surface-dark);
      }
    }

    li {
      margin: 0.25rem 2rem;

      a {
        color: var(--color-border);

        &:hover {
          color: var(--color-text-inverse);
        }
      }
    }
  }
}

#global-brands {
  ul.brand-nav > li {
    padding: 0;
    margin: 0 0 0 1.35rem;

    &:first-of-type {
      margin: 0 0 0 1rem;
    }
  }

  a svg {
    fill: currentColor;
  }

  a img {
    filter: invert(1) opacity(0.7);
    display: none;
  }
}

footer ul.brand-nav a {
  margin-right: 0.75em;
  margin-bottom: 0.35em !important;
  display: inline-block;
}

/* Nav Links */
.nav-link {
  color: var(--color-text-base);

  &:hover {
    color: var(--color-action);
    /* text-decoration: underline; */
    /* text-decoration-color: var(--color-highlight); */
    /* text-decoration-thickness: 3px; */
    /* text-underline-offset: 3px; */
  }

  &.alt {
    color: var(--color-surface-dark);

    &:hover {
      color: var(--color-action);
    }
  }

  .bi {
    vertical-align: baseline;
  }

  &.text-secondary-color:hover {
    color: var(--color-action-dark) !important;
  }
}

.bg-dark .nav-link.alt {
  color: var(--color-highlight-warm);

  &:hover {
    color: var(--color-border);
  }
}

/* IP-auth status badge -- shown in place of Sign Out for visitors who are
   automatically signed in via their network's IP address (see em_is_ip_authenticated()
   in inc/gating-functions.php). They never manually sign out, so this is a status
   indicator, not a control. */
.ip-auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.45em 0.95em;
  background-color: var(--color-highlight-warm);
  color: var(--color-text-inverse);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: 999px;
  white-space: nowrap;
  cursor: help;
}

.ip-auth-badge svg {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
}

/* Navbar Nav */
.navbar-nav {
  .dropdown-menu {
    position: absolute;
    border: var(--border-default);
    padding: 0.25em;
  }

  li {
    margin-right: 1em;
    font-family: var(--font-ui);
    font-weight: 500;
  }

  &:not(.social) li {
    font-size: 96%;
  }
}

/* Social Navigation */
ul.social {
  align-items: center;
  padding-left: 1rem;

  &:before {
    content: 'CONNECT:';
    display: inline-block;
    margin-right: 0.5em;
    font-family: var(--font-ui);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
  }

  > li {
    &:not(:last-of-type) {
      margin-right: 2px;
    }

    a {
      background-color: unset;
      padding: 0 0.25rem;

      &:hover {
        background-color: unset;
      }

      &.active {
        color: var(--color-highlight-warm) !important;
      }
    }
  }
}

.offcanvas {
  background-color: var(--color-text-inverse);

  &-header {
    border-bottom: 1px solid var(--color-border);
  }

  &-body ul.social {
    &:before {
      color: var(--color-text-base);
    }

    a {
      color: var(--color-surface-dark);

      &:hover {
        color: var(--color-surface-dark-deep);
      }
    }
  }
}

/* Dropdown Toggles */
.dropdown-toggle:after {
  color: var(--pub-color, var(--color-border));
}

.nav-link.dropdown-toggle:after {
  color: var(--pub-color, var(--color-surface-dark-deep));
  vertical-align: middle;
}

.bg-dark .nav-link.dropdown-toggle:after {
  color: var(--pub-color, var(--color-highlight-warm));
}

.nav-link.dropdown-toggle:hover {
  color: var(--pub-color, var(--color-action));
}

.bg-dark .nav-link.dropdown-toggle:hover {
  color: var(--pub-color, var(--color-highlight-warm));
}

/* Dropdown Menus */
.dropdown-menu {
  background: var(--color-text-inverse);
  border: var(--border-default);
  border-radius: unset;
  padding: 0.5em;
  &.divider {
    margin-bottom: .5em;

    &:after {
      border-bottom: 1px dotted var(--bs-border-color);
      content: "";
      display: block;
      position: relative;
      top: .5em;
      width: 100%;
    }
  }
  .menu-item {
    margin: 0;
    padding: 0;
  }

  > .menu-item a {
    background-color: transparent;
    border: 0;
    clear: both;
    display: inline-block;
    font-weight: 400;
    padding: 0.125em 0.5em;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    margin: 0;
    font-weight: 500;


    &.network-start:before {
      content: 'From the Chief Marketer Network:';
      display: block;
      font-size: x-small;
      color: var(--color-surface-dark);
      margin: 0.25em 0;
    }

    &.off-site a:after {
      content: '\F280';
      font-family: bootstrap-icons !important;
      color: var(--color-action);
      position: relative;
      font-size: smaller;
      vertical-align: middle;
      line-height: 1;
      left: 1px;
    }
  }

  &.post-list li:not(:last-of-type) {
    margin-bottom: 0.75em;
    padding-bottom: 0.75em;
    border-bottom: 1px solid var(--color-border);
  }

  &.post-list li a.post-link {
    text-transform: initial !important;
  }
}

.navbar .dropdown-item > a,
.navbar .menu-item > a {
  text-decoration: none;
  text-transform: none;
  display: inline-block;
}

.navbar-nav .menu-item > a {
  padding: 0.25rem 0.25rem;
}

.offcanvas-body ul.nav .menu-item.divider:after {
  top: 0.25em;
}

/* Nav Menus */
ul.nav {
  margin-top: 1.61803399em;
  font-family: var(--font-ui);

  .nav-link {
    padding: 0.35em 1em;
    background-color: var(--color-surface-dark-deep);
    color: var(--color-text-inverse);
    font-weight: 600;
    font-family: var(--font-ui);
    line-height: 1.5;
    border-radius: 0.2em;

    &:hover {
      background-color: var(--color-surface-dark);
      color: var(--color-text-inverse);
    }

    i {
      margin-left: 0.125em;
      color: var(--color-highlight-warm);
      vertical-align: baseline;
      line-height: 1;
    }
  }

  .menu-item {
    font-size: 94%;
    background-color: transparent;
    border: 0;
    clear: both;
    display: block;
    font-weight: 400;
    padding: unset;
    text-align: inherit;
    text-decoration: none;
    white-space: normal;
    width: auto;
    margin: 0 0 0 0.65em;
    font-weight: 500;

    &.divider {
      margin-bottom: .5em;

      &:after {
        border-bottom: 1px dotted var(--bs-border-color);
        content: "";
        display: block;
        position: relative;
        top: .5em;
        width: 100%;
        margin-bottom:0.5em;
      }
    }

    &.network-start:before {
      content: 'From the Chief Marketer Network:';
      display: block;
      font-size: x-small;
      color: var(--color-surface-dark);
      margin: 0.25em 0;
    }

    &.off-site a:after {
      content: '\F280';
      font-family: bootstrap-icons !important;
      color: var(--color-action);
      position: relative;
      font-size: smaller;
      vertical-align: middle;
      line-height: 1;
      left: 1px;
    }
  }
}
.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-menu .menu-item:focus,
.dropdown-menu .menu-item:hover {
  /* color: white !important; */
  
  a {
    &:hover {
        background-color: var(--pub-color, var(--color-highlight));
        /* color: var(--color-text-base); */
        color: white !important;
      }
    }
}
.navbar .dropdown-item > a {
    display: block;

    &:hover, &:focus {
      color: var(--color-text-base);
    }
}

/* Categories Menu */
.categories-menu {
  margin-bottom: 0;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  font-size: 94%;
  max-width: 1100px;

  li {
    padding: 0;
    margin: 0;
    font-family: var(--font-ui);
  }
}

/* Syndicated Navigation */
ul.nav-syndicated {
  li {
    &:not(:last-of-type):after {
      content: '|';
      color: var(--color-border);
      margin: 0 0.35em;
    }

    > a {
      font-size: small;
      font-weight: 500;
    }
  }
}

/* Downloads Menu */
.downloads-menu {
  .dropdown-menu.show {
    min-width: 280px;
  }

  ul li:not(:last-of-type) {
    margin-right: 0.5em;
  }
}

#search-autocomplete-offcanvas {
  width: unset;
}


/* BREAD CRUMBS */
.wrap-breadcrumb {
	display: inline-block;
	padding-bottom: 2px;
	background-color: #fff2e2;
	background-color: white;
	z-index: 1001;
}
@media(min-width: 992px) {
	.wrap-breadcrumb {
		top: 72px;
		position: sticky;
	}
}
.wrap-breadcrumb span {
	text-transform: uppercase;
	line-height: 1;
	font-size: 14px;
	letter-spacing: 0.05em;
}
.wrap-breadcrumb span > a {
	text-decoration: none;
}
.wrap-breadcrumb span span {
	font-weight: bold;
	&:not(:first-of-type) {
		&:before {
			content: '\00BB';
			font-size: 1rem;
			font-weight: normal;
			margin: 0 0.25em 0 -0.25em;
			color: var(--bs-gray-600);
		}
	}
}
.wrap-breadcrumb span.breadcrumb_last {
    display: none;
}

.btn-primary {
  i {
    color: var(--color-highlight-warm) !important;
  }
}

.menu-item.divider:after {
    border-bottom: 1px dotted var(--bs-border-color);
    content: "";
    display: block;
    margin: .25em 0;
    width: 100%;
}


.first-agency {
  &:before {
    content: "Agencies:";
    display: block;
  }
}
.first-facility,
.first-contractor,
.first-agency {
  &:before {
    display: block;
    font-style: italic;
    font-weight: bold;
  }
}
.first-facility:before{
  margin-top: 1em;
  content: "Facilities –";
}
.first-agency:before {
  content: "Agencies –";
}
.first-contractor:before {
  content: "Contractors –";
}
.widget li {
  position: relative;
}
.widget {
  .first-facility,
  .first-contractor,
  .first-agency {
    padding-top: 2rem;
    margin-top: 0;
    &:before {
      margin-top: 0.5rem;
      position: absolute;
      top: -0rem;
      left: -1rem;
    }
  }
}