/*
Theme Name: LPPDA 2023 (Twenty Twenty-Three Child)
Theme URI: https://diviextended.com/
Author: Camille Vitré - Koyali Web & Design
Author URI: https://koya.li
Template: twentytwentythree
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
/!\ Use theme.json as much as possible! /!\
>> https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
>> https://fullsiteediting.com/lessons/creating-theme-json/
>> https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/

"Instead of the proliferation of theme support flags or alternative methods,
the theme.json files provides a canonical way to define the settings of the block editor. These settings includes things like:
- What customization options should be made available or hidden from the user. What are the default colors,
- font sizes… available to the user.
- Defines the default layout of the editor (widths and available alignments)."
*/

/*
Basic values of twenty twenty three:
>> https: //github.com/WordPress/twentytwentythree/blob/trunk/DESIGN-SPEC.md
*/

/* GLOBAL */

.wp-site-blocks {
	overflow-x: hidden;
}

/* NAVIGATION */

/* Structure à observer sur Wordpress:
   Groupe (.lppda-main-header, les blocs intérieurs utilisent la largeur du contenu, contenu et large 100vw)
      Rangée (.lppda-nav, justification centrée, ne pas autoriser le passage sur pls lignes, alignement aucun)
         Logo du site (.lppda-logo)
         Navigation
            Liens personnalisés...
            Espacement
            Liens personnalisés...

            >> Le block Espacement sert à séparer le menu en plusieurs ul tout en restant dans le même élément de navigation.
*/

header.wp-block-template-part {
	margin-bottom: 180px;
	transition: margin 0.4s ease-out;
}

header.wp-block-template-part > div {
}

.lppda-main-header {
	position: fixed;
	width: 100vw;
	z-index: 8888;
	padding-top: 32px !important;
	padding-bottom: 32px !important;
	transition: padding 0.4s ease-out;
}

header.scrolled .lppda-main-header {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.lppda-nav {
	position: relative;
}

.lppda-logo {
	position: absolute;
	width: 100px;
	height: 120px;
	left: calc(50% - 50px);
	top: -20px;
	z-index: 9999;
	transition: all 0.4s ease-out;
}

header.scrolled .lppda-logo {
	width: 48px;
	height: 58px;
	left: calc(50% - 24px);
	top: -5px;
}

/* Quand on n'est pas en mode menu mobile */
@media screen and (min-width: 800px) {
	div.wp-block-navigation__responsive-close {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
	}

	header nav.wp-block-navigation ul {
		width: 50%;
	}

	nav.wp-block-navigation ul:last-of-type {
		justify-content: right;
	}
}

/* Quand ça devient short pour le logo au centre */
@media screen and (min-width: 600px) and (max-width: 799px) {
	.lppda-main-header {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.lppda-logo,
	header.scrolled .lppda-logo {
		position: static;
		flex-shrink: 0;
	}

	.wp-block-navigation__responsive-container
		.wp-block-navigation__responsive-container-content {
		flex-direction: column !important;
		align-items: flex-start !important;
		row-gap: 12px;
	}

	header.scrolled
		.wp-block-navigation__responsive-container
		.wp-block-navigation__responsive-container-content {
		row-gap: 0;
	}

	nav.wp-block-navigation .wp-block-spacer {
		display: none;
	}
}

/* Quand on est en mode menu mobile */
@media screen and (max-width: 599px) {
	.lppda-logo {
		top: -5px;
	}

	.wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
	}

	nav.wp-block-navigation .wp-block-spacer {
		display: none;
	}
}

/* Espacements */
.entry-content,
.wp-site-blocks > * + *,
body .is-layout-constrained > * + * {
	margin-block-start: 0;
}

.wp-site-blocks {
	padding: 0;
}

/* Menu mobile */
.wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
	z-index: 8888;
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open
	.wp-block-navigation__submenu-container {
	padding: 0 !important;
}

.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 120px !important;
}

.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container-content ul,
.wp-block-navigation__responsive-container-content li {
	align-items: flex-start !important;
}

.is-menu-open
	.wp-block-navigation__responsive-container-content
	li
	li
	a::before {
	content: '‣';
	margin-right: 8px;
}

/* BLOG */

/* Auto contrast */
.vignettes .vignette {
	background-color: #f9f9f9;
}

.vignettes .vignette img {
	mix-blend-mode: multiply;
}

/* Survol */

.vignettes .vignette .wp-block-cover__background,
.vignettes .vignette .wp-block-cover__inner-container,
.alexgrid figure > a .link-cover {
	transform: scale(0) rotate(15deg);
	transition: transform 400ms ease-out;
}

.vignettes .vignette:hover .wp-block-cover__background,
.vignettes .vignette:hover .wp-block-cover__inner-container,
.alexgrid figure > a:hover .link-cover {
	transform: scale(1) rotate(0);
}

/* Couleurs alternées */

.alexgrid figure > a .link-cover {
	/* Default */
	background-color: var(--wp--preset--color--cristaldeglace);
}

.vignettes
	> div
	> ul
	> li:nth-child(4n + 2)
	.vignette
	.wp-block-cover__background,
.alexgrid figure:nth-child(4n + 2) > a .link-cover {
	background-color: var(--wp--preset--color--rosepeau) !important;
}

.vignettes
	> div
	> ul
	> li:nth-child(4n + 3)
	.vignette
	.wp-block-cover__background,
.alexgrid figure:nth-child(4n + 3) > a .link-cover {
	background-color: var(--wp--preset--color--mintpiscine) !important;
}

.vignettes
	> div
	> ul
	> li:nth-child(4n + 4)
	.vignette
	.wp-block-cover__background,
.alexgrid figure:nth-child(4n + 4) > a .link-cover {
	background-color: var(--wp--preset--color--nuage) !important;
}

/* ALEX GRID GALLERY */

.alexgrid {
	display: grid !important;
	background-color: rgba(0, 0, 0, 0.03);
}

.alexgrid > figure {
	width: 100% !important;
	padding: 0 !important;
	background-color: #f9f9f9;
}

/* Auto contrast */

.alexgrid > figure:nth-child(2n + 2) {
	background-color: #f4f4f4;
}

.alexgrid > figure img {
	mix-blend-mode: multiply;
}

/* hover elements (js genereated) */

.alexgrid figure > a {
	position: relative;
}

.alexgrid .link-cover {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	opacity: 0.9;
	padding: 1em;
}

.alexgrid .link-cover h5 {
	margin: auto;
}

/* Options */

.alexgrid .grande {
	grid-column: span 2;
	grid-row: span 2;
}

.alexgrid .petite {
	grid-column: span 1 !important;
	grid-row: span 1 !important;
}

@media screen and (min-width: 1080px) {
	.alexgrid {
		grid-template-columns: repeat(6, 1fr);
	}

	.alexgrid > figure:nth-child(12n + 4),
	.alexgrid > figure:nth-child(12n + 6) {
		grid-column: span 2;
		grid-row: span 2;
	}
}

@media screen and (max-width: 1079px) {
	.alexgrid {
		grid-template-columns: repeat(3, 1fr);
	}

	.alexgrid > figure:nth-child(12n + 5),
	.alexgrid > figure:nth-child(12n + 10) {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/* SIMPLE LIGHTBOX */

div#slb_viewer_wrap div.slb_viewer_layout div.slb_container {
	border-radius: 0;
	font-family: 'Raleway', sans-serif;
	font-weight: 200;
	margin-top: -16px;
}

.slb_data_content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

/* Titre ("Légende" dans la médiathèque) */
#slb_viewer_wrap .slb_theme_slb_default span.slb_data_title {
	font-family: 'Roboto', sans-serif;
	font-size: clamp(1.05rem, 1.05rem + ((1vw - 0.48rem) * 0.673), 1.4rem); /*h5*/
	margin: 16px 0 0;
	width: 100%;
}

/* Description ("Description" dans la médiathèque) */
#slb_viewer_wrap .slb_theme_slb_default div.slb_data_desc {
	font-size: var(--wp--preset--font-size--medium);
	width: 80%;
	margin: 0;
}

/* Numéro de l'image dans la galerie */
#slb_viewer_wrap .slb_theme_slb_default span.slb_group_status {
	font-family: 'Raleway', sans-serif;
	/* == P */
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	text-align: right;
	margin: 0;
	opacity: 0.8;
	width: calc(20% - 16px);
	order: 999;
}

/* FORMULAIRES */

form.wpcf7-form input,
form.wpcf7-form select,
form.wpcf7-form textarea {
	background-color: var(--wp--preset--color--rosepeau);
	border: none;
	padding: 12px 24px;
	border-radius: 2rem;
	font: inherit;
	margin-left: -0.5em;
	box-sizing: border-box;

	transition: background-color 0.4s ease-out;
}

form.wpcf7-form input:focus,
form.wpcf7-form select:focus,
form.wpcf7-form textarea:focus {
	background-color: var(--wp--preset--color--cristaldeglace);
	outline: none;
}

form.wpcf7-form textarea {
	padding: 2rem;
}

form.wpcf7-form input[type='submit'] {
	background-color: var(--wp--preset--color--darkmint);
	color: white;
	font-size: 16px;
	text-transform: uppercase;
}

form.wpcf7-form h5 {
	margin-bottom: 0;
}

form.wpcf7-form p {
	margin: 0.1em 0;
}

.nameinputs {
	display: flex;
	gap: 1em;
}

.nameinputs input {
	width: 100%;
}

/* Agrandir le titre dans la list des articles pour faire la taille de la cover */
.list-article .wp-block-cover__inner-container {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* Agrandir le lien et cacher son texte pour qu'il couvre la boite de la cover */
.list-article .wp-block-cover__inner-container a {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
	text-indent: -9000%;
}

/* Afficher les cover en carré */
.list-article .wp-block-cover {
	min-height: auto;
	aspect-ratio: 1;
}

/* fix stupid theme choice */
a {
	text-decoration-thickness: 1px;
}

.coller-menu {
	margin-top: -129px;
}

/* custom post css pour coller le contenu au menu */
.single-post header.wp-block-template-part {
	margin-bottom: 83px;
}

.single-post main {
	margin-top: 0px !important;
}

/* style pour les étiquettes en forme de pillule */
.taxonomy-post_tag a {
	display: inline-block;
	background-color: var(--wp--preset--color--darkmint);
	color: var(--wp--preset--color--blanc);
	padding: 2px 12px;
	border-radius: 64px;
	text-decoration: none;
	font-size: 12px;
}

.taxonomy-post_tag a:hover {
	background-color: var(--wp--preset--color--pechevibrante);
	color: var(--wp--preset--color--blanc);
}

strong {
	font-weight: 500 !important;
}