/*
 * Additions layered on top of style_2.css.
 *
 * style_2.css is the original Umbraco stylesheet, kept byte for byte so the
 * design cannot drift. Anything the WordPress build needs on top of it lives
 * here, and nothing in this file changes an existing rule.
 */

/* A slider image that belongs to a project becomes clickable, without
   disturbing ".carousel-item > img", which the responsive rules target. */
.carousel-item .slide-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
}

/* 404 — the Umbraco site had no styled version of this page. */
.wrap.notFound {
  text-align: center;
}

.wrap.notFound h2 {
  font-size: 16px;
  margin-bottom: 14px;
}

.wrap.notFound p {
  font-size: 13px;
  margin-bottom: 26px;
}

.wrap.notFound a {
  font-size: 13px;
  opacity: .6;
  transition: opacity .3s;
}

.wrap.notFound a:hover {
  opacity: 1;
}

/* Pagination, only visible if the client ever caps projects per page. */
.projects .navigation.pagination {
  width: 100%;
  text-align: center;
  font-size: 13px;
  margin-top: 20px;
}

.projects .navigation.pagination .page-numbers {
  display: inline-block;
  padding: 0 8px;
  opacity: .6;
  transition: opacity .3s;
}

.projects .navigation.pagination .page-numbers.current,
.projects .navigation.pagination .page-numbers:hover {
  opacity: 1;
}

.projects .navigation.pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Editor-inserted images inside a BIO or Contact page stay inside the column.
   Scoped to the text columns on purpose: the contact map is absolutely
   positioned and sized by height:100%, so a blanket "height:auto" here would
   collapse it. */
.wrap.text .col-md-6 img,
.wrap.contactUs .contact-us-info img {
  max-width: 100%;
  height: auto;
}

/* Images that scale to their container must keep an automatic height.
 *
 * Two things add width/height attributes to <img>: this theme does it on
 * gallery images so lazy-loaded ones reserve their space, and optimiser
 * plugins (LiteSpeed, WP Rocket, Jetpack) do it to every image on the page.
 * An attribute height beats the intrinsic aspect ratio, so without this the
 * logo and the listing thumbnails render squashed to their full pixel height.
 *
 * Deliberately excluded: .carousel-item img and .contactUs .map > img, which
 * style_2.css sizes with height:100% on purpose. */
.navbar-brand img,
.projects .item img,
.gallery .img-pop img,
.wrap.text img,
.contactUs .contact-us-info img {
  height: auto;
}