/*
 Theme Name:   RC Launaguet
 Theme URI:    https://www.rc-launaguet.com/
 Description:  Site Officiel du club RC Launaguet
 Author:       Onokaa SAS
 Author URI:   https://www.onokaa.com
 Template:     onk-shop
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/**
*	Global
**/

body{
	background: #fff; color: #1E1C1A; font-family: Arial, sans-serif;
	--launaguet-color-yellow: #FFEF41;
	--launaguet-color-orange: #FFCE00;
	--launaguet-color-grey: #a6a6a6;
	--launaguet-color-grey-light: #f2f2f2;
	--launaguet-color-black: #1E1C1A;
	--launaguet-color-white: #fff;
	
    --wp--preset--font-size--medium: 2.4rem;
    --wp--preset--font-size--large: 3rem;
    --wp--preset--font-size--x-large: 4rem;
}

h1, .h1-like,
#header > article .header-content h1, #header > article .header-content .h1-like{font-family: 'Oswald', sans-serif; font-size: 3.2rem; font-weight: 500;}
h2, .h2-like{font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: normal; font-size: 2.8rem;}
h3, .h3-like{font-family: 'Oswald', sans-serif; font-weight: 500; margin: 0;font-size: 2.2rem; line-height: 1.25}

@media(min-width: 782px){
	h1, .h1-like,
	#header > article .header-content h1, #header > article .header-content .h1-like{font-size: 4rem;}
	h2, .h2-like{font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: normal; font-size: 3rem;}
}
@media(min-width: 992px){
	body{
		--wp--preset--font-size--medium: 2.6rem;
		--wp--preset--font-size--large: 4rem;
		--wp--preset--font-size--x-large: 5rem;
	}
	h1, .h1-like,
	#header > article .header-content h1, #header > article .header-content .h1-like{font-size: 5rem;}
	h2, .h2-like{font-size: 4rem;}
	h3, .h3-like{font-size: 2.6rem;}
}
@media(min-width: 1280px){
	body{
		--wp--preset--font-size--medium: 2.8rem;
		--wp--preset--font-size--large: 4.5rem;
		--wp--preset--font-size--x-large: 5.5rem;
	}
	h1, .h1-like,
	#header > article .header-content h1, #header > article .header-content .h1-like{font-size: 5.5rem;}
	h2, .h2-like{font-size: 4.5rem;}
	h3, .h3-like{font-size: 2.8rem;}
}

a{color: inherit; text-decoration: none;}
a:hover{color: var(--launaguet-color-orange);}

.btn, button, input.submit, .frm_button_submit, .wp-block-button__link{background: var(--launaguet-color-yellow); color: var(--launaguet-color-black);}
.btn:hover, button:hover, input.submit:hover, .frm_button_submit:hover, .wp-block-button__link:hover{color: var(--launaguet-color-white); background: var(--launaguet-color-orange);}


.slick-prev, .slick-next{background: rgba(30,28,26,0.65); padding: 10px; width: auto; height: auto;}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus{background: rgba(30,28,26,1);}
.slick-prev:before, .slick-next:before{font-family: dashicons; color: var(--launaguet-color-yellow);}
.slick-prev:before{content: "\f341";}
.slick-next:before{content: "\f345";}

/**
*	Hack Gutenberg
**/
.has-yellow-background-color {background-color: var(--launaguet-color-yellow);}
.has-yellow-color {color: var(--launaguet-color-yellow);}
.has-orange-background-color {background-color: var(--launaguet-color-orange);}
.has-orange-color {color: var(--launaguet-color-orange);}
.has-white-background-color {background-color: var(--launaguet-color-white);}
.has-white-color {color: var(--launaguet-color-white);}
.has-grey-background-color {background-color: #var(--launaguet-color-grey);}
.has-grey-color {color: var(--launaguet-color-grey);}
.has-black-background-color {background-color: var(--launaguet-color-black);}
.has-black-color {color:  var(--launaguet-color-black);}
/* .has-blue-to-white-gradient-background {background: linear-gradient(180deg,rgb(9,51,72) 50%,rgba(255,255,255,0) 50%);} */

.wp-block-media-text__media img, .wp-block-media-text__media video{max-width: 100%;}



.wp-block-cover.alignfull > .wp-block-cover__inner-container,
.wp-block-group.alignfull > .wp-block-group__inner-container{width: 100%; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px;}
@media (min-width: 600px){
	.wp-block-cover.alignfull > .wp-block-cover__inner-container,
	.wp-block-group.alignfull > .wp-block-group__inner-container{max-width: 540px;}
}
@media (max-width: 781px){
	.wp-block-media-text{gap: 25px;}
}
@media (min-width: 782px){
	.wp-block-cover.alignfull > .wp-block-cover__inner-container,
	.wp-block-group.alignfull > .wp-block-group__inner-container{max-width: 768px;}
	.alignfull img{width: 100%; }
}
@media (min-width: 992px){
	.wp-block-cover.alignfull > .wp-block-cover__inner-container,
	.wp-block-group.alignfull > .wp-block-group__inner-container{max-width: 960px;}
}
@media (min-width: 1280px){
	.wp-block-cover.alignfull > .wp-block-cover__inner-container,
	.wp-block-group.alignfull > .wp-block-group__inner-container{max-width: 1200px;}
	.wp-block-cover.alignfull .alignwide,
	.wp-block-group.alignfull .alignwide{
		margin-left: -80px;
		margin-right: -80px;
		width: calc(100% + 160px);
		max-width: none;
	}
}
@media (min-width: 1440px){
	.content-area, 
	.wp-block-group.alignfull > .wp-block-group__inner-container{max-width: 1400px;}
}

.wp-block-cover.hover-effect{}
.wp-block-cover.hover-effect > .wp-block-cover__gradient-background{-webkit-transition: background 0.4s linear;
    -ms-transition: background 0.4s linear;
    transition: background 0.4s linear;
	background-size: 100% !important;
	background-position: right bottom !important;} 
.wp-block-cover.hover-effect:hover > .wp-block-cover__gradient-background{ background-size: 250% !important;}


.wp-block-getwid-image-box{}
.wp-block-getwid-image-box > .wp-block-getwid-image-box__image-container{background: var(--launaguet-color-grey-light); margin-bottom: 0; height: 350px}
.wp-block-getwid-image-box > .wp-block-getwid-image-box__image-container .wp-block-getwid-image-box__image-wrapper{width: 100%; height: 100%;}
.wp-block-getwid-image-box > .wp-block-getwid-image-box__image-container .wp-block-getwid-image-box__image-wrapper img{width: 100%; height: 100%; object-fit: cover;}
.wp-block-getwid-image-box > .wp-block-getwid-image-box__content{border: 1px solid var(--launaguet-color-grey-light); padding: 15px 10px;}
.wp-block-getwid-image-box > .wp-block-getwid-image-box__content p{color: var(--launaguet-color-grey);}
@media(min-width: 782px){
	.wp-block-getwid-image-box > .wp-block-getwid-image-box__image-container{height: 200px}
}
@media(min-width: 992px){
	.wp-block-getwid-image-box > .wp-block-getwid-image-box__image-container{height: 250px}
}
@media(min-width: 1280px){
	.wp-block-getwid-image-box > .wp-block-getwid-image-box__image-container{height: 350px}
}

/**
*	Top bar
**/
#top-bar{padding: 0; border: 0; top: 0; left: 0; width: 100%; position: absolute; z-index: 99;}
#top-bar .wp-block-social-links{gap: 0; font-size: 2rem; padding: 5px 0;}
#top-bar .wp-block-social-links > .wp-social-link{}
#top-bar .wp-block-social-links > .wp-social-link > a{
    margin: 0 10px;
    text-align: center;
    position: relative;
    background: none;
    display: inline-block;
    line-height: 30px;
    transition: background 200ms;
    -webkit-transition: background 200ms;
}
#top-bar .wp-block-social-links > .wp-social-link > a:before {
    content: '';
    z-index: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--launaguet-color-yellow);
    transform: skewX(-33deg);
    -webkit-transform: skewX(-33deg);
    transition: all 400ms;
    -webkit-transition: all 400ms;
}
#top-bar .wp-block-social-links > .wp-social-link > a:hover:before {
    opacity: 1;
    right: -10px;
    left: -10px;
}
#top-bar .wp-block-social-links > .wp-social-link > a svg{
    font-size: 90%;
    color: var(--launaguet-color-white);
    opacity: 0.5;
	position: relative;
	vertical-align: middle;
	transition: all 400ms;
}
#top-bar .wp-block-social-links > .wp-social-link > a:hover svg{color: var(--launaguet-color-black); opacity: 1;}

/**
*	Navbar
**/
header{background: rgba(30, 28, 26, 0.2); transition: 400ms all; -webkit-transition: 400ms all; z-index: 100; position: absolute; top: 40px; left: 0; width: 100%; height: 80px; padding: 0}
header.reduce{
	position: fixed;
    top: 0px;
    background: rgba(30, 28, 26, 0.9);
}

header #navbar .navbar-brand{height: 100px; flex-basis: 165px; padding-right: 25px; position: relative; margin-top: -20px; transition: 400ms all; -webkit-transition: 400ms all;}
header.reduce #navbar .navbar-brand{height: 80px; margin-top: 5px;}
header #navbar .navbar-brand:before{content: '';
    transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    background: var(--launaguet-color-yellow);
    position: absolute;
    right: 33px;
    top: -32px;
    bottom: -11px;
    left: -1000%;
    z-index: -2;
	margin-top: 2px;
    transition: 400ms all;
    -webkit-transition: 400ms all;
}
header #navbar nav{width: 100%; left: 0; background: var(--launaguet-color-black);}
header #navbar nav a{font-family: 'Oswald', sans-serif; font-weight: 500; color: var(--launaguet-color-white); font-size: 1.6rem;}
header #navbar nav ul > li{text-align: center;}
header #navbar nav ul > li a{transition: 400ms all; -webkit-transition: 400ms all;}
header #navbar nav ul > li:after{content: ''; width: 0; height: 2px; bottom: 2px; left: 0; background: var(--launaguet-color-yellow); position: absolute; transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out;}
header #navbar nav ul > li:last-child{border: 0;}
header #navbar nav li.active > a, header #navbar nav li:hover > a{color: var(--launaguet-color-yellow);}

header #navbar .nav-toggle{background: var(--launaguet-color-yellow); color: var(--launaguet-color-white);}
header #navbar .nav-toggle > span{background: var(--launaguet-color-white);}

@media(min-width: 782px){
	header #navbar{align-items: unset;}
	header #navbar nav{background: transparent;}
	header #navbar nav a{font-size: 1.4rem;}
	header #navbar nav ul > li{line-height: 80px; padding: 0 8px;}
	header #navbar nav ul > li:hover:after, header #navbar nav ul > li.active:after{ width: 100%;}
}
@media(min-width: 992px){
	header #navbar .navbar-brand{flex-basis: 200px;padding-right: 65px; height: 125px;margin-top: -30px; }
	header #navbar nav ul > li{padding: 0 15px;}
	header #navbar nav a{font-size: 1.6rem;}
}

/**
*	Header
**/
#header{height: auto; min-height: 450px;}
.home #header{height: auto;}

#header > article{padding-top: 125px; min-height: 450px;}
#header > article .header-overlay{background: rgba(30,28,26,0.5);}

/**
*	Home
**/
.president .wp-block-image{}
.president .wp-block-image figure{margin-top: 0; border: 1px solid var(--launaguet-color-yellow);}

.home .news-container{margin-top: 50px;}

.inscription-bloc{margin-top: 50px; padding: 25px; margin-left: auto; margin-right: auto;}
.inscription-bloc > .wp-block-cover__inner-container{border: 1px solid var(--launaguet-color-yellow); padding: 25px;}

@media(min-width: 782px){
	.inscription-bloc{padding: 50px; max-width: 80%;}
}

/**
*	Blog
**/
.blog main, .archive main{display: flex; flex-direction: row; gap: 25px; flex-wrap: wrap;}
.blog main .article-container, .archive main .article-container{flex-basis: 100%; flex-grow: 1;}
.blog main aside, .archive main aside{flex-basis: 100%; flex-grow: 1;}
.blog main aside > div, .archive main aside > div{background: var(--launaguet-color-black); color: var(--launaguet-color-white); margin-bottom: 20px;}
.blog main aside > div h3, .archive main aside > div h3{text-transform: uppercase; position: relative; background: var(--launaguet-color-black); font-weight: 400; margin-bottom: 20px; padding-right: 10px; display: flex; width: auto; gap: 20px; align-items: center;}
.blog main aside > div h3:after, .archive main aside > div h3:after{content:''; flex-basis: 100%; height: 1px; display: block; vertical-align: middle; background: var(--launaguet-color-yellow);}
.blog main aside > div ul, .archive main aside > div ul{list-style: none; padding-left: 0;}
.blog main aside > div ul > li, .archive main aside > div ul > li{margin-bottom: 10px; text-transform: uppercase; font-size: 1.4rem; color: var(--launaguet-color-grey);}
.blog main aside > div a:hover, .archive main aside > div a:hover{color: var(--launaguet-color-yellow);}

#article-grid{display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap;}
#article-grid > article.post-item{flex-basis: 100%; flex-grow: 0; margin-bottom: 25px; background: #f2f2f2;}
#article-grid > article .post-thumbnail{height: unset;}

.article-pagination > .page-numbers{background: var(--launaguet-color-yellow); color: var(--launaguet-color-black);}

@media(min-width: 782px){
	.blog main, .archive main{flex-wrap: nowrap;}
	.blog main .article-container, .archive main .article-container{flex-basis: 75%;}
	.blog main aside, .archive main aside{flex-basis: 25%; flex-grow: 0;}
}
@media(min-width: 992px){
	#article-grid > article.post-item{flex-basis: calc(50% - 10px);}
}

/**
*	Contact
**/
#osm-map{height: 450px;}
.leaflet-popup-content{color: var(--launaguet-color-black);}
.leaflet-popup-content h4{color: var(--launaguet-color-black);  margin-bottom: 10px;}
.leaflet-popup-content a{color: var(--launaguet-color-black); display: block;}
.leaflet-popup-content a.btn{margin-top: 10px;}
.page-id-23 footer{margin-top: 0;}
.page-id-23 #primary{padding-bottom: 0;}

/**
*	Footer
**/
footer{position: relative; padding-bottom: 0;}
footer:before{content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-image: url('./assets/images/background-of-a-rugby.jpg'); background-size: cover; background-position: center top;}
footer:after{content: ''; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: rgba(30, 28, 26, 0.9);}
footer > *{position: relative; z-index:9}
footer #footer-menu{background: var(--launaguet-color-black); color: var(--launaguet-color-grey);}

footer .footer-widgets{display: flex; align-items: center; flex-direction: column; gap: 10px;}
footer .footer-widgets > .widget_block{flex-basis: 100%; flex-grow: 1;}
footer .footer-widgets .wp-block-media-text,
footer .footer-widgets .wp-block-columns{margin-bottom: 0;}

footer #footer-menu .small{display: flex; flex-direction: column-reverse; gap: 15px; align-items: center;}
@media(min-width: 782px){
	footer #footer-menu .small{flex-direction: row; justify-content: space-between;}
}