/*
 Theme Name:   Arboretum du Bassecq - Thème Enfant
 Theme URI:    https://arboretumdubassecq.fr/
 Description:  Theme enfant basé sur GeneratePress
 Author:       Bertrand Delanlssays
 Author URI:   https://www.bdelanls.fr
 Template:     generatepress
 Version:      1.0
*/


@media (max-width: 768px) {
/* CSS in here for mobile only */
}

@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
}

@media (min-width: 1025px) {
/* CSS in here for desktop only */
}


/***** HEADER *****/

.site-header .site-logo {
	position: absolute;
	top: 20px;
	z-index: 50;
}
@media (max-width: 768px) {
	.site-header .header-image { width: 160px; }
}


.header-title {	font-size: 78px; }
@media (min-width: 769px) and (max-width: 1024px) {
	.header-title {	font-size: 62px; }
}

@media (max-width: 768px) {
	.header-title {	font-size: 55px; }
}

/* menu */


@media (min-width: 1025px) {
	.menu-item-has-children .dropdown-menu-toggle { display: none; }
	.main-navigation .main-nav ul li.lien-arboretum a { padding-right: 20px; }
}

@media (max-width: 1024px) {
	.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle { float: initial; }
	.toggled .menu-item-has-children .dropdown-menu-toggle { padding: 0 0 0 10px; }
	.main-navigation.toggled .main-nav ul ul { border-bottom: none; }
	ul.sub-menu { margin: -10px 0 10px 0; }
}



@media (max-width: 1024px) {
	.main-navigation .menu-toggle {
		background-color: inherit !important;
	}
	.has-inline-mobile-toggle #site-navigation.toggled {
		background-color: inherit;
		margin: 2.5em 0;
	}
	.main-navigation.toggled .main-nav li { text-align: center; }
}


@media (min-width: 1025px) {
	.inside-header { position: relative; }
	.inside-navigation { position: initial; margin-top: 10px; }
	.main-navigation .main-nav ul li a { line-height: 50px; }
	.main-navigation li.nav-don {
		position: absolute;
		top: 0;
		right: 48px;
		background-color: var(--green);
		border-radius: 0 0 5px 5px;
		transition: all 0.2s;
	}
	.main-navigation li.nav-don:hover {
		background-color: #000;
	}
	
	.main-navigation .main-nav ul li.nav-don a {
		color: #FFF;
		line-height: 30px;
		padding: 0 10px;
	}
	.main-navigation .main-nav ul li.nav-don a:hover {
		color: #FFF;
	}
}

/***** MENTIONS *****/

.mentions #cmplz-document p { font-size: 16px; }
.mentions h2, .mentions #cmplz-document h2 {font-size: 28px; margin-bottom: 10px; padding-bottom: 0;}

/***** CARROUSEL *****/

.carrousel-arbres .splide__arrow {
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0);
	height: 3.5rem;
	opacity: 1;
}
.carrousel-arbres .splide__arrow:hover {
	background-color: rgba(255, 255, 255, 0);
}
.carrousel-arbres .splide__arrow svg {
	height: 2.5rem;
	width: 2.5rem;
	fill: var(--green-light);
	transition: all 0.2s;
}
.carrousel-arbres .splide__arrow:hover svg {
	fill: var(--green);
}
@media (max-width: 768px) {
	.carrousel-arbres .splide__arrow {
		width: 2.5rem;
		height: 2.5rem;
	}
	.carrousel-arbres .splide__arrow svg {
		height: 1.5rem;
		width: 1.5rem;
	}
}
.carrousel-arbres .splide__arrow--prev { left: -3em; }
.carrousel-arbres .splide__arrow--next { right: -3em; }

@media (min-width: 769px) and (max-width: 1024px) {
	.carrousel-arbres .splide__arrow--prev { left: -1.8em; }
	.carrousel-arbres .splide__arrow--next { right: -1.8em; }
}
@media (max-width: 768px) {
	.carrousel-arbres .splide__arrow--prev { left: -2em; }
	.carrousel-arbres .splide__arrow--next { right: -2em; }
}



/***** ARTICLE *****/

.single-post .wp-block-embed {
	margin-bottom: 20px;
}

.single-post .entry-content:not(:first-child) { margin-top: 1rem; }
.single-post figure.wp-block-image { margin-bottom: 1.5rem; }
.single-post .wp-block-image figcaption { font-style: italic; font-size:14px; }

/* navigation */

.nav-articles .page-numbers {
	background-color: inherit !important;
	font-weight: 800;
}
.nav-articles .page-numbers.current {
	color: var(--green);
}
.nav-articles a.page-numbers{
	border: none;
	color: #999;
}
.nav-articles a.page-numbers:hover {
	color: #000;
}


/***** FOOTER *****/

/* nav footer */
.nav-footer ul { 
	column-gap: 2rem;
	row-gap: 0.2rem; 
	justify-content: center;
}
.nav-footer li { color: #fff; }
.nav-footer li a:hover { text-decoration: underline; }

/***** ARBRES REMARQUABLES *****/

.pagination-arbre .page-numbers {
	border-radius: 30% 0;
}
.pagination-arbre a.page-numbers {
	border-color: var(--green-light);
}
.pagination-arbre .page-numbers.current {
	background-color: var(--green-light);
	color: #FFF;
}

/***** FICHE ARBRE *****/

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  visibility: hidden;
  will-change: max-height;
  display: flex;
  flex-direction: column;
  row-gap: 0.2rem;
  padding: 8px 0;
}
:where(.editor-styles-wrapper) .accordion-content { visibility: visible; max-height: inherit; }

.accordion-item.accordion-item-open > .accordion-content {
 	visibility: visible;
}

.accordion-toggle {
	border-bottom: 1px solid var(--green);
	padding: 8px 0;
}
.accordion-toggle:hover {
	cursor: pointer;
}
.accordion-toggle--title {
	font-size: 30px;
	font-style: inherit;
	color: var(--green);
	margin-bottom: 0;
}
.accordion .accordion-toggle--icon svg{
	width: 1.3rem;
	height: 1.3rem;
}
.accordion-item.accordion-item-open .accordion-toggle--icon {
	transform: rotate(180deg);
}


/***** CARROUSEL FICHE ARBRE *****/


/* fixe la hauteur du carrousel */
.arbo-splide .splide__slide {
  overflow: hidden;
  position: relative;
}

/* rend toutes les images homogènes */
.arbo-splide .splide__slide img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover; 
  display: block;
}

.carrousel-arbo .splide-pagination-count {
	position: absolute;
	left: 50%;
	background-color: rgba(0, 0, 0, 0.7);
	padding: 2px 10px;
	border-radius: 10px;	
	font-size: 14px;
	bottom: 10px;
	transform: translate(-50%, -50%);
	color: #FFF;
}

.arbo-splide .splide__arrow {
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.05);
	width: 3.5rem;
	height: 3.5rem;
	opacity: 1;
}
.arbo-splide .splide__arrow:hover {
	background-color: rgba(0, 0, 0, 0.2);
}
.arbo-splide .splide__arrow svg {
	height: 2.5rem;
	width: 2.5rem;
	fill: #FFF;
}

@media (max-width: 768px) {
	.arbo-splide .splide__arrow {
		width: 2.5rem;
		height: 2.5rem;
	}
	.arbo-splide .splide__arrow svg {
		height: 1.5rem;
		width: 1.5rem;
	}
}

/* Pagination */
.site-content .pagination-arbo .page-numbers {
	font-weight: 600;
	border: none;
	background-color: inherit;
}
.site-content .pagination-arbo .page-numbers:hover {
	color: var(--global-color-10);
}
.site-content .pagination-arbo .page-numbers.current {
	font-weight: 800; 
	color: var(--secondary);
}

.carrousel-arbo .splide__arrow { background-color: inherit; }
.carrousel-arbo .splide__arrow--prev {	left: 0; }
.carrousel-arbo .splide__arrow--next {	right: 0; }

.carrousel-arbo  .splide__track {
  transition: height 0.3s ease;
}