/*
Theme Name:   	SoulKitchen Child
Template:     	soulkitchen
Version:      	1.00
Text Domain:  	soulkitchenchild
*/

/* =========================================
   FONTS
   ========================================= */

@font-face {
	font-family: "Rachana";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("fonts/Rachana-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Rachana";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("fonts/Rachana-Bold.woff2") format("woff2");
}

@font-face {
	font-family: "Roller Coaster";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("fonts/Roller Coaster.woff2") format("woff2");
}

/* =========================================
   BUTTONS
   ========================================= */


.content-white .button:not(.button-outline), .content-white a.button:not(.button-outline), .editor-styles-wrapper .content-white .button:not(.button-outline), .editor-styles-wrapper .content-white a.button:not(.button-outline), .button.button-outline{
	padding-top: 0.7rem !important;
}

/* =========================================
   TYPOGRAPHIE
   ========================================= */

body,
input,
select,
textarea,
p,
li,
td,
th,
span,
a {
	font-family: "Rachana", serif;
}

h1,
h2,
h1 a,
h2 a {
	font-family: "Roller Coaster", cursive;
	text-transform: uppercase;
}

h3,
h4,
h5,
h6,
h3 a,
h4 a,
h5 a,
h6 a {
	font-family: "Roller Coaster", cursive;
	text-transform: capitalize;
}

h1, h2, h3, h4, h5, h6, .post-title-small, .dropcap, .content-box-wysiwyg.heading, .wp-block-cover-image-text, .wp-block-latest-posts li a, .widget_recent_entries li a, .menu-price.use-headline-font, .menu-price-title.use-headline-font, .quotetext.use-headline-font, .topbar-text-wrap.use-headline-font .topbar-text, .main-navigation.use-headline-font, .woocommerce .product-categories-list.use-headline-font h2.woocommerce-loop-category__title, .woocommerce .product-categories-list.use-headline-font .product-categories-list-all, .footer-sidebar-wrap.use-headline-font .widget-title, .widget-area.use-headline-font .widget-title, .subtitle-above.use-headline-font, .vertical-text.use-headline-font, .sidemenu-use-headline-font, .product-title-use-headline-font .wc-block-grid__product-title, .single-product-title-use-headline-font .product_title{
    font-family: "Roller Coaster", cursive;
}

/* =========================================
   MOMENTS FORTS — Content Boxes hover reveal
   ========================================= */

/* Désactive les animations AOS sur ce bloc */
.moments-forts .contentboxes-content-item[data-aos] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	transition: all 400ms ease-out !important;
}

/* Overlay via pseudo-élément sur le zoom-wrap */
.moments-forts .contentboxes-zoom-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
	z-index: 1;
}

.moments-forts .contentboxes-image-wrap-inner:hover .contentboxes-zoom-wrap::after {
	opacity: 1;
}

/* Le contenu passe au-dessus de l'overlay */
.moments-forts .contentboxes-content-wrap {
	position: relative;
	z-index: 2;
}

/* Le texte et le bouton sont cachés par défaut */
.moments-forts .contentboxes-text,
.moments-forts .contentboxes-button-wrap {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	margin-top: 0;
	margin-bottom: 0;
	transition: opacity 0.35s ease, max-height 0.35s ease, margin-top 0.35s ease;
}

/* Subtitle et title : transition de position vers le haut */
.moments-forts .contentboxes-subtitle,
.moments-forts .contentboxes-title {
	transform: translateY(12px);
	transition: transform 0.35s ease;
}

/* Au hover de l'inner wrap : révèle le texte et le bouton */
.moments-forts .contentboxes-image-wrap-inner:hover .contentboxes-text,
.moments-forts .contentboxes-image-wrap-inner:hover .contentboxes-button-wrap {
	opacity: 1;
	max-height: 300px;
	margin-top: 16px;
}

/* Subtitle et title remontent à leur position naturelle */
.moments-forts .contentboxes-image-wrap-inner:hover .contentboxes-subtitle,
.moments-forts .contentboxes-image-wrap-inner:hover .contentboxes-title {
	transform: translateY(0);
}

.contentboxes-content-item{
	max-width: 650px;
}