/* General file for small-scale CSS tweaks or custom styles specific to the E. J. Ourso College of Business */

/* Bottom Line Report Hero Components */
/* The following components allow us to deploy more flexible section banners / heroes for the Ourso Bottom Line Report and other special use cases */

	/* Hero Container */

        .ourso-hero-container {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
           
            max-height: 80vh;
            min-height: 20vh;
			width: 100%;
			padding: 4rem;
			box-sizing: border-box;
            position: relative;
			
            background-image: url('https://lsu.edu/business/images/bec_images/purple-bec-header-1400x800-1.jpg'); /* This is a default image, can be overriden by inline style */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

		/* Hero Container Behavior Modifiers */

		.ourso-hero-parallax {
			background-attachment: fixed;
		}

		.ourso-hero-layout-detailed {
            justify-content: flex-start;
        }

		.ourso-hero-layout-stacked {
            flex-direction: column;
            gap: 1.5rem;
        }

		/* Hero Image Modifiers */

		.darken-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.1);
        }

		.heavy-darken-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.25);
			backdrop-filter: blur(2px);
        }

	/* Hero Text Boxes */

        .ourso-hero-text-box {
            background-color: rgba(255, 255, 255, 0.95); /* Note: for WCAG, recommend no less than 85% */
            padding: 1.5rem 2rem;
            border-radius: 0px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            max-width: 1200px;
			margin-left: auto;
			margin-right: auto;
			z-index: 1;
        }

        .ourso-hero-text-box-detailed {
            background-color: rgba(255, 255, 255, 0.95); /* Note: for WCAG, recommend no less than 85% */
            padding: 2rem 2.5rem;
            border-radius: 0px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            max-width: 1200px;
            text-align: left;
			margin-left: auto;
			margin-right: auto;
			z-index: 1;
        }

		/* Hero Text Box Modifiers */

		.ourso-text-nobackground {
			box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
			background-color: rgba(0, 0, 0, 0)
			/* Note: Removes box shadow and background behind text. USE WITH CAUTION, can cause WCAG readability issues depending on the chosen hero image */
		}

		.ourso-text-purple-bg {
            background-color: #502e81; /* Note: keep at 100% opacity. Intended use is for Ourso hero headers to match vanilla LSU H1 lead style */
        }

	/* Typography */

		.ourso-hero-fancy-lead {
   			font-family: 'ITC Caslon No. 224 W05',serif;
   			font-size: 2.75rem;
			font-weight: 900;
			line-height: 2.5rem;
			color: #FFFFFF;
			letter-spacing: -.01em;
			margin-bottom: 0rem;
		}

		.ourso-hero-lead {
   			font-family: 'Proxima Nova',sans-serif;
			font-size: 2.5rem;
			font-weight: 700;
			line-height: 3rem;
			color: #FFFFFF;
			letter-spacing: .03em;
			margin-bottom: 0rem;
		}

		/* Not currently needed, disabled */
		/* 	.scroll-anchor {
  			scroll-margin-top: 12rem;
		} */
		
		
		/* Typography Modifiers */

		.ourso-text-shadow {
		text-shadow: 4px 2px 8px #000000;
		}

		/* Note: LSU vanilla styles add margin below headers; this is not needed in our hero container so this class removes it */
		.ourso-text-remove-margin {
		margin-bottom: 0rem;
		}
		
		/* Note: LSU vanilla styles have edge case overflow issues on larger mobile devices mostly involving H1 or default heros; this br style gives us a way to selectively fix those instances */
		.ourso-mobile-break {
		display: none;
		}

		/* Note: universal behavior that should always be enabled */
		html {
 		scroll-behavior: smooth;
		}

	/* Media Queries and Responsive Adjustments */
        @media (max-width: 768px) {
            .ourso-hero-text-box, .ourso-hero-text-box-detailed {
                padding: 1rem 1.5rem;
            }
			
			.ourso-hero-layout-detailed {
            justify-content: left;
        	}
			
			.ourso-hero-fancy-lead {
			line-height: 3rem;
			font-size: 2rem;
			letter-spacing: 0em;
			}
			
			.ourso-hero-lead {
			font-size: 2rem;	
			}
			
			.ourso-hero-container {
			max-height: 170vh;
			}
			
			.ourso-mobile-break {
			display: block;
			}
			
        }

/* End Bottom Line Report Hero Components */

/* Begin Animation Fixes */

	/* Sometimes elements can flicker before the animation has time to run esp on slower devices. This fix sets them as hidden until the animation actually runs */

	body.animations-off .animatible {   /* This line ensures that whenever the animations are toggled off everything is set back to visible so the fix doesn't cause its own problems */
  		visibility: visible;
	}

	.animatible {
		visibility: hidden;
	}

	.animate__animated {
	  visibility: visible;
	}

/* End Animation Fixes */