/*
Theme Name: Sheryl
Template: twentytwentyfive
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: Bartek Rey
Author URI: https://bartekrey.eu
Description: A theme for Cinema Sheryl, based on Twenty Twenty-Five by the  Wordpress team.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2

Version: 1.79
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sheryl
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */



/* Home page */


.wp-block-gmap-gmap-block {
	min-width: 360px;
	width: 100%;
}

/* Desktop styles */
.how-to-find-us {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.how-to-find-us > .wp-block-group {
    width: 600px; /* Adjust this value to your desired text width on desktop */
    flex: 0 0 auto;
}

.how-to-find-us .wp-block-gmap-gmap-block {
    flex: 1;
    min-width: 360px;
    width: auto;
}

/* Mobile styles */
@media (max-width: 600px) {
    .how-to-find-us {
        flex-direction: column;
    }
    .how-to-find-us > .wp-block-group {
        width: 100%;
    }
    .how-to-find-us .wp-block-gmap-gmap-block {
        width: 100%;
        min-width: 0;
    }
}

/* Override wide alignment on mobile */
@media (max-width: 600px) {
    .alignwide {
        max-width: var(--wp--style--global--content-size) !important;
        width: 100%;
    }
}


/* All of the thumbnails */


.kinola-thumbnails {
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
}

.kinola-thumbnail {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 1em;
	margin: 1em;
	width: 16rem;
	gap: 1rem;
}

.kinola-thumbnail img {
	width: 100%;
	height: auto;
}


/* Upcoming screenings, kinola events */


.kinola-events{
	
}

.kinola-event{
	
}

.kinola-event-details {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--wp--preset--color--yellow);
}

.kinola-event-poster {
	border-radius: 25px;
}

.kinola-event-date {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.kinola-event-title {
	font-size: 1.5em;
	line-height: 1em;
	font-weight: 700;
}

.kinola-event-tickets {
	margin-top:2rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.kinola-event-tickets-link-buy {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--yellow);
	border-radius: 9px;
	padding: 0.5rem 0.5rem;
	font-weight:900;
}


/* Just the films in general, especially the coming soon section  */

.kinola-films {
	
}

.kinola-film{
	
}

.kinola-film-poster{
	border-radius: 25px;
}

.kinola-film-details {
	display: flex;
	flex-direction: column;
	color: var(--wp--preset--color--yellow);
}

.kinola-film-details p {
	margin: 0;
}

.kinola-film-title {
	font-size: 1.5em;
	line-height: 1em;
	font-weight: 700;
}



/* INDIVIDUAL FILM POST  */

.wp-block-post-title {
	 text-shadow: 1px 1px 10px #262626;
}

.kinola-film-content{
	width: 100%;
}


/* The hero image */

.kinola-film-hero {
  	position: absolute;
  	top: -12rem;
  	left: 0;
  	z-index: -2;
	width: 100vw !important;
	max-width: none !important;
  	height: 80vh !important;
  	background-size: cover;
  	background-position: center center;
  	background-repeat: no-repeat;
}

.kinola-film-hero::before {
	content: "";
 	position: absolute;
	z-index: -1;
  	inset: 0px 0px 50vh 0px;
  	background: linear-gradient(
    180deg,
    rgba(38, 38, 38, 1) 0%,
    rgba(38, 38, 38, 0) 100%
  );
}


/* The film details and metadata */

.kinola-film-meta {
	
}

.kinola-film-meta img {
	  width: 100%;
}


/* The trailer */


.kinola-film-trailer {
	width: 100%;
    aspect-ratio: 16/9;
    height: auto;
}

.kinola-film-trailer iframe {
    width: 100%;
    height: 100%;
    border: none;
}


/* The image gallery */


.kinola-film-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1rem;
	padding: 1rem 0;
}

.kinola-film-gallery-item {
	display: block;
	border-radius: 6px;
	overflow: hidden;
	transition: transform 0.2s ease-in-out;
}

.kinola-film-gallery-item img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

.kinola-film-gallery-item:hover {
	transform: scale(1.02);
}

.kinola-film-screenings {
	
}
    
.kinola-film-screening {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--yellow);
	font-weight: 700;
	padding: 1rem 1.5rem;
  	border: none;
}

.kinola-screenings-tickets-link {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--yellow);
	border-radius: 9px;
	padding: 0.5rem 0.5rem;
	font-weight:900;
}



/* The serial ticket page */

#kinola-serial-ticket {
	background-color: var(--wp--preset--color--contrast);
	padding: 2rem;
	display: block;
	color-scheme: dark;
	border-radius: 2rem;
}

.serial-ticket {
	color: var(--wp--preset--color--contrast);
}

.h-theme-light {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}


/* HEADER - NAVIGATION */

/* Mobile header fixes */
@media (max-width: 600px) {
    /* Reset header padding on mobile */
    .wp-block-template-part > .wp-block-group {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    /* Adjust header flex container */
    .wp-block-group.is-content-justification-center.is-nowrap.is-layout-flex {
        gap: 0.5rem !important;  /* Reduce gap between elements */        
        justify-content: space-between !important;  /* Change from center to start to use space better */    
	}

}



.language-switcher-dropdown {
	/*position: absolute;
	right:4rem;
    margin: 1em 0;*/
	color: var(--wp--preset--color--yellow);
	background-color: var(--wp--preset--color--base);
}

.language-switcher-select {
	padding: 0.5em;
    cursor: pointer;
	font-size: var(--wp--preset--font-size--medium);
	font-family: var(--wp--preset--font-family--montserrat);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--yellow);
	border: none;
}

.wp-block-site-logo img { 
	max-width: none;
}

.wp-block-navigation .wp-block-navigation__responsive-container-open svg {
    width: 3rem;
    height: 3rem;
}

a {
	text-decoration-line: none;
}

a:hover {
	text-decoration-line: underline;
}

.kinola-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: center;
	justify-content: flex-start;
	font-family: var(--wp--preset--font-family--montserrat)
}

.js-kinola-filters-form {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	width: 100%;
	justify-content: center;
}

.select2-container {
	width: 100% !important;
	max-width: 250px;
	flex: 1 1 150px;
}

.kinola-filter-button {
	padding: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 4px;
	cursor: pointer;
	flex: 1 1 100px;
	max-width: 150px;
	font-size: var(--wp--preset--font-size--medium);
	font-family: var(--wp--preset--font-family--montserrat)
}

@media (max-width: 600px) {
	.select2-container,
	.kinola-filter-button {
		max-width: 100%;
	}
}

/* Main select box */
.select2-container--default .select2-selection--single {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 4px;
}

/* Text inside */
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--wp--preset--color--contrast);
}

/* Arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--wp--preset--color--contrast) transparent transparent transparent;
}

/* Dropdown menu */
.select2-container--default .select2-dropdown {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
}

/* Each option */
.select2-container--default .select2-results__option[aria-selected] {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
}

/* Force correct colors on hovered option */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:active,
.select2-container--default .select2-selection--single:focus-visible {
	outline: none !important;
	border-color: var(--wp--preset--color--contrast) !important;
	box-shadow: none !important;
}


/* CONTACT FORM */


.wpcf7-form {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.wpcf7-form p {
	width: 100%;
}

.wpcf7-textarea {
	width: 100%;
}

.wpcf7-submit {
	padding: 0.2em 0.5em;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 4px;
	cursor: pointer;
	flex: 1 1 100px;
	max-width: 150px;
	font-size: var(--wp--preset--font-size--medium)
}

.wpcf7-spinner {
      display: none !important;
      visibility: hidden !important;
    }






/* Hide logo in the menu on mobile */
/*
@media (max-width: 600px) { 
	.hide-on-mobile {
	  display: none !important;
      visibility: hidden !important;
	}
}*/

:root {
	color-scheme: dark;
}

* {
	color-scheme: dark;
}


/* Focus styles */
/*:where(.wp-site-blocks *:focus) {
/*	outline-width: 2px;
/*	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, span, p {
	text-wrap: balance;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}