/*!
 * BLOG POST SINGLE VIEW
 * - Blog post hero layout (backgrounds, overlays, spacing)
 * - Drop caps, ampersand shortcode, intro excerpt
 * - Light/dark section logic
 * - Responsive story image floats
 */



/*! * BLOG - SINGLE ***** */
 
 
 /* Blog Header Template Styling  */
 
 .blogHeader01-hero {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   height: calc(100vh - 85px); /* Full viewport height minus top navigation */
   display: flex;
   align-items: flex-end; /* Push content to bottom */
   justify-content: flex-start;
   position: relative;
 }
 
 .blogHeader01-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
   z-index: 1;
 }
 
 .blogHeader01-content {
   position: relative;
   z-index: 2;
   max-width: 100%;
   padding-left: 70px;
   padding-bottom: 75px;
 }
 
 .blogHeader01-intro {
   padding: 4rem 0 0;
 }
 .blogHeader01-introText {
   padding-left: 70px;
 }
 
 .blogHeader01-content h1,
 .blogHeader01-introText h2 {
   font-family: "Playfair Display", serif;
   font-style: italic;
   font-weight: 400;
   font-size: 35px;
   line-height: 1.2;
   margin: 20px 0 4px 0;
 }
 
 .blogHeader01-content h2 {
   font-family: "Lato", sans-serif;
   font-size: 12px;
   font-weight: 400;
   margin: 0 0 10px 0;
   padding: 0 0 0 6px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
 /* Styling for the name shortcode in the header overlay and for subtitle and name shortcode in the blog entry header */ 
 .blogHeader01-content h3,
 .blogHeader01-introText h3 {
   font-family: "Lato", sans-serif;
   font-size: 12px;
   font-weight: 400;
   margin: -10px 0 0 0;
   padding: 0 0 0 6px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
 /* Since this uses h3 for both the subtitle and names in this instance, we must style the second instance of h3 by using not first-of-type selector */
 .blogHeader01-introText h3:not(:first-of-type) {
   margin: -10px 0 0 0;
 }
 
 /* styling for the small ampersand shortcode */
 .fancyAmpersandSmall {
   font-family: "Playfair Display", serif;
   font-size: 14px;
   color: #f2bb05;
   display: inline;
   vertical-align: middle;
 }
 
 /* styling for the animated arrow in blog post header signifying more content below */
 .blogHeader01-scroll-arrow {
   position: absolute;
   right: 75px;
   bottom: 75px;
   z-index: 3;
   cursor: pointer;
   text-decoration: none;
   transition: transform 0.3s ease;
 }
 
 .blogHeader01-scroll-arrow:hover {
   transform: scale(1.1);
 }
 
 .arrow-bounce {
   font-size: 32px;
   color: #f2bb05;
   animation: bounceDown 2s infinite;
 }
 
 @keyframes bounceDown {
   0%, 20%, 50%, 80%, 100% {
     transform: translateY(0);
   }
   40% {
     transform: translateY(10px);
   }
   60% {
     transform: translateY(5px);
   }
 }
 
 
 
 .blogHeader01-introText h1,
 .blogHeader01-introText h2,
 .blogHeader01-introText h3 {
   margin: 0 0 0.5rem 0;
 }
 
 
 .blogHeader01-introExcerpt {
   margin: 2rem auto 1rem;
   padding: 1rem 0;
   padding: 0 6%;
 }
 
 .blogHeader01-introExcerpt p {
   margin: 2.5rem 0 0;
   padding: 2% 0;
   font-family: "Open Sans", sans-serif;
   font-weight: 200;
   font-size: 1.5rem;
   line-height: 1.4;
   text-align: justify;
   text-align-last: center;
   color: rgba(0, 0, 0, 0.3);
   letter-spacing: 0.25px;
   border-top: 1px solid lightgray;
   border-bottom: 1px solid lightgray;
 }