// Rules for styling links // =========================================

.links__kcc-logo {

display: inline;
float: left;
width: 120px;
height:80px;

}

// use the 'link__offset' class to offset jump-links via CSS only method. // Links need to be offset to clear the fixed navigation bar at the top. // =========================================

.links__offset { // Pointer-events is needed to prevent the .links__offset::before pseudo-element

pointer-events: none;  // from "blocking" any anchor tag above from being clicked.
& a,
& button,
& iframe,
& .card-body {  // HOWEVER, if there is a child anchor, or button, element,
  pointer-events: auto; // it obviously needs to be clickable.
}

}

.links__offset::before {

// mobile devices get slightly different offset b/c of different sized fixed header
content: " ";
display: block;
height: 171px; // defining a height pushes the element down the page
margin-top: -171px; // negative margin is needed to push it back to its original position
pointer-events: none; // w/ out this it will interfere with the sites navigation links
visibility: hidden;

}

@media screen and (min-width: 768px) {

  .links__offset::before {
    height: 150px;
    margin-top: -150px;
}

}

.links__darker-link {

color: $darker-link;

}

// Rules to override bootstrap 4's “nav-link” color // ========================================= .navbar-light .navbar-nav .nav-link.links__nav-link–color:not(.btn-primary) { // Ugly (chain of) selectors needed to overide bootstrap's “nav-link” color:

color: $primary-blue;
&:hover,
&:focus {
  color: $primary-red;
}

}

.navbar-light .navbar-nav .nav-link.links__nav-link–color.btn-primary {

color: $white;

}

.navbar-light .navbar-nav .active>.nav-link {

border-bottom-color: $primary-red;
border-bottom-style: solid;
border-bottom-width: thick;
color: $primary-blue;
padding-bottom: 0;

}

.navbar-light .navbar-nav .nav-focus, .navbar-light .navbar-nav .nav-hover {

color: $primary-red;

}

.links__phone–span { // Phone # link in the navigation on landing pages like info.kcc.edu

color: $white;
position: relative; // Needed to make pseudo-element underlining the right width
text-decoration: none;
&:visited {
  color: $white;
}
&:hover,
&:focus {
  color: $white;  // Remove the Bootstrap primary blue colour on a:hover
  text-decoration: none; // Prevent underlining
}

}

.links__phone–span:focus:after, .links__phone–span:hover:after { // mouse-hover effect for phone # in landing pages

opacity: 1;  // Make the underline fade in
transform: translateY(-.2em); // Move the underline up (along the Y-axis) as it fades-in

}

.links__phone–span:after { // Pseudo-element to unerline the phone # on mouse-hover

background-color: $color-orange;
bottom: - .325rem;
content: "";
display: block;
height: .1875rem;
opacity: 0;
position: absolute;
transition: opacity .3s,transform .3s; // mouse-hover effect
width: 100%;

}

.links__no-underline {

text-decoration: none;
&:hover {
  text-decoration: none;
}

}

@media screen and (min-width: 992px) {

.links__header-global--nav-local {
  position: relative;
}
.active .links__header-global--nav-local::after {
  background-color: $primary-red;
  bottom: .125rem;
  content: '';
  display: block;
  height: .145rem;
  position: absolute;
  width: calc(100% - 1rem);
}

}