/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

@import url('https://fonts.googleapis.com/css2?family=Bona+Nova:ital,wght@0,400;0,700;1,400&display=swap');

:root {
	--red: #8B1D20;
}


/**** NEW HEADER ***/

#mysticky-nav.wrapfixed .myfixed,#mysticky-nav.wrapfixed header {
	width:100%!important
}


/*

#site-header-inner.container {
	width:1440px;
	padding:1em;
	transition:all .5s;
	max-width:100%;
}

#site-header-inner .wp-block-group {
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:0!important;
}

#site-header-inner p {
	display:none;
}

.wp-block-site-logo img {
	transition:all .5s;
}

@media (max-width:600px) {
	.wp-block-site-logo img {
		width:100px;
	}
}

#mysticky-nav.wrapfixed {
	opacity:1!important;
}

#mysticky-nav.wrapfixed .myfixed {
	background:#fff!important;
}

#mysticky-nav.wrapfixed .myfixed #site-header-inner.container {
	padding:.25em 1em;
}

#mysticky-nav.wrapfixed .myfixed .wp-block-site-logo img {
	width:80px;
}

#mysticky-nav.wrapfixed header {
	box-shadow:0 0 10px rgba(0,0,0,.15);
}

.oceanwp-mobile-menu-icon a {
	font-size:24px;
}

.oceanwp-mobile-menu-icon a:focus {
	outline:none!important;
	border:none;
}

body #site-navigation-wrap .dropdown-menu >li >a:hover,
body .oceanwp-mobile-menu-icon a:hover, 
body #searchform-header-replace-close:hover {
	color:var(--red);
}


*/


/*** GENERAL STYLES ***/






/*** EVENT STYLES ***/


.event__title {
	font-family: "Bona Nova", serif;
}


/*** Event theme colors ***/
:root {

    /*  sienna:#B55F43;  */
    --sienna: hsl(15, 46%, 49%);
    /* Define individual HSL components as CSS variables */
  --sienna-h: 15;   /* Hue (no unit) */
  --sienna-s: 46%;  /* Saturation */
  --sienna-l: 49%;  /* Lightness */
  
  --blue:hsl(218,67%,38%);
  --blue-h: 218;   /* Hue (no unit) */
  --blue-s: 67%;  /* Saturation */
  --blue-l: 38%;  /* Lightness */
  
}


/**** SIENNA THEME ***/

.event.sienna .event-hero {
  background-color:var(--sienna);
}

.event.sienna .event-hero {
	color:#fff!important;
}

.event.sienna h1 {
  color:#fff!important;
}

.event.sienna h2 {
  color: hsl(
    var(--sienna-h),
    calc(var(--sienna-s) + 20%),
    calc(var(--sienna-l) - 15%) 
  );
}

.event.sienna .event__button {
	background-color: hsl(
    var(--sienna-h),
    calc(var(--sienna-s) + 20%),
    calc(var(--sienna-l) - 15%) 
  );
	border-color: hsl(
    var(--sienna-h),
    calc(var(--sienna-s) + 20%),
    calc(var(--sienna-l) - 15%) 
  );
}

.event.sienna .event__button:hover {
	background-color: hsl(
    var(--sienna-h),
    calc(var(--sienna-s) + 40%),
    calc(var(--sienna-l) - 25%) 
  );
	border-color: hsl(
    var(--sienna-h),
    calc(var(--sienna-s) + 40%),
    calc(var(--sienna-l) - 25%) 
  );

}

.event.sienna .ghost-button {
	
	color: hsl(
    	var(--sienna-h),
    	calc(var(--sienna-s) + 20%),
    	calc(var(--sienna-l) - 15%)
	);
	
	border-color: hsl(
    	var(--sienna-h),
    	calc(var(--sienna-s) + 20%),
    	calc(var(--sienna-l) - 15%)
	
	);
}


.event.sienna .ghost-button:hover {
	background-color:transparent;
	
	color: hsl(
    	var(--sienna-h),
    	calc(var(--sienna-s) + 40%),
    	calc(var(--sienna-l) - 25%)
	);
	
	border-color: hsl(
    var(--sienna-h),
    calc(var(--sienna-s) + 40%),
    calc(var(--sienna-l) - 25%) 
  );
}


.event.sienna .sidebar__menu {
	background-color: hsl(
    var(--sienna-h),
    calc(var(--sienna-s) + 20%),
    calc(var(--sienna-l) - 15%) 
  );
}
.event.sienna .sidebar__menu a:hover {
	background-color: hsl(
    var(--sienna-h),
    calc(var(--sienna-s) + 40%),
    calc(var(--sienna-l) - 25%) 
  );
}


/***** BLUE THEME ***/

.event.blue .event-hero {
  background-color:var(--blue);
}

.event.blue .event-hero {
	color:#fff!important;
}

.event.blue h1 {
  color:#fff!important;
}

.event.blue h2 {
  color: hsl(
    var(--blue-h),
    calc(var(--blue-s) + 20%),
    calc(var(--blue-l) - 15%) 
  );
}

.event.blue .event__button {
	background-color: hsl(
    var(--blue-h),
    calc(var(--blue-s) + 20%),
    calc(var(--blue-l) - 15%) 
  );
  
  border-color: hsl(
    var(--blue-h),
    calc(var(--blue-s) + 20%),
    calc(var(--blue-l) - 15%) 
  );
}

.event.blue .event__button:hover {
	background-color: hsl(
    var(--blue-h),
    calc(var(--blue-s) + 5%),
    calc(var(--blue-l) - 5%) /* Slightly darker on hover */
  );
	border-color: hsl(
    var(--blue-h),
    calc(var(--blue-s) + 5%),
    calc(var(--blue-l) - 5%) /* Slightly darker on hover */
  );

}






.event.blue .ghost-button {
	
	color: hsl(
    	var(--blue-h),
    	calc(var(--blue-s) + 20%),
   		 calc(var(--blue-l) - 15%) 
	);
	
	border-color: hsl(
    	var(--blue-h),
    	calc(var(--blue-s) + 20%),
    	calc(var(--blue-l) - 15%) 
	);
}


.event.blue .ghost-button:hover {
	background-color:transparent;
	
	color: hsl(
    	var(--blue-h),
    calc(var(--blue-s) + 5%),
    calc(var(--blue-l) - 5%) /* Slightly darker on hover */
	);
	
	border-color: hsl(
    	var(--blue-h),
    calc(var(--blue-s) + 5%),
    calc(var(--blue-l) - 5%) /* Slightly darker on hover */
  );
}




/*** END THEMES ***/


/*** GENERAL EVENT STYLES ***/

.event__title {
	margin-bottom:0;
}
.event__dates {
	font-weight:bold;
}



/*** EVENT DETAIL PAGE STYLES ***/


#main #content-wrap.event {
  background-color:#eee;
  padding-top:0;
}

.event {
	font-size:16px;
}

.event .button {
	/** border:none; **/
	text-decoration:none!important;
    border-radius:36px;
	border-width:3px!important;
}



.event-section {
	padding-bottom:4rem;
}

.event-details-content {
    margin: 0 auto;
    padding:4rem 2rem 2rem;
}


@media (min-width:980px) {
	.event-details-content {
		width:74vw;
	}
}

.event-hero img {
	max-height:450px;
    width:auto;
    display:block;
}

.event-hero__title {
    font-size:3em;
}

.event-hero__subtitle, .event-hero__sponsors {
	font-size:1.35em;
}

.event-hero__venue, .event-hero__people, .event-hero__dates {
	font-size:1em;
}

.event-hero__people {
	margin-bottom:1em;
}

.event-hero__person__name {
	font-weight:bold;
}

.event-hero__venue {
	text-transform:uppercase;
}

.event .button {
	font-size:.8em;
}

.hero__tickets {
	display:flex;
    margin-top:2rem;
}

.ticket-entry {
	margin-right:1rem;
}

.section-title, .event-section h2 {
	font-size:1.5em;
	margin-bottom:1rem;
}


.event-hero__people {
	margin-top:2rem;
}

.event__dates {
	font-size:1em;
    font-weight:bold;
}

.event__program {
	margin-top:1em;
}


@media (min-width:768px) {
	
	.event-hero__image {	
		width:50%;
		display:flex;
		justify-content:flex-end;
	}
	
}

/*** EVENT LIST STYLES ***/

.event-entry__title {
	font-size:2em;
}

.event-list__subtitle {
	font-size:1.25em;
}

.event-list .event {
	max-width:600px;
	margin-bottom:3.5em;
}

.event__image {
	margin-bottom:1em;
}

.event__image img {
	width:100%;
}

.event-list__dates {
	margin-top:1em;
}

.event .ghost-button {
	border:solid 3px #222;
	background:none;
	color:#222;
	padding: 12px 20px;
}

.event .ghost-button:hover {
	background-color:#222;
	color:#fff;
	border-color:#222;
}

.event__info-links a {
	margin-bottom:.5em;
	display:inline-block;
}

@media (max-width:767px) {
	.event-list {
		max-width:600px;
		margin: 0 auto;
	}

	.event__info-links {
		margin-top:1em;
	}
	.event__info-links a {
		
	}
}

@media(min-width:768px) {
	.event-list {
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
	}
	
	.event-list .event {
		width:48%;
	}
	
	.event__info {
		display:flex;
		justify-content:space-between;
	}
	.event__info-meta {
		
	}
	.event__info-links {
		width:150px;
		text-align:right;
	}
}







.schedule {
	background-color:#d9d9d9;
    padding:2rem;
}


.schedule__list {
	list-style:none;
    padding:0;
    margin:0;
}

.schedule__list__entry {
	display:flex;
    justify-content:space-between;
	line-height:1.4;
    padding-bottom:1rem;
}


.schedule__list__label {
	font-weight:bold;
	text-align:right;
}





.team img {
	display:block;
}

.team__name {
	font-size:1.25em;
    margin-bottom:0;
}

.team__member {
	padding-bottom:2rem;
}

.team__image {
	margin-bottom:1rem;
}


.event__videos .video-grid {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}

@media (max-width:767px) {
	
	.event__videos .video-grid {
		
	}
	.event__videos  .video-grid > div {
		width:100%;
		
	}
}

.sponsor-type-group {
	padding-bottom:3rem;
}

.sponsor__name {
	font-size:1.5em;
}

.sponsor {
	background-color:#fff;
    padding:2rem;
    text-align:center;
}

.sponsor__logo {
	max-height:60px;
    height:100%;
}

.sponsor__name {
	font-size:2em;
    font-weight:bold;
	max-height:60px;
    height:100%;
}

.gallery-grid {
		display:grid;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 16px; /* Adjust the gap as needed */
	justify-items: center; 
	}

	.event-gallery .gallery-item {
		width: 180px;
		height: 180px;
		max-width:100%;
		overflow: hidden; /* Important for cropping */
	}

	.event-gallery .gallery-item a {
		width: 180px;
    	height: 180px;overflow: hidden;
	}	
	
	.event-gallery .gallery-item img {
		height:100%;
		width:100%;
		object-fit: cover
	}


.sidebar__menu {
	padding:1rem 0;
}

.sidebar__menu ul {
	list-style:none;
	margin:0;
}

.sidebar__menu a {
	font-size:.8em;
	color:#fff;
	font-weight:bold;
	display:block;
	padding: .5rem 2rem;
}

.sidebar__menu a:hover {
	color:#fff;
}

.jump-target {
	scroll-margin-top: 80px;
}

@media (max-width:599px) {
	.team {
		width:225px;
		margin: 0 auto;
	}
	
	.team__member {
		margin-bottom:3rem;
	}
}


@media (min-width:600px) {
	.team__list {
		display:grid;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 16px; /* Adjust the gap as needed */
	}


	

}

@media (min-width:768px) {

	.schedule {
		width:37%;	
	}
	
	.team {
    	/*  width:225px;   */
        /*   margin:0 auto;  */
	}
	
	.video-embed-wrapper {
		width:48%;
	}
	
	.event-cast-crew {
		display:flex;
		justify-content:space-between;
	}
	
	.team {
		width:48%;
	}
}




@media (max-width:767px) {

    .event-hero__image img {
        margin: 0 auto;
    }
    
    .event-hero__text {
    	padding: 2rem 2rem 4rem;
        max-width:600px;
        margin: 0 auto;
    }
    
    .event-details-content {
    	max-width:600px;
        margin: 0 auto;
    }
	
	.sponsor:not(:last-child) {
		margin-bottom:1rem;
	}
	
	.event-details-content > .event-section h2 {
		text-align:center;
	}
	
	.event__program__file {
		text-align:center;
	}

}


@media (min-width:768px) {
	.event-hero {
        display:flex;
        justify-content:center;
        align-items:center;
    }
     .event-hero__text {
    	padding: 3rem 3em 3em 3.5em;
		width:50%;
    }
    
    .event__about-schedule {
    	display:flex;
        justify-content:space-between;
    }
    
    .event__description-content {
    	width:59%;
    }
    
	.sponsors-list {
		display:flex;
	}
	.sponsor {
		
		margin-right:2%;
	
	}
    
}

@media (max-width:1359px) {
	.sidebar__menu ul {
        margin:0;
        padding:0;
        display:flex;
        flex-wrap: wrap;
		justify-content:center;
    }

    .sidebar__menu li {
        list-style:none;
		margin-right:1em;
    }
	
	.sidebar__tickets {
		display:none;
	}
}

@media (min-width:1360px) {

.sidebar-fixed {
	position:fixed;
    left:0;
    top:150px;
	z-index:1000;
}

	.sidebar__tickets {	
		margin-left:1em;
	}
	.sidebar__tickets .ticket-entry {
		margin-top:1em;
	}
}

@media (min-width:1024px) {

	.event {
		font-size:18px;
	}

}


.sidebar-fixed {
    opacity: 0;         /* Start completely transparent */
    visibility: hidden; /* Hide from screen readers and pointer events */
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.sidebar-fixed.show {
    opacity: 1;         /* Fully visible */
    visibility: visible; /* Make visible */
}