// Rules for styling links // ========================================= // 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;

}

.links__no-underline {

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

}