/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Child theme for Astra.
Author: Mindful by Naomi
Author URI: https://example.com/
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* -------------------------------------------------------------------------
   Fonts
   ------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@500;600;700&display=swap');

/* -------------------------------------------------------------------------
   Design system (calm, premium, minimalist)
   ------------------------------------------------------------------------- */

:root {
	/* Colors */
	--mbn-bg-primary: #c3c6b5;
	--mbn-bg-soft: #f6f5f2;
	--mbn-text-primary: #4a3f35;
	--mbn-text-secondary: #6a5f54;
	--color-text-primary: var(--mbn-text-primary);
	/* Alias used by "single-source" mobile header rules */
	--color-primary: var(--mbn-bg-primary);

	/* Typography */
	--mbn-font-body: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	--mbn-font-heading: "Playfair Display", Georgia, "Times New Roman", Times, serif;

	/* Spacing */
	--mbn-space-1: 0.5rem;
	--mbn-space-2: 0.75rem;
	--mbn-space-3: 1rem;
	--mbn-space-4: 1.5rem;
	--mbn-space-5: 2.25rem;
	--mbn-space-6: 3rem;
	--mbn-radius: 14px;
}

/* -------------------------------------------------------------------------
   MBN MOBILE MENU (DEFINITIVE) — DESKTOP MENU ONLY (Astra Child)

   Contract:
   - Mobile uses EXACT existing desktop menu markup:
     `#ast-desktop-header .main-header-bar-navigation`
   - Disable ALL Astra mobile header/off-canvas/mobile-menu systems (CSS hard off)
   - Modal island toggled by: `body.mbn-menu-open`
   - JS injects burger on mobile only; no cloning, no wp_nav_menu duplication
   ------------------------------------------------------------------------- */

@media (max-width: 921px) {
	/* 1️⃣ SUPPRESSION TOTALE DES MENUS MOBILES ASTRA (hard-off) */
	#ast-mobile-header,
	#ast-mobile-popup-wrapper,
	#ast-mobile-popup,
	#ast-off-canvas,
	.ast-builder-menu-mobile,
	.ast-builder-menu-mobile * ,
	.ast-mobile-popup-drawer,
	.ast-mobile-popup-content,
	.ast-header-account-wrap,
	.ast-woo-header-cart,
	.ast-edd-header-cart {
		display: none !important;
	}

	/* 2️⃣ MENU UNIQUE = DESKTOP MENU MARKUP */
	#ast-desktop-header {
		display: block !important;
	}

	/* 3️⃣ HEADER MOBILE — background toujours couleur principale (jamais transparent) */
	#masthead,
	#masthead.site-header,
	body .site-header {
		background-color: var(--color-primary) !important;
		background-image: none !important;
	}

	/* Header must be identical on ALL pages (mobile only): fixed + same structure/feel */
	#masthead.site-header {
		position: fixed !important;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 9999;
		border-bottom: 0 !important;
		box-shadow: none !important;
		transition: background-color 260ms ease, box-shadow 260ms ease, color 260ms ease;
	}

	/* Admin bar compatibility (mobile only) */
	body.admin-bar #masthead.site-header {
		top: 32px !important;
	}
	@media (max-width: 782px) {
		body.admin-bar #masthead.site-header {
			top: 46px !important;
		}
	}

	/* Astra often colors inner header bars; force a single background everywhere (mobile only) */
	#masthead.site-header .main-header-bar,
	#masthead.site-header .ast-primary-header-bar,
	#masthead.site-header .ast-main-header-bar-alignment {
		background-color: var(--color-primary) !important;
		background-image: none !important;
		border-bottom: 0 !important;
		box-shadow: none !important;
	}

	/* Force a single "home-equivalent" header text/logo treatment on ALL pages (mobile only) */
	#masthead.site-header .main-header-menu a,
	#masthead.site-header .site-title a,
	#masthead.site-header .site-description {
		color: var(--mbn-text-primary) !important;
	}
	#masthead.site-header .custom-logo-link img {
		filter: none !important;
	}

	/* Ensure we do NOT show Astra's native burger/menu systems (mobile only) */
	#ast-desktop-header .ast-button-wrap,
	#ast-desktop-header .main-header-menu-toggle {
		display: none !important;
	}

	/* Ensure content never slides under the fixed header (mobile only) */
	body .site-main {
		padding-top: clamp(24px, 6vw, 84px) !important;
	}

	/* 4️⃣ BOUTON BURGER (injecté par JS) — visible, dark brown */
	#ast-desktop-header .mbn-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 999px;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		color: var(--mbn-text-primary) !important; /* dark brown */
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	#ast-desktop-header .mbn-menu-toggle__icon {
		display: inline-flex;
		flex-direction: column;
		gap: 4px;
	}
	#ast-desktop-header .mbn-menu-toggle__icon span {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
	}

	/* Default mobile state: hide the desktop nav until modal opens */
	#ast-desktop-header .main-header-bar-navigation {
		display: none !important;
	}

	/* 5️⃣ MODAL MENU (ÎLOT) via body.mbn-menu-open */
	.mbn-menu-overlay {
		display: none;
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 0;
		pointer-events: auto;
	}

	body.mbn-menu-open .mbn-menu-overlay {
		display: block;
	}

	/* Full-screen container for positioning; panel is the nav */
	body.mbn-menu-open #ast-desktop-header .main-header-bar-navigation {
		display: block !important;
		position: fixed !important;
		inset: 0 !important;
		z-index: 999999 !important;
		padding: 18px !important;
		background: transparent !important;
		pointer-events: auto;
	}

	body.mbn-menu-open #ast-desktop-header nav.site-navigation {
		position: absolute;
		z-index: 1;
		pointer-events: auto;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.98);
		width: min(92vw, 420px);
		max-height: min(70vh, 560px);
		overflow: auto;

		background: var(--mbn-text-primary); /* dark brown */
		color: var(--mbn-bg-soft);
		border-radius: 18px;
		padding: 18px 14px 16px;
		box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);

		opacity: 0;
		transition: opacity 180ms ease, transform 180ms ease;
		will-change: opacity, transform;
	}

	/* Smooth open animation */
	body.mbn-menu-open #ast-desktop-header .main-header-bar-navigation nav.site-navigation {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	/* Scroll lock (JS sets body fixed positioning too) */
	body.mbn-scroll-lock {
		overflow: hidden;
	}

	/* Links: white, no tiles/background behind each link */
	body.mbn-menu-open #ast-desktop-header .main-header-menu,
	body.mbn-menu-open #ast-desktop-header .main-header-menu .sub-menu {
		background: transparent !important;
		border: 0 !important;
	}

	body.mbn-menu-open #ast-desktop-header .main-header-menu {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px;
		margin: 0;
		padding: 0;
	}

	body.mbn-menu-open #ast-desktop-header .main-header-menu > li > a,
	body.mbn-menu-open #ast-desktop-header .main-header-menu .menu-link {
		display: block;
		width: 100%;
		padding: 10px 8px;
		color: #ffffff !important;
		background: transparent !important;
		border-bottom: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		pointer-events: auto;
		transition: opacity 160ms ease, transform 160ms ease;
	}

	body.mbn-menu-open #ast-desktop-header .main-header-menu > li > a:hover,
	body.mbn-menu-open #ast-desktop-header .main-header-menu .menu-link:hover,
	body.mbn-menu-open #ast-desktop-header .main-header-menu > li > a:focus-visible,
	body.mbn-menu-open #ast-desktop-header .main-header-menu .menu-link:focus-visible {
		opacity: 0.86;
		transform: translateY(-1px);
	}
}

/* (Reset) Mobile menu custom modal/hamburger styles removed.
   We rely on Astra native mobile header + off-canvas behavior. */

/* -------------------------------------------------------------------------
   Global base
   ------------------------------------------------------------------------- */

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	background: var(--mbn-bg-primary);
	color: var(--mbn-text-primary);
	font-family: var(--mbn-font-body);
	line-height: 1.7;
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: rgba(74, 63, 53, 0.18);
}

/* Keep Astra layout intact; only add breathable padding. */
.site-content .ast-container {
	padding-left: clamp(16px, 4vw, 56px);
	padding-right: clamp(16px, 4vw, 56px);
}

/* Typography hierarchy */
h1, h2, h3, h4 {
	font-family: var(--mbn-font-heading);
	color: var(--mbn-text-primary);
	letter-spacing: -0.01em;
	line-height: 1.18;
}

h1 { font-size: clamp(2rem, 2.8vw, 3.1rem); margin: 0 0 var(--mbn-space-4); }
h2 { font-size: clamp(1.5rem, 2vw, 2.1rem); margin: var(--mbn-space-6) 0 var(--mbn-space-3); }
h3 { font-size: 1.25rem; margin: var(--mbn-space-5) 0 var(--mbn-space-2); }
h4 { font-size: 1.1rem; margin: var(--mbn-space-4) 0 var(--mbn-space-2); }

p {
	margin: 0 0 var(--mbn-space-3);
	color: var(--mbn-text-secondary);
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 var(--mbn-space-4);
	padding-left: 1.25rem;
	color: var(--mbn-text-secondary);
}

/* Links: subtle, no underline by default */
a {
	color: var(--mbn-text-primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

a:hover,
a:focus-visible {
	color: var(--mbn-text-primary);
	border-bottom-color: rgba(74, 63, 53, 0.35);
}

/* Buttons: minimal, soft borders */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
.wp-block-button__link,
.ast-button,
.ast-custom-button {
	background: var(--mbn-bg-soft);
	color: var(--mbn-text-primary);
	border: 1px solid rgba(74, 63, 53, 0.25);
	border-radius: 999px;
	padding: 0.75rem 1.25rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	box-shadow: none;
	transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, opacity 160ms ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.button:hover,
.wp-block-button__link:hover,
.ast-button:hover,
.ast-custom-button:hover {
	background: rgba(246, 245, 242, 0.88);
	border-color: rgba(74, 63, 53, 0.35);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
.button:active,
.wp-block-button__link:active,
.ast-button:active,
.ast-custom-button:active {
	transform: translateY(1px);
}

/* -------------------------------------------------------------------------
   Home page
   ------------------------------------------------------------------------- */

body.home .site-main {
	padding-top: clamp(24px, 6vw, 84px);
	padding-bottom: clamp(24px, 6vw, 84px);
}

body.home .entry-header,
body.home .entry-title {
	text-align: center;
}

body.home .entry-content {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

body.home .entry-content > * {
	max-width: 64ch;
	margin-left: auto;
	margin-right: auto;
}

body.home .entry-content > .wp-block-query {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* =========================================================================
   HOME PAGE SECTIONS - Premium Editorial Layout
   ========================================================================= */

/* -------------------------------------------------------------------------
   1️⃣ HERO SECTION - Full viewport height with centered text
   Target: .front-page .wp-block-cover
   ------------------------------------------------------------------------- */

.front-page .wp-block-cover {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	margin: 0;
	border-radius: 0;
}

/* Dark filter applied ONLY to background image, NOT to content */
.front-page .wp-block-cover .wp-block-cover__image-background {
	filter: none; /* no dark filter */
}

/* Gutenberg native overlay - kept subtle */
.front-page .wp-block-cover .wp-block-cover__background {
	opacity: 0; /* REMOVED - no dark overlay */
}

.front-page .wp-block-cover .wp-block-cover__inner-container,
.front-page .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	text-align: center;
	color: var(--mbn-bg-soft);
	max-width: 58ch;
	padding: var(--mbn-space-5);
}

.front-page .wp-block-cover h1,
.front-page .wp-block-cover h2 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--mbn-bg-soft);
	margin: 0 0 var(--mbn-space-4);
}

.front-page .wp-block-cover p {
	font-size: clamp(1rem, 1.5vw, 1.3rem);
	line-height: 1.6;
	color: rgba(246, 245, 242, 0.95);
	margin: 0;
	font-weight: 400;
}

/* -------------------------------------------------------------------------
   2️⃣ INTRO SECTION - Title + text + button
   Target: .front-page .home-intro
   ------------------------------------------------------------------------- */

.front-page .home-intro {
	max-width: 720px;
	margin: clamp(60px, 10vw, 120px) auto;
	padding: 0 var(--mbn-space-4);
	text-align: center;
}

.front-page .home-intro h2 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--mbn-text-primary);
	margin: 0 0 var(--mbn-space-4);
}

.front-page .home-intro p {
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	line-height: 1.75;
	color: var(--mbn-text-secondary);
	margin: 0 0 var(--mbn-space-5);
}

.front-page .home-intro .wp-block-button,
.front-page .home-intro .wp-block-buttons {
	margin-top: var(--mbn-space-5);
}

.front-page .home-intro .wp-block-button__link {
	background: transparent;
	color: var(--mbn-text-primary);
	border: 1px solid var(--mbn-text-primary);
	border-radius: 999px;
	padding: 0.85rem 1.75rem;
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0.01em;
	transition: all 180ms ease;
	text-decoration: none;
}

.front-page .home-intro .wp-block-button__link:hover {
	background: rgba(74, 63, 53, 0.08);
	border-color: var(--mbn-text-primary);
}

/* -------------------------------------------------------------------------
   3️⃣ RECIPES CAROUSEL SECTION
   Target: .front-page .wp-block-query
   ------------------------------------------------------------------------- */

.front-page .wp-block-query {
	margin: clamp(60px, 10vw, 100px) 0;
	padding: 0;
}

.front-page .wp-block-query > h2 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	text-align: center;
	color: var(--mbn-text-primary);
	margin: 0 0 var(--mbn-space-5);
}

/* -------------------------------------------------------------------------
   Home page: Recipe Query Loop carousel (Gutenberg)
   - Targets only Home page.
   - Uses existing Gutenberg markup (.wp-block-query, .wp-block-post-template).
   ------------------------------------------------------------------------- */

.front-page .wp-block-query .wp-block-post-template {
	--mbn-carousel-gap: clamp(16px, 2.2vw, 28px);
	display: flex;
	flex-wrap: nowrap;
	gap: var(--mbn-carousel-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 1px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	list-style: none;
	padding: 0 0 var(--mbn-space-4);
	margin: var(--mbn-space-5) 0 0;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge legacy */
}

.front-page .wp-block-query .wp-block-post-template::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

.front-page .wp-block-query .wp-block-post-template > li {
	flex: 0 0 calc((100% - (3 * var(--mbn-carousel-gap))) / 4);
	scroll-snap-align: start;
	scroll-snap-stop: always;
	margin: 0;
	padding: 0;
}

@media (max-width: 768px) {
	.front-page .wp-block-query .wp-block-post-template > li {
		flex-basis: calc((100% - (1 * var(--mbn-carousel-gap))) / 2);
	}
}

.front-page .wp-block-query .wp-block-post-template .wp-block-post {
	margin: 0;
	display: flex;
	flex-direction: column;
	background: transparent;
}

.front-page .wp-block-query .wp-block-post-template .wp-block-post-featured-image {
	margin: 0 0 var(--mbn-space-2);
}

.front-page .wp-block-query .wp-block-post-template .wp-block-post-featured-image a {
	display: block;
}

.front-page .wp-block-query .wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	display: block;
	border-radius: 18px;
}

.front-page .wp-block-query .wp-block-post-template .wp-block-post-title {
	font-family: var(--mbn-font-heading);
	font-size: 1.15rem;
	line-height: 1.22;
	margin: var(--mbn-space-3) 0 0;
	text-align: center;
}

.front-page .wp-block-query .wp-block-post-template .wp-block-post-title a {
	border-bottom-color: transparent;
	text-decoration: none;
	color: var(--color-text-primary);
}

.front-page .wp-block-query .wp-block-post-template .wp-block-post-title a:hover {
	opacity: 0.7;
}

@media (max-width: 768px) {
	.front-page .wp-block-query .wp-block-post-template .wp-block-post-featured-image img {
		height: 220px;
	}
}

/* -------------------------------------------------------------------------
   Home page: Latest recipes (Query Loop) — Premium editorial GRID override
   - CSS only, no block changes
   - Removes fixed px heights in favor of aspect-ratio + object-fit: cover
   - Desktop: 3 cols • Tablet: 2 cols • Mobile: 1 col
   ------------------------------------------------------------------------- */

.front-page .wp-block-query .wp-block-post-template {
	--mbn-recipe-col-gap: clamp(16px, 2.2vw, 28px);
	--mbn-recipe-row-gap: clamp(28px, 3.6vw, 56px);
	--mbn-recipe-card-radius: 18px;
	--mbn-recipe-card-aspect: 4 / 5; /* square-ish / slightly vertical */

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--mbn-recipe-col-gap);
	row-gap: var(--mbn-recipe-row-gap);
	overflow: visible;
	padding: 0;
}

@media (max-width: 1024px) {
	.front-page .wp-block-query .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.front-page .wp-block-query .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

.front-page .wp-block-query .wp-block-post-template > li {
	width: 100%;
}

.front-page .wp-block-query .wp-block-post-template .wp-block-post-featured-image {
	margin: 0 0 var(--mbn-space-3);
}

.front-page .wp-block-query .wp-block-post-template .wp-block-post-featured-image a {
	display: block;
	line-height: 0;
	aspect-ratio: var(--mbn-recipe-card-aspect);
	overflow: hidden;
	border-radius: var(--mbn-recipe-card-radius);
	box-shadow: 0 10px 26px rgba(74, 63, 53, 0.10);
}

.front-page .wp-block-query .wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

@media (max-width: 768px) {
	.front-page .wp-block-query .wp-block-post-template .wp-block-post-featured-image img {
		height: 100%;
	}
}

.front-page .wp-block-query .wp-block-post-template .wp-block-post-title a {
	display: inline-block;
	max-width: 28ch; /* keep titles from stretching too wide */
}

/* -------------------------------------------------------------------------
   4️⃣ TEXT SECTION - Title + text content
   Target: .front-page .home-text-block
   ------------------------------------------------------------------------- */

.front-page .home-text-block {
	max-width: 720px;
	margin: clamp(60px, 10vw, 100px) auto;
	padding: 0 var(--mbn-space-4);
	text-align: center;
}

.front-page .home-text-block h2 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--mbn-text-primary);
	margin: 0 0 var(--mbn-space-4);
}

.front-page .home-text-block p {
	font-size: clamp(1rem, 1.5vw, 1.1rem);
	line-height: 1.85;
	color: var(--mbn-text-secondary);
	margin: 0 0 var(--mbn-space-3);
}

.front-page .home-text-block p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   5️⃣ NEWSLETTER SIGNUP SECTION
   Target: .front-page .home-newsletter
   ------------------------------------------------------------------------- */

.front-page .home-newsletter {
	background: var(--mbn-bg-soft);
	border-radius: 24px;
	max-width: 680px;
	margin: clamp(60px, 10vw, 100px) auto;
	padding: clamp(40px, 7vw, 60px) clamp(30px, 5vw, 50px);
	text-align: center;
}

.front-page .home-newsletter h2 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--mbn-text-primary);
	margin: 0 0 var(--mbn-space-3);
}

.front-page .home-newsletter p {
	font-size: clamp(0.95rem, 1.3vw, 1.05rem);
	line-height: 1.65;
	color: var(--mbn-text-secondary);
	margin: 0 0 var(--mbn-space-5);
}

.front-page .home-newsletter form {
	display: flex;
	flex-direction: column;
	gap: var(--mbn-space-3);
	align-items: stretch;
	max-width: 100%;
}

@media (min-width: 600px) {
	.front-page .home-newsletter form {
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
}

.front-page .home-newsletter input[type="email"],
.front-page .home-newsletter input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	background: #ffffff;
	border: 1px solid rgba(74, 63, 53, 0.2);
	border-radius: 999px;
	padding: 0.85rem 1.25rem;
	font-family: var(--mbn-font-body);
	font-size: 1rem;
	color: var(--mbn-text-primary);
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

.front-page .home-newsletter input[type="email"]:focus,
.front-page .home-newsletter input[type="text"]:focus {
	outline: none;
	border-color: var(--mbn-text-primary);
	box-shadow: 0 0 0 3px rgba(74, 63, 53, 0.08);
}

.front-page .home-newsletter input[type="email"]::placeholder,
.front-page .home-newsletter input[type="text"]::placeholder {
	color: rgba(74, 63, 53, 0.5);
}

.front-page .home-newsletter button,
.front-page .home-newsletter input[type="submit"] {
	flex-shrink: 0;
	background: var(--mbn-text-primary);
	color: var(--mbn-bg-soft);
	border: 1px solid var(--mbn-text-primary);
	border-radius: 999px;
	padding: 0.85rem 1.75rem;
	font-family: var(--mbn-font-body);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 180ms ease, transform 120ms ease;
}

.front-page .home-newsletter button:hover,
.front-page .home-newsletter input[type="submit"]:hover {
	background: rgba(74, 63, 53, 0.88);
	transform: translateY(-1px);
}

.front-page .home-newsletter button:active,
.front-page .home-newsletter input[type="submit"]:active {
	transform: translateY(0);
}

@media (max-width: 599px) {
	.front-page .home-newsletter form {
		max-width: 100%;
	}
	
	.front-page .home-newsletter input[type="email"],
	.front-page .home-newsletter input[type="text"] {
		width: 100%;
	}
	
	.front-page .home-newsletter button,
	.front-page .home-newsletter input[type="submit"] {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   6️⃣ FOOTER STYLING
   Target: .site-footer
   ------------------------------------------------------------------------- */

.site-footer {
	background: var(--mbn-text-primary);
	color: var(--mbn-bg-soft);
	padding: clamp(40px, 6vw, 60px) 0;
	margin-top: clamp(60px, 10vw, 120px);
}

.site-footer a {
	color: var(--mbn-bg-soft);
	border-bottom-color: transparent;
	transition: opacity 180ms ease, border-color 180ms ease;
}

.site-footer a:hover {
	opacity: 0.8;
	border-bottom-color: rgba(246, 245, 242, 0.4);
}

.site-footer p,
.site-footer li,
.site-footer .footer-widget-area p {
	color: rgba(246, 245, 242, 0.9);
	font-size: 0.95rem;
	line-height: 1.65;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title {
	color: var(--mbn-bg-soft);
	font-family: var(--mbn-font-heading);
}

.site-footer .ast-container {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

/* ========================================================================
   GLOBAL FOOTER (CUSTOM)
   - Scope: `.site-footer-custom` only
   - Premium, soft, minimalist
   ======================================================================== */

.site-footer-custom {
	background: var(--mbn-text-primary); /* dark brown */
	color: rgba(246, 245, 242, 0.90); /* off-white */
	padding: clamp(44px, 6vw, 72px) 0;
}

.site-footer-custom__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding-left: clamp(16px, 4vw, 56px);
	padding-right: clamp(16px, 4vw, 56px);
}

.site-footer-custom__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(18px, 3vw, 42px);
	flex-wrap: wrap;
}

.site-footer-custom__brand {
	font-family: var(--mbn-font-heading);
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	color: rgba(246, 245, 242, 0.92);
}

.site-footer-custom__nav {
	display: flex;
	gap: clamp(14px, 2.4vw, 26px);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.site-footer-custom__nav a {
	color: rgba(246, 245, 242, 0.86);
	font-family: var(--mbn-font-body);
	font-size: 0.98rem;
	border-bottom-color: transparent;
}

.site-footer-custom__nav a:hover,
.site-footer-custom__nav a:focus-visible {
	color: rgba(246, 245, 242, 0.98);
	border-bottom-color: rgba(246, 245, 242, 0.35);
}

.site-footer-custom__copy {
	margin-top: clamp(18px, 3vw, 28px);
	font-family: var(--mbn-font-body);
	font-size: 0.92rem;
	color: rgba(246, 245, 242, 0.78);
}

@media (max-width: 768px) {
	.site-footer-custom__top {
		flex-direction: column;
		text-align: center;
		justify-content: center;
	}

	.site-footer-custom__nav {
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}

	.site-footer-custom__copy {
		text-align: center;
	}
}

/* ========================================================================
   🧹 ASTRA FOOTER CLEANUP — DEFINITIVE (CSS ONLY, GLOBAL)
   
   Goals:
   1. DESTROY all Astra footer intermediate bars and spacers
   2. FORCE footer to touch content (zero gap)
   3. Footer background = site primary color
   4. MERGE newsletter into footer visually
   
   No JS • No HTML changes • Astra child theme compatible
   ======================================================================== */

/* ========================================================================
   1️⃣ DESTROY ALL ASTRA FOOTER INTERMEDIATE BARS
   ======================================================================== */

/* Remove all Astra footer bar containers */
.ast-footer-bar,
.ast-small-footer,
.ast-footer-overlay,
.ast-small-footer-wrap,
.ast-footer-copyright,
.ast-footer-copyright-wrap,
.ast-footer-bar-alignment {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
}

/* Ensure nested footer bars are also hidden */
.site-footer .ast-small-footer,
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-bar,
.ast-footer-wrap .ast-small-footer,
.ast-footer-wrap .ast-footer-copyright {
	display: none !important;
	height: 0 !important;
}

/* Remove pseudo-elements that create white bands */
.ast-footer-wrap::before,
.ast-footer-wrap::after,
.site-footer::before,
.site-footer::after {
	content: none !important;
	display: none !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* Remove pseudo-elements from site content that might create gaps */
.site-content::before,
.site-content::after {
	content: none !important;
	display: none !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Hide truly empty sections and divs that create phantom white bands */
.site-content section:empty,
.site-content div:empty:not([role]):not([aria-hidden]):not([class*="wp-block"]) {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	visibility: hidden !important;
}

/* Remove Astra footer overlay completely */
.ast-footer-overlay {
	background: transparent !important;
	height: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: none !important;
}

/* ========================================================================
   2️⃣ FORCE FOOTER TO TOUCH CONTENT (zero gap)
   ======================================================================== */

/* Remove all top spacing from footer elements */
.site-footer,
.ast-footer-wrap,
.footer-primary,
.ast-footer,
.footer-adv-layout,
.footer-widget-area {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
}

/* Remove bottom spacing from site content */
.site-content,
.site-main,
.ast-container {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* Remove any Astra-generated spacing between content and footer */
.ast-separate-container .site-content {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* Ensure no hidden elements create gaps */
#page .site-content + * {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* ========================================================================
   3️⃣ FOOTER DESIGN (primary color background)
   ======================================================================== */

/* Main footer styling - use site primary color */
.site-footer,
.ast-footer-wrap,
.footer-primary,
.ast-footer {
	background-color: var(--mbn-bg-primary) !important;
	background: var(--mbn-bg-primary) !important;
	color: rgba(255, 255, 255, 0.92) !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Ensure custom footer section inherits the same background */
.site-footer-custom {
	background: var(--mbn-bg-primary) !important;
	color: rgba(255, 255, 255, 0.92) !important;
}

/* Premium vertical spacing for footer */
.site-footer,
.ast-footer-wrap {
	padding-top: clamp(44px, 6vw, 72px) !important;
	padding-bottom: clamp(44px, 6vw, 72px) !important;
}

/* All footer text should be white/off-white */
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title,
.ast-footer-wrap p,
.ast-footer-wrap li,
.ast-footer-wrap span {
	color: rgba(255, 255, 255, 0.92) !important;
}

/* Footer links - white with subtle hover */
.site-footer a,
.site-footer-custom a,
.ast-footer-wrap a,
.footer-primary a {
	color: rgba(255, 255, 255, 0.92) !important;
	border-bottom-color: transparent !important;
	text-decoration: none !important;
	transition: opacity 180ms ease, border-color 180ms ease;
}

.site-footer a:hover,
.site-footer a:focus-visible,
.site-footer-custom a:hover,
.site-footer-custom a:focus-visible,
.ast-footer-wrap a:hover,
.ast-footer-wrap a:focus-visible,
.footer-primary a:hover,
.footer-primary a:focus-visible {
	opacity: 0.78 !important;
	border-bottom-color: rgba(255, 255, 255, 0.35) !important;
}

/* Ensure no Astra separator lines show */
.site-footer *,
.ast-footer-wrap *,
.footer-primary * {
	border-top-color: transparent !important;
	border-bottom-color: transparent !important;
}

/* ========================================================================
   4️⃣ NEWSLETTER INDÉPENDANTE - CARTE BLANCHE PREMIUM
   
   Structure Gutenberg attendue :
   Group (align: full) [.newsletter-wrapper]
     └── Group [.newsletter-card]
          └── Heading "Never miss my recipe"
          └── Form (email + button)
   
   Design : carte blanche élégante, avant le footer, espacement généreux
   Layout UPDATE: titre centré au-dessus + email/bouton sur une seule ligne
   ======================================================================== */

/* Wrapper externe - full-width avec padding vertical généreux */
.newsletter-wrapper,
.site-content .newsletter-wrapper,
.entry-content .newsletter-wrapper,
body.home .entry-content .newsletter-wrapper {
	/* Full-width container */
	width: 100% !important;
	max-width: 100% !important;
	
	/* Generous vertical spacing (before footer) */
	padding-top: clamp(80px, 10vw, 100px) !important;
	padding-bottom: clamp(80px, 10vw, 100px) !important;
	
	/* Transparent background (shows site background) */
	background: transparent !important;
	
	/* Remove any inherited margins */
	margin-top: 0 !important;
	margin-bottom: 0 !important;

	/* No borders or shadows on wrapper */
	border: 0 !important;
	box-shadow: none !important;
}

/* Carte newsletter interne - carte blanche premium centrée */
.newsletter-card,
.newsletter-wrapper .newsletter-card,
.site-content .newsletter-card,
.entry-content .newsletter-card,
body.home .entry-content .newsletter-card {
	/* Centered card with max-width */
	max-width: 1100px !important;
	margin: 0 auto !important;
	
	/* White card background */
	background: #ffffff !important;
	background-color: #ffffff !important;
	
	/* Premium rounded corners */
	border-radius: 28px !important;
	
	/* Generous internal padding */
	padding: clamp(48px, 6vw, 56px) clamp(40px, 5vw, 64px) !important;
	
	/* Subtle premium shadow */
	box-shadow: 0 2px 16px rgba(74, 63, 53, 0.06), 
	            0 1px 4px rgba(74, 63, 53, 0.04) !important;
	
	/* Soft border (optional) */
	border: 1px solid rgba(74, 63, 53, 0.08) !important;
	
	/* NOUVEAU LAYOUT : Colonne unique centrée (titre au-dessus, formulaire en dessous) */
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: clamp(24px, 3vw, 32px) !important;
	text-align: center !important;
}

/* Newsletter heading - centré au-dessus du formulaire */
.newsletter-card h1,
.newsletter-card h2,
.newsletter-card h3,
.newsletter-wrapper .newsletter-card h1,
.newsletter-wrapper .newsletter-card h2,
.newsletter-wrapper .newsletter-card h3,
.site-content .newsletter-card h1,
.site-content .newsletter-card h2,
.site-content .newsletter-card h3 {
	font-family: var(--mbn-font-heading) !important;
	font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--mbn-text-primary) !important;
	margin: 0 !important;
	letter-spacing: -0.015em !important;
	width: 100% !important;
	max-width: 100% !important;
	text-align: center !important;
}

/* Optional description paragraph */
.newsletter-card p,
.newsletter-wrapper .newsletter-card p,
.site-content .newsletter-card p {
	font-size: clamp(1rem, 1.4vw, 1.1rem) !important;
	line-height: 1.65 !important;
	color: var(--mbn-text-secondary) !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	text-align: center !important;
}

/* Form layout - HORIZONTAL (email + bouton sur la même ligne) */
.newsletter-card form,
.newsletter-wrapper .newsletter-card form,
.site-content .newsletter-card form {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: clamp(12px, 1.5vw, 16px) !important;
	width: 100% !important;
	max-width: 600px !important;
	margin: 0 auto !important;
	justify-content: center !important;
}

/* Force common plugin wrappers to display inline (pour input+submit sur même ligne) */
.newsletter-wrapper .newsletter-card :is(
	.wpforms-container,
	.wpforms-form,
	.wpforms-field-container,
	.wpforms-submit-container,
	.mc4wp-form-fields,
	.wpcf7-form,
	.wp-block-jetpack-subscriptions__form
) {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: clamp(12px, 1.5vw, 16px) !important;
	flex: 1 1 auto !important;
}

/* Make sure the actual controls behave nicely (scoped) */
.newsletter-wrapper .newsletter-card :is(input[type="email"], input[type="text"], button, input[type="submit"]) {
	box-sizing: border-box !important;
}

/* Email input - elegant pill shape, flex pour s'adapter */
.newsletter-card input[type="email"],
.newsletter-card input[type="text"],
.newsletter-wrapper .newsletter-card input[type="email"],
.newsletter-wrapper .newsletter-card input[type="text"],
.site-content .newsletter-card input[type="email"],
.site-content .newsletter-card input[type="text"] {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	max-width: none !important;
	
	/* Clean white background with subtle border */
	background: #ffffff !important;
	border: 1.5px solid rgba(74, 63, 53, 0.20) !important;
	border-radius: 999px !important;
	
	/* Comfortable padding */
	padding: 0.95rem 1.5rem !important;
	
	/* Typography */
	font-family: var(--mbn-font-body) !important;
	font-size: 1rem !important;
	color: var(--mbn-text-primary) !important;
	
	/* Smooth transitions */
	transition: border-color 200ms ease, box-shadow 200ms ease !important;
	
	/* Subtle shadow */
	box-shadow: 0 1px 3px rgba(74, 63, 53, 0.04) !important;
}

/* Placeholder styling */
.newsletter-card input[type="email"]::placeholder,
.newsletter-card input[type="text"]::placeholder,
.newsletter-wrapper .newsletter-card input[type="email"]::placeholder,
.newsletter-wrapper .newsletter-card input[type="text"]::placeholder,
.site-content .newsletter-card input[type="email"]::placeholder,
.site-content .newsletter-card input[type="text"]::placeholder {
	color: rgba(74, 63, 53, 0.48) !important;
	opacity: 1 !important;
}

/* Focus state - elegant ring */
.newsletter-card input[type="email"]:focus,
.newsletter-card input[type="text"]:focus,
.newsletter-wrapper .newsletter-card input[type="email"]:focus,
.newsletter-wrapper .newsletter-card input[type="text"]:focus,
.site-content .newsletter-card input[type="email"]:focus,
.site-content .newsletter-card input[type="text"]:focus {
	outline: none !important;
	border-color: var(--mbn-text-primary) !important;
	box-shadow: 0 0 0 3px rgba(74, 63, 53, 0.08), 
	            0 2px 6px rgba(74, 63, 53, 0.06) !important;
}

/* Submit button - site primary color, largeur automatique (s'adapte au contenu) */
.newsletter-card button,
.newsletter-card input[type="submit"],
.newsletter-card .wp-block-button__link,
.newsletter-wrapper .newsletter-card button,
.newsletter-wrapper .newsletter-card input[type="submit"],
.newsletter-wrapper .newsletter-card .wp-block-button__link,
.site-content .newsletter-card button,
.site-content .newsletter-card input[type="submit"],
.site-content .newsletter-card .wp-block-button__link {
	flex: 0 0 auto !important;
	width: auto !important;
	white-space: nowrap !important;
	
	/* Primary color background */
	background: var(--mbn-text-primary) !important;
	color: var(--mbn-bg-soft) !important;
	border: 1.5px solid var(--mbn-text-primary) !important;
	border-radius: 999px !important;
	
	/* Comfortable padding */
	padding: 0.95rem 2.25rem !important;
	
	/* Typography */
	font-family: var(--mbn-font-body) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.005em !important;
	
	/* Cursor */
	cursor: pointer !important;
	
	/* Smooth transitions */
	transition: background-color 200ms ease, 
	            transform 140ms ease, 
	            box-shadow 200ms ease !important;
	
	/* Subtle shadow */
	box-shadow: 0 2px 6px rgba(74, 63, 53, 0.12) !important;
}

/* Button hover state */
.newsletter-card button:hover,
.newsletter-card input[type="submit"]:hover,
.newsletter-card .wp-block-button__link:hover,
.newsletter-wrapper .newsletter-card button:hover,
.newsletter-wrapper .newsletter-card input[type="submit"]:hover,
.newsletter-wrapper .newsletter-card .wp-block-button__link:hover,
.site-content .newsletter-card button:hover,
.site-content .newsletter-card input[type="submit"]:hover,
.site-content .newsletter-card .wp-block-button__link:hover {
	background: rgba(74, 63, 53, 0.90) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(74, 63, 53, 0.16) !important;
}

/* Button active state */
.newsletter-card button:active,
.newsletter-card input[type="submit"]:active,
.newsletter-card .wp-block-button__link:active,
.newsletter-wrapper .newsletter-card button:active,
.newsletter-wrapper .newsletter-card input[type="submit"]:active,
.newsletter-wrapper .newsletter-card .wp-block-button__link:active,
.site-content .newsletter-card button:active,
.site-content .newsletter-card input[type="submit"]:active,
.site-content .newsletter-card .wp-block-button__link:active {
	transform: translateY(0) !important;
}

/* Remove Gutenberg button wrapper margins */
.newsletter-card .wp-block-buttons,
.newsletter-card .wp-block-button,
.newsletter-wrapper .newsletter-card .wp-block-buttons,
.newsletter-wrapper .newsletter-card .wp-block-button,
.site-content .newsletter-card .wp-block-buttons,
.site-content .newsletter-card .wp-block-button {
	margin: 0 !important;
}

/* Hide labels (keep for accessibility, hidden visually) */
.newsletter-card form label,
.newsletter-wrapper .newsletter-card form label,
.site-content .newsletter-card form label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Mobile responsive - stack vertically (titre > email > bouton) */
@media (max-width: 768px) {
	.newsletter-wrapper,
	.site-content .newsletter-wrapper,
	.entry-content .newsletter-wrapper,
	body.home .entry-content .newsletter-wrapper {
		padding-top: clamp(60px, 10vw, 80px) !important;
		padding-bottom: clamp(60px, 10vw, 80px) !important;
	}
	
	/* Carte : ajustements responsive */
	.newsletter-card,
	.newsletter-wrapper .newsletter-card,
	.site-content .newsletter-card,
	.entry-content .newsletter-card {
		gap: clamp(20px, 5vw, 28px) !important;
		padding: clamp(36px, 8vw, 48px) clamp(24px, 6vw, 32px) !important;
		border-radius: 24px !important;
	}
	
	/* Formulaire : passage en colonne sur mobile */
	.newsletter-card form,
	.newsletter-wrapper .newsletter-card form,
	.site-content .newsletter-card form {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	
	/* Force common plugin wrappers en colonne sur mobile */
	.newsletter-wrapper .newsletter-card :is(
		.wpforms-container,
		.wpforms-form,
		.wpforms-field-container,
		.wpforms-submit-container,
		.mc4wp-form-fields,
		.wpcf7-form,
		.wp-block-jetpack-subscriptions__form
	) {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	
	/* Input : largeur 100% sur mobile */
	.newsletter-card input[type="email"],
	.newsletter-card input[type="text"],
	.newsletter-wrapper .newsletter-card input[type="email"],
	.newsletter-wrapper .newsletter-card input[type="text"],
	.site-content .newsletter-card input[type="email"],
	.site-content .newsletter-card input[type="text"] {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
	}
	
	/* Bouton : largeur 100% sur mobile */
	.newsletter-card button,
	.newsletter-card input[type="submit"],
	.newsletter-card .wp-block-button__link,
	.newsletter-wrapper .newsletter-card button,
	.newsletter-wrapper .newsletter-card input[type="submit"],
	.newsletter-wrapper .newsletter-card .wp-block-button__link,
	.site-content .newsletter-card button,
	.site-content .newsletter-card input[type="submit"],
	.site-content .newsletter-card .wp-block-button__link {
		width: 100% !important;
		flex: 1 1 auto !important;
	}
}

/* ========================================================================
   NEWSLETTER DANS LE FOOTER - Règles spécifiques
   - La newsletter est maintenant dans le footer (hook astra_footer)
   - Design identique : fond blanc, radius 28px, ombres, typo
   - Layout UPDATE: titre centré au-dessus + email/bouton sur une seule ligne
   - Espacement ajusté pour le contexte footer
   ======================================================================== */

/* Newsletter wrapper dans le contexte footer */
#colophon .newsletter-wrapper,
.site-footer .newsletter-wrapper,
footer .newsletter-wrapper {
	/* Full-width container */
	width: 100% !important;
	max-width: 100% !important;
	
	/* Espacement vertical généreux (au-dessus du footer) */
	padding-top: clamp(80px, 10vw, 100px) !important;
	padding-bottom: clamp(60px, 8vw, 80px) !important;
	
	/* Transparent background */
	background: transparent !important;
	
	/* Remove margins */
	margin: 0 !important;
	
	/* No borders or shadows on wrapper */
	border: 0 !important;
	box-shadow: none !important;
}

/* Newsletter card dans le contexte footer - NOUVEAU LAYOUT (colonne unique centrée) */
#colophon .newsletter-card,
.site-footer .newsletter-card,
footer .newsletter-card {
	/* Centered card with max-width */
	max-width: 1100px !important;
	margin: 0 auto !important;
	
	/* White card background (IDENTIQUE) */
	background: #ffffff !important;
	background-color: #ffffff !important;
	
	/* Premium rounded corners (IDENTIQUE) */
	border-radius: 28px !important;
	
	/* Generous internal padding (IDENTIQUE) */
	padding: clamp(48px, 6vw, 56px) clamp(40px, 5vw, 64px) !important;
	
	/* Subtle premium shadow (IDENTIQUE) */
	box-shadow: 0 2px 16px rgba(74, 63, 53, 0.06), 
	            0 1px 4px rgba(74, 63, 53, 0.04) !important;
	
	/* Soft border (IDENTIQUE) */
	border: 1px solid rgba(74, 63, 53, 0.08) !important;
	
	/* NOUVEAU LAYOUT : Colonne unique centrée (titre au-dessus, formulaire en dessous) */
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: clamp(24px, 3vw, 32px) !important;
	text-align: center !important;
}

/* Footer: Formulaire horizontal (email + bouton sur même ligne) */
#colophon .newsletter-card form,
.site-footer .newsletter-card form,
footer .newsletter-card form {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: clamp(12px, 1.5vw, 16px) !important;
	width: 100% !important;
	max-width: 600px !important;
	margin: 0 auto !important;
	justify-content: center !important;
}

/* Responsive mobile pour footer */
@media (max-width: 768px) {
	#colophon .newsletter-wrapper,
	.site-footer .newsletter-wrapper,
	footer .newsletter-wrapper {
		padding-top: clamp(60px, 10vw, 80px) !important;
		padding-bottom: clamp(40px, 8vw, 60px) !important;
	}
	
	#colophon .newsletter-card,
	.site-footer .newsletter-card,
	footer .newsletter-card {
		gap: clamp(20px, 5vw, 28px) !important;
		padding: clamp(36px, 8vw, 48px) clamp(24px, 6vw, 32px) !important;
	}
	
	/* Formulaire en colonne sur mobile */
	#colophon .newsletter-card form,
	.site-footer .newsletter-card form,
	footer .newsletter-card form {
		flex-direction: column !important;
		align-items: stretch !important;
		max-width: 100% !important;
		gap: 12px !important;
	}
	
	#colophon .newsletter-card h2,
	.site-footer .newsletter-card h2,
	footer .newsletter-card h2 {
		max-width: 100% !important;
		text-align: center !important;
	}
}

/* ========================================================================
   END OF FOOTER & NEWSLETTER CLEANUP
   ======================================================================== */

/* =========================================================================
   HOME PAGE - EXISTING GUTENBERG BLOCKS STYLING
   Target: Blocks already placed on the page with custom CSS classes
   ========================================================================= */

/* =========================================================================
   🎯 HERO SECTION - First Group Block on Front Page ONLY
   Target: .front-page .entry-content > .wp-block-group:first-child
   
   Structure:
   - Group block (container)
     └─ Image block (background)
     └─ Heading (h1 or h2)
     └─ Paragraph
     └─ Button (optional)
   
   Design:
   - Full viewport width (edge-to-edge)
   - Full viewport height (100vh)
   - Image as full background with overlay
   - Text vertically centered, slightly left-aligned (editorial)
   - Inspiration: wellbyannabelle.com
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero Container - Full Bleed Layout
   ------------------------------------------------------------------------- */

.front-page .entry-content > .wp-block-group:first-child {
	/* === FULL BLEED TECHNIQUE === */
	/* Break out of Astra container constraints */
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	
	/* === DIMENSIONS === */
	min-height: 100vh;
	
	/* === LAYOUT === */
	display: flex;
	align-items: center;
	justify-content: flex-start; /* Text slightly left on desktop */
	
	/* === SPACING === */
	margin-top: 0;
	margin-bottom: 0;
	padding: clamp(60px, 8vh, 100px) clamp(40px, 8vw, 120px);
	
	/* === VISUAL === */
	overflow: hidden;
	border-radius: 0;
}

/* Override for nested Astra containers */
.front-page .site-content .ast-container > .entry-content > .wp-block-group:first-child {
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: 100vw;
}

/* -------------------------------------------------------------------------
   Hero Image - Full Coverage Background
   ------------------------------------------------------------------------- */

.front-page .entry-content > .wp-block-group:first-child .wp-block-image {
	/* Position image as full background */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 0;
}

.front-page .entry-content > .wp-block-group:first-child .wp-block-image img {
	/* Make image cover entire hero */
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* -------------------------------------------------------------------------
   Hero Overlay - Dark Tint for Readability
   ------------------------------------------------------------------------- */

.front-page .entry-content > .wp-block-group:first-child::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.40); /* Subtle dark overlay */
	z-index: 1;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Hero Text Content - Vertically Centered, Left-Aligned
   ------------------------------------------------------------------------- */

/* Inner container for text content */
.front-page .entry-content > .wp-block-group:first-child > .wp-block-group__inner-container {
	position: relative;
	z-index: 2;
	max-width: 650px;
	width: 100%;
}

/* All direct text elements */
.front-page .entry-content > .wp-block-group:first-child h1,
.front-page .entry-content > .wp-block-group:first-child h2,
.front-page .entry-content > .wp-block-group:first-child p,
.front-page .entry-content > .wp-block-group:first-child .wp-block-buttons {
	position: relative;
	z-index: 2;
}

/* -------------------------------------------------------------------------
   Hero Typography - Editorial Elegance
   ------------------------------------------------------------------------- */

/* Heading */
.front-page .entry-content > .wp-block-group:first-child h1,
.front-page .entry-content > .wp-block-group:first-child h2 {
	font-family: var(--mbn-font-heading); /* Playfair Display */
	font-size: clamp(2.5rem, 5.5vw, 4.8rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: #f6f5f2; /* Soft off-white, not pure white */
	margin: 0 0 var(--mbn-space-5);
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* Paragraph */
.front-page .entry-content > .wp-block-group:first-child p {
	font-family: var(--mbn-font-body); /* Inter */
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.65;
	color: rgba(246, 245, 242, 0.96);
	margin: 0 0 var(--mbn-space-5);
	font-weight: 400;
	letter-spacing: 0.005em;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

/* Button */
.front-page .entry-content > .wp-block-group:first-child .wp-block-button__link {
	background: rgba(246, 245, 242, 0.15);
	color: #f6f5f2;
	border: 1.5px solid rgba(246, 245, 242, 0.8);
	border-radius: 999px;
	padding: 0.95rem 2rem;
	font-family: var(--mbn-font-body);
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: all 220ms ease;
	backdrop-filter: blur(8px);
}

.front-page .entry-content > .wp-block-group:first-child .wp-block-button__link:hover {
	background: rgba(246, 245, 242, 0.25);
	border-color: #f6f5f2;
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* -------------------------------------------------------------------------
   Hero Mobile Responsive (≤768px)
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.front-page .entry-content > .wp-block-group:first-child {
		/* Center text on mobile */
		justify-content: center;
		text-align: center;
		padding: clamp(50px, 10vh, 80px) var(--mbn-space-4);
		min-height: 100vh;
	}
	
	/* Center inner container on mobile */
	.front-page .entry-content > .wp-block-group:first-child > .wp-block-group__inner-container {
		max-width: 100%;
		text-align: center;
	}
	
	/* Adjust typography for mobile */
	.front-page .entry-content > .wp-block-group:first-child h1,
	.front-page .entry-content > .wp-block-group:first-child h2 {
		font-size: clamp(2rem, 8vw, 2.75rem);
		margin-bottom: var(--mbn-space-4);
	}
	
	.front-page .entry-content > .wp-block-group:first-child p {
		font-size: clamp(0.95rem, 4vw, 1.15rem);
		margin-bottom: var(--mbn-space-4);
	}
	
	/* Center button on mobile */
	.front-page .entry-content > .wp-block-group:first-child .wp-block-buttons {
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
   Hero Tablet (769px - 1024px)
   ------------------------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1024px) {
	.front-page .entry-content > .wp-block-group:first-child {
		padding: clamp(60px, 8vh, 90px) clamp(50px, 6vw, 80px);
	}
	
	.front-page .entry-content > .wp-block-group:first-child > .wp-block-group__inner-container {
		max-width: 580px;
	}
}

/* =========================================================================
   END OF HERO SECTION
   ========================================================================= */

/* -------------------------------------------------------------------------
   1️⃣ HERO SECTION (.home-hero)
   - Full viewport width (breaks out of Astra container)
   - Full viewport height minus header
   - Centered text with elegant overlay
   - Premium typography
   ------------------------------------------------------------------------- */

.front-page .home-hero {
	/* Break out of Astra container - full bleed technique */
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	
	/* Full viewport height minus header */
	min-height: calc(100vh - var(--ast-header-height, 80px));
	
	/* Layout */
	display: flex;
	align-items: center;
	justify-content: center;
	
	/* Background image */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
	/* Remove any inherited spacing */
	margin-top: 0;
	margin-bottom: 0;
	padding: var(--mbn-space-5) clamp(20px, 5vw, 60px);
	border-radius: 0;
	overflow: hidden;
}

/* Override any Astra container padding for hero */
.front-page .site-content .ast-container .home-hero,
.front-page .entry-content .home-hero {
	margin-left: -50vw;
	margin-right: -50vw;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	padding-left: clamp(20px, 5vw, 60px);
	padding-right: clamp(20px, 5vw, 60px);
}

/* Dark filter applied ONLY to background image, NOT to content */
.front-page .home-hero .wp-block-cover__image-background {
	/* filter: brightness(0.72); */ /* REMOVED - no dark filter */
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Gutenberg native overlay - kept subtle */
.front-page .home-hero .wp-block-cover__background {
	opacity: 0; /* REMOVED - no dark overlay */
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.front-page .home-hero > *,
.front-page .home-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	text-align: center;
	color: var(--mbn-bg-soft);
	max-width: 62ch;
	margin: 0 auto;
	width: 100%;
}

.front-page .home-hero h1,
.front-page .home-hero h2 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(2.75rem, 5.5vw, 5rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: var(--mbn-bg-soft);
	margin: 0 0 var(--mbn-space-5);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.front-page .home-hero p {
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	line-height: 1.65;
	color: rgba(246, 245, 242, 0.96);
	margin: 0;
	font-weight: 400;
	letter-spacing: 0.005em;
}

/* Mobile adjustments for hero */
@media (max-width: 768px) {
	.front-page .home-hero {
		min-height: calc(100vh - var(--ast-header-height, 70px));
		padding: var(--mbn-space-4) var(--mbn-space-3);
	}
	
	.front-page .home-hero h1,
	.front-page .home-hero h2 {
		font-size: clamp(2rem, 8vw, 2.75rem);
		margin-bottom: var(--mbn-space-4);
	}
	
	.front-page .home-hero p {
		font-size: clamp(0.95rem, 4vw, 1.15rem);
	}
}

/* -------------------------------------------------------------------------
   2️⃣ INTRO SECTION (.home-intro)
   - Max width 720px, centered
   - Generous spacing
   - Pill-shaped button
   ------------------------------------------------------------------------- */

.home-intro {
	max-width: 720px;
	margin: clamp(70px, 11vw, 130px) auto;
	padding: 0 var(--mbn-space-5);
	text-align: center;
}

.home-intro h1,
.home-intro h2 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.85rem, 3.2vw, 2.65rem);
	font-weight: 600;
	line-height: 1.22;
	color: var(--mbn-text-primary);
	margin: 0 0 var(--mbn-space-5);
	letter-spacing: -0.015em;
}

.home-intro h3 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.4rem, 2.3vw, 1.85rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--mbn-text-primary);
	margin: 0 0 var(--mbn-space-4);
}

.home-intro p {
	font-size: clamp(1.05rem, 1.5vw, 1.18rem);
	line-height: 1.78;
	color: var(--mbn-text-secondary);
	margin: 0 0 var(--mbn-space-4);
}

.home-intro p:last-of-type {
	margin-bottom: var(--mbn-space-5);
}

/* Button styling for intro section */
.home-intro .wp-block-button,
.home-intro .wp-block-buttons {
	margin-top: var(--mbn-space-5);
	justify-content: center;
}

.home-intro .wp-block-button__link,
.home-intro a.button,
.home-intro button {
	background: transparent;
	color: var(--mbn-text-primary);
	border: 1.5px solid var(--mbn-text-primary);
	border-radius: 999px;
	padding: 0.9rem 2rem;
	font-weight: 500;
	font-size: 1.05rem;
	letter-spacing: 0.005em;
	transition: all 200ms ease;
	text-decoration: none;
	display: inline-block;
}

.home-intro .wp-block-button__link:hover,
.home-intro a.button:hover,
.home-intro button:hover {
	background: rgba(74, 63, 53, 0.06);
	border-color: var(--mbn-text-primary);
	transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   3️⃣ RECIPES CAROUSEL (.home-recipes-carousel)
   - Horizontal scroll
   - 4 cards desktop, 2 mobile
   - Clean, no shadows
   ------------------------------------------------------------------------- */

.home-recipes-carousel {
	margin: clamp(70px, 11vw, 120px) 0;
	padding: 0;
	width: 100%;
}

/* Section title before carousel */
.home-recipes-carousel > h2:first-child,
.home-recipes-carousel > h1:first-child {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.85rem, 3.2vw, 2.65rem);
	font-weight: 600;
	text-align: center;
	color: var(--mbn-text-primary);
	margin: 0 0 var(--mbn-space-6);
	letter-spacing: -0.015em;
}

/* Carousel container (Query Loop or custom container) */
.home-recipes-carousel .wp-block-query,
.home-recipes-carousel .recipes-grid,
.home-recipes-carousel > ul,
.home-recipes-carousel > .wp-block-group__inner-container {
	width: 100%;
	overflow: visible;
}

/* Post template or list items */
.home-recipes-carousel .wp-block-post-template,
.home-recipes-carousel ul.recipes-list,
.home-recipes-carousel .recipes-container {
	--carousel-gap: clamp(18px, 2.4vw, 32px);
	display: flex;
	flex-wrap: nowrap;
	gap: var(--carousel-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 1px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	list-style: none;
	padding: 0 0 var(--mbn-space-5);
	margin: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.home-recipes-carousel .wp-block-post-template::-webkit-scrollbar,
.home-recipes-carousel ul.recipes-list::-webkit-scrollbar,
.home-recipes-carousel .recipes-container::-webkit-scrollbar {
	display: none;
}

/* Individual recipe cards */
.home-recipes-carousel .wp-block-post-template > li,
.home-recipes-carousel ul.recipes-list > li,
.home-recipes-carousel .recipe-card {
	flex: 0 0 calc((100% - (3 * var(--carousel-gap))) / 4);
	scroll-snap-align: start;
	scroll-snap-stop: always;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 768px) {
	.home-recipes-carousel .wp-block-post-template > li,
	.home-recipes-carousel ul.recipes-list > li,
	.home-recipes-carousel .recipe-card {
		flex-basis: calc((100% - (1 * var(--carousel-gap))) / 2);
	}
}

/* Card inner structure */
.home-recipes-carousel .wp-block-post,
.home-recipes-carousel .recipe-card-inner {
	margin: 0;
	display: flex;
	flex-direction: column;
	background: transparent;
	border: none;
	box-shadow: none;
}

/* Featured image */
.home-recipes-carousel .wp-block-post-featured-image,
.home-recipes-carousel .recipe-image {
	margin: 0 0 var(--mbn-space-3);
	overflow: hidden;
	border-radius: 20px;
}

.home-recipes-carousel .wp-block-post-featured-image a,
.home-recipes-carousel .recipe-image a {
	display: block;
	line-height: 0;
}

.home-recipes-carousel .wp-block-post-featured-image img,
.home-recipes-carousel .recipe-image img {
	width: 100%;
	height: 290px;
	object-fit: cover;
	display: block;
	border-radius: 20px;
	transition: transform 320ms ease, opacity 220ms ease;
}

.home-recipes-carousel .wp-block-post-featured-image:hover img,
.home-recipes-carousel .recipe-image:hover img {
	transform: scale(1.02);
}

@media (max-width: 768px) {
	.home-recipes-carousel .wp-block-post-featured-image img,
	.home-recipes-carousel .recipe-image img {
		height: 230px;
	}
}

/* Post title */
.home-recipes-carousel .wp-block-post-title,
.home-recipes-carousel .recipe-title,
.home-recipes-carousel h3 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.05rem, 1.4vw, 1.22rem);
	line-height: 1.28;
	font-weight: 600;
	margin: 0;
	text-align: center;
	color: var(--mbn-text-primary);
}

.home-recipes-carousel .wp-block-post-title a,
.home-recipes-carousel .recipe-title a {
	border-bottom-color: transparent;
	text-decoration: none;
	color: var(--mbn-text-primary);
	transition: opacity 180ms ease;
}

.home-recipes-carousel .wp-block-post-title a:hover,
.home-recipes-carousel .recipe-title a:hover {
	opacity: 0.68;
}

/* Hide excerpt/meta if present */
.home-recipes-carousel .wp-block-post-excerpt,
.home-recipes-carousel .wp-block-post-date,
.home-recipes-carousel .recipe-meta {
	display: none;
}

/* -------------------------------------------------------------------------
   4️⃣ TEXT SECTION (.home-text-section)
   - Calm reading width
   - Centered, editorial spacing
   ------------------------------------------------------------------------- */

.home-text-section {
	max-width: 720px;
	margin: clamp(70px, 11vw, 120px) auto;
	padding: 0 var(--mbn-space-5);
	text-align: center;
}

.home-text-section h1,
.home-text-section h2 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.85rem, 3.2vw, 2.65rem);
	font-weight: 600;
	line-height: 1.26;
	color: var(--mbn-text-primary);
	margin: 0 0 var(--mbn-space-5);
	letter-spacing: -0.015em;
}

.home-text-section h3 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.4rem, 2.3vw, 1.85rem);
	font-weight: 600;
	line-height: 1.32;
	color: var(--mbn-text-primary);
	margin: var(--mbn-space-5) 0 var(--mbn-space-3);
}

.home-text-section p {
	font-size: clamp(1.05rem, 1.5vw, 1.15rem);
	line-height: 1.88;
	color: var(--mbn-text-secondary);
	margin: 0 0 var(--mbn-space-4);
}

.home-text-section p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   5️⃣ NEWSLETTER SECTION (.home-newsletter)
   - Soft background contrast
   - Inline input + button on desktop
   - Minimal, elegant
   ------------------------------------------------------------------------- */

.home-newsletter {
	background: var(--mbn-bg-soft);
	border-radius: 26px;
	max-width: 700px;
	margin: clamp(70px, 11vw, 120px) auto;
	padding: clamp(45px, 7.5vw, 65px) clamp(35px, 5.5vw, 55px);
	text-align: center;
	box-shadow: 0 1px 3px rgba(74, 63, 53, 0.04);
}

.home-newsletter h1,
.home-newsletter h2 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.65rem, 2.7vw, 2.2rem);
	font-weight: 600;
	line-height: 1.32;
	color: var(--mbn-text-primary);
	margin: 0 0 var(--mbn-space-4);
	letter-spacing: -0.012em;
}

.home-newsletter h3 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.35rem, 2.1vw, 1.75rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--mbn-text-primary);
	margin: 0 0 var(--mbn-space-3);
}

.home-newsletter p {
	font-size: clamp(0.98rem, 1.35vw, 1.08rem);
	line-height: 1.68;
	color: var(--mbn-text-secondary);
	margin: 0 0 var(--mbn-space-5);
}

/* Form layout */
.home-newsletter form,
.home-newsletter .wp-block-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--mbn-space-3);
	align-items: stretch;
	max-width: 100%;
	margin-top: var(--mbn-space-5);
}

@media (min-width: 600px) {
	.home-newsletter form,
	.home-newsletter .wp-block-buttons {
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
}

/* Email input */
.home-newsletter input[type="email"],
.home-newsletter input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	background: #ffffff;
	border: 1px solid rgba(74, 63, 53, 0.18);
	border-radius: 999px;
	padding: 0.95rem 1.4rem;
	font-family: var(--mbn-font-body);
	font-size: 1.02rem;
	color: var(--mbn-text-primary);
	transition: border-color 200ms ease, box-shadow 200ms ease;
	box-shadow: 0 1px 2px rgba(74, 63, 53, 0.04);
}

.home-newsletter input[type="email"]:focus,
.home-newsletter input[type="text"]:focus {
	outline: none;
	border-color: var(--mbn-text-primary);
	box-shadow: 0 0 0 3px rgba(74, 63, 53, 0.07), 0 1px 3px rgba(74, 63, 53, 0.08);
}

.home-newsletter input[type="email"]::placeholder,
.home-newsletter input[type="text"]::placeholder {
	color: rgba(74, 63, 53, 0.48);
}

/* Submit button */
.home-newsletter button,
.home-newsletter input[type="submit"],
.home-newsletter .wp-block-button__link {
	flex-shrink: 0;
	background: var(--mbn-text-primary);
	color: var(--mbn-bg-soft);
	border: 1.5px solid var(--mbn-text-primary);
	border-radius: 999px;
	padding: 0.95rem 2rem;
	font-family: var(--mbn-font-body);
	font-size: 1.02rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	cursor: pointer;
	transition: background-color 200ms ease, transform 140ms ease, box-shadow 200ms ease;
	box-shadow: 0 2px 4px rgba(74, 63, 53, 0.12);
}

.home-newsletter button:hover,
.home-newsletter input[type="submit"]:hover,
.home-newsletter .wp-block-button__link:hover {
	background: rgba(74, 63, 53, 0.92);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(74, 63, 53, 0.16);
}

.home-newsletter button:active,
.home-newsletter input[type="submit"]:active,
.home-newsletter .wp-block-button__link:active {
	transform: translateY(0);
}

/* Mobile stacking */
@media (max-width: 599px) {
	.home-newsletter form,
	.home-newsletter .wp-block-buttons {
		max-width: 100%;
	}
	
	.home-newsletter input[type="email"],
	.home-newsletter input[type="text"] {
		width: 100%;
	}
	
	.home-newsletter button,
	.home-newsletter input[type="submit"],
	.home-newsletter .wp-block-button__link {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   Recipes archive (/recipes/)
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Single recipe
   ------------------------------------------------------------------------- */

body.single-recipe .recipe-hero {
	padding-top: var(--mbn-space-3);
	margin-bottom: var(--mbn-space-5);
}

body.single-recipe .recipe-hero__title {
	margin: 0 0 var(--mbn-space-5);
	text-align: center;
}

/* Wrapper for featured image + recipe overview (constrained width, centered) */
body.single-recipe .recipe-featured-content-wrapper {
	max-width: 950px;
	margin: 0 auto;
	padding: 0;
}

body.single-recipe .recipe-hero__image {
	margin: 0 0 var(--mbn-space-4);
}

body.single-recipe .recipe-hero__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--mbn-radius);
}

body.single-recipe .recipe-meta {
	background: rgba(246, 245, 242, 0.75);
	border: 1px solid rgba(74, 63, 53, 0.12);
	border-radius: var(--mbn-radius);
	padding: var(--mbn-space-4);
	margin: var(--mbn-space-5) 0;
}

/* Recipe overview card (Single recipe template only) */
body.single-recipe .recipe-overview-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 24px 32px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(74, 63, 53, 0.10);
	text-align: center;
	margin: 0; /* Remove any auto margins - width controlled by parent wrapper */
}

body.single-recipe .recipe-overview-card .recipe-overview-title {
	text-align: center;
}

body.single-recipe .recipe-overview-card .recipe-overview-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 48px;
	align-items: center;
}

body.single-recipe .recipe-overview-card .recipe-overview-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

body.single-recipe .recipe-overview-card .recipe-overview-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ast-global-color-2, var(--mbn-text-primary));
	line-height: 1;
}

body.single-recipe .recipe-overview-card .recipe-overview-icon {
	width: 22px;
	height: 22px;
	display: block;
	color: var(--ast-global-color-2, var(--mbn-text-primary));
}

@media (max-width: 768px) {
	body.single-recipe .recipe-overview-card {
		padding: 20px 20px;
	}

	body.single-recipe .recipe-overview-card .recipe-overview-items {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 24px;
	}

	body.single-recipe .recipe-overview-card .recipe-overview-item {
		align-items: center;
	}

	body.single-recipe .recipe-overview-card .recipe-overview-label {
		justify-content: center;
	}
}

body.single-recipe .recipe-meta__title {
	margin-top: 0;
}

body.single-recipe .recipe-meta__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mbn-space-3) var(--mbn-space-5);
}

body.single-recipe .recipe-meta__label {
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(106, 95, 84, 0.95);
	display: block;
}

body.single-recipe .recipe-meta__value {
	color: var(--mbn-text-primary);
	font-weight: 500;
}

body.single-recipe .recipe-ingredients__content,
body.single-recipe .recipe-instructions__content {
	color: var(--mbn-text-secondary);
}

body.single-recipe .recipe-ingredients__content p,
body.single-recipe .recipe-instructions__content p {
	margin-bottom: var(--mbn-space-2);
}

/* -------------------------------------------------------------------------
   About page
   ------------------------------------------------------------------------- */

body.page-about .entry-header,
body.page-about .entry-title {
	text-align: center;
}

body.page-about .entry-content {
	max-width: 68ch;
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--mbn-space-3);
	padding-bottom: var(--mbn-space-6);
}

/* ========================================================================
   HOME NEWSLETTER (DESIGN ONLY)
   - Scope: homepage ONLY + newsletter group ONLY (parent class: .newsletter-section)
   - No JS, no block/HTML changes, Astra compatible
   ======================================================================== */

body.home .entry-content .newsletter-section {
	/* Soft contrasting surface */
	background: rgba(246, 245, 242, 0.92); /* uses --mbn-bg-soft tone */
	border: 1px solid rgba(74, 63, 53, 0.08);
	border-radius: 26px;

	/* Comfortable reading width */
	max-width: 1100px;
	margin: clamp(56px, 9vw, 96px) auto;

	/* Lots of air */
	padding: clamp(40px, 6vw, 72px) clamp(24px, 4.5vw, 56px);
	box-shadow: 0 10px 28px rgba(74, 63, 53, 0.06);
}

/* Gutenberg Columns layout: two columns on desktop */
body.home .entry-content .newsletter-section .wp-block-columns {
	gap: clamp(20px, 4vw, 56px);
	align-items: center;
	margin: 0;
}

/* Typography */
body.home .entry-content .newsletter-section h1,
body.home .entry-content .newsletter-section h2,
body.home .entry-content .newsletter-section h3 {
	font-family: var(--mbn-font-heading);
	color: var(--mbn-text-primary);
	margin-top: 0;
}

body.home .entry-content .newsletter-section p {
	color: var(--mbn-text-secondary);
	margin-bottom: 0;
}

/* Form: align email + button nicely on desktop */
body.home .entry-content .newsletter-section form {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
}

/* Remove “raw Gutenberg form” feel (inside newsletter only) */
body.home .entry-content .newsletter-section input[type="email"],
body.home .entry-content .newsletter-section input[type="text"] {
	flex: 1 1 340px;
	min-width: 0;
	/* Premium: quasi transparent (reste lisible sur fond doux) */
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(74, 63, 53, 0.18);
	border-radius: 999px;
	padding: 0.95rem 1.25rem;
	font-family: var(--mbn-font-body);
	font-size: 1rem;
	/* Soft text (not pure black) */
	color: var(--mbn-text-secondary);
	box-shadow: none;
	transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

body.home .entry-content .newsletter-section input[type="email"]::placeholder,
body.home .entry-content .newsletter-section input[type="text"]::placeholder {
	/* Placeholder: soft, readable, not italic */
	color: var(--mbn-text-secondary);
	opacity: 0.72;
	font-style: normal;
}

/* Accessible label hiding (keep for screen readers; do NOT use display:none) */
body.home .entry-content .newsletter-section form {
	position: relative; /* safe anchor for visually hidden labels */
}

body.home .entry-content .newsletter-section form label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Discreet focus (no blue) */
body.home .entry-content .newsletter-section input[type="email"]:focus,
body.home .entry-content .newsletter-section input[type="text"]:focus {
	outline: none;
	border-color: rgba(74, 63, 53, 0.55);
	box-shadow: 0 0 0 3px rgba(74, 63, 53, 0.10);
	background: rgba(255, 255, 255, 0.28);
}

/* Button: coherent with the site (main color + soft text) */
body.home .entry-content .newsletter-section button,
body.home .entry-content .newsletter-section input[type="submit"],
body.home .entry-content .newsletter-section .wp-block-button__link {
	flex: 0 0 auto;
	background: var(--mbn-text-primary); /* dark brown */
	color: var(--mbn-bg-soft);
	border: 1px solid var(--mbn-text-primary);
	border-radius: 999px;
	padding: 0.95rem 1.4rem;
	font-family: var(--mbn-font-body);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: transform 140ms ease, background-color 180ms ease, opacity 180ms ease;
}

body.home .entry-content .newsletter-section button:hover,
body.home .entry-content .newsletter-section input[type="submit"]:hover,
body.home .entry-content .newsletter-section .wp-block-button__link:hover {
	background: rgba(74, 63, 53, 0.92);
	transform: translateY(-1px);
}

body.home .entry-content .newsletter-section button:active,
body.home .entry-content .newsletter-section input[type="submit"]:active,
body.home .entry-content .newsletter-section .wp-block-button__link:active {
	transform: translateY(0);
}

/* Remove extra Gutenberg button margins inside newsletter */
body.home .entry-content .newsletter-section .wp-block-buttons,
body.home .entry-content .newsletter-section .wp-block-button {
	margin: 0;
}

/* Mobile: stack + center */
@media (max-width: 768px) {
	body.home .entry-content .newsletter-section {
		padding: clamp(34px, 8vw, 52px) clamp(18px, 6vw, 28px);
		text-align: center;
	}

	body.home .entry-content .newsletter-section .wp-block-columns {
		gap: 18px;
	}

	body.home .entry-content .newsletter-section form {
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		gap: 12px;
	}

	body.home .entry-content .newsletter-section input[type="email"],
	body.home .entry-content .newsletter-section input[type="text"],
	body.home .entry-content .newsletter-section button,
	body.home .entry-content .newsletter-section input[type="submit"],
	body.home .entry-content .newsletter-section .wp-block-button__link {
		width: 100%;
	}
}

/* ========================================================================
   HOME HERO FULL WIDTH
   - Scope: ONLY the Home hero Group block with class `.hero-home` (no Cover block).
   - Constraints: CSS-only, no block edits, no plugins, no inline styles.
   - Goal: immersive full-bleed hero directly under the Astra header.
   ======================================================================== */

/* ------------------------------------------------------------------------
   HOME HEADER (homepage only): transparent at top, solid on scroll
   - Uses Astra sticky class when available (.ast-header-sticked)
   - Also supports existing JS class (.is-scrolled) if present
   - Does NOT affect other pages
   ------------------------------------------------------------------------ */

body.home .site-header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 9999;

	background: transparent;
	border-bottom: 0;
	box-shadow: none;
	transition: background-color 260ms ease, box-shadow 260ms ease, color 260ms ease;
}

/* Admin bar compatibility */
body.home.admin-bar .site-header {
	top: 32px;
}
@media (max-width: 782px) {
	body.home.admin-bar .site-header {
		top: 46px;
	}
}

/* Astra often colors inner header bars; keep them transparent at the top */
body.home .site-header,
body.home .site-header .main-header-bar,
body.home .site-header .ast-primary-header-bar,
body.home .site-header .ast-main-header-bar-alignment {
	background-color: transparent;
	border-bottom: 0;
	box-shadow: none;
}

/* Transparent state (on hero): logo + menu WHITE */
body.home .site-header .main-header-menu a {
	font-family: var(--mbn-font-body);
	color: rgba(246, 245, 242, 0.98);
	transition: color 260ms ease, opacity 260ms ease;
}

body.home .site-header .main-header-menu a:hover,
body.home .site-header .main-header-menu a:focus-visible {
	opacity: 0.82;
}

/* Logo text (if used) */
body.home .site-header .site-title a,
body.home .site-header .site-description {
	color: rgba(246, 245, 242, 0.98);
	transition: color 260ms ease, opacity 260ms ease;
}

/* Logo image (if used): make it white on transparent header */
body.home .site-header .custom-logo-link img {
	transition: filter 260ms ease, opacity 260ms ease;
	filter: brightness(0) invert(1);
}

/* Scrolled state: solid background + dark text (Astra sticky + existing JS class) */
body.home .site-header.ast-header-sticked,
body.home .site-header.is-scrolled,
body.home .site-header.ast-header-sticked .main-header-bar,
body.home .site-header.is-scrolled .main-header-bar,
body.home .site-header.ast-header-sticked .ast-primary-header-bar,
body.home .site-header.is-scrolled .ast-primary-header-bar,
body.home .site-header.ast-header-sticked .ast-main-header-bar-alignment,
body.home .site-header.is-scrolled .ast-main-header-bar-alignment {
	background-color: #c3c6b5;
}

body.home .site-header.ast-header-sticked,
body.home .site-header.is-scrolled {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	border-bottom: 0;
}

body.home .site-header.ast-header-sticked .main-header-menu a,
body.home .site-header.is-scrolled .main-header-menu a {
	color: #4a3f35;
	opacity: 1;
}

body.home .site-header.ast-header-sticked .site-title a,
body.home .site-header.is-scrolled .site-title a,
body.home .site-header.ast-header-sticked .site-description,
body.home .site-header.is-scrolled .site-description {
	color: #4a3f35;
}

body.home .site-header.ast-header-sticked .custom-logo-link img,
body.home .site-header.is-scrolled .custom-logo-link img {
	filter: none;
}

body.home .wp-block-group.hero-home {
	/* Break out of Astra `.ast-container` (full-bleed) */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	/* Fullscreen hero */
	min-height: calc(100vh - var(--ast-header-height, 80px));
	min-height: calc(100svh - var(--ast-header-height, 80px));

	/* Remove the gap between header and content WITHOUT touching header styles.
	   Astra/Home spacing in this codebase is applied to `body.home .site-main` via padding-top,
	   so we compensate by pulling ONLY the hero up by the same amount. */
	margin-top: calc(-1 * clamp(24px, 6vw, 84px));
	margin-bottom: 0;
	padding: 0;

	position: relative;
	overflow: hidden;
	border-radius: 0;
}

/* ------------------------------------------------------------------------
   HOME HERO (Gutenberg Cover) — image-only filter, text stays sharp
   Scope: home only + Cover block (optional class .hero-cover if present)
   ------------------------------------------------------------------------ */

body.home .wp-block-cover.hero-cover,
body.home .wp-block-cover.hero-cover.wp-block-cover,
body.home .wp-block-cover.wp-block-cover.hero-cover,
body.home .wp-block-cover.hero-cover.wp-block-cover,
body.home .wp-block-cover.hero-cover {
	/* Touch header (cancel Home top padding without changing the header) */
	margin-top: calc(-1 * clamp(24px, 6vw, 84px));
	margin-bottom: 0;
	min-height: 100vh;
	border-radius: 0;
	overflow: hidden;
}

/* Filter ONLY the image */
body.home .wp-block-cover.hero-cover .wp-block-cover__image-background {
	/* filter: brightness(0.6); */ /* REMOVED - no dark filter */
	z-index: 0;
}

/* If Gutenberg overlay exists, keep it subtle and BELOW text */
body.home .wp-block-cover.hero-cover .wp-block-cover__background {
	opacity: 0; /* REMOVED - no dark overlay */
	z-index: 1;
}

/* Text must be above and unaffected */
body.home .wp-block-cover.hero-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	color: rgba(246, 245, 242, 0.98);
	filter: none;
	opacity: 1;
}

/* Background image (CSS only; do not use Cover block) */
body.home .wp-block-group.hero-home {
	background-image: url("/wp-content/uploads/IMAGE_HERO.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Soft dark overlay for readability */
body.home .wp-block-group.hero-home::before {
	/* REMOVED - no dark overlay */
	display: none;
}

/* Content above the image + overlay */
body.home .wp-block-group.hero-home > .wp-block-group__inner-container {
	position: relative;
	z-index: 2;
	color: #ffffff;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
	padding: clamp(56px, 8vh, 96px) clamp(16px, 6vw, 72px);
}

/* Ensure text is readable and not constrained by other Home rules */
body.home .wp-block-group.hero-home h1,
body.home .wp-block-group.hero-home h2,
body.home .wp-block-group.hero-home h3,
body.home .wp-block-group.hero-home p {
	color: #ffffff;
}

body.home .wp-block-group.hero-home > .wp-block-group__inner-container > *:first-child {
	margin-top: 0;
}

body.home .wp-block-group.hero-home > .wp-block-group__inner-container > *:last-child {
	margin-bottom: 0;
}

/* Mobile: keep it centered and avoid clipping */
@media (max-width: 768px) {
	body.home .wp-block-group.hero-home > .wp-block-group__inner-container {
		padding: clamp(48px, 10vh, 80px) clamp(16px, 5vw, 28px);
	}
}

/* ========================================================================
   ABSOLUTE /recipes GRID FIX – DO NOT MODIFY
   Context: Gutenberg Query Loop on /recipes (CPT archive)
   Scope: ONLY `body.post-type-archive-recipe`
   Target DOM:
   .wp-block-query
     ul.wp-block-post-template
       li.wp-block-post
         figure.wp-block-post-featured-image img
   ======================================================================== */

/* 3) NEUTRALIZE ASTRA WRAPPERS THAT BREAK THE GRID (ONLY /recipes) */
body.post-type-archive-recipe :is(.site-content, .site-main, .ast-container, .entry-content, .ast-row, .ast-row > *) {
	max-width: none !important;
	width: auto !important;
}

/* 1) FORCE GRID ON THE REAL CONTAINER */
body.post-type-archive-recipe ul.wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* desktop */
	gap: 3rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;      /* ensure the grid spans the content area */
	max-width: none !important;
}

@media (max-width: 1024px) {
	body.post-type-archive-recipe ul.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* tablet */
	}
}

@media (max-width: 640px) {
	body.post-type-archive-recipe ul.wp-block-post-template {
		grid-template-columns: 1fr !important; /* mobile */
		gap: 3rem !important;
	}
}

/* 2) FORCE EACH RECIPE TO BE A GRID ITEM (NOT FULL WIDTH) */
body.post-type-archive-recipe li.wp-block-post {
	width: auto !important;
	max-width: none !important;
	flex: unset !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	justify-self: stretch;
	text-align: center;
	transform: translateZ(0);
	transition: transform 220ms ease;
	float: none !important;
	clear: none !important;
}

body.post-type-archive-recipe li.wp-block-post:hover {
	transform: scale(1.02);
}

/* 2) IMAGE DOMINANCE (no fixed px height) */
body.post-type-archive-recipe li.wp-block-post figure.wp-block-post-featured-image {
	margin: 0 0 1.5rem !important;
	border-radius: 18px !important;
	overflow: hidden !important;
	aspect-ratio: 1 / 1 !important;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12) !important;
}

body.post-type-archive-recipe .wp-block-post-featured-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block !important;
	border-radius: 18px !important;
}

/* 4) TEXT ALIGNMENT (center + spacing) */
body.post-type-archive-recipe li.wp-block-post .wp-block-post-title {
	margin: 0.85rem 0 0.6rem !important;
	text-align: center !important;
}

body.post-type-archive-recipe li.wp-block-post :is(.wp-block-post-date, .wp-block-post-author, .wp-block-post-terms, .wp-block-post-time-to-read) {
	display: block;
	text-align: center !important;
	margin: 0.4rem 0 0 !important;
}

/* 5) REMOVE DIFFICULTY COMPLETELY (keep prep/cook) */
body.post-type-archive-recipe .wp-block-query .wp-block-post-terms.taxonomy-difficulty,
body.post-type-archive-recipe .wp-block-query .wp-block-post-terms.taxonomy-recipe-difficulty,
body.post-type-archive-recipe .wp-block-query .wp-block-post-terms.taxonomy-recipe_difficulty,
body.post-type-archive-recipe .wp-block-query .wp-block-post-terms[class*="taxonomy-difficulty"],
body.post-type-archive-recipe .wp-block-query [class*="difficulty"],
body.post-type-archive-recipe .recipe-card__meta-item:nth-child(3) {
	display: none !important;
}

/* RECIPES PAGE – GRID GALLERY (.recipes-all)
   Scope: ONLY the Query Loop block wrapper that has the custom class `.recipes-all`
   Target DOM:
   .recipes-all
     ul.wp-block-post-template
       li
         img
         h2/3.wp-block-post-title
*/
.recipes-all ul.wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* desktop */
	gap: 36px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	align-items: start;
}

@media (max-width: 1024px) {
	.recipes-all ul.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* tablet */
	}
}

@media (max-width: 640px) {
	.recipes-all ul.wp-block-post-template {
		grid-template-columns: 1fr !important; /* mobile */
	}
}

.recipes-all ul.wp-block-post-template > li {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	max-width: none !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.recipes-all ul.wp-block-post-template > li > * {
	width: 100%;
}

.recipes-all ul.wp-block-post-template > li :where(.wp-block-post-featured-image, figure.wp-block-post-featured-image) {
	margin: 0 0 16px !important;
}

.recipes-all .wp-block-post-featured-image a {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
	transform: translateY(0);
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.recipes-all ul.wp-block-post-template > li:hover .wp-block-post-featured-image a {
	transform: translateY(-8px);
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.14);
}

.recipes-all img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 20px;
}

.recipes-all ul.wp-block-post-template > li .wp-block-post-title {
	margin: 16px auto 0 !important;
	max-width: 28ch;
	font-size: clamp(1.15rem, 0.9vw + 1rem, 1.55rem);
	line-height: 1.22;
}

/* Masquer TOUT sauf le titre */
.recipes-all ul.wp-block-post-template > li :is(
	.wp-block-post-date,
	.wp-block-post-author,
	.wp-block-post-author-name,
	.wp-block-post-terms,
	.wp-block-post-excerpt,
	.wp-block-post-content,
	.wp-block-post-time-to-read,
	.recipe-card__meta,
	.recipe-meta,
	.rank-math-review-data
) {
	display: none !important;
}

/* RECIPES PAGE – FINAL FIX */
body.page-id-138 .site-content .ast-container {
	/* Padding latéral clair (min 40px desktop) */
	padding-left: 48px;
	padding-right: 48px;
	box-sizing: border-box;
}

@media (max-width: 1024px) {
	body.page-id-138 .site-content .ast-container {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media (max-width: 640px) {
	body.page-id-138 .site-content .ast-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Grille stable (Query Loop Gutenberg) */
body.page-id-138 .wp-block-query ul.wp-block-post-template,
body.page-id-138 ul.wp-block-post-template {
	--recipes-gap: clamp(20px, 3vw, 36px);

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--recipes-gap);
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: start;
}

@media (max-width: 1024px) {
	body.page-id-138 .wp-block-query ul.wp-block-post-template,
	body.page-id-138 ul.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	body.page-id-138 .wp-block-query ul.wp-block-post-template,
	body.page-id-138 ul.wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* Cartes (structure imposée: Group.recipe-card > image + titre) */
body.page-id-138 li.wp-block-post,
body.page-id-138 .wp-block-post {
	margin: 0;
	padding: 0;
}

body.page-id-138 .recipe-card {
	position: relative;
	z-index: 0; /* create stacking context for click-overlay vs title */
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Images: taille identique + coins + ombre douce */
body.page-id-138 .recipe-card :where(.wp-block-post-featured-image, figure.wp-block-post-featured-image) {
	margin: 0;
	width: 100%;
}

body.page-id-138 .recipe-card :where(.wp-block-post-featured-image img, figure.wp-block-post-featured-image img) {
	width: 100%;
	height: 320px; /* hauteur FIXE */
	object-fit: cover;
	display: block;
	border-radius: 14px;
	box-shadow: 0 12px 28px rgba(74, 63, 53, 0.12);
}

/* Si une recette n'a pas d'image, éviter une carte “aplatie” */
body.page-id-138 .recipe-card :where(.wp-block-post-featured-image a, figure.wp-block-post-featured-image a) {
	min-height: 320px;
}

@media (max-width: 640px) {
	body.page-id-138 .recipe-card :where(.wp-block-post-featured-image img, figure.wp-block-post-featured-image img) {
		height: 260px;
	}
}

/* Carte entièrement cliquable (sans casser le flow): overlay cliquable via pseudo-element */
body.page-id-138 .recipe-card :where(.wp-block-post-featured-image a, figure.wp-block-post-featured-image a) {
	display: block;
}

body.page-id-138 .recipe-card :where(.wp-block-post-featured-image a, figure.wp-block-post-featured-image a)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Le titre reste au-dessus (et reste un lien) */
body.page-id-138 .recipe-card .wp-block-post-title {
	position: relative;
	z-index: 2;
	margin: 0;
}

body.page-id-138 .recipe-card .wp-block-post-title,
body.page-id-138 .recipe-card .wp-block-post-title a,
body.page-id-138 .recipe-card .wp-block-post-title__link {
	display: block;
	text-align: center;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
	transform: none;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ========================================================================
   "WORK WITH ME" BUTTON IN MAIN NAVIGATION
   Premium lifestyle/wellness design
   - Rectangular button with subtle rounded corners
   - Header transparent: primary color background, white text
   - Header solid: white background, primary color text with border
   - Smooth transitions, no shadows or scale effects
   ======================================================================== */

/* Desktop: Position the "Work with me" menu item at far right */
.main-header-menu .menu-item-work-with-me {
	margin-left: auto;
}

/* -------------------------------------------------------------------------
   DEFAULT STATE (Solid/Scrolled Header)
   Background: transparent • Text: inherit • Border: 1px outline
   ------------------------------------------------------------------------- */

.main-header-menu .menu-item-work-with-me .menu-work-with-me-link {
	/* Layout */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 3px 12px !important;
	margin: 12px 0 !important;
	
	/* Shape */
	border-radius: 12px !important;
	
	/* Colors - DEFAULT (solid header) - OUTLINE STYLE */
	background: transparent !important;
	color: inherit !important;
	border: 1px solid currentColor !important;
	
	/* Typography */
	font-family: var(--mbn-font-body) !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	line-height: 1 !important;
	letter-spacing: 0.01em !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	
	/* Transition */
	transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
	
	/* Remove default link styles */
	box-shadow: none !important;
	transform: none !important;
}

/* Hover state (solid header) */
.main-header-menu .menu-item-work-with-me .menu-work-with-me-link:hover,
.main-header-menu .menu-item-work-with-me .menu-work-with-me-link:focus-visible {
	opacity: 0.8 !important;
	border-bottom-color: transparent !important;
}

/* -------------------------------------------------------------------------
   TRANSPARENT HEADER STATE (Homepage at top)
   Background: primary color • Text: white • No border
   ------------------------------------------------------------------------- */

body.home .site-header:not(.ast-header-sticked):not(.is-scrolled) .menu-item-work-with-me .menu-work-with-me-link {
	background: #c3c6b5 !important;
	color: #ffffff !important;
	border: 1px solid #c3c6b5 !important;
}

body.home .site-header:not(.ast-header-sticked):not(.is-scrolled) .menu-item-work-with-me .menu-work-with-me-link:hover,
body.home .site-header:not(.ast-header-sticked):not(.is-scrolled) .menu-item-work-with-me .menu-work-with-me-link:focus-visible {
	opacity: 0.88 !important;
}

/* -------------------------------------------------------------------------
   MOBILE MENU (Burger Menu)
   Full-width button, below other menu items
   ------------------------------------------------------------------------- */

@media (max-width: 921px) {
	/* (Reset) Do NOT hide Astra native mobile header/off-canvas. */

	/* Position menu item */
	.ast-mobile-menu-buttons .menu-item-work-with-me,
	.ast-mobile-popup-drawer .menu-item-work-with-me,
	.ast-mobile-popup-content .menu-item-work-with-me,
	.main-navigation .menu-item-work-with-me {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		margin: 1.5rem 0 0 0 !important;
		padding: 0 1rem !important;
	}

	/* Button styling */
	.ast-mobile-menu-buttons .menu-item-work-with-me .menu-work-with-me-link,
	.ast-mobile-popup-drawer .menu-item-work-with-me .menu-work-with-me-link,
	.ast-mobile-popup-content .menu-item-work-with-me .menu-work-with-me-link,
	.main-navigation .menu-item-work-with-me .menu-work-with-me-link {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		
		/* Shape */
		border-radius: 12px !important;
		padding: 8px 16px !important;
		
		/* Colors (mobile uses primary color - filled style) */
		background: #c3c6b5 !important;
		color: #ffffff !important;
		border: 1px solid #c3c6b5 !important;
		
		/* Typography */
		font-family: var(--mbn-font-body) !important;
		font-weight: 500 !important;
		font-size: 1rem !important;
		line-height: 1 !important;
		letter-spacing: 0.01em !important;
		text-decoration: none !important;
		white-space: nowrap !important;
		
		/* Transition */
		transition: opacity 0.25s ease !important;
		
		/* Remove default effects */
		box-shadow: none !important;
		transform: none !important;
	}

	/* Hover state (mobile) */
	.ast-mobile-menu-buttons .menu-item-work-with-me .menu-work-with-me-link:hover,
	.ast-mobile-popup-drawer .menu-item-work-with-me .menu-work-with-me-link:hover,
	.ast-mobile-popup-content .menu-item-work-with-me .menu-work-with-me-link:hover,
	.main-navigation .menu-item-work-with-me .menu-work-with-me-link:hover {
		opacity: 0.88 !important;
	}

	/* Ensure the button appears below other menu items */
	.main-navigation .main-header-menu,
	.ast-mobile-popup-content .main-header-menu {
		display: flex !important;
		flex-direction: column !important;
	}
}

/* ========================================================================
   END OF "WORK WITH ME" BUTTON STYLING
   ======================================================================== */

/* ========================================================================
   HEADER NAVIGATION LINKS - HOVER & ACTIVE STATES
   - Hover: text turns dark brown
   - Active/current page: text is dark brown
   - Excludes "Work with me" button
   - Header navigation only
   ======================================================================== */

/* Base transition for all header navigation links */
.main-header-menu a:not(.menu-work-with-me-link) {
	transition: color 0.2s ease !important;
}

/* Hover state: dark brown text, no underline */
.main-header-menu a:not(.menu-work-with-me-link):hover,
.main-header-menu a:not(.menu-work-with-me-link):focus-visible {
	color: #4a3f35 !important;
	text-decoration: none !important;
	border-bottom-color: transparent !important;
	background: none !important;
}

/* Active/current page state: dark brown text */
.main-header-menu .current-menu-item > a:not(.menu-work-with-me-link),
.main-header-menu .current_page_item > a:not(.menu-work-with-me-link),
.main-header-menu .current-menu-ancestor > a:not(.menu-work-with-me-link) {
	color: #4a3f35 !important;
	text-decoration: none !important;
	border-bottom-color: transparent !important;
}

/* Ensure hover works on current page items too */
.main-header-menu .current-menu-item > a:not(.menu-work-with-me-link):hover,
.main-header-menu .current_page_item > a:not(.menu-work-with-me-link):hover,
.main-header-menu .current-menu-ancestor > a:not(.menu-work-with-me-link):hover {
	color: #4a3f35 !important;
}

/* ========================================================================
   END OF HEADER NAVIGATION LINKS STYLING
   ======================================================================== */

/* ============================================
   PAGE CONTACT (ID 165) - Hero Image & Form
   Scope: .page-id-165 ONLY
   DOM: Astra structure with .site-content > .ast-container > .entry-content
   ============================================ */

/* -------------------------------------------------------------------------
   1️⃣ REMOVE ASTRA TOP SPACING - Page 165 only
   Force content to touch the header
   ------------------------------------------------------------------------- */

.page-id-165 #content,
.page-id-165 .site-content,
.page-id-165 .site-content .ast-container,
.page-id-165 .ast-container,
.page-id-165 .entry-content,
.page-id-165 .site-main,
.page-id-165 article,
.page-id-165 .entry-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove any Astra spacing utilities on page 165 */
.page-id-165 .ast-separate-container .site-content > .ast-container,
.page-id-165 .ast-separate-container .site-content,
.page-id-165 .ast-plain-container .site-content,
.page-id-165 .ast-page-builder-template .site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* -------------------------------------------------------------------------
   2️⃣ HERO IMAGE - First image block in entry-content
   Full-width, edge-to-edge, attached to header
   ------------------------------------------------------------------------- */

.page-id-165 .entry-content > .wp-block-image:first-child,
.page-id-165 .entry-content > figure.wp-block-image:first-child {
  /* Break out of Astra containers - full bleed */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  
  /* FORCE zero top spacing */
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: clamp(40px, 6vw, 60px) !important;
  
  /* Remove borders/radius */
  border-radius: 0 !important;
  padding: 0 !important;
  
  /* Height control */
  height: 300px;
  overflow: hidden;
  
  /* Ensure proper layout */
  display: block;
  position: relative;
  
  /* Ensure no box-sizing issues */
  box-sizing: border-box;
}

.page-id-165 .entry-content > .wp-block-image:first-child img,
.page-id-165 .entry-content > figure.wp-block-image:first-child img {
  width: 100% !important;
  height: 300px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
}

/* If image has a caption (title), center it over the image */
.page-id-165 .entry-content > .wp-block-image:first-child figcaption,
.page-id-165 .entry-content > figure.wp-block-image:first-child figcaption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: var(--mbn-font-heading);
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Mobile: reduce hero height */
@media (max-width: 768px) {
  .page-id-165 .entry-content > .wp-block-image:first-child,
  .page-id-165 .entry-content > figure.wp-block-image:first-child {
    height: 160px;
  }
  
  .page-id-165 .entry-content > .wp-block-image:first-child img,
  .page-id-165 .entry-content > figure.wp-block-image:first-child img {
    height: 160px !important;
  }
  
  .page-id-165 .entry-content > .wp-block-image:first-child figcaption,
  .page-id-165 .entry-content > figure.wp-block-image:first-child figcaption {
    font-size: 1.8rem;
  }
}

/* -------------------------------------------------------------------------
   2️⃣ CONTACT LAYOUT - Columns block (text left, form right)
   ------------------------------------------------------------------------- */

.page-id-165 .entry-content .wp-block-columns {
  max-width: 1200px;
  margin: clamp(40px, 6vw, 60px) auto;
  padding: 0 clamp(16px, 3vw, 40px);
  gap: clamp(24px, 4vw, 48px);
}

.page-id-165 .entry-content .wp-block-column {
  padding: 0;
}

/* Text column styling */
.page-id-165 .entry-content .wp-block-column p {
  line-height: 1.8;
  color: var(--mbn-text-secondary);
  margin-bottom: 1.2em;
}

/* Mobile: stack columns */
@media (max-width: 768px) {
  .page-id-165 .entry-content .wp-block-columns {
    flex-direction: column;
    padding: 0 16px;
  }
}

/* -------------------------------------------------------------------------
   3️⃣ CONTACT FORM - Minimal editorial design (line-based)
   ------------------------------------------------------------------------- */

.page-id-165 .entry-content form,
.page-id-165 .entry-content .wpcf7,
.page-id-165 .entry-content .wpcf7-form,
.page-id-165 .entry-content .gform_wrapper {
  background: transparent;
  padding: clamp(24px, 4vw, 32px) 0;
  border-radius: 0;
  box-shadow: none;
  max-width: 600px;
  margin: 0 auto;
}

/* Form labels - minimal, uppercase, muted */
.page-id-165 .entry-content form label,
.page-id-165 .entry-content .wpcf7 label,
.page-id-165 .entry-content .gform_wrapper label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mbn-text-secondary);
  margin-bottom: 10px;
  font-family: var(--mbn-font-body);
}

/* Required asterisk - subtle */
.page-id-165 .entry-content form label .required,
.page-id-165 .entry-content .wpcf7 label .wpcf7-form-control-wrap abbr,
.page-id-165 .entry-content form label abbr {
  color: var(--mbn-text-secondary);
  opacity: 0.6;
  text-decoration: none;
}

/* Form inputs & textarea - flat design, border-bottom only */
.page-id-165 .entry-content form input[type="text"],
.page-id-165 .entry-content form input[type="email"],
.page-id-165 .entry-content form input[type="tel"],
.page-id-165 .entry-content form input[type="url"],
.page-id-165 .entry-content form textarea,
.page-id-165 .entry-content .wpcf7 input[type="text"],
.page-id-165 .entry-content .wpcf7 input[type="email"],
.page-id-165 .entry-content .wpcf7 input[type="tel"],
.page-id-165 .entry-content .wpcf7 input[type="url"],
.page-id-165 .entry-content .wpcf7 textarea,
.page-id-165 .entry-content .gform_wrapper input[type="text"],
.page-id-165 .entry-content .gform_wrapper input[type="email"],
.page-id-165 .entry-content .gform_wrapper input[type="tel"],
.page-id-165 .entry-content .gform_wrapper textarea {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid rgba(74, 63, 53, 0.25);
  border-radius: 0;
  font-family: var(--mbn-font-body);
  font-size: 1rem;
  color: var(--mbn-text-primary);
  background: transparent;
  transition: border-color 250ms ease;
  margin-bottom: var(--mbn-space-5);
  box-sizing: border-box;
  box-shadow: none;
}

/* Focus state - mint green border-bottom, no outline */
.page-id-165 .entry-content form input[type="text"]:focus,
.page-id-165 .entry-content form input[type="email"]:focus,
.page-id-165 .entry-content form input[type="tel"]:focus,
.page-id-165 .entry-content form input[type="url"]:focus,
.page-id-165 .entry-content form textarea:focus,
.page-id-165 .entry-content .wpcf7 input:focus,
.page-id-165 .entry-content .wpcf7 textarea:focus,
.page-id-165 .entry-content .gform_wrapper input:focus,
.page-id-165 .entry-content .gform_wrapper textarea:focus {
  outline: none;
  border-bottom-color: #a8d5c3;
  box-shadow: none;
}

/* Textarea specific - MUST match inputs exactly */
.page-id-165 .entry-content form textarea,
.page-id-165 .entry-content .wpcf7 textarea,
.page-id-165 .entry-content .gform_wrapper textarea {
  min-height: 120px;
  resize: vertical;
  padding-top: 12px;
  /* Force same style as inputs - no box */
  border: none !important;
  border-bottom: 1px solid rgba(74, 63, 53, 0.25) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Submit button - Dark brown, full width, editorial */
.page-id-165 .entry-content form input[type="submit"],
.page-id-165 .entry-content form button[type="submit"],
.page-id-165 .entry-content .wpcf7 input[type="submit"],
.page-id-165 .entry-content .wpcf7 button[type="submit"],
.page-id-165 .entry-content .gform_wrapper input[type="submit"],
.page-id-165 .entry-content .gform_wrapper button[type="submit"],
.page-id-165 .entry-content .wp-block-button__link {
  width: 100%;
  padding: 14px 32px;
  background: var(--mbn-text-primary);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: var(--mbn-font-body);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms ease, transform 160ms ease;
  text-transform: none;
  letter-spacing: 0.02em;
  box-shadow: none;
  text-decoration: none;
  display: block;
  text-align: center;
  margin-top: var(--mbn-space-4);
}

/* Button hover - darker brown with subtle lift */
.page-id-165 .entry-content form input[type="submit"]:hover,
.page-id-165 .entry-content form button[type="submit"]:hover,
.page-id-165 .entry-content .wpcf7 input[type="submit"]:hover,
.page-id-165 .entry-content .wpcf7 button[type="submit"]:hover,
.page-id-165 .entry-content .gform_wrapper input[type="submit"]:hover,
.page-id-165 .entry-content .gform_wrapper button[type="submit"]:hover,
.page-id-165 .entry-content .wp-block-button__link:hover {
  background: #3a322b;
  transform: translateY(-1px);
}

/* Button active state */
.page-id-165 .entry-content form input[type="submit"]:active,
.page-id-165 .entry-content form button[type="submit"]:active,
.page-id-165 .entry-content .wpcf7 input[type="submit"]:active,
.page-id-165 .entry-content .wpcf7 button[type="submit"]:active {
  transform: translateY(0);
}

/* Remove Contact Form 7 default styles */
.page-id-165 .entry-content .wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 0;
}

.page-id-165 .entry-content .wpcf7 .wpcf7-not-valid-tip {
  font-size: 0.8rem;
  color: #d9534f;
  margin-top: 6px;
  font-style: italic;
}

/* -------------------------------------------------------------------------
   FIRST NAME + LAST NAME — FORCE SAME ROW ON DESKTOP (MANDATORY)
   Note: Fields are separate blocks with NO shared parent
   ------------------------------------------------------------------------- */

/* Target FIRST field wrapper (First Name) - force inline-block with 50% width */
.page-id-165 .entry-content .wpcf7-form > p:nth-child(1),
.page-id-165 .entry-content .wpcf7 form > p:nth-child(1),
.page-id-165 .entry-content form > p:nth-child(1) {
  display: inline-block !important;
  width: calc(50% - 16px) !important;
  vertical-align: top !important;
  margin-right: 32px !important;
  margin-bottom: var(--mbn-space-5) !important;
}

/* Target SECOND field wrapper (Last Name) - force inline-block with 50% width */
.page-id-165 .entry-content .wpcf7-form > p:nth-child(2),
.page-id-165 .entry-content .wpcf7 form > p:nth-child(2),
.page-id-165 .entry-content form > p:nth-child(2) {
  display: inline-block !important;
  width: calc(50% - 16px) !important;
  vertical-align: top !important;
  margin-right: 0 !important;
  margin-bottom: var(--mbn-space-5) !important;
}

/* Ensure all other field wrappers (Email, Subject, Message, etc.) remain full width */
.page-id-165 .entry-content .wpcf7-form > p:nth-child(n+3),
.page-id-165 .entry-content .wpcf7 form > p:nth-child(n+3),
.page-id-165 .entry-content form > p:nth-child(n+3) {
  display: block !important;
  width: 100% !important;
  margin-right: 0 !important;
}

/* -------------------------------------------------------------------------
   MOBILE: STACK ALL FIELDS VERTICALLY (<768px)
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .page-id-165 .entry-content form,
  .page-id-165 .entry-content .wpcf7,
  .page-id-165 .entry-content .wpcf7-form,
  .page-id-165 .entry-content .gform_wrapper {
    padding: 16px 0;
  }
  
  /* Reset First Name and Last Name to full width and stack vertically */
  .page-id-165 .entry-content .wpcf7-form > p:nth-child(1),
  .page-id-165 .entry-content .wpcf7 form > p:nth-child(1),
  .page-id-165 .entry-content form > p:nth-child(1),
  .page-id-165 .entry-content .wpcf7-form > p:nth-child(2),
  .page-id-165 .entry-content .wpcf7 form > p:nth-child(2),
  .page-id-165 .entry-content form > p:nth-child(2) {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
  }
  
  /* Button remains full width (already set above) */
  .page-id-165 .entry-content form input[type="submit"],
  .page-id-165 .entry-content form button[type="submit"],
  .page-id-165 .entry-content .wpcf7 input[type="submit"],
  .page-id-165 .entry-content .wpcf7 button[type="submit"],
  .page-id-165 .entry-content .gform_wrapper input[type="submit"],
  .page-id-165 .entry-content .gform_wrapper button[type="submit"],
  .page-id-165 .entry-content .wp-block-button__link {
    width: 100%;
  }
}

/* =========================================================================
   HEADER: Apply mint green background to ALL pages except homepage
   - Homepage (.home) keeps its existing transparent → solid scroll behavior
   - All other pages use the same mint green (#c3c6b5) as scrolled home header
   ========================================================================= */

/* Apply mint green header background to all non-home pages */
body:not(.home):not(.front-page) .site-header,
body:not(.home):not(.front-page) .site-header .main-header-bar,
body:not(.home):not(.front-page) .site-header .ast-primary-header-bar,
body:not(.home):not(.front-page) .site-header .ast-main-header-bar-alignment {
	background-color: #c3c6b5 !important;
	border-bottom: 0;
}

/* Add subtle shadow to non-home page headers */
body:not(.home):not(.front-page) .site-header {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Ensure menu links are dark on non-home pages (matching scrolled home state) */
body:not(.home):not(.front-page) .site-header .main-header-menu a {
	color: #4a3f35;
}

/* Ensure logo/site title is dark on non-home pages */
body:not(.home):not(.front-page) .site-header .site-title a,
body:not(.home):not(.front-page) .site-header .site-description {
	color: #4a3f35;
}

/* Ensure logo image is visible (not inverted) on non-home pages */
body:not(.home):not(.front-page) .site-header .custom-logo-link img {
	filter: none;
}

/* =========================================================================
   BLOG: Minimal, Editorial, Calm Design
   - Blog index (archive.php): Clean grid of posts
   - Single post (single.php): Premium reading experience
   - Uses existing design system (colors, fonts, spacing)
   - No sidebar, plenty of white space
   ========================================================================= */

/* -------------------------------------------------------------------------
   BLOG (legacy archive styling)
   ------------------------------------------------------------------------- */

/* (Removed) We now render Blog and Category archives with dedicated templates/classes:
 * - `home.php` (categories only)
 * - `category.php` (posts grid like Recipes)
 * This avoids squeezing Astra’s internal wrappers.
 */

/* -------------------------------------------------------------------------
   BLOG CATEGORY ARCHIVE (category.php) — SAME GRID AS RECIPES
   ------------------------------------------------------------------------- */

.mbn-blog-category-archive .site-main {
	padding-top: clamp(40px, 8vw, 80px);
	padding-bottom: clamp(40px, 8vw, 80px);
}

.mbn-blog-category-archive .mbn-back-to-blog {
	font-size: 0.95rem;
	color: var(--mbn-text-secondary);
	text-decoration: none;
	border-bottom: 1px solid rgba(74, 63, 53, 0.3);
}

.mbn-blog-category-archive .mbn-blog-post-grid {
	--mbn-recipe-col-gap: clamp(16px, 2.2vw, 28px);
	--mbn-recipe-row-gap: clamp(28px, 3.6vw, 56px);

	list-style: none;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 56px);
	max-width: 1400px;

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--mbn-recipe-col-gap);
	row-gap: var(--mbn-recipe-row-gap);
}

@media (max-width: 1024px) {
	.mbn-blog-category-archive .mbn-blog-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.mbn-blog-category-archive .mbn-blog-post-grid {
		grid-template-columns: 1fr;
	}
}

.mbn-blog-category-archive .mbn-blog-post-card {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	text-align: center;
}

.mbn-blog-category-archive .mbn-blog-post-image {
	display: block;
	line-height: 0;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 12px 28px rgba(74, 63, 53, 0.12);
	background: transparent !important;
}

.mbn-blog-category-archive .mbn-blog-post-image img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	display: block;
}

@media (max-width: 640px) {
	.mbn-blog-category-archive .mbn-blog-post-image img {
		height: 260px;
	}
}

.mbn-blog-category-archive .mbn-blog-post-title {
	margin: 0;
	text-align: center;
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	line-height: 1.3;
	writing-mode: horizontal-tb;
	text-orientation: mixed;
	background: transparent !important;
}

.mbn-blog-category-archive .mbn-blog-post-title a {
	color: var(--mbn-text-primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	display: block;
	/* Show full titles: allow wrapping instead of ellipsis */
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
	background: transparent !important;
}

/* Hard override: Astra sometimes applies a white “card” background on `.post` */
.mbn-blog-category-archive :is(li.mbn-blog-post-card, li.mbn-blog-post-card.post, li.post.mbn-blog-post-card) {
	background: transparent !important;
}

.mbn-blog-category-archive .mbn-blog-pagination {
	max-width: 1400px;
	margin: clamp(40px, 6vw, 64px) auto 0;
	padding: 0 clamp(16px, 4vw, 56px);
	text-align: center;
}

/* -------------------------------------------------------------------------
   SINGLE POST - Premium Reading Experience
   ------------------------------------------------------------------------- */

/* Single post container */
.single-post .site-main {
	padding-top: clamp(40px, 6vw, 60px);
	padding-bottom: clamp(60px, 10vw, 120px);
}

/* Article container */
.single-post article.post {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 32px);
}

/* Featured image at top */
.single-post .ast-blog-featured-section,
.single-post .post-thumb {
	margin: 0 0 var(--mbn-space-6);
	border-radius: var(--mbn-radius);
	overflow: hidden;
}

.single-post .ast-blog-featured-section img,
.single-post .post-thumb img {
	width: 100%;
	height: auto;
	max-height: 500px;
	object-fit: cover;
	display: block;
}

/* Post header */
.single-post .entry-header {
	text-align: center;
	margin-bottom: var(--mbn-space-6);
}

/* Post title */
.single-post .entry-title {
	font-family: var(--mbn-font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--mbn-text-primary);
	margin: 0 0 var(--mbn-space-4);
}

/* Post meta */
.single-post .entry-meta {
	font-size: 0.95rem;
	color: var(--mbn-text-secondary);
	opacity: 0.8;
	letter-spacing: 0.01em;
}

.single-post .entry-meta a {
	color: var(--mbn-text-secondary);
	border: none;
	text-decoration: none;
}

/* Post content */
.single-post .entry-content {
	max-width: 680px;
	margin: 0 auto;
	font-size: 1.1rem;
	line-height: 1.8;
	color: var(--mbn-text-secondary);
}

.single-post .entry-content p {
	margin-bottom: var(--mbn-space-5);
	color: var(--mbn-text-secondary);
}

.single-post .entry-content h2 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.6rem, 2.5vw, 2rem);
	margin-top: var(--mbn-space-6);
	margin-bottom: var(--mbn-space-4);
	color: var(--mbn-text-primary);
}

.single-post .entry-content h3 {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.3rem, 2vw, 1.5rem);
	margin-top: var(--mbn-space-5);
	margin-bottom: var(--mbn-space-3);
	color: var(--mbn-text-primary);
}

/* Images in content */
.single-post .entry-content img {
	border-radius: var(--mbn-radius);
	margin: var(--mbn-space-6) 0;
}

/* Blockquotes */
.single-post .entry-content blockquote {
	border-left: 3px solid var(--mbn-text-primary);
	padding-left: var(--mbn-space-5);
	margin: var(--mbn-space-6) 0;
	font-style: italic;
	color: var(--mbn-text-primary);
	font-size: 1.15rem;
}

/* Lists */
.single-post .entry-content ul,
.single-post .entry-content ol {
	margin: var(--mbn-space-5) 0;
	padding-left: var(--mbn-space-5);
}

.single-post .entry-content li {
	margin-bottom: var(--mbn-space-2);
}

/* Post footer (tags, categories) */
.single-post .entry-footer {
	max-width: 680px;
	margin: var(--mbn-space-6) auto 0;
	padding-top: var(--mbn-space-5);
	border-top: 1px solid rgba(74, 63, 53, 0.15);
	font-size: 0.95rem;
	color: var(--mbn-text-secondary);
}

/* Hide comments (unless enabled) */
.single-post .comments-area {
	max-width: 680px;
	margin: var(--mbn-space-6) auto 0;
	display: none; /* Hidden by default as per requirements */
}

/* Hide author box (unless already present) */
.single-post .author-info {
	display: none;
}

/* -------------------------------------------------------------------------
   RESPONSIVE: Mobile Adjustments
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Blog posts: Already handled in grid */
}

@media (max-width: 768px) {
	/* Blog posts: Already handled in grid */
	
	/* Single post: Adjust spacing */
	.single-post .site-main {
		padding-top: clamp(24px, 5vw, 40px);
		padding-bottom: clamp(40px, 8vw, 80px);
	}
	
	.single-post .entry-content {
		font-size: 1.05rem;
		line-height: 1.75;
	}
}

/* -------------------------------------------------------------------------
   PAGINATION: Clean, minimal style
   ------------------------------------------------------------------------- */

.blog .ast-pagination,
.archive .ast-pagination {
	max-width: 1200px;
	margin: clamp(40px, 6vw, 64px) auto 0;
	padding: 0 clamp(16px, 4vw, 56px);
	text-align: center;
}

.blog .page-numbers,
.archive .page-numbers {
	display: inline-block;
	padding: 0.5rem 1rem;
	margin: 0 0.25rem;
	background: var(--mbn-bg-soft);
	color: var(--mbn-text-primary);
	border: 1px solid rgba(74, 63, 53, 0.2);
	border-radius: 8px;
	text-decoration: none;
	transition: all 180ms ease;
}

.blog .page-numbers:hover,
.archive .page-numbers:hover,
.blog .page-numbers.current,
.archive .page-numbers.current {
	background: var(--mbn-text-primary);
	color: var(--mbn-bg-soft);
	border-color: var(--mbn-text-primary);
}

/* =========================================================================
   BLOG WITH CATEGORIES PAGE - Visual Category Blocks
   Template: template-blog-with-categories.php
   ========================================================================= */

/* -------------------------------------------------------------------------
   Blog page container
   ------------------------------------------------------------------------- */

.blog-with-categories-page .site-main {
	padding-top: clamp(40px, 8vw, 80px);
	padding-bottom: clamp(60px, 10vw, 120px);
	max-width: 1400px;
	margin: 0 auto;
	padding-left: clamp(16px, 4vw, 56px);
	padding-right: clamp(16px, 4vw, 56px);
}

/* -------------------------------------------------------------------------
   Categories Section
   ------------------------------------------------------------------------- */

.blog-categories-section {
	margin-bottom: clamp(60px, 10vw, 100px);
}

.blog-categories-title {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	color: var(--mbn-text-primary);
	text-align: center;
	margin: 0 0 var(--mbn-space-6);
	letter-spacing: -0.01em;
}

/* Categories grid - SAME AS RECIPES */
.blog-categories-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(16px, 2.2vw, 28px);
	row-gap: clamp(28px, 3.6vw, 56px);
	margin: 0 auto;
	max-width: 1400px;
	width: 100%;
	padding: 0;
}

@media (max-width: 1024px) {
	.blog-categories-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile: 2 per row as requested */
@media (max-width: 640px) {
	.blog-categories-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 14px;
		row-gap: 18px;
	}
}

/* Category card - SAME STRUCTURE AS RECIPE CARD */
.category-card {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-decoration: none;
	background: transparent;
	border: none;
	padding: 0;
	transition: transform 240ms ease;
}

.category-card:hover {
	transform: none;
}

.category-card__inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(18px, 2.2vw, 28px);
	min-height: 100px;
	border-radius: 14px;
	background: var(--mbn-bg-primary);
	border: 1px solid rgba(74, 63, 53, 0.18);
	box-shadow: 0 10px 28px rgba(74, 63, 53, 0.14);
	transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

/* Category visual block - SAME AS RECIPE IMAGE */
.category-card__visual {
	display: none; /* We want uniform blocks, not image-style cards */
}

.category-card__image {
	display: none;
}

.category-card:hover .category-card__inner {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(74, 63, 53, 0.18);
	border-color: rgba(74, 63, 53, 0.26);
}

@media (max-width: 640px) {
	.category-card__inner {
		min-height: 80px;
		padding: 16px 14px;
	}
}

.category-card__name {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	color: var(--mbn-text-primary);
	margin: 0;
	line-height: 1.3;
	letter-spacing: -0.01em;
	font-weight: 500;
	text-align: center;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.category-card__description {
	display: none; /* Hide description to match recipe cards */
}

.category-card__count {
	font-size: 0.875rem;
	color: var(--mbn-text-secondary);
	opacity: 0.7;
	text-align: center;
	margin: 0;
}

/* -------------------------------------------------------------------------
   Recent Posts Section
   ------------------------------------------------------------------------- */

.blog-recent-posts-section {
	margin-top: clamp(60px, 10vw, 100px);
}

.blog-recent-posts-title {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	color: var(--mbn-text-primary);
	text-align: center;
	margin: 0 0 var(--mbn-space-6);
	letter-spacing: -0.01em;
}

/* Recent posts grid */
.blog-recent-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: clamp(32px, 5vw, 48px);
	margin: 0 auto;
	max-width: 1200px;
}

/* Recent post card */
.recent-post-card {
	background: var(--mbn-bg-soft);
	border-radius: var(--mbn-radius);
	overflow: hidden;
	transition: transform 240ms ease, box-shadow 240ms ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
}

.recent-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.recent-post-card .post-thumb {
	margin: 0;
	overflow: hidden;
}

.recent-post-card .post-thumb img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
	transition: transform 340ms ease;
}

.recent-post-card:hover .post-thumb img {
	transform: scale(1.05);
}

.recent-post-card .post-content {
	padding: var(--mbn-space-5);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.recent-post-card .entry-title {
	font-family: var(--mbn-font-heading);
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	line-height: 1.3;
	margin: 0 0 var(--mbn-space-3);
	letter-spacing: -0.01em;
}

.recent-post-card .entry-title a {
	color: var(--mbn-text-primary);
	border: none;
	text-decoration: none;
	transition: color 180ms ease;
}

.recent-post-card .entry-title a:hover {
	color: var(--mbn-text-secondary);
}

.recent-post-card .entry-summary {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--mbn-text-secondary);
	margin: 0 0 var(--mbn-space-4);
	flex-grow: 1;
}

.recent-post-card .entry-meta {
	font-size: 0.875rem;
	color: var(--mbn-text-secondary);
	opacity: 0.7;
	margin-top: auto;
	padding-top: var(--mbn-space-3);
	border-top: 1px solid rgba(74, 63, 53, 0.1);
}

.recent-post-card .entry-meta a {
	color: var(--mbn-text-secondary);
	border: none;
	text-decoration: none;
}

/* View all posts link */
.blog-view-all {
	text-align: center;
	margin-top: clamp(40px, 6vw, 60px);
}

.view-all-posts-link {
	display: inline-block;
	font-family: var(--mbn-font-body);
	font-size: 1rem;
	font-weight: 500;
	color: var(--mbn-text-primary);
	padding: 0.85rem 1.75rem;
	border: 1px solid var(--mbn-text-primary);
	border-radius: 999px;
	text-decoration: none;
	transition: all 180ms ease;
	letter-spacing: 0.01em;
}

.view-all-posts-link:hover {
	background: rgba(74, 63, 53, 0.08);
	border-color: var(--mbn-text-primary);
}

/* -------------------------------------------------------------------------
   RESPONSIVE: Mobile Adjustments
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* Categories: No changes needed, already responsive */
	
	/* Recent posts: Single column on mobile */
	.blog-recent-posts-grid {
		grid-template-columns: 1fr;
		gap: clamp(24px, 6vw, 40px);
	}
	
	.recent-post-card .post-thumb img {
		height: 220px;
	}

	/* =====================================================================
	   MOBILE ONLY (<= 768px): HEADER BACKGROUND COLOR (MANDATORY)
	   Goal:
	   - Always use the primary brand color in the header background on mobile
	   - Never white, never transparent (before scroll / after scroll / on load)
	   - Must NOT affect desktop
	   Notes:
	   - Home page header is transparent on desktop; we override ONLY on mobile.
	   ===================================================================== */

	#masthead,
	#masthead.site-header,
	body .site-header,
	body .site-header.ast-header-sticked,
	body .site-header.is-scrolled,
	body .site-header .main-header-bar,
	body .site-header .ast-primary-header-bar,
	body .site-header .ast-main-header-bar-alignment {
		background-color: var(--color-primary) !important;
		background-image: none !important;
	}

	/* Keep header text readable on the brand background (mobile only) */
	body .site-header .main-header-menu a,
	body .site-header .site-title a,
	body .site-header .site-description {
		color: var(--mbn-text-primary) !important;
	}

	/* Hamburger / toggle button (Astra native) — ensure visibility + clickability on colored header */
	body.ast-header-break-point .ast-button-wrap,
	body.ast-header-break-point .main-header-menu-toggle {
		position: relative;
		z-index: 1000001;
	}

	/* Keep the toggle button "premium": no pill/button background from global styles */
	body.ast-header-break-point .ast-button-wrap button.menu-toggle.main-header-menu-toggle {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	body.ast-header-break-point .main-header-menu-toggle,
	body.ast-header-break-point .main-header-menu-toggle .mobile-menu-toggle-icon,
	body.ast-header-break-point .main-header-menu-toggle .ahfb-svg-iconset,
	body.ast-header-break-point .main-header-menu-toggle .ast-mobile-svg {
		color: var(--mbn-text-primary) !important; /* SVG uses currentColor */
	}

	/* Force the SVG to actually render (some overrides can accidentally hide it) */
	body.ast-header-break-point .main-header-menu-toggle .ast-mobile-svg,
	body.ast-header-break-point .main-header-menu-toggle .ahfb-svg-iconset svg {
		visibility: visible !important;
		opacity: 1 !important;
	}

	body.ast-header-break-point .main-header-menu-toggle .ast-mobile-svg {
		fill: currentColor !important;
	}

	/* Make sure the toggle remains tappable even when the modal overlay is open */
	body.ast-header-break-point.ast-main-header-nav-open .main-header-menu-toggle {
		z-index: 1000002;
	}
}

@media (max-width: 921px) {
	/* === MOBILE HEADER SPACING FIX === */

	/* Target the real Astra mobile header container (Header Builder, not deprecated popup). */
	#masthead > #ast-mobile-header .main-header-bar {
		padding-left: 22px;
		padding-right: 22px;
		min-height: 64px;
	}

	/* Make the header row a clean left/right flex layout. */
	#masthead > #ast-mobile-header .main-header-bar .ast-builder-grid-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px; /* airy separation between title and burger */
		width: 100%;
	}

	/* Left / Right zones: stable flex sizing (no "auto margins"). */
	#masthead > #ast-mobile-header .main-header-bar .site-header-section-left {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex: 1 1 auto;
		min-width: 0; /* allow title to truncate/wrap naturally without pushing burger */
	}

	#masthead > #ast-mobile-header .main-header-bar .site-header-section-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 0 0 auto;
	}

	/* Ensure title/branding stays visually left-aligned on mobile. */
	#masthead > #ast-mobile-header .site-branding,
	#masthead > #ast-mobile-header .ast-site-identity,
	#masthead > #ast-mobile-header .site-title,
	#masthead > #ast-mobile-header .site-title a {
		text-align: left;
		margin: 0;
	}

	/* Ensure the burger button hugs the far right edge of the row. */
	#masthead > #ast-mobile-header .ast-mobile-menu-buttons {
		display: flex;
		justify-content: flex-end;
	}
}

/* ===== Mobile Menu Modal (DESIGN ONLY) — Premium open + centering (mobile only) ===== */
@media (max-width: 921px) {

	/* Fullscreen overlay backdrop */
	body.mbn-menu-open::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 998;
		animation: mbnOverlayFadeIn 0.24s ease-out both;
	}

	/* Overlay element (kept for JS compatibility) */
	.mbn-menu-overlay {
		position: fixed !important;
		inset: 0 !important;
		background: transparent !important;
		z-index: 997;
	}

	/* Centered floating menu island */
	body.mbn-menu-open #ast-desktop-header nav.site-navigation {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;

		width: calc(100% - 32px) !important;
		max-width: 360px !important;
		padding: 32px 24px !important;

		background: #4b3f36 !important;
		border-radius: 22px !important;

		z-index: 999 !important;

		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 28px !important;

		opacity: 1 !important;
		animation: mbnMenuPopIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	/* Menu links styling */
	body.mbn-menu-open #ast-desktop-header nav.site-navigation a {
		background: none !important;
		color: #ffffff !important;
		font-size: 18px !important;
		text-align: center !important;
	}

	/* Work with me button — fully visible */
	body.mbn-menu-open #ast-desktop-header nav.site-navigation .menu-item-work-with-me,
	body.mbn-menu-open #ast-desktop-header nav.site-navigation .menu-item.work-with-me {
		display: block !important;
		width: 100% !important;
	}

	body.mbn-menu-open #ast-desktop-header nav.site-navigation .menu-item-work-with-me a,
	body.mbn-menu-open #ast-desktop-header nav.site-navigation .ast-button,
	body.mbn-menu-open #ast-desktop-header nav.site-navigation .menu-work-with-me-link {
		display: block !important;
		width: 100% !important;
		padding: 14px 18px !important;
		border-radius: 14px !important;
		background: var(--ast-global-color-0) !important;
		color: #fff !important;
		text-align: center !important;
	}

	/* Animations */
	@keyframes mbnOverlayFadeIn {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	@keyframes mbnMenuPopIn {
		from {
			opacity: 0;
			transform: translate(-50%, -40%) scale(0.96);
		}
		to {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1);
		}
	}

	/* Reduced motion support */
	@media (prefers-reduced-motion: reduce) {
		body.mbn-menu-open::before,
		body.mbn-menu-open #ast-desktop-header nav.site-navigation {
			animation: none !important;
		}
	}
}

/* === MOBILE HEADER FINAL SPACING (ASTRA BUILDER) === */
@media (max-width: 921px) {

  /* Main header row */
  .ast-primary-header-bar {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Left section (site title / logo) */
  .site-header-primary-section-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* Right section (burger menu) */
  .site-header-primary-section-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* Force separation */
  .site-header-primary-section-left {
    flex: 1;
  }

  .site-header-primary-section-right {
    flex: 0;
  }
}

/* ================================
   MOBILE HEADER FINAL CLEAN FIX
================================ */
@media (max-width: 921px) {

  /* HEADER BAR LAYOUT */
  .ast-primary-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 22px;
    padding-right: 22px;
  }

  /* LEFT: SITE TITLE */
  .site-header-primary-section-left {
    flex: 1;
    justify-content: flex-start;
  }

  /* RIGHT: BURGER MENU */
  .site-header-primary-section-right {
    flex: 0;
    justify-content: flex-end;
  }

  /* MENU MODAL CONTAINER */
  .mbn-menu-modal,
  .main-header-bar-navigation {
    overflow: visible;
  }

  /* WORK WITH ME BUTTON FIX */
  .main-header-bar-navigation .menu-item a.button,
  .main-header-bar-navigation .menu-item a.wp-block-button__link {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    text-align: center;
  }

  /* REMOVE ANY BORDER / OUTLINE LEFTOVER */
  .main-header-bar-navigation *,
  .ast-primary-header-bar * {
    outline: none !important;
    box-shadow: none;
  }
}

/* =========================================
   MOBILE MENU – FINAL ROBUST FIX
========================================= */
@media (max-width: 921px) {

  /* HEADER BAR – LEFT / RIGHT ALIGNMENT */
  .ast-primary-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 22px;
  }

  .site-header-primary-section-left {
    flex: 1;
    justify-content: flex-start;
  }

  .site-header-primary-section-right {
    flex: 0;
    justify-content: flex-end;
  }

  /* FORCE BURGER TO FAR RIGHT */
  .ast-header-menu-toggle {
    margin-left: auto;
  }

  /* MOBILE MENU CONTAINER – PREVENT CLIPPING */
  body.mbn-menu-open .main-header-bar-navigation {
    overflow: visible !important;
    max-height: none !important;
    padding-bottom: 32px;
  }

  /* MENU ITEMS STACK */
  body.mbn-menu-open .main-header-bar-navigation ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  /* WORK WITH ME BUTTON – FULL, VISIBLE, PREMIUM */
  body.mbn-menu-open 
  .main-header-bar-navigation 
  .menu-item a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  body.mbn-menu-open 
  .main-header-bar-navigation 
  .menu-item a.button,
  body.mbn-menu-open 
  .main-header-bar-navigation 
  .menu-item a.wp-block-button__link {
    background-color: var(--ast-global-color-0) !important;
    color: #fff !important;
    padding: 16px 24px !important;
    border-radius: 12px;
    line-height: 1.2;
    margin-top: 12px;
    margin-bottom: 8px;
  }
}

/* =========================================
   MOBILE HEADER – TRUE EDGE ALIGNMENT FIX
========================================= */
@media (max-width: 921px) {

  /* BREAK ASTRA CONTAINER CONSTRAINT */
  .ast-primary-header-bar .ast-container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* FORCE FLEX LAYOUT */
  .ast-primary-header-bar .ast-flex {
    display: flex;
    align-items: center;
  }

  /* TITLE – HARD LEFT */
  .site-header-primary-section-left {
    margin-right: auto !important;
    padding-left: 0 !important;
  }

  /* BURGER – HARD RIGHT */
  .site-header-primary-section-right {
    margin-left: auto !important;
    padding-right: 0 !important;
  }

  .ast-header-menu-toggle {
    margin-left: auto !important;
    padding-right: 0 !important;
  }
}

/* =========================================
   ASTRA MOBILE HEADER – HARD RIGHT BURGER FIX
========================================= */
@media (max-width: 921px) {

  /* Allow absolute positioning */
  .ast-primary-header-bar {
    position: relative;
  }

  /* Keep title naturally on the left */
  .site-header-primary-section-left {
    position: relative;
    z-index: 2;
  }

  /* FORCE burger to screen edge */
  .site-header-primary-section-right {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%);
    z-index: 3;
  }

  .ast-header-menu-toggle {
    padding: 0 !important;
    margin: 0 !important;
  }
}