/*
Theme Name:   New Slang Theme
Theme URI:    https://generatepress.com
Description:  Thème enfant de GeneratePress
Author:       New Slang
Author URI:   https://newslang.ch
Template:     generatepress
Version:      0.1
*/

/*******************************
*
*  Helpers
*
********************************/

/* Position Properties */

.relative {
	position: relative;
}

.absolute {
	position:absolute;
	top: 0px;
	left: 0px;
}

.sticky {
	position: sticky;
	top: 24px;
}

/* Image Aspect Ratios */

.aspect-1-1 img {
	aspect-ratio: 1/1;
	object-fit: cover;
}

.aspect-3-2 img {
	aspect-ratio: 3/2;
	object-fit: cover;
}

.aspect-2-3 img {
	aspect-ratio: 2/3;
	object-fit: cover;
}

.aspect-4-3 img {
	aspect-ratio: 4/3;
	object-fit: cover;
}

.aspect-3-4 img {
	aspect-ratio: 3/4;
	object-fit: cover;
}

.aspect-16-9 img {
	aspect-ratio: 16/9;
	object-fit: cover;
}

.aspect-9-16 img {
	aspect-ratio: 9/16;
	object-fit: cover;
}

/* Multi-columns text */

.text-two-columns {
	column-count: 2;
    column-gap: 64px;
}

@media ( max-width: 767px ) {
    .text-two-columns {
        column-count: 2;
        column-gap: 32px;
    }
}

@media ( max-width: 479px ) {
    .text-two-columns {
        column-count: 1;
    }
}


/*******************************
*
*  Overrides
*
********************************/

/* Forms */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
    transition: all 0.3s;
    width: 100%;
}

/* Multi-columns text */

.text-two-columns {
	column-count: 2;
    column-gap: 64px;
}

@media ( max-width: 767px ) {
    .text-two-columns {
        column-count: 2;
        column-gap: 32px;
    }
}

@media ( max-width: 479px ) {
    .text-two-columns {
        column-count: 1;
    }
}

/* Content */

.entry-content:not(:first-child), .entry-summary:not(:first-child), .page-content:not(:first-child) {
	margin-top: 0;
}

/*******************************
*
*  General
*
********************************/

/* Handles full height images inside grid */
.full-height-grid {
	align-items: stretch;
}

.full-height-grid > .gb-grid-column {
	display: flex;
	align-items: center;
}

.full-height-grid .image-container {
	height: 100%;
	width: 100%;
	display: flex;
}

.full-height-grid .image-container img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	max-height: 600px;
}

@media(max-width: 1024px) {

	.full-height-grid .image-container img {
		max-height: 100%;
	}

}

/*******************************
*
*  Header
*
********************************/

.site-logo {
	margin-left: 12px;
}

#generate-slideout-menu.main-navigation .main-nav ul ul {
	background: var(--background-2);
	box-shadow: none;
}

#generate-slideout-menu.offside {
    --oc-width: 300px;
    width: var(--oc-width);
}

#generate-slideout-menu.offside--right.is-open {
    transform: translate3d( calc( -1 * var(--oc-width) ) ,0,0);
}

#generate-slideout-menu.offside--right {
    left: auto;
    right: calc( -1 * var(--oc-width) );
}

/* 
 * WPML
 */

.main-navigation ul .wpml-ls-item ul {
	right: 0;
	margin-top: -10px;
	width: auto;
	text-align: right;
}

.main-navigation .main-nav>ul {
	align-items: unset;
}

.main-navigation .main-nav ul li.menu-button {
	background-color: black;
	transition: all 0.3s;
}

.main-navigation .main-nav ul li.menu-button:hover {
	background-color: var(--accent);
}

.main-navigation .main-nav ul li.wpml-ls-item a {
	padding: 0;
}

.main-navigation .main-nav ul:not(.sub-menu) > li > a > .wpml-ls-native {
	font-size: 0;
 }

 .main-navigation .main-nav ul:not(.sub-menu) > li > a > .wpml-ls-native:after {
	content: attr(lang);
	font-size: 12.8px;
    display: inline-block;
}

.main-navigation .main-nav ul li.wpml-ls-item .sub-menu {
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
}

.main-navigation .main-nav ul li.wpml-ls-item .sub-menu a {
	padding: 12px;
	background: white;
    color: black;
}

.main-navigation .main-nav ul li.wpml-ls-item .sub-menu a:hover {
	background-color: var(--background-2);
}

.offside.main-navigation .main-nav ul li.menu-button a {
	color: white;
}

.offside.main-navigation .main-nav ul li.wpml-ls-item {
	background-color: var(--background-2);
}

button.menu-toggle {
	padding-top: 10px;
}

button.menu-toggle svg {
	fill: white;
	width: 28px;
}

@media(max-width: 1200px) {

	.main-navigation .main-nav>ul {
		font-size: 0.9em;
	}

}

/*******************************
*
*  Footer
*
********************************/

html {
    position: relative;
    min-height: 100%;
}

body {
	margin: 0 0 313px;
}

.site-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}
@media (max-width: 1024px) {

	body {
		margin-bottom: 197px;
	}

}

@media (max-width: 768px) {

	body {
		margin-bottom: 420px;
	}

	.site-footer nav ul {
		align-items: center;
	}
	

}

/*******************************
*
*  Pages
*
********************************/

.home-lineup,
.home-lineup + .slider .artist-name {
	position: absolute;
	bottom: 128px;
	left: 128px;
	right: 128px;
	z-index: 2;
}

.home-lineup .gb-button {
	justify-content: flex-end;
	display: flex;
}

.home-lineup .gb-button:before {
	height: 2px;
	background-color: white;
	flex: 1;
	margin-right: 1em;
	content: "";
}	

.home-lineup + .slider .artist-name {
	bottom: 160px;
}

.slider img {
	max-width: 100%;
}

.slick-dots {
	display: flex;
	list-style-type: none;
	position: absolute;
	bottom: 0;
	width: 100%;
	justify-content: center;
	column-gap: 12px;
	z-index: 2;
	margin: 0 0 24px 0;
}    

.slick-dots button {
	font-size: 0;
	width: 24px;
	height: 8px;
	border-radius: 16px;
	padding: 0;
	opacity: 1;
	transition: all 0.3s;
	background-color: var(--background-1);
}

.slick-dots button:hover,
.slick-dots .slick-active button {
	background-color: var(--accent);
}

.iframe-field iframe {
	width: 100%;
	height: 166px;
	border: 1px solid var(--border)
}

@media (max-width: 1400px) {

	.home-lineup, 
	.home-lineup + .slider .artist-name {
		left: 84px;
		right: 84px;
	}

	.home-lineup {
		bottom: 84px;
	}

	.home-lineup + .slider .artist-name {
		bottom: 120px;
	}

}

@media (max-width: 1024px) {

	.home-lineup, 
	.home-lineup + .slider .artist-name {
		left: 32px;
		right: 64px;
	}

	.home-lineup {
		bottom: 64px;
	}

	.home-lineup + .slider .artist-name {
		bottom: 100px;
	}

}

@media (max-width: 900px) {

	#ecuries {
		background-position-x: 130%;
		background-size: 60%;
	}

}

@media (max-width: 767px) {

	#ecuries {
		background-image: none;
	}

	.slider img {
		min-height: 100%;
		min-height: 300px;
    	object-fit: cover;
		object-position: center;
	}

	.slick-dots button {
		width: 16px;
	}

}

@media (max-width: 479px) {


	.home-lineup .gb-button {
		justify-content: center;
		margin-left: 32px;
	}

	.home-lineup .gb-button:before {
		content: none;
	}	

	.home-lineup + .slider .artist-name h2 {	
		padding-bottom: 12px;
		border-bottom: 2px solid white;
		margin-bottom: 24px;
	}

	.slick-dots {
		column-gap: 6px;
	}

}


/*******************************
*
*  Custom code styling
*
********************************/

/*
 *
 * Line-up
 *
 */

/*
 * Header
 */

.button-lineup-events:after,
.button-lineup-artists:after {
	content: "";
	height: 2px;
	background-color: currentColor;
	width: 0;
	display: block;
	transition: all 0.5s;
}

.button-lineup-events:hover:after,
.button-lineup-artists:hover:after,
.button-lineup-events.active:after,
.button-lineup-artists.active:after {
	width: 100%;
}

/*
 * Wrapper
 */ 

#lineup-wrapper {
	display: grid;
}

#lineup-wrapper.events {
	grid-template-columns: 1fr 1fr 1fr;
}

#lineup-wrapper.artists {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

#lineup-wrapper .lineup-item {
	text-decoration: none;
	color: var(--text);
	position: relative;
}

#lineup-wrapper .lineup-item:before {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 0;
	background-color: var(--background-2);
	content: "";
	transition: 0.5s;
}

#lineup-wrapper .image {
	overflow: hidden;
	display: flex;
	position: relative;
}

#lineup-wrapper .image:before {
	position: absolute;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--accent);
    mix-blend-mode: color;
    opacity: 0;
	z-index: 1;
	transition: all 0.5s;
}

#lineup-wrapper .content {
	padding: 20px;
}

#lineup-wrapper img {
	aspect-ratio: 3 / 2;
    object-fit: cover;
	transition: all 0.5s;
}

#lineup-wrapper .lineup-item:hover:before {
	height: 100%;
}

#lineup-wrapper .lineup-item:hover .image:before {
	opacity: 1;
}

#lineup-wrapper .lineup-item:hover img {
	transform: scale(1.05);
}

#lineup-wrapper h2 {
	font-family: "Sora", sans-serif;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin-bottom: 12px;
	text-transform: uppercase;
	z-index: 1;
	position: relative;
	transition: all 0.3s;
}

#lineup-wrapper .lineup-item:hover h2 {
	color: var(--accent);
}

#lineup-wrapper p {
	margin: 0;
	z-index: 1;
	position: relative;
}

#lineup-wrapper .date::first-letter {
	text-transform: uppercase;
}

@media(max-width: 1400px) {
	
	#lineup-wrapper.events {
		grid-template-columns: 1fr 1fr;
	}
	
	#lineup-wrapper.artists {
		grid-template-columns: 1fr 1fr 1fr;
	}

}

@media(max-width: 1024px) {

	#lineup-wrapper h2 {
		font-size: 1em;
	}
	
	#lineup-wrapper.artists {
		grid-template-columns: 1fr 1fr;
	}

}

@media(max-width: 768px) {

	#lineup-wrapper.events,
	#lineup-wrapper.artists {
		grid-template-columns: 1fr;
	}

}

/*
 *
 * Event page
 *
 */

.meeting-point {
	display: inline-flex;
	align-items: center;
}

.meeting-point:before {
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 10C20 16 12 22 12 22C12 22 4 16 4 10C4 7.87827 4.84285 5.84344 6.34315 4.34315C7.84344 2.84285 9.87827 2 12 2C14.1217 2 16.1566 2.84285 17.6569 4.34315C19.1571 5.84344 20 7.87827 20 10Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	background-size: contain;
	width: 20px;
	height: 20px;
	margin-right: 8px;
}

#artists-wrapper .event-artist .gb-grid-column {
	width: 50%;
}

#artists-wrapper .event-artist .content-container {
	padding: 48px 32px;
}

#artists-wrapper .event-artist:nth-child(odd) {
	flex-direction: row-reverse;
}

#artists-wrapper .event-artist .gb-icon {
	font-size: 1em;
}

#artists-wrapper .event-artist .gb-buttons {
	display: flex;
    flex-direction: column;
    row-gap: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

#artists-wrapper .event-artist .gb-buttons a {
	color: var(--text);
	transition: all 0.3s;
	font-size: 0.9em;
}

#artists-wrapper .event-artist .gb-buttons a:hover {
	color: var(--accent);
}

#artists-wrapper .event-artist .gb-buttons .gb-icon {
	margin-right: 0.5em;
	margin-left: 0;
}

#artists-wrapper .event-artist h3 .nationality {
	color: var(--text);
    font-weight: normal;
	letter-spacing: 0;
}

body.single-events .site-footer {
	background: var(--background-2);
}

#artists-wrapper .links-wrapper {
	display: flex;
	align-items: center;
	column-gap: 24px;
}

@media (max-width: 1200px) {

	#artists-wrapper .links-wrapper {
		flex-direction: column;
		align-items: flex-start;
	}

	#artists-wrapper .links-wrapper .gb-buttons {
		margin-top: 16px;
	}

}

@media(max-width: 768px) {

	#artists-wrapper .event-artist .content-container {
		padding: 32px 24px;
	}

	#artists-wrapper .event-artist,
	#artists-wrapper .event-artist:nth-child(odd) {
		flex-direction: column-reverse;
	}

	#artists-wrapper .event-artist .gb-grid-column {
		width: 100%;
	}

}