/*
Theme Name: Cinemas Utopia
Author: Matthieu Pain
Author URI: https://vvv.mattpain.com/
Theme URI: 
Tags: full-site-editing, editor-style, block-styles, block-patterns
Text Domain: cinemas-utopia
Requires at least: 6.3
Requires PHP: 7.4
Tested up to: 6.8
Version: 1.0.0
 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
:root {
    --flex-gap: 1.5em; /* Variable for gap */
}
:root :where(.is-layout-constrained) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}
*,
*::after,
*::before {
    box-sizing: border-box;
}
/* Styles intended only for the front.*/
html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-size: var(--wp--preset--font-size--utopiamedium) !important;
}

.wp-site-blocks {
	padding-top: 0;
	padding-bottom: 0;
}
main {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
.entry-content {
	padding-top: 0;
	padding-bottom: 0;
}
iframe {
	width: 100%;
	border: none;
}
/* Font */
h1,h2,h3,h4,h5,h6{
	font-family:var(--wp--preset--font-family--fraunces);
	margin-block-end: 0.8em!important;
	font-weight: 600;
}
h2{
	font-size: var(--wp--preset--font-size--utopia-x-large);
}

p {
	margin-block-end: 1em!important;
}
.has-fraunces-font-family em, .has-fraunces-font-family i{
	font-style: oblique 14deg;
}

/* Header /*/
.site-header p {
	margin-block-end: 0!important;
}
/* Menus */
#header_mobile {
    display: none;
}
@media screen and (max-width: 980px) {
  #header_desktop {
    display: none;
  }
  #header_mobile {
    display: block;
    position: relative;
  }
}

#mobile_menu_button .wp-block-buttons ,
#mobile_menu_deployed_button .wp-block-buttons {
	cursor:pointer;
	width: 30px;
 	height: 30px;
}
#mobile_menu_button .wp-block-buttons::before {
	content: url("data:image/svg+xml,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill='%23efedf0' d='M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z'%3E%3C/path%3E%3C/svg%3E");
	width: 30px;
	height: 30px;
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
	margin-top: 7px;
}
#mobile_menu_deployed_button .wp-block-buttons::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='30' height='30' aria-hidden='true' focusable='false'%3E%3Cpath fill='%23efedf0' d='m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z'%3E%3C/path%3E%3C/svg%3E");
	width: 30px;
	height: 30px;
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
	margin-right: 0.8em;
  	margin-top: -0.4em;
}

#mobile_menu_deployed {
	position: fixed;
	z-index: 0;
	width: 100%;
	overflow: auto;
	height: 0;
	visibility: hidden;
	opacity: 0;
	transition: height 0.5s, opacity 0.5s, visibility 0.5s;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 0;
	max-width: 100%;

	background-image: url('/wp-content/themes/cinemas-utopia/assets/images/bg/bg_menu_mobile.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#mobile_menu_deployed.opened {
  z-index: 999;
  height: 100vh;
  visibility: visible;
  opacity: 1;
}

body.mobile_menu_opened {
  overflow: hidden;
}
#header_mobile .wp-block-navigation .wp-block-navigation-item {
	display: block;
}
#header_mobile .wp-block-navigation .wp-block-navigation__submenu-icon {
	display: none;
}
#header_mobile .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	height: auto;
	/* overflow: hidden; */
	visibility: visible;
	width: auto;
	opacity: 1;
	margin-top: 0;
	position: relative;
	display: block;
}
hr.separateur_menu_mobile {
	margin: 0.5em auto;
}

.wp-block-navigation a.wp-block-navigation-item__content,
.wp-block-navigation__submenu-icon {
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	position:relative;
}
#header_desktop a.wp-block-navigation-item__content:hover,
#header_desktop li.current-menu-ancestor > a.wp-block-navigation-item__content,
#header_desktop li.current-menu-ancestor >  .wp-block-navigation__submenu-icon,
#header_desktop li.current-menu-item a.wp-block-navigation-item__content{
	color:var(--wp--preset--color--noir-utopia)!important;
}

#header_desktop a.wp-block-navigation-item__content::after{
	content: '';
	background: var(--wp--preset--color--noir-utopia);
	border-radius: 50%;
	position: absolute;
	height: 8px;
	width: 8px;
	left: 0;
	right: 0;
	margin-inline: auto;
	top: 100%;
	opacity:0;
	transition: all 0.2s ease-in-out;
}
#header_desktop li.current-menu-ancestor > a.wp-block-navigation-item__content::after, 
#header_desktop li.current-menu-item > a.wp-block-navigation-item__content::after,
#header_desktop li:not(.wp-block-navigation-submenu) a.wp-block-navigation-item__content:hover::after{
	opacity:1;
}
ul.wp-block-navigation-submenu a.wp-block-navigation-item__content::after,
ul.wp-block-navigation-submenu a.wp-block-navigation-item__content:hover::after {
	display: none;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	border: none;
	padding-top: 1em;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: .2em 1em;
}


.site-footer {
	margin-block-start: 0;
}
.site-footer > .wp-block-group{
	position: relative;
}
.site-footer > .wp-block-group::after {
	content: '';
	position: absolute;
	z-index: 1;
	background-image: url('/wp-content/themes/cinemas-utopia/assets/images/bg/footer-cinema-utopia-1920.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
}
.site-footer > .wp-block-group div{
	position: relative;
	z-index:2;
}
.site-footer .wp-block-navigation__container{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5em 2.5em;
}

.footer_links{
	gap: 0.5em!important;
}
.footer_links p{
	margin-block-end: 0!important;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--utopiamedium);
}
.footer_links p.flux_rss::before,
.footer_links p.mastodon::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	margin-right: 1em;
	height: 35px;
	width: 38px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.footer_links p.flux_rss::before {
	background-image: url("/wp-content/themes/cinemas-utopia/assets/images/rss.png");
}
.footer_links p.mastodon::before {
	background-image: url("/wp-content/themes/cinemas-utopia/assets/images/mastodon.png");
}