/* abstracts/_variables.scss */
:root {
  --darker-grey: #222; 
  --mid-grey: #a9a9a9;
  --darker-red: #c44038;
} 

/* _header.scss */
header nav a {
  color: var(--darker-red);
}

/* _buttons.scss */
.project__row__tools li a,
.action.button,
.page-header__action a {
		background: var(--darker-red);
}


/* layout/_containers.scss */
.timeline__wrapper__content__item__row.context {
    color: var(--mid-grey);
}
.story-embed-caption{
	background: var(--darker-grey);
}

/* darken links: layout/_footer.scss */
.project__row__articles li a,
a.hi, ul.breadcrumb a, 
.report-detail__content__tags ul a,
.list-entries__entry__tags ul a,
.project__row p a,
.resources__item__summary h4 a,
footer .about a, 
footer a {
    color: var(--darker-red);
}

footer .credits ul li a img {
  transition: filter 0.3s ease; /* Smooth transition for filter changes */
  filter: grayscale(100%); /* Microsoft Edge and Firefox 35+ */
}
footer .credits ul li a img:hover{
  filter: grayscale(0%); /* Microsoft Edge and Firefox 35+ */
}

/* ==========================================================================
   HTML5 BOILERPLATE Helper classes
   ========================================================================== */

 /*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}