/*
Theme Name: Daisuki Child
Description: Personnalisations durables du site Daisuki pour Hello Elementor.
Author: Daisuki
Template: hello-elementor
Version: 1.2.5
Text Domain: daisuki-child
*/

/*
 * Polices officielles Daisuki, auto-hebergees dans le theme enfant.
 * Les noms de famille correspondent exactement aux metadonnees des fichiers.
 */
@font-face {
	font-family: "Daisuki";
	src: url("assets/fonts/Daisuki-Regular.otf") format("opentype");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: "Baloo 2";
	src: url("assets/fonts/Baloo2-Regular.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
}

/*
 * Graisse 500 : sans ce fichier, les textes regles en « Medium » (« Ca veut
 * dire quoi ? », titres du carrousel) s affichaient en Regular. La police
 * variable declaree par Elementor ne porte pas de plage de graisses et ne
 * sert que la graisse 400.
 */
@font-face {
	font-family: "Baloo 2";
	src: url("assets/fonts/Baloo2-Medium.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 500;
}

@font-face {
	font-family: "Baloo 2";
	src: url("assets/fonts/Baloo2-SemiBold.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 600;
}

/*
 * Graisses 700 et 800 (« Ca veut dire quoi ? ») : pas de fichier statique,
 * la police variable du theme fournit ces graisses.
 */
@font-face {
	font-family: "Baloo 2";
	src: url("assets/fonts/Baloo2-VariableFont_wght.ttf") format("truetype");
	font-display: swap;
	font-style: normal;
	font-weight: 700 800;
}

@font-face {
	font-family: "Myriad Pro";
	src: url("assets/fonts/MyriadPro-Regular.otf") format("opentype");
	font-display: swap;
	font-style: normal;
	font-weight: 400;
}

.font-daisuki {
	font-family: "Daisuki", sans-serif !important;
}

/*
 * La classe est posee sur le widget, pas sur le titre qu il contient : la
 * typographie H1 du kit (Baloo 2) s appliquait au titre et masquait la police
 * Daisuki (« Les YAKISOBA sont arrivés ! », « Les nouilles comme au Japon »).
 */
.font-daisuki :is(h1, h2, h3, h4, h5, h6) {
	font-family: "Daisuki", sans-serif !important;
}

.font-baloo {
	font-family: "Baloo 2", sans-serif !important;
}

.font-myriad {
	font-family: "Myriad Pro", Arial, sans-serif !important;
}

.daisuki-nested-hero {
	width: 100%;
}

.daisuki-nested-hero .e-n-carousel,
.daisuki-nested-hero .swiper,
.daisuki-nested-hero .swiper-slide {
	width: 100%;
}

.daisuki-nested-hero .elementor-swiper-button svg {
	display: none;
}

.daisuki-nested-hero .elementor-swiper-button::before {
	display: block;
	width: 40px;
	height: 40px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
}

.daisuki-nested-hero .elementor-swiper-button-prev::before {
	background-image: url("/wp-content/uploads/2024/03/Header_Fleche-gauche.svg");
}

.daisuki-nested-hero .elementor-swiper-button-next::before {
	background-image: url("/wp-content/uploads/2024/03/Header_Fleche-droite.svg");
}

/*
 * Fleches du carrousel : centrees verticalement sur la hauteur du widget.
 *
 * La valeur etait a 20 %, ce qui les placait 270 px au-dessus du centre sur un
 * carrousel de 900 px de haut. Le `transform: translateY(-50%)` qui recentre la
 * fleche sur son propre axe vient de e-swiper.min.css : on ne redeclare que le
 * `top`, sans quoi il faudrait le reproduire ici.
 */
.daisuki-nested-hero--desktop .elementor-swiper-button {
	top: 50% !important;
}

/*
 * Ancres du menu : les sections portant la classe `menu-anchor` sont ciblees
 * par les liens du menu (#daisuki, #nos-delicieuses-nouilles…). Ce faux bloc
 * remonte le point d arrivee de 200 px pour que l en-tete fixe ne masque pas
 * le haut de la section.
 *
 * La regle etait auparavant dans le CSS personnalise du titre « Daisuki c est
 * quoi ? », d ou elle s appliquait a toute la page ; elle vit ici depuis que
 * les titres de section n ont plus de CSS personnalise.
 */
.menu-anchor::before {
	display: block;
	content: " ";
	margin-top: -200px;
	height: 200px;
	visibility: hidden;
	pointer-events: none;
}