/**
 * @file
 * Subtheme specific CSS.
 */

 .wp-block-cover-image.gradient-bottom:not(.has-background-gradient):before, 
  .wp-block-cover.gradient-bottom:not(.has-background-gradient):before {
    opacity: 0;
 }

 .wp-block-cover-image.gradient-bottom:not(.has-background-gradient):after, 
 .wp-block-cover.gradient-bottom:not(.has-background-gradient):after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    opacity: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(18,18,27,0.8) 50%, rgba(0,0,0,1) 100%);
    content:"";
 }
 

 .gradient-bottom .wp-block-cover-image .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover__inner-container {
    z-index: 5;
 }
 
	 .wp-block-cover h2 { /*changes h2 styling to lead styling because gutenberg*/
		font-size: 1.25rem;
		font-weight: 300;
	 }
 
	.wp-block-cover .view-content .lead { /*changes lead styling to h6 styling because gutenberg*/
		font-weight: 300;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-size: .65em;
		opacity: 0.7;
	}
	
	


/* TODO: maybe swap py-5 for just padding at the top, not bottom, or 
   make the style depenedent on the cover 9 grid selection instead of hard-coded with py-* classes */
   
 .are-vertically-aligned-bottom {
    margin-bottom:25px;
 }

 .are-vertically-aligned-bottom.py-5 {
    padding-bottom:0rem!important;
 }

 .feature-header {
   padding-top: 25vh;
 }

 .feature-header .list-highlights {
   font-size: 1rem;
   line-height: 1.3rem;
   font-style: italic;
}
ul.list-group.list-highlights {list-style: none;}
ul.list-group.list-highlights li {
  background: none!important;
   color: #fff;
   opacity: 0.7;
   transition: 0.3s;
   border: 0;
   border-radius: 0;
   border-bottom: 1px solid rgba(255,255,255,0.2);
   padding: 0.5rem 0;
}
div.gradient-bottom {
       position: absolute;
   
   z-index: 0;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(18,18,27,0.8) 50%, rgba(0,0,0,1) 100%);

}

/******************
HEADER STYLING
*******************/
.wp-block-cover .block-views-blocktitle-and-byline-embed-block-1 {
	margin: 0px -10px 0px 0px;
	padding-top: 0rem;
}

.wp-block-cover h1, h2, h3 {
	margin: 1rem 0!important;
}


/******************
CAPTIONS
*******************/
.wp-block-table figcaption,
.wp-block-image figcaption, 
.figcaption, 
figcaption {
   font-style: italic;
/*   opacity: 0.84; */
   background: none;
   max-width: 1140px;
   margin: 15px auto;
   font-size: 1.3rem;
   color: #eee;
   border-bottom: 1px solid rgba(255,255,255,.2);
   padding-bottom: 10px;
}

/******************
BODY
*******************/
body.node--type-featured-article h2.text-white {color: #fff!important;margin-bottom: 25px!important;}
body.node--type-featured-article .node__content {margin-top: 0px;}

body.node--type-featured-article h5, .h5 {
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: 1px;
/*   font-size: 1rem; */
}


.node a {
        color: #4FB5F0;
		transition: 0.3s;
}

	.node a:hover {
		color: #0A5BDF;
	}
	
	.node a:visited {
		color: #7ab9db;
	}

.wp-block-table table {
	background-color: rgba(0,0,0,0.5); 
}
.wp-block-table tr:first-child,
.wp-block-table td:first-child
{
	font-weight:bold;
	line-height: 1.4rem;

}
.wp-block-table tr:first-child {
       background-color: #0A5BDF;
}


.wp-block-table figcaption {
	color: #eaeaea;
	font-size:1.2rem;
	background: none!important;
}

.credits h1,
.credits h2,
.credits h3,
.credits h4,
.credits h5,
.credits h6 {
	color: #fff !important;
	border: 0!important;
	padding: 0 5px!important;
	margin: 1rem 0!important;
}

	.credits hr {
		background-color: #eaa91f;
		border-color: #eaa91f;
		opacity: 1;
	}




.slide img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

	.slide--comparison {
  /* hide shadow */
  overflow: hidden;
}

.slide--comparison .slide__image {
  --range: 50%;
  /* to position elements above each other */
  display: grid;
}

/* position 2 images and range slider above each other*/
.slide--comparison .slide__img {
  grid-column: -1 / 1;
  grid-row: -1 / 1;
  
  overflow: hidden;
}

/* move div to right*/
.slide__img--last {
  box-shadow: 0 0 10px rgba(0,0,0,.9);
  transform: translateX(calc(var(--range) - 100%));
}

/* compensation right movement*/
.slide__img--last img {
  transform: translateX( calc( 100% - var(--range) ) );
}

/* Range Slider */
.slide__slide {
  /* scale range slider to size of image container */
  position: absolute;
  top: 49%;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* hide range slider */
  opacity: 0.8;
}


/*********************
  OPTIONAL Custom Styling
*********************/
.slide--comparison {
  position: relative;
  
  /* container width and height */
  width: 100%;
  /*min-height: 100vh;*/
}

.slide--comparison .block__img {
  /* just to fit to container */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide .img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}