/*
Theme Name: ChiFilmShop2026
Author: GrabBagMedia
Author URI: https://grabbagmedia.com
Description: Bespoke theme for Cinema/Chicago
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chifilm2026
Template: Astra
*/
/********* CONTENTS
1.0..... General Definitions & Overrides
1.1....... WPBakery Menu Card Element
2.0..... Overall Layout
2.1....... Overall Layout: Header
2.2....... Overall Layout: Content Area
2.3....... Overall Layout: Footer
3.0..... Page-Specific Layouts
3.1....... Homepage
3.2....... Festival Pages
3.2.1....... Festival Main Hubs Page
3.2.2....... Festival Tickets Page
3.2.3....... Festival Program Overview Page
3.2.4....... Festival Program/Category Page
3.3....... Film Page Layouts
3.3.1....... Film page general typography adjustment
3.3.2....... Film page general layout
3.3.3....... Film page image header
3.3.4....... Film Page Top Info Section
3.3.5....... Film Page Media Section
3.3.6....... Film Page Sponsors Section
3.3.7....... Film Page Credits Section
3.3.8....... Film Page Related Films Section
3.3.9....... Film Page Screening & Events Section
3.4....... Events Calendar Page Layouts
3.4.1....... Events Calendar List Page
3.4.3....... Event Page Single
3.5....... Landing Page Layout
3.6
3.6.1....... News Posts Archive Pages Layout
4.0..... Elevent
5.0..... Shortcodes & Functions
5.1....... Comprehensive Event List Shortcode
5.2....... Content Consideration Toggle
*/


/********** 1.0 General Definitions & Overrides **********/
/*********************************************************/

/*** C/C Brand Colors ***/
:root {
  --cc-brand-red:214 26 36; /* rgb, hex: #d61a23 */
  --cc-brand-redhover:255 65 74; /* rgb, hex: #ff414a */
  --cc-text-gray:112 110 110; /* rgb, hex #706e6e */
  --cc-border-color:226 226 226; /* rgb, hex: #e2e2e2 */
	
	interpolate-size:allow-keywords /* fairly new functionality to allow for animating heights */
}
/*** General overrides ***/
html {
    scroll-behavior:smooth;
}
/* keeps nav menu under pop-up modals */
#navigation {
	z-index:999 !important;
}
/* full-width page headers */
.header-image, .page-header {
	display:block;
	width:100%;
	height:auto;
}
/* Rollover images */
.rollover:hover {
	opacity:0.7;
}
/* This is used for sponsor blocks to align the images */
h2.underline {
	border-bottom:3px solid rgb(0 0 0);
	margin-bottom:2rem !important
}
h3, .entry-content :where(h3) {
	line-height:1.1;
}
blockquote {
	display:block;
	padding:0.5rem 0.5rem 0.5rem 2rem;
	margin-bottom:1rem;
	border-left:2px solid black;
}
blockquote p {
	margin:0;
}
.middle-images img {
    vertical-align:middle;
}
.original-title {
	font-size:85%;
	font-style:italic;
	line-height:0.2;
	color:rgb(var(--cc-text-gray));
}
/*** Links & Buttons ***/
a {
	text-decoration: none;
}
a:hover {
	text-decoration:underline;
	text-underline-offset: 0.1em;
	text-decoration-thickness: 0.1em;
}
a.button,
footer .textwidget a.button {
	display:inline-block;
	margin:0;
	padding:0.5em 1em;
	background:rgb(var(--cc-brand-red));
	border:2px solid rgb(var(--cc-brand-red));
	border-radius:2px;
	font-size:1.5rem;
	line-height:1.2;
	color:rgb(255 255 255) !important;
	text-decoration:none !important;
	text-transform:uppercase;
}
a.button:hover,
footer .textwidget a.button:hover {
	background:rgb(var(--cc-brand-redhover));
	border:2px solid rgb(var(--cc-brand-redhover));
	text-decoration:none;
}
a.button.small,
footer .textwidget a.button.small {
	padding:0.35em 0.65em 0.45em 0.65em;
	font-size:1rem;
}
a.button-minor {
	background:none;
	color:rgb(var(--cc-brand-red)) !important;
}
a.button-minor:hover {
	color:rgb(255 255 255) !important;
}

/********** 2.0 Overall Layout         **********/
/********** 2.1 Overall Layout: Header **********/
/************************************************/

/*** Styling for Elevent header menu ***/
@media ( width > 856px) {
	#ast-hf-menu-2 {
		margin-right:2rem;
	}
	#ast-hf-menu-2 li a {
		color:#fff !important;
		opacity:0.8;
	}
		#ast-hf-menu-2 li a:hover {
			text-decoration:none !important;
			color:rgb(var(--cc-brand-red)) !important;
		}
	#ast-hf-menu-2 elevent-signin-widget,
	#ast-hf-menu-2 elevent-account-widget,
	#ast-hf-menu-2 elevent-cart-widget,
	#ast-hf-menu-2 elevent-signout-widget {
		display:block;
		padding-left:1.5rem;
		padding-top:0.25rem;
		padding-bottom: 0.25rem;
	}
	#ast-hf-menu-2 li:hover {
		opacity:1 !important;
	}
	#ast-hf-menu-2 {
		padding-top: 10px !important;
	}
}
@media (width < 856px ) {
	.ast-builder-grid-row {
		display:flex;
		align-items:flex-start;
	}
	.site-header-primary-section-left.site-header-section.ast-flex.site-header-section-left {
		margin-left:20px;
		margin-right:auto;
	}
	.site-header-primary-section-right.site-header-section.ast-flex.ast-grid-right-section {
		margin-right:20px;
	}
}
@media (max-width:856px) {
	#ast-hf-menu-2 elevent-signin-widget,
	#ast-hf-menu-2 elevent-account-widget,
	#ast-hf-menu-2 elevent-cart-widget,
	#ast-hf-menu-2 elevent-signout-widget {
		padding-left: 2rem;
		padding-right: 2rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
}
@media (855px < width < 1137px) {
	#ast-hf-menu-2 elevent-signin-widget,
	#ast-hf-menu-2 elevent-account-widget,
	#ast-hf-menu-2 elevent-cart-widget,
	#ast-hf-menu-2 elevent-signout-widget {
		padding-left: 1rem;
		padding-right: 1rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
}

/*** Styling for Max Mega Menu drop down menus with widgets ***/
.mega-menu-item-type-widget ul { list-style:none; margin-left:0; padding-left:0; }
.mega-menu-item-type-widget ul li { line-height:1.6; margin:0; padding:0;  }
.mega-menu-item-type-widget ul a { color:#000; text-decoration:none; }
.mega-menu-item a:hover { color:#ed1c24 !important;  }
.menu-item-description {
	display:block;
	font-size:75%;
	line-height:1.3;
	font-weight:normal;
	color:rgb(0 0 0) !important;
	text-decoration:none !important;
	text-transform:none !important;
}
#inner-wrapper .mega-menu-wrap {
    margin-bottom:0 !important;
}
#mega-menu-link {
	color:rgb(0 0 0) !important;
}
#mega-menu-wrap-primary-menu #mega-menu-primary-menu a.mega-menu-link .mega-description-group .mega-menu-description {
	font-style:normal;
	color:rgb(0 0 0);
}
@media (width > 855px) {
	.mega-mainmenu-support a {
		border-radius:5px !important;
		border:2px solid rgb(255 255 255) !important;
	}
}
.mega-has-icon a.mega-menu-link::before {
	margin:0 1rem 0 0 !important;
	font-size:200% !important;
	float:left;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
  box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.2);
  margin-bottom: 0.5rem;
}
.widget_media_image,
.mega-menu-item-type-widget {
  box-shadow: none !important;
}


/*** Astra menu layout override (stacking the two menus) ***/
.ast-builder-grid-row.ast-builder-grid-row-has-sides.ast-grid-center-col-layout {
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
    "logo menu2" 
    "logo menu1";

	@media ( 855px < width < 1137px ) {
	    grid-template-columns: 1fr;
		grid-template-rows: min-content auto auto;
		grid-template-areas:
		"logo"
		"menu2" 
		"menu1";
	}
}
.site-header-primary-section-left.site-header-section.ast-flex.site-header-section-left {
    grid-area:logo;
}
@media ( 855px < width < 1137px ) {
	.site-header-primary-section-left.site-header-section.ast-flex.site-header-section-left div:first-child {
		width:100%;
		display:flex;
		justify-content:center;
	}
	.site-header-primary-section-right.site-header-section.ast-flex.ast-grid-right-section div:last-child {
		width:100%;
		justify-content:center;
	}
}
.site-header-primary-section-center.site-header-section.ast-flex.ast-grid-section-center {
    grid-area:menu1;
}
.site-header-primary-section-right.site-header-section.ast-flex.ast-grid-right-section {
    grid-area:menu2;
	
	@media ( 855px < width < 1137px ) {
		text-align:center;
		padding-bottom:1rem;
	}
}
header .custom-logo-link img {
  margin-top: 10px; /* aligns bottom of logo with bottom of menu text */
}
/** mobile menu **/
.navmenu-bottom { /* adds spacing and a divider between the nav menu and the elevent menu elements */
	margin-bottom: 1rem !important;
	border-bottom: 2px solid rgb(255 255 255 / 0.5) !important;
	padding-bottom: 2rem !important;	
}


/********** 2.2 Overall Layout: Content Area **********/
/******************************************************/

#content {
	/* center page content */
	margin-left: auto;
	margin-right: auto;
	margin-top:1rem;
	padding-bottom:2rem;
	width:100%;
	max-width: 100vw; /* prevent overflows */
}


/********** 2.3 Overall Layout: Footer **********/
/************************************************/

footer,
footer h2,
footer h3 {
	color:#fff !important;
}
footer h2.widget-title {
	font-size:30px !important;
	margin-bottom:0.5rem;
}
footer h3 {
	font-size:20px;
}
footer a {
	text-decoration:none !important;
}
footer a:hover {
	text-decoration:underline !important;
}

footer .cc-logo {
	font-size: 2rem;
	font-weight: bold;
	display: flex;
}
footer .cc-logo img {
	height: 2.75rem;
	margin-right: 0.25rem;
	margin-top: 0.25rem;
}


@media (width < 975px) {
	footer .ast-builder-grid-row {
		display:grid !important;
  		grid-template-columns: 1fr !important;
  		grid-template-rows: repeat(3, auto);
		width:clamp(300px, 100%, 600px);
		padding:0 1rem;
	}
	footer .cc-logo {
		width: 18ch;
  		white-space: nowrap;
		margin-left: auto;
  		margin-right: auto;
	}
}


/********** 3.0 Page-Specific Layouts **********/
/********** 3.1 Homepage              **********/
/***********************************************/

.festival-menu a.button { /** what is this? **/
    margin: 5px 10px;
    font-size: 1rem;
    font-weight:bold;
}

/*** Swap the position of two columns when changing to mobile views ***/
@media only screen and (min-width:855px) {
 .reverse-row {
     display: flex;
     flex-direction: row-reverse;
 }
}
@media only screen and (max-width:855px) {
 .reverse-row {
     display: flex;
     flex-direction: column;
 }
 .reverse-row > div {
    width:100%;
 }
}

/*** Email Subscribe Banner **/
#subscribe-box,
#sponsor-box {
    display:flex;
}
#subscribe-box-inner {
   max-width:980px !important;
}
.subscribe-box--text p {
    margin:0 !important;
}
.subscribe-box--text img {
    float:left;
    margin-right:20px;
}
.subscribe-box--text>.wpb_wrapper {
    display:flex;
    gap:1rem;
    align-items:center;
}
.email-text {
    flex:1;
	max-width:50ch;
}
@media (max-width:600px) {
	.subscribe-box--text>.wpb_wrapper {
		display:grid;
		grid-template-rows:min-content auto;
		grid-template-columns:auto auto;
		grid-template-areas:
			"icon text"
			"button button"
	}
	.email-icon { grid-area:icon; }
	.email-text { grid-area:text; }
	.email-button { grid-area:button; }
    .subscribe-box--text img {
        width:115px;
        height:115px;
        margin-bottom:50px;
    }
    .subscribe-box--text > .wpb_wrapper {
        display:block !important;
    }
    .subscribe-box--text .email-button {
        margin-top:1rem !important;
    }
}

/*** What is this ***/
h2.breakout {
    font-size:2rem !important;
    color:#fff;
}

/*** Event Calendar Homepage Widget -- review these ***/
.tribe-events-widget-events-list {
    padding:0.75rem !important;
    background-color:#fff !important;
}
/* .tribe-events-widget-events-list a:hover,
.tribe-events-widget-events-list__event-header .tribe-events-widget-events-list__event-title-link tribe-common-anchor-thin:hover,
.tribe-common a:not(.tribe-common-anchor--unstyle):hover,
.tribe-common .tribe-common-anchor-thin:hover,
.tribe-events-widget-events-list__event-title-link tribe-common-anchor-thin:hover {
    color:#000;
    border-bottom:none;
    text-decoration:underline;
}*/
.tribe-events-widget-events-list__event-title-link.tribe-common-anchor-thin:hover {
	color:rgb(0 0 0) !important;
	text-decoration:underline;
	text-underline-offset: 0.1em;
	text-decoration-thickness: 0.1em;
	border-bottom:none !important;
}
.tribe-events-widget-events-list__event-wrapper {
    display:flex;
    flex-wrap:nowrap;
}
.tribe-events-widget--image {
    max-width:25%;
    margin-right:1rem !important;
}
.tribe-events-widget-events-list__event-header .event-cat span {
    display:inline-block;
    font-size:0.7rem;
    line-height:1.2rem;
    font-weight:bold;
    padding:0 4px;
    margin-right:5px;
    color:#fff;
    background-color:#000;
}
.tribe-events-widget-link {
    text-align:center;
}
.list-dayname {
    white-space: nowrap;
}
.event-category {
    font-size:85% !important;
    text-transform:uppercase !important;
    font-weight:bold !important;
}
.tribe-events-widget .tribe-events-widget-events-list__event-date-tag-datetime {
    border: 2px solid black;
    width: 50px;
    height: 50px !important;
}
.tribe-events-widget .tribe-events-widget-events-list__event-date-tag-month {
    color: black !important;
    font-weight: bold !important;
    background: #ccc;
}
.tribe-events-widget .tribe-events-widget-events-list__event-datetime-wrapper {
    margin-bottom: 0;
}
.tribe-common .tribe-common-h7 {
    line-height: 1.4 !important;
}
.tribe-events-widget-events-list__view-more,
.tribe-events-widget-events-list__view-more-link {
    color:#ed1b25 !important;
    text-align:center;
}
.tribe-events-widget-events-list__event-title-link {
    color:#ed1b25 !important;
}
.tribe-events-widget-events-list__event-header {
    margin-top:-5px !important;
}
.tribe-events-widget-events-list__view-more a {
	background:rgb(var(--cc-brand-red)) !important;
}
.tribe-events-widget-events-list__view-more-link:hover{
	background:rgb(var(--cc-brand-redhover)) !important;
	color:rgb(255 255 255) !important;
	text-decoration:none !important;
}
@media (max-width:600px) { /* get rid of image on small screens */
    .tribe-events-widget--image {
        display:none;
    }
}
@media (min-width:856px) and (max-width:1200px) { /* get rid of image when column is small */
    .tribe-events-widget--image {
        display:none;
    }
}
/*** Get rid of this? ***/
.event-list-wrapper {
    height: 100%;
}

/*** Homepage photo menu ***/
.homepagefootermenu__imagerollover img {
    border:0 !important;
    padding:0 !important;
    border-image-width:0;
}
.homepagefootermenu__imagerollover img:hover {
    opacity:0.8;
}

/*** What is this? ***/
.wpb_button,
.wpb_content_element,
ul.wpb_thumbnails-fluid > li {
    margin-bottom: 20px !important;
}

/*** Old Mailchimp Signup -- get rid of? ***/
.mcsignup-container input {
    margin-right:8px;
}
.mcsignup-email {
    width: 358px;
}

/*** Homepage Sponsor Section ***/
.home-sponsor-block {
    text-align:center;
}
.home-sponsor-block img {
    vertical-align:middle;
    margin-left: 20px;
    margin-right:20px; 
}
/***** End homepage styling ******/


/********** 3.5 Landing Page Layout **********/
#landingpage-videoheader {
    margin-top:-1rem;
}

/********** 3.6 Blog Posts ***********/
/** remove awkward spacing at top **/
#content:has(.blogpost) {
	margin-top:0;
}
.ast-separate-container #primary.blogpost {
  padding-top: 0 !important;
}
@media (min-width: 993px) {
  .ast-separate-container #primary, .ast-separate-container.ast-left-sidebar #primary, .ast-separate-container.ast-right-sidebar #primary {
    margin: 0 0 4em 0;
  }
}
/** prevent header image from getting too big **/
.blogpost .ast-single-post-featured-section img {
	max-height:500px;
}
.blogpost h1 {
	margin-bottom: 0.25rem;
}
/** restyle the category blocks **/
.blogpost .ast-terms-link a {
	display:inline-block;
	margin-right:0.5rem;
	padding:5px 7px;
	background:rgb(0 0 0);
	color:rgb(255 255 255);
	border-radius:0;
	font-weight:bold;
	font-size:0.75rem;
}
.blogpost .ast-terms-link a:hover {
	background:rgb(var(--cc-brand-redhover));
	text-decoration:none;
}

/********** 3.6.1 News Posts Archive Pages Layout **********/
.newsstory-list {
  display:block;
  max-width:1200px;
  margin:0 auto;
}
.newsstory {
  display:grid;
  grid-template-columns:33% auto;
  grid-template-rows:auto auto;
  grid-template-areas:
	"news-img news-text"
	"news-img news-cta";
  margin-bottom:1rem;
  border:3px solid black;
}
.newsstory-image {
	width:100%;
	height:100%;
	aspect-ratio:3/2;
	grid-area:news-img;
}
.newsstory-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.newsstory-text {
	padding:1rem;
	grid-area:news-text;
}
.newsstory-text h3 {
  margin-bottom:0.5rem;
}
.newsstory-text--date {
  font-size:0.85rem;
  font-weight:bold;
  opacity:0.75;
  margin-bottom:0.5rem !important;
}
.newsstory--cat {
  display:inline-block;
  margin-right:0.5rem;
  padding:2px 5px;
  background:black;
  color:#fff;
  font-weight:bold;
  font-size:0.75rem;
}
.newsstory-cta {
  padding-bottom:1rem;
  padding-right:1rem;
  grid-area:news-cta;
  text-align:right;
  margin-top:auto;
}
/****/
.newsarchive-footernav {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:1rem;
	margin-top:2rem;
}