/*
Theme Name: Chatbot IA
Theme URI: https://chatbot-ia.org
Author: Apolline Rossignol & Flo Team
Author URI: https://chatbot-ia.org
Description: Exact clone theme for Chatbot IA - Le comparateur 2026 des solutions de chatbot et d'IA conversationnelle pour TPE et PME.
Version: 1.0.0
Text Domain: chatbot-ia
Requires at least: 6.0
Requires PHP: 7.4
*/

/* Mobile Drawer Off-Canvas Styles */
#mobile-drawer {
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

#mobile-drawer.is-open {
	transform: translateX(0);
}

@media (min-width: 768px) {
	#mobile-drawer,
	#mobile-overlay {
		display: none !important;
	}
}

/* Ensure entrance animations are visible */
.entree-scene {
	opacity: 1 !important;
	transform: none !important;
}

/* ==========================================================================
   Elementor Pro / Shortcode Form Styling to Match Lovable Theater Aesthetic
   ========================================================================== */
.chatbot-ia-contact-form-wrapper .elementor-form-fields-wrapper {
	gap: 1.5rem !important;
}

.chatbot-ia-contact-form-wrapper .elementor-field-group {
	margin-bottom: 0 !important;
}

.chatbot-ia-contact-form-wrapper label,
.chatbot-ia-contact-form-wrapper .elementor-field-label {
	font-family: "Syne Mono", monospace !important;
	font-size: 0.875rem !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: #4A2E39 !important;
	margin-bottom: 0.5rem !important;
	display: block !important;
}

.chatbot-ia-contact-form-wrapper input:not([type="submit"]):not([type="button"]),
.chatbot-ia-contact-form-wrapper textarea,
.chatbot-ia-contact-form-wrapper select,
.chatbot-ia-contact-form-wrapper .elementor-field-textual {
	background-color: #F8F3EA !important;
	border: 1px solid rgba(74, 46, 57, 0.3) !important;
	color: #4A2E39 !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	padding: 0.75rem 1rem !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease !important;
}

.chatbot-ia-contact-form-wrapper input:not([type="submit"]):not([type="button"]):focus,
.chatbot-ia-contact-form-wrapper textarea:focus,
.chatbot-ia-contact-form-wrapper select:focus,
.chatbot-ia-contact-form-wrapper .elementor-field-textual:focus {
	border-color: #C9285E !important;
	outline: none !important;
}

.chatbot-ia-contact-form-wrapper button[type="submit"],
.chatbot-ia-contact-form-wrapper .elementor-button {
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
	background-color: #C9285E !important;
	color: #EFE6D5 !important;
	font-family: "Cabin", sans-serif !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	min-height: 3rem !important;
	padding: 0.75rem 1.75rem !important;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	transition: opacity 0.2s ease !important;
}

.chatbot-ia-contact-form-wrapper button[type="submit"]:hover,
.chatbot-ia-contact-form-wrapper .elementor-button:hover {
	opacity: 0.92 !important;
}

/* ==========================================================================
   WordPress Primary Navigation & Dropdown Menu Styling
   ========================================================================== */
nav[aria-label="Navigation principale"] ul.menu,
nav[aria-label="Navigation principale"] > ul {
	display: flex !important;
	align-items: center !important;
	gap: 2rem !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

nav[aria-label="Navigation principale"] li {
	position: relative !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

nav[aria-label="Navigation principale"] li > a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.375rem !important;
	min-height: 3rem !important;
	font-family: "Cabin", sans-serif !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	color: #4A2E39 !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

nav[aria-label="Navigation principale"] li > a:hover,
nav[aria-label="Navigation principale"] li.current-menu-item > a,
nav[aria-label="Navigation principale"] li.current_page_item > a {
	color: #C9285E !important;
}

/* Dropdown Sub-Menu */
nav[aria-label="Navigation principale"] ul.sub-menu {
	display: none !important;
	position: absolute !important;
	left: 0 !important;
	top: 100% !important;
	min-width: 240px !important;
	background-color: #F8F3EA !important;
	border: 1px solid rgba(74, 46, 57, 0.2) !important;
	padding: 0.5rem 0 !important;
	margin: 0.25rem 0 0 0 !important;
	list-style: none !important;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
	z-index: 100 !important;
	border-radius: 2px !important;
}

nav[aria-label="Navigation principale"] li.menu-item-has-children:hover > ul.sub-menu,
nav[aria-label="Navigation principale"] li.menu-item-has-children:focus-within > ul.sub-menu,
nav[aria-label="Navigation principale"] li.menu-item-has-children.is-open > ul.sub-menu {
	display: block !important;
	animation: fadeInMenu 0.2s ease forwards;
}

nav[aria-label="Navigation principale"] ul.sub-menu li {
	display: block !important;
	width: 100% !important;
}

nav[aria-label="Navigation principale"] ul.sub-menu li a {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	padding: 0.5rem 1rem !important;
	font-family: "Cabin", sans-serif !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: #4A2E39 !important;
	min-height: auto !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

nav[aria-label="Navigation principale"] ul.sub-menu li a:hover,
nav[aria-label="Navigation principale"] ul.sub-menu li.current-menu-item > a {
	color: #C9285E !important;
	background-color: #EFE6D5 !important;
}

@keyframes fadeInMenu {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}