.vtm-menu {
	/*
	 * These default to `inherit`, so the menu automatically picks up
	 * whatever font color your theme/Divi already applies to this part
	 * of the page. If Divi's own Accent/Heading/Body colors are detected
	 * (see class-vtm-shortcode.php) they're set as real values here
	 * instead. To set them by hand -- e.g. to match a brand color that
	 * isn't one of Divi's three -- add this to Divi's Theme Customizer
	 * or Additional CSS with your own hex codes:
	 *
	 * .vtm-menu {
	 *   --vtm-heading-color: #16203a;
	 *   --vtm-price-color: #c0892b;
	 *   --vtm-text-color: #16203a;
	 *   --vtm-muted-color: #5b6478;
	 * }
	 */
	--vtm-heading-color: inherit;
	--vtm-price-color: inherit;
	--vtm-text-color: inherit;
	--vtm-muted-color: inherit;
	max-width: 720px;
	margin: 0 auto;
	color: var(--vtm-text-color) !important;
}

/*
 * !important throughout this file's color rules: these all exist so a
 * color set on MenuCraft > Appearance (or Divi auto-detect) reliably
 * wins over the theme's own text-color rules for the elements inside this
 * menu, no matter how specific or late-loading those theme rules are.
 * Without it, a generic theme rule like "p, span { color: ... }" can
 * silently beat our color even though the Appearance setting looks
 * correct in wp-admin.
 */

.vtm-menu-category {
	margin-bottom: 2.5em;
}

.vtm-menu-category:last-child {
	margin-bottom: 0;
}

.vtm-menu-category-title {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 1.1em;
	color: var(--vtm-heading-color) !important;
	border-bottom: 1px solid var(--vtm-heading-color);
	padding-bottom: 0.4em;
	margin-bottom: 1em;
}

.vtm-menu-item {
	margin-bottom: 1.1em;
}

.vtm-menu-item:last-child {
	margin-bottom: 0;
}

.vtm-menu-item-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5em;
}

.vtm-menu-item-name {
	font-weight: 600;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--vtm-text-color) !important;
}

.vtm-menu-item-price {
	flex: 0 0 auto;
	white-space: nowrap;
	text-align: right;
	font-weight: 600;
	color: var(--vtm-price-color) !important;
}

.vtm-menu-item-description {
	margin: 0.25em 0 0;
	font-size: 0.9em;
	color: var(--vtm-muted-color) !important;
	font-style: italic;
}

.vtm-menu-item-tags {
	margin: 0.35em 0 0;
	font-size: 0.75em;
	color: var(--vtm-muted-color) !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.vtm-menu-subcategory-title {
	font-size: 0.95em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--vtm-heading-color) !important;
	margin: 1.4em 0 0.6em;
}

.vtm-menu-subcategory-title:first-child {
	margin-top: 0;
}

.vtm-menu-subcategory-description {
	margin: -0.3em 0 1em;
	font-size: 0.9em;
	color: var(--vtm-muted-color) !important;
	font-style: italic;
}

/*
 * A dish with linked options (set via Parent ID on import, or "Belongs to"
 * in the Menu Editor): the dish's own name/price/description above print
 * exactly as any other item does (nothing here overrides .vtm-menu-item-*),
 * and its options list print as smaller, indented rows underneath -- own
 * name, own price right-aligned, no repetition of the dish's name. Colors
 * and fonts intentionally reuse the same --vtm-* variables as the dish
 * above rather than introducing new ones, so a site's existing Appearance
 * settings or Divi-detected colors apply here unchanged.
 */
.vtm-menu-item-options {
	list-style: none;
	margin: 0.6em 0 0;
	padding: 0 0 0 1em;
}

.vtm-menu-item-option {
	margin-bottom: 0.5em;
}

.vtm-menu-item-option:last-child {
	margin-bottom: 0;
}

.vtm-menu-item-option-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5em;
}

.vtm-menu-item-option-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.92em;
	color: var(--vtm-text-color) !important;
}

.vtm-menu-item-option-price {
	flex: 0 0 auto;
	white-space: nowrap;
	text-align: right;
	font-size: 0.92em;
	font-weight: 600;
	color: var(--vtm-price-color) !important;
}

.vtm-menu-item-option-description {
	margin: 0.2em 0 0;
	font-size: 0.82em;
	color: var(--vtm-muted-color) !important;
	font-style: italic;
}

@media (max-width: 480px) {
	.vtm-menu-item-options {
		padding-left: 0.65em;
	}
}