/* General file for small-scale CSS tweaks or custom styles specific to the E. J. Ourso College of Business */
/* Built by Cullen Sadler and Mark Plaisance, last updated June 2026 */

/* 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 */

		.sticky {
			position: sticky;
			top: 70px;
			z-index: 50;
		}

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

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

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

		.ourso-hero-layout-very-small { /* Intended as a decorative divider, don't use with any text */
			min-height: 5vh;
			padding: .5rem
		}

		.ourso-hero-layout-small { /* Condensed size, must be used with condensed text styles. */
			min-height: 15vh;
			padding: 2rem
		}

		.ourso-hero-layout-big { /* Note: intended to help larger photos stand out. If adding a text box, avoid using this. */
			min-height: 50vh;
		}

		.ourso-hero-layout-very-big { /* DEPRECATED, use layout-splash instead */
			min-height: 80vh;
		}

		.ourso-hero-layout-giant { /* DEPRECATED, use layout-splash instead */
			min-height: 100vh;
		}

		.ourso-hero-layout-splash { /* Acts as splash screen, sets to full height minus the exact pixel count of main nav and breadcrumbs */
		min-height: calc(100vh - 207px);
		}

		.ourso-hero-layout-padded { /* Note: adds bottom padding that matches the behavior of the LSU default hero */
			margin-bottom: 2rem;
		}

		/* 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: 'jubilat',serif; /* Jubilat won't take effect until Adobe Font update to LSU CSS */
   			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;
		}

		.ourso-hero-lead-condensed {
   			font-family: 'proxima-nova',sans-serif;
			font-size: 1.75rem;
			font-weight: 600;
			line-height: 2.5rem;
			color: #FFFFFF;
			letter-spacing: .03em;
			margin-bottom: 0rem;
		}

		.ourso-hero-sublead { /* Use with LSU p style as base */
			text-align: center;
			font-size: 1.5rem;
			font-weight: 500;
			line-height: 2rem;
			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: fixes goofy letter spacing and size with the Jubilat font in blockquotes */
		.ourso-blockquote-spacing {
		letter-spacing: .03em;
    	font-weight: 400;
		}
		
		/* Note: LSU vanilla styles have edge case overflow issues on larger mobile devices mostly involving H1 or default heroes; 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;
				margin-left: 0rem;
				/* background-color: rgba(0, 0, 0, 0.0);
        		box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0); */
            }
			
			.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-lead-condensed {
			font-weight: 400;
			font-size: 1.125rem;
			line-height: 2rem;
			letter-spacing: 0em;
/* 			margin-right: 4vw; */
			}
			
			.ourso-hero-container {
			max-height: 170vh;
			text-align: left;
			}
			
			.ourso-mobile-break {
			display: block;
			}
			
        }

/* End Bottom Line Report Hero Components */

/* Begin Calendar Widget Fixes */
/* The LSU card style for the Localist widget has text sizing issues on desktop because it is incorrectly inheriting styles from the main stylesheet and the Localist-provided styling is lost. We wrap the widget in an additional div element which isolates it and use this rule to reapply the missing Localist styling that better fits the space. */
	
#localist-style-container p {
	    font-size: .9rem;
}

/* End Calendar Widget Fixes */

/* Begin Animation Fixes */
/* Required dummy class for ourso-animate.js to work properly */

.animation-pending {
	visibility: hidden;
}

/* End Animation Fixes */

/* Begin Tooltips */

	.ourso-tooltip-trigger {
		position: relative;
		cursor: help;
		border-bottom: 1px solid #feca35;
		display: inline;
	}

	.ourso-tooltip-trigger::after {
    	content: attr(data-tooltip); /* Pulls from HTML */

    /* Positioning */
    	position: absolute;
    	bottom: 100%; /* Above the text */
    	left: 50%; /* Centers it horizontally */
    	transform: translateX(-50%); /* Center alignment */

    /* Appearance */
    	background-color: #333;
    	color: #fff;
    	padding: 8px 12px;
    	border-radius: 4px;
    	font-size: 0.9rem;
    	white-space: normal; /* Allows text inside tooltip to wrap */
    	width: max-content; /* Fits width to content... */
    	max-width: 250px; /* ...but caps it so it's not too wide */
    	z-index: 1; /* Ensures it sits on top of other nonessential elements */
    	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
		
    /* Animation State: Hidden */
    	opacity: 0;
    	visibility: hidden;
    	transition: opacity 0.2s ease-in-out, visibility 0.2s;
}

	.ourso-tooltip-trigger::before {
		content: "";
  		position: absolute;
  		bottom: 115%;
  		left: 50%;
		margin-inline: auto;
		transform: auto;
  		border-width: 6px;
  		border-style: solid;
  		border-color: #333 transparent transparent transparent; /* Arrow points down */
  
  	    /* Animation State: Hidden */
  		opacity: 0;
  		visibility: hidden;
  		transition: opacity 0.2s ease-in-out;
	}

	/* Hover Actions */
	.ourso-tooltip-trigger:hover::after,
	.ourso-tooltip-trigger:hover::before {
  		opacity: 1;
  		visibility: visible;
	}

	.ourso-tooltip-trigger:hover {
   		color: #461d7c;
	}

	.ourso-tooltip-trigger:focus::after,
	.ourso-tooltip-trigger:focus::before {
  		opacity: 1;
  		visibility: visible;
}	

@media (max-width: 480px) {
    .ourso-tooltip-trigger::after {
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        max-width: calc(100vw - 10px); 
    }
}

	/* End Tooltips */


    /* Mobile dark mode workaround*/
	/* Overrides the background paintbrush texture on stats and routing snippets, which occasionally do not recolor properly on mobile devices in dark mode. */
	@media (max-width: 480px) {
			
			.stats .wrap {
				background-image: none;
			}
		
			.stats.dark .wrap {
				background-image: none;
			}
		
			.stats.light .wrap {
				background-image: none;
			}
		
			.intro-stat div { 
				background-image: none;
			}
		
			.routing {
				background-image: none;
			}
		
			img.bullets-texture {
				display: none;
			}
		
		}
	/* End dark mode workaround */



/* Begin Solid Purple Button Accordion Fix */

	/* Fixes a style inheritance problem when the solid purple style buttons are used inside an accordion. Without this fix, button text is unreadable. */
	.accordion-section .accordion .card-body a.btn.btn-solid-purple:hover, .accordion-section .accordion .card-body a.btn.btn-solid-purple:focus {
		color: #ffffff;
		border-color: #ffffff;
	}

/* End Solid Purple Button Accordion Fix */

/* Begin Testimonial Carousel Override */
	
	/* Adjusts images using the testimonial carousel snippet to be square rather than ovals, since ovals rarely work correctly with our standard headshots */
	/* Also alleviates issue where quote marks can crash into long text /*
	/* Requires encapsulating snippet in a quick div with the appropriate ID */
	#carousel-sq img {
		    border-radius: 0%;
		}

	#carousel-sq .wbttw-carousel-quote {
    font-weight: 400 !important;
		}
		
/* End Testimonial Carousel Override */

/* Begin Flipcards */
/* Note: When deployed to a page, Flipcards require ourso-flip.js to be loaded. */
/* Recommend using a vanilla LSU column layout to help keep nice and tidy on the page, if deploying multiple together */

/* Container */
.flipcard {
  background-color: transparent;
  max-width: 90%;
  perspective: 1000px;
}

/* The inner wrapper that actually rotates */
.flipcard-inner {
  display: grid;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

/* Flipped state applied via ourso-flip.js */
.flipcard.is-flipped .flipcard-inner {
  transform: rotateY(180deg);
}

/* Shared styles for both faces */
.flipcard-face {
  grid-area: 1 / 1;
  box-sizing: border-box;
	position: relative;
	overflow: hidden;
  -webkit-backface-visibility: hidden; /* Safari apparently needs special support */
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.flipcard-front {
  background-color: #f8f8f8;
  color: #333;
	/* Safari has repainting issues that can bleed elements during the flip, so we nudge the Z axis to force a re-render */
	-webkit-transform: translateZ(1px);
	transform: perspective(1px) scale(1.0);
}

/* Next few classes are for image handling, if using an actual JPG/PNG instead of text only or just an icon */
/* Makes it responsive within the container and edge-to-edge */
.flipcard-bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Gradient to ensure button and any text stay visible, plus modified flex */

.has-image-bg {
	justify-content: flex-end;
}

.has-image-bg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.9) 75%);
	z-index: 1;
	
}

/* If image is present, ensure the text and button are above it */
.has-image-bg .card-content,
.has-image-bg .flip-trigger {
	position: relative;
	z-index: 2;
}

/* Back starts rotated 180 degrees, has inverted color scheme */
.flipcard-back {
  background-color: #461d7c;
  color: white;
	-webkit-transform: rotateY(180deg) translateZ(1px);
  transform: rotateY(180deg);
	
}

/* Screen reader only text class to help describe certain elements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Hide interactive elements on the hidden face from keyboard tabbing */
.flipcard-face.is-inactive {
  visibility: hidden;
  transition: visibility 0s linear 0.6s; /* Wait for flip animation to finish before hiding */
}

/* End Flipcards */

/* Begin Fancy Accordions */
/* Note: When deployed to a page, these require ourso-fancy-accordion.js to be loaded or else nothing works */
/* Note: accordion card aspect ratio and columns are currently hard-coded, see notations in the code below */

.qa-instance-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.qa-intro {
  margin-bottom: 40px;
  text-align: center;
}

/* Grid setup, this is one of the hardcoded elements */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

/* Card styling */
.qa-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
  aspect-ratio: 3 / 1;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #ffffff;
  background-size: cover;
  background-position: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Typographic hierarchy inside card */
.qa-card .signpost {
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
color: #fdd023
}

.qa-card .full-question {
  font-size: 1.1rem;
  line-height: 1.4;
	text-align: left;
}

/* Hover state for interactivity */
.qa-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* State: This card is currently selected */
/* Note: the JS only toggles this within a particular instance wrapper */
.qa-card[aria-selected="true"] {
  outline: 4px solid #fdd023;
  outline-offset: -4px;
}

/* State: A different card is selected, so fade the others */
/* Note: the JS only toggles this within a particular instance wrapper */
.qa-grid.has-active .qa-card:not([aria-selected="true"]) {
  opacity: 0.4;
  filter: grayscale(33%);
}

/* The unfolded area containing the accordion content */
.qa-answers-container {
  margin-top: 20px;
  margin-bottom: 20px;
}

.qa-answer-block {
  display: none; /* Hidden by default */
  padding: 20px 0;
  animation: fadeIn 0.5s ease; 
}

.qa-answer-block.is-visible {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .qa-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns should still be fine on most tablets */
  }
}

@media (max-width: 600px) {
  .qa-grid {
    grid-template-columns: 1fr; /* 1 column stack on mobile */
  }
	
  .qa-card {
    aspect-ratio: auto; /* Allow height to adjust */
    padding: 20px;
  }
}

/* End fancy accordions */

/* Custom Button Styles */
/* Use in conjunction with LSU vanilla btn style unless otherwise noted */

		.ourso-btn-outline {
			color: #feca35;
			border: 2px solid #feca35;
			}
			
		.ourso-btn-outline:focus,
		.ourso-btn-outline:hover {
   		border-color: #ffffff;
    	color: #ffffff;
			}

		.ourso-btn-outline-white {
			color: #ffffff;
			border: 2px solid #ffffff;
			}
			
		.ourso-btn-outline-white:focus,
		.ourso-btn-outline-white:hover {
   		border-color: #feca35;
    	color: #feca35;
			}

/* End Custom Button Styles */