/* Styles for the vanilla web components that replaced the React widgets. */

site-nav,
hero-carousel,
image-slideshow,
tender-filter,
site-search {
  display: block;
}

/* home page hero carousel */
hero-carousel {
  position: relative;
  overflow: hidden;
}

hero-carousel.is-enhanced .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

hero-carousel.is-enhanced .slide.is-active {
  position: relative;
  opacity: 1;
}

hero-carousel:not(.is-enhanced) .slide + .slide {
  display: none;
}

.hero-carousel-prev,
.hero-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 8rem;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s;
}

.hero-carousel-prev {
  left: 0;
}

.hero-carousel-next {
  right: 0;
}

hero-carousel:hover .hero-carousel-prev,
hero-carousel:hover .hero-carousel-next,
.hero-carousel-prev:focus-visible,
.hero-carousel-next:focus-visible {
  opacity: 1;
}

.hero-carousel-prev,
.hero-carousel-next {
  top: calc(50% - 25px);
}

/* pager pill, matching the old nuka-carousel decorator (.slider-decorator-2) */
.hero-carousel-dots {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translate(-50%, 50%);
  display: flex;
  padding: 0 7px;
  line-height: 8px;
  background: #afb7b8 url(/assets/images/bullet-bg.png) 0 bottom repeat-x;
}

.hero-carousel-dots button {
  padding: 10px 5px;
  border: 0;
  background: transparent;
  color: black;
  font-size: 34px;
  line-height: 8px;
  opacity: 0.5;
}

.hero-carousel-dots button[aria-current='true'] {
  opacity: 1;
}

/* project photo slideshow */
image-slideshow {
  position: relative;
  margin-bottom: 20px;
}

image-slideshow img {
  display: block;
  width: 100%;
  max-height: 450px;
  object-fit: contain;
}

image-slideshow.is-enhanced img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s;
}

image-slideshow.is-enhanced img.is-active {
  position: relative;
  opacity: 1;
}

image-slideshow:not(.is-enhanced) img + img {
  margin-top: 10px;
}

.image-slideshow-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.image-slideshow-controls .slider-button {
  pointer-events: auto;
}

/* tender document tree (native <details>) */
.tree-view > summary {
  display: list-item;
}

.tree-view > summary::marker {
  color: #3d61a2;
}

.tree-view .info a {
  word-break: break-word;
}

/* tender list filter */
tender-filter a[hidden] {
  display: none;
}

/* search */
.search-results {
  margin-top: 20px;
}

.search-result-list li {
  padding: 4px 0;
}

.search-result-list small {
  color: #9c9c9c;
}

/* contact */
.contact-info {
  font-size: 15px;
}

.contact-info h4 {
  margin-top: 0;
}

.contact-map {
  height: 400px;
  padding-top: 0;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 991px) {
  .contact-info {
    margin-bottom: 20px;
  }
}

/* header contact line */
.headRt a {
  color: inherit;
}

/* the logo is wrapped in a home link, so the theme's `.headLt > img` rule no longer matches */
.headLt > a {
  display: block;
}

.headLt .headLogo {
  width: 100%;
}