/**
 * FoodOrd Theme compatibility styles (for non-FoodOrd themes).
 *
 * These rules aim to reproduce the FoodOrd Theme ordering-page layout
 * (background + sidebar behavior) when the FoodOrd plugin is used
 * with third-party themes.
 *
 * @package FoodOrd
 */

body.foodord-order-page {
	--background-color: #f7f7f7;
	--primary-color: #c9386f;
	--primary-hover: #b92a61;
	--text-color: #323232;
	--text-hover: #313131;
	--secondary-text: #6b6b6b;
	--button-bg: #c9386f;
	--button-text-color: #ffffff;
	--button-on-hover: #b92a61;
	--header-bg: #ffffff;
	--footer-bg: #ffffff;
	--footer-bottom-bg: #ffffff;
	--border-color: #e4e4e4;

	/* FoodOrd Sidebar Variables (theme parity) */
	--foodord-header-h: 50px;
	--foodord-footer-h: 0;
	--foodord-sidebar-w: 350px;
	--foodord-bottom-gap: 0;

	background-color: var(--background-color, #f7f7f7);
}

/* Avoid theme.json constrained layouts by marking FoodOrd wrappers as full-width blocks. */
body.foodord-order-page .foodord-mode-toggle-mobile.alignfull,
body.foodord-order-page .foodord-products-shortcode.alignfull {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

/* Desktop: create a two-column layout (products + sidebar) within the post content. */
@media (min-width: 1025px) {
	body.foodord-order-page .entry-content:has(.foodord-sidebar):has(.foodord-products-shortcode),
	body.foodord-order-page .entry-content:has(.foodord-sidebar):has(.wp-block-foodord-products),
	body.foodord-order-page .wp-block-post-content:has(.foodord-sidebar):has(.foodord-products-shortcode),
	body.foodord-order-page .wp-block-post-content:has(.foodord-sidebar):has(.wp-block-foodord-products),
	body.foodord-order-page .woocommerce:has(.foodord-sidebar):has(.foodord-products-shortcode),
	body.foodord-order-page .woocommerce:has(.foodord-sidebar):has(.wp-block-foodord-products) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--foodord-sidebar-w, 350px);
		grid-template-areas:
			'toggle sidebar'
			'nav sidebar'
			'products sidebar';
		column-gap: 24px;
		align-items: start;
	}

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

	.wp-block-post-title {
		display: none;
	}


	body.foodord-order-page .foodord-mode-toggle-mobile {
		grid-area: toggle;
	}

	body.foodord-order-page .foodord-scroll-nav {
		grid-area: nav;
		width: 100%;
	}

	body.foodord-order-page .foodord-products-shortcode,
	body.foodord-order-page .wp-block-foodord-products {
		grid-area: products;
		min-width: 0;
	}

	body.foodord-order-page .foodord-sidebar {
		grid-area: sidebar;
		justify-self: end;
	}
}

/* Sticky sidebar (theme compatibility) */
body.foodord-order-page .foodord-sidebar {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0) + 20px);
	width: var(--foodord-sidebar-w, 350px);
	max-width: 100%;
	height: min(60vh, 520px);
	overflow: auto;
	z-index: 1;
	box-sizing: border-box;
}

/* Mobile: hide the desktop sidebar */
@media (max-width: 1024px) {
	body.foodord-order-page .foodord-sidebar {
		display: none;
	}

	body.foodord-order-page .site-main,
	body.foodord-order-page main,
	body.foodord-order-page #primary,
	body.foodord-order-page .site-content,
	body.foodord-order-page #content {
		padding: 0;
		margin: 0;
	}

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

	.wp-block-post-title {
		display: none;
	}

	/* Some themes use .has-global-padding to add side padding via theme.json. Remove it for order pages. */
	body.foodord-order-page .entry-content.has-global-padding,
	body.foodord-order-page .wp-block-post-content.has-global-padding {
		padding-left: 0;
		padding-right: 0;
	}

	body.foodord-order-page .entry-content,
	body.foodord-order-page .wp-block-post-content {
		max-width: none;
		width: 100%;
		margin: 0;
	}

	/* Full-bleed: cancel theme.json/global paddings on mobile/tablet for toggle + products. */
	body.foodord-order-page .foodord-mode-toggle-mobile,
	body.foodord-order-page .foodord-products-shortcode,
	body.foodord-order-page .wp-block-foodord-products {
		max-width: none;
		margin-left: calc(0 - var(--wp--style--root--padding-left, 0));
		margin-right: calc(0 - var(--wp--style--root--padding-right, 0));
	}

	.foodord-mode-toggle-mobile {
		padding: 15px 10px 10px 10px;
	}
}